redux-devtools/packages/redux-devtools-ui/test/__snapshots__/Select.test.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Select renders correctly 1`] = `
<div
  class=" css-18o3wl1-container"
>
  <span
    class="css-1f43avz-a11yText-A11yText"
    id="react-select-2-live-region"
  />
  <span
    aria-atomic="false"
    aria-live="polite"
    aria-relevant="additions text"
    class="css-1f43avz-a11yText-A11yText"
  />
  <div
    class=" css-10g0wlc-control"
  >
    <div
      class=" css-1gpx584-ValueContainer"
    >
      <div
        class=" css-1m6ztbo-placeholder"
        id="react-select-2-placeholder"
      >
        Select...
      </div>
      <div
        class=" css-mh08on-Input"
        data-value=""
      >
        <input
          aria-autocomplete="list"
          aria-describedby="react-select-2-placeholder"
          aria-expanded="false"
          aria-haspopup="true"
          autocapitalize="none"
          autocomplete="off"
          autocorrect="off"
          class=""
          id="react-select-2-input"
          role="combobox"
          spellcheck="false"
          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
          tabindex="0"
          type="text"
          value=""
        />
      </div>
    </div>
    <div
      class=" css-1hb7zxy-IndicatorsContainer"
    >
      <span
        class=" css-19norqf-indicatorSeparator"
      />
      <div
        aria-hidden="true"
        class=" css-17vo4tq-indicatorContainer"
      >
        <svg
          aria-hidden="true"
          class="css-tj5bde-Svg"
          focusable="false"
          height="20"
          viewBox="0 0 20 20"
          width="20"
        >
          <path
            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
          />
        </svg>
      </div>
    </div>
  </div>
</div>
`;

exports[`Select renders with props 1`] = `
<div
  class=" css-lk03f7-container"
>
  <span
    class="css-1f43avz-a11yText-A11yText"
    id="react-select-3-live-region"
  />
  <span
    aria-atomic="false"
    aria-live="polite"
    aria-relevant="additions text"
    class="css-1f43avz-a11yText-A11yText"
  />
  <div
    aria-disabled="true"
    class=" css-10g0wlc-control"
  >
    <div
      class=" css-1ei5tw5-ValueContainer"
    >
      <div
        class=" css-7ef4eb-multiValue"
      >
        <div
          class=" css-sro4fq-MultiValueGeneric"
        >
          One
        </div>
        <div
          aria-label="Remove One"
          class=" css-1f177ni-MultiValueRemove"
          role="button"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="14"
            viewBox="0 0 20 20"
            width="14"
          >
            <path
              d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
            />
          </svg>
        </div>
      </div>
      <input
        aria-autocomplete="list"
        aria-expanded="false"
        aria-haspopup="true"
        aria-readonly="true"
        class="css-mohuvp-dummyInput-DummyInput"
        disabled=""
        id="react-select-3-input"
        inputmode="none"
        role="combobox"
        tabindex="0"
        value=""
      />
    </div>
    <div
      class=" css-1hb7zxy-IndicatorsContainer"
    >
      <div
        aria-hidden="true"
        class=" css-1x631db-loadingIndicator"
      >
        <span
          class="css-1xtdfmb-LoadingDot"
        />
        <span
          class="css-zoievk-LoadingDot"
        />
        <span
          class="css-x748d8-LoadingDot"
        />
      </div>
      <span
        class=" css-19norqf-indicatorSeparator"
      />
      <div
        aria-hidden="true"
        class=" css-17vo4tq-indicatorContainer"
      >
        <svg
          aria-hidden="true"
          class="css-tj5bde-Svg"
          focusable="false"
          height="20"
          viewBox="0 0 20 20"
          width="20"
        >
          <path
            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
          />
        </svg>
      </div>
    </div>
  </div>
</div>
`;

exports[`Select should select another option 1`] = `
<div
  class=" css-18o3wl1-container"
>
  <span
    class="css-1f43avz-a11yText-A11yText"
    id="react-select-4-live-region"
  />
  <span
    aria-atomic="false"
    aria-live="polite"
    aria-relevant="additions text"
    class="css-1f43avz-a11yText-A11yText"
  >
    <span
      id="aria-selection"
    />
    <span
      id="aria-context"
    >
      option Two focused, 1 of 1. 1 result available for search term two. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
    </span>
  </span>
  <div
    class=" css-mjg7mv-control"
  >
    <div
      class=" css-1gpx584-ValueContainer"
    >
      <div
        class=" css-jpmdcb-Input"
        data-value="two"
      >
        <input
          aria-autocomplete="list"
          aria-controls="react-select-4-listbox"
          aria-describedby="react-select-4-placeholder"
          aria-expanded="true"
          aria-haspopup="true"
          aria-owns="react-select-4-listbox"
          autocapitalize="none"
          autocomplete="off"
          autocorrect="off"
          class=""
          id="react-select-4-input"
          role="combobox"
          spellcheck="false"
          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
          tabindex="0"
          type="text"
          value="two"
        />
      </div>
    </div>
    <div
      class=" css-1hb7zxy-IndicatorsContainer"
    >
      <span
        class=" css-19norqf-indicatorSeparator"
      />
      <div
        aria-hidden="true"
        class=" css-17vo4tq-indicatorContainer"
      >
        <svg
          aria-hidden="true"
          class="css-tj5bde-Svg"
          focusable="false"
          height="20"
          viewBox="0 0 20 20"
          width="20"
        >
          <path
            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
          />
        </svg>
      </div>
    </div>
  </div>
  <div
    class=" css-sromc4-menu"
    id="react-select-4-listbox"
  >
    <div
      class=" css-hln2r9-MenuList"
    >
      <div
        aria-disabled="false"
        class=" css-1t6re7j-option"
        id="react-select-4-option-1"
        tabindex="-1"
      >
        Two
      </div>
    </div>
  </div>
</div>
`;

exports[`Select shouldn't find any results 1`] = `
<div
  class=" css-18o3wl1-container"
>
  <span
    class="css-1f43avz-a11yText-A11yText"
    id="react-select-5-live-region"
  />
  <span
    aria-atomic="false"
    aria-live="polite"
    aria-relevant="additions text"
    class="css-1f43avz-a11yText-A11yText"
  >
    <span
      id="aria-selection"
    />
    <span
      id="aria-context"
    >
       0 results available for search term text. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
    </span>
  </span>
  <div
    class=" css-mjg7mv-control"
  >
    <div
      class=" css-1gpx584-ValueContainer"
    >
      <div
        class=" css-jpmdcb-Input"
        data-value="text"
      >
        <input
          aria-autocomplete="list"
          aria-controls="react-select-5-listbox"
          aria-describedby="react-select-5-placeholder"
          aria-expanded="true"
          aria-haspopup="true"
          aria-owns="react-select-5-listbox"
          autocapitalize="none"
          autocomplete="off"
          autocorrect="off"
          class=""
          id="react-select-5-input"
          role="combobox"
          spellcheck="false"
          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
          tabindex="0"
          type="text"
          value="text"
        />
      </div>
    </div>
    <div
      class=" css-1hb7zxy-IndicatorsContainer"
    >
      <span
        class=" css-19norqf-indicatorSeparator"
      />
      <div
        aria-hidden="true"
        class=" css-17vo4tq-indicatorContainer"
      >
        <svg
          aria-hidden="true"
          class="css-tj5bde-Svg"
          focusable="false"
          height="20"
          viewBox="0 0 20 20"
          width="20"
        >
          <path
            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
          />
        </svg>
      </div>
    </div>
  </div>
  <div
    class=" css-sromc4-menu"
    id="react-select-5-listbox"
  >
    <div
      class=" css-hln2r9-MenuList"
    >
      <div
        class=" css-v8tq8h-NoOptionsMessage"
      >
        No options
      </div>
    </div>
  </div>
</div>
`;