DataFrame:Dataframe with dialog interactions

Build 6510 on 5.0-dev
1200px
Reviewing disabled
View latest build
Resources requested by the new story could not be loaded. Snapshots may be affected.
Build 6510 on 5.0-dev
View Storybook
ErrorBuild 6510 on 5.0-dev
View Storybook
The baseline is taller than the new snapshot (1168x149 to 1168x113).
  • Discussions
  • Interactions
Fail
Dataframe.stories.svelte
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

TestingLibraryElementError: Unable to find an element with the text: Add row above. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
   
  <div
    class="svelte-s3jb61"
  >
     
    <div
      class="table-wrap svelte-s3jb61 no-wrap"
      role="grid"
      style="height: 113px; --cell-width-0: 319px; --cell-width-1: 423px; --cell-width-2: 423px;"
      tabindex="0"
    >
      <table
        class="svelte-s3jb61"
      >
         
        <thead
          class="svelte-s3jb61"
        >
          <tr
            class="svelte-s3jb61"
          >
            <th
              aria-sort="none"
              class="svelte-s3jb61"
            >
              <div
                class="cell-wrap svelte-s3jb61"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Math
                </span>
                 
                <div
                  class="sort-button undefined svelte-s3jb61"
                >
                  <svg
                    class="svelte-s3jb61"
                    fill="none"
                    height="1em"
                    viewBox="0 0 9 7"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z"
                    />
                  </svg>
                </div>
              </div>
               
            </th>
            <th
              aria-sort="none"
              class="svelte-s3jb61"
            >
              <div
                class="cell-wrap svelte-s3jb61"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Reading
                </span>
                 
                <div
                  class="sort-button undefined svelte-s3jb61"
                >
                  <svg
                    class="svelte-s3jb61"
                    fill="none"
                    height="1em"
                    viewBox="0 0 9 7"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z"
                    />
                  </svg>
                </div>
              </div>
               
            </th>
            <th
              aria-sort="none"
              class="svelte-s3jb61"
            >
              <div
                class="cell-wrap svelte-s3jb61"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Writing
                </span>
                 
                <div
                  class="sort-button undefined svelte-s3jb61"
                >
                  <svg
                    class="svelte-s3jb61"
                    fill="none"
                    height="1em"
                    viewBox="0 0 9 7"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z"
                    />
                  </svg>
                </div>
              </div>
               
            </th>
          </tr>
        </thead>
         
        <tbody>
          <tr
            class="svelte-s3jb61"
          >
            <td
              class="svelte-s3jb61"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-s3jb61"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  800
                </span>
              </div>
               
            </td>
            <td
              class="svelte-s3jb61"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-s3jb61"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  100
                </span>
              </div>
               
            </td>
            <td
              class="svelte-s3jb61"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-s3jb61"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  400
                </span>
              </div>
               
            </td>
          </tr>
        </tbody>
      </table>
       
      <button
        class="svelte-1x5qevo disable_click"
        style="height: 100%;"
        tabindex="0"
      >
        <svelte-virtual-table-viewport>
          <table
            class="table svelte-1xyl3gk"
            style="height: 100%; --bw-svt-p-top: 0px; --bw-svt-p-bottom: 0px; --bw-svt-head-height: 37px; --bw-svt-foot-height: 0px; --bw-svt-avg-row-height: 37px;"
          >
            <thead
              class="thead svelte-1xyl3gk"
            >
              <tr
                class="svelte-s3jb61"
                slot="thead"
              >
                <th
                  aria-sort="none"
                  class="svelte-s3jb61"
                  style="width: var(--cell-width-0);"
                >
                  <div
                    class="cell-wrap svelte-s3jb61"
                  >
                    <div
                      class="header-content svelte-s3jb61"
                    >
                       
                      <span
                        class="svelte-r60v1k"
                        role="button"
                        style=""
                        tabindex="-1"
                      >
                        Math
                      </span>
                       
                      <div
                        class="sort-button undefined svelte-s3jb61"
                      >
                        <svg
                          class="svelte-s3jb61"
                          fill="none"
                          height="1em"
                          viewBox="0 0 9 7"
                          width="1em"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z"
                          />
                        </svg>
             ...
    at Object.getElementError (https://649585a46a67480e3074dc75-bltvjvqvln.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:18:290)
    at https://649585a46a67480e3074dc75-bltvjvqvln.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:40:165
    at https://649585a46a67480e3074dc75-bltvjvqvln.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:32:4014
    at https://649585a46a67480e3074dc75-bltvjvqvln.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:40:392
    at https://649585a46a67480e3074dc75-bltvjvqvln.capture-loopback.chromatic.com/assets/Dataframe.stories-CCeg796X.js:3:14696
    at async https://649585a46a67480e3074dc75-bltvjvqvln.capture-loopback.chromatic.com/sb-preview/runtime.js:144:3897
    at async StoryRender.runPhase (https://649585a46a67480e3074dc75-bltvjvqvln.capture-loopback.chromatic.com/sb-preview/runtime.js:144:937)
    at async StoryRender.render (https://649585a46a67480e3074dc75-bltvjvqvln.capture-loopback.chromatic.com/sb-preview/runtime.js:144:3845)