DataFrame:Dataframe with dialog interactions

Build 6427 on dataframe-ui
1200px
Reviewing disabled
View latest build
Resources requested by the new story could not be loaded. Snapshots may be affected.
ErrorBuild 6427 on dataframe-ui
View Storybook
  • 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 column to the left. 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-dm16a9"
  >
     
    <div
      class="table-wrap svelte-dm16a9 no-wrap"
      role="grid"
      style="height: 149px; --cell-width-0: 41px; --cell-width-1: 304px; --cell-width-2: 409px;"
      tabindex="0"
    >
      <table
        class="svelte-dm16a9"
      >
         
        <thead
          class="svelte-dm16a9"
        >
          <tr
            class="svelte-dm16a9"
          >
            <th
              class="select-column svelte-dm16a9"
            />
             
            <th
              aria-sort="none"
              class="svelte-dm16a9"
            >
              <div
                class="cell-wrap svelte-dm16a9"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Math
                </span>
                 
                <div
                  class="sort-button undefined svelte-dm16a9"
                >
                  <svg
                    class="svelte-dm16a9"
                    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-dm16a9"
            >
              <div
                class="cell-wrap svelte-dm16a9"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Reading
                </span>
                 
                <div
                  class="sort-button undefined svelte-dm16a9"
                >
                  <svg
                    class="svelte-dm16a9"
                    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-dm16a9"
            >
              <div
                class="cell-wrap svelte-dm16a9"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  Writing
                </span>
                 
                <div
                  class="sort-button undefined svelte-dm16a9"
                >
                  <svg
                    class="svelte-dm16a9"
                    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-dm16a9"
          >
            <td
              class="svelte-dm16a9"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-dm16a9"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  800
                </span>
              </div>
               
            </td>
            <td
              class="svelte-dm16a9"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-dm16a9"
              >
                 
                <span
                  class="svelte-r60v1k"
                  role="button"
                  style=""
                  tabindex="-1"
                >
                  100
                </span>
              </div>
               
            </td>
            <td
              class="svelte-dm16a9"
              tabindex="-1"
            >
              <div
                class="cell-wrap svelte-dm16a9"
              >
                 
                <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: 36.666666666666664px;"
          >
            <thead
              class="thead svelte-1xyl3gk"
            >
              <tr
                class="svelte-dm16a9"
                slot="thead"
              >
                <th
                  class="select-column svelte-dm16a9"
                />
                 
                <th
                  aria-sort="none"
                  class="svelte-dm16a9"
                  style="width: var(--cell-width-0);"
                >
                  <div
                    class="cell-wrap svelte-dm16a9"
                  >
                     
                    <span
                      class="svelte-r60v1k"
                      role="button"
                      style=""
                      tabindex="-1"
                    >
                      Math
                    </span>
                     
                    <div
                      class="sort-button undefined svelte-dm16a9"
                    >
                      <svg
                        class="svelte-dm16a9"
                        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-qdruqwuvvs.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:18:290)
    at https://649585a46a67480e3074dc75-qdruqwuvvs.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:40:165
    at https://649585a46a67480e3074dc75-qdruqwuvvs.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:32:4014
    at https://649585a46a67480e3074dc75-qdruqwuvvs.capture-loopback.chromatic.com/assets/dom.esm-DZb3rPbX.js:40:392
    at https://649585a46a67480e3074dc75-qdruqwuvvs.capture-loopback.chromatic.com/assets/Dataframe.stories-BzMv4gFr.js:3:14008
    at async https://649585a46a67480e3074dc75-qdruqwuvvs.capture-loopback.chromatic.com/sb-preview/runtime.js:144:3897
    at async StoryRender.runPhase (https://649585a46a67480e3074dc75-qdruqwuvvs.capture-loopback.chromatic.com/sb-preview/runtime.js:144:937)
    at async StoryRender.render (https://649585a46a67480e3074dc75-qdruqwuvvs.capture-loopback.chromatic.com/sb-preview/runtime.js:144:3845)