HostSidePanel:Select Host

Build 7162 on 23-04-ZL-feat-host-side-panel
360px
Reviewing disabled
View latest build
ErrorBuild 7162 on 23-04-ZL-feat-host-side-panel
View Storybook
  • Discussions
  • Interactions
Fail
HostSidePanel.stories.tsx
Unable to find an accessible element with the role "button" and name "Select a Host"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

Ignored nodes: comments, script, style
<body
  class="sb-main-padded sb-show-main"
>
  <div
    class="sb-preparing-story sb-wrapper"
  >
    <div
      class="sb-loader"
    />
  </div>
  <div
    class="sb-preparing-docs sb-wrapper"
  >
    <div
      class="sb-previewBlock"
    >
      <div
        class="sb-previewBlock_header"
      >
        <div
          class="sb-previewBlock_icon"
        />
        <div
          class="sb-previewBlock_icon"
        />
        <div
          class="sb-previewBlock_icon"
        />
        <div
          class="sb-previewBlock_icon"
        />
      </div>
      <div
        class="sb-previewBlock_body"
      >
        <div
          class="sb-loader"
        />
      </div>
    </div>
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      <thead
        class="sb-argstableBlock-head"
      >
        <tr>
          <th>
            <span>
              Name
            </span>
          </th>
          <th>
            <span>
              Description
            </span>
          </th>
          <th>
            <span>
              Default
            </span>
          </th>
          <th>
            <span>
              Control
            </span>
          </th>
        </tr>
      </thead>
      <tbody
        class="sb-argstableBlock-body"
      >
        <tr>
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          <td>
            <div>
              <span>
                This is a short description
              </span>
            </div>
            <div
              class="sb-argstableBlock-summary"
            >
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
            </div>
          </td>
          <td>
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
          </td>
          <td>
            <button>
              Set string
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          <td>
            <div>
              <span>
                This is a short description
              </span>
            </div>
            <div
              class="sb-argstableBlock-summary"
            >
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
            </div>
          </td>
          <td>
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
          </td>
          <td>
            <button>
              Set string
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          <td>
            <div>
              <span>
                This is a short description
              </span>
            </div>
            <div
              class="sb-argstableBlock-summary"
            >
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
            </div>
          </td>
          <td>
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
          </td>
          <td>
            <button>
              Set string
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div
    class="sb-nopreview sb-wrapper"
  >
    <div
      class="sb-nopreview_main"
    >
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      <ul>
        <li>
          Please check the Storybook config.
        </li>
        <li>
          Try reloading the page.
        </li>
      </ul>
      <p>
        If the problem persists, check the browser console, or the terminal you've run Storybook from.
      </p>
    </div>
  </div>
  <div
    class="sb-errordisplay sb-wrapper"
  >
    <pre
      class="sb-heading"
      id="error-message"
    />
    <pre
      class="sb-errordisplay_code"
    >
      <code
        id="error-stack"
      />
    </pre>
  </div>
  <div
    id="root"
  >
    <div
      class="MuiDrawer-root MuiDrawer-docked css-1j0cu2k"
      data-testid="side-drawer"
    >
      <div
        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorRight MuiDrawer-paperAnchorDockedRight css-1hrr69n"
      >
        <header
          class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorDefault MuiAppBar-positionSticky css-1bbwbir"
          data-testid="side-header"
        >
          <div
            class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-dense css-13l8kcy"
          >
            <div
              class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-noWrap css-d05w83"
            >
              Hosted By
            </div>
          </div>
        </header>
        <div
          class="css-1l0n6td"
          data-testid="side-body"
        >
          <div
            class="css-gqehmc"
          >
            <div
              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-sbse6g"
            >
              <button
                class="MuiButtonBase-root MuiCardActionArea-root css-1jluznr"
                tabindex="0"
                type="button"
              >
                <div
                  class="css-jp5bhw"
                >
                  <div
                    class="MuiBox-root css-0"
                  >
                    <div
                      class="MuiBox-root css-3qfbnz"
                    >
                      <span
                        aria-hidden="true"
                        class="material-icons notranslate MuiIcon-root MuiIcon-fontSizeMedium css-vb3toh"
                        data-testid="imageThumbnailPlaceholder"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv"
                          data-testid="UsersProfiles2Icon"
                          fo...
View in Storybook
Chrome 105
360x32
Linux Linux Ubuntu 20.04.4
19e2e1 on 23-04-ZL-feat-host-side-panel
Caught exception in play function

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

Error: ignoredException
    at ./node_modules/@storybook/builder-webpack5/node_modules/@storybook/core-events/dist/esm/index.js (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/92.e25adff1.iframe.bundle.js:205:1071908)
    at __webpack_require__ (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/runtime~main.9c1e3fc6.iframe.bundle.js:1:381)
    at ./node_modules/@storybook/builder-webpack5/node_modules/@storybook/addons/dist/esm/hooks.js (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/92.e25adff1.iframe.bundle.js:205:1038730)
    at __webpack_require__ (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/runtime~main.9c1e3fc6.iframe.bundle.js:1:381)
    at ./node_modules/@storybook/react/dist/esm/client/preview/index.js (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/92.e25adff1.iframe.bundle.js:205:1630521)
    at __webpack_require__ (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/runtime~main.9c1e3fc6.iframe.bundle.js:1:381)
    at ./node_modules/@storybook/react/dist/esm/client/index.js (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/92.e25adff1.iframe.bundle.js:205:1600568)
    at __webpack_require__ (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/runtime~main.9c1e3fc6.iframe.bundle.js:1:381)
    at ./storybook-init-framework-entry.js (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/main.ea65d92e.iframe.bundle.js:2:5799213)
    at __webpack_require__ (https://612c2a83fdc2b2003a5c2eb7-obxqqvcfeq.capture.chromatic.com/runtime~main.9c1e3fc6.iframe.bundle.js:1:381)