DataFrame:Dataframe with dialog interactions

Build 6752 on main
1200px
Reviewing disabled
View latest build
Resources requested by the new story could not be loaded. Snapshots may be affected.
Build 6752 on main
View Storybook
ErrorBuild 6752 on main
View Storybook
The baseline is taller than the new snapshot (1168x149 to 1168x112).
  • 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-1o4y3py"
  >
     
    <div
      class="table-wrap svelte-1o4y3py no-wrap"
      role="grid"
      style="height: 112px; --cell-width-0: 316px; --cell-width-1: 424px; --cell-width-2: 424px;"
      tabindex="0"
    >
      <table
        class="svelte-1o4y3py"
      >
         
        <thead
          class="svelte-1o4y3py"
        >
          <tr
            class="svelte-1o4y3py"
          >
            <th
              aria-sort="none"
              class="svelte-1o4y3py"
            >
              <div
                class="cell-wrap svelte-1o4y3py"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Math
                </span>
                 
                <div
                  class="sort-button undefined svelte-1o4y3py"
                >
                  <svg
                    class="svelte-1o4y3py"
                    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-1o4y3py"
            >
              <div
                class="cell-wrap svelte-1o4y3py"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Reading
                </span>
                 
                <div
                  class="sort-button undefined svelte-1o4y3py"
                >
                  <svg
                    class="svelte-1o4y3py"
                    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-1o4y3py"
            >
              <div
                class="cell-wrap svelte-1o4y3py"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Writing
                </span>
                 
                <div
                  class="sort-button undefined svelte-1o4y3py"
                >
                  <svg
                    class="svelte-1o4y3py"
                    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-1o4y3py"
          >
            <td
              class="svelte-1o4y3py"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-1o4y3py"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  800
                </span>
              </div>
               
            </td>
            <td
              class="svelte-1o4y3py"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-1o4y3py"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  100
                </span>
              </div>
               
            </td>
            <td
              class="svelte-1o4y3py"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-1o4y3py"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  400
                </span>
              </div>
               
            </td>
          </tr>
        </tbody>
      </table>
       
      <button
        class="svelte-1xyfx7i 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-1o4y3py"
                slot="thead"
              >
                <th
                  aria-sort="none"
                  class="svelte-1o4y3py"
                  style="width: var(--cell-width-0);"
                >
                  <div
                    class="cell-wrap svelte-1o4y3py"
                  >
                    <div
                      class="header-content svelte-1o4y3py"
                    >
                       
                      <span
                        class="svelte-r60v1k"
                        role="button"
                        style=""
                        tabindex="-1"
                      >
                        Math
                      </span>
                       
                      <div
                        class="sort-button undefined svelte-1o4y3py"
                      >
                        <svg
                          class="svelte-1o4y3py"
                          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"
                          />
              ...
    at Object.getElementError (https://649585a46a67480e3074dc75-pahmjzxoww.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:18:290)
    at https://649585a46a67480e3074dc75-pahmjzxoww.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:40:165
    at https://649585a46a67480e3074dc75-pahmjzxoww.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:32:4014
    at https://649585a46a67480e3074dc75-pahmjzxoww.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:40:392
    at https://649585a46a67480e3074dc75-pahmjzxoww.capture-loopback.chromatic.com/assets/Dataframe.stories-DovavkwI.js:3:18039
    at async pi.runPhase (https://649585a46a67480e3074dc75-pahmjzxoww.capture-loopback.chromatic.com/sb-preview/runtime.js:8193:94)
    at async pi.render (https://649585a46a67480e3074dc75-pahmjzxoww.capture-loopback.chromatic.com/sb-preview/runtime.js:8306:14)