import React from 'react';
import { composeStories } from '@storybook/react-vite';

import { render as testRender } from '../../../../vitest/render';

import * as stories from './MultiSelectField.stories';

const composedStories = composeStories(stories);

describe('MultiSelectField Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Content',
      'Uncontrolled',
      'Controlled',
      'DisabledKeys',
      'DisabledContent',
      'DisabledDropdown',
      'WarningContent',
      'WarningDropdown',
      'ErrorContent',
      'ErrorDropdown',
      'EmptyContent',
      'EmptyDropdown',
      'Placeholder',
      'Loading',
      'Tooltip',
      'LongOption',
    ]);

    const untestedStories = storyNames.filter(name => !testedStories.has(name));

    expect(untestedStories).toEqual([]);
  });

  it('renders Default story', () => {
    const Story = composedStories.Default;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders Content story', () => {
    const Story = composedStories.Content;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <div
          aria-label="Label"
          class="multiSelectField__content md"
          data-rac=""
          id="_r_0_"
          role="group"
        >
          <div
            class="dataList dataList--dense dataList--inset dataList--noGap"
          >
            <button
              aria-pressed="false"
              class="multiSelectField__selectAll dataList__item dataList__item--hasDivider dataList__item--gap"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  class="checkboxField"
                  data-checked="false"
                  label="Select all"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Select all
                </span>
              </div>
            </button>
          </div>
          <div
            class="multiSelectField__divider"
          />
          <div
            aria-label="Label"
            aria-multiselectable="true"
            class="dataList dataList--dense dataList--inset dataList--noGap"
            data-collection="react-aria-_r_1_"
            id="react-aria-_r_2_"
            role="listbox"
            tabindex="0"
          >
            <div
              aria-selected="false"
              class="dataList__item dataList__item--gap"
              data-collection="react-aria-_r_1_"
              data-disabled="false"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-key="1"
              data-react-aria-pressable="true"
              id="react-aria-_r_2_-option-1"
              role="option"
              tabindex="-1"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="false"
                  class="checkboxField"
                  data-checked="false"
                  data-disabled="false"
                  label="Option 1"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Option 1
                </span>
              </div>
            </div>
            <div
              aria-selected="false"
              class="dataList__item dataList__item--gap"
              data-collection="react-aria-_r_1_"
              data-disabled="false"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-key="2"
              data-react-aria-pressable="true"
              id="react-aria-_r_2_-option-2"
              role="option"
              tabindex="-1"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="false"
                  class="checkboxField"
                  data-checked="false"
                  data-disabled="false"
                  label="Option 2"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Option 2
                </span>
              </div>
            </div>
            <section
              aria-labelledby="react-aria-_r_3_"
              class="dataList__section"
              role="group"
            >
              <header
                class="dataList__sectionHeader dataList__sectionHeader--gap"
                id="react-aria-_r_3_"
                role="presentation"
              >
                <span
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
                  id="react-aria-_r_3_"
                  role="presentation"
                >
                  Section 1
                </span>
              </header>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="3"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-3"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 3"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 3
                  </span>
                </div>
              </div>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="4"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-4"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 4"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 4
                  </span>
                </div>
              </div>
            </section>
            <section
              aria-labelledby="react-aria-_r_4_"
              class="dataList__section"
              role="group"
            >
              <header
                class="dataList__sectionHeader dataList__sectionHeader--gap"
                id="react-aria-_r_4_"
                role="presentation"
              >
                <span
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
                  id="react-aria-_r_4_"
                  role="presentation"
                >
                  Section 2
                </span>
              </header>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="5"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-5"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 5"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 5
                  </span>
                </div>
              </div>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="6"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-6"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 6"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 6
                  </span>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders Uncontrolled story', () => {
    const Story = composedStories.Uncontrolled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value"
          >
            Selected 2 options
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders Controlled story', () => {
    const Story = composedStories.Controlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders DisabledKeys story', () => {
    const Story = composedStories.DisabledKeys;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value"
          >
            Selected 2 options
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders DisabledContent story', () => {
    const Story = composedStories.DisabledContent;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <div
          aria-label="Label"
          class="multiSelectField__content md"
          data-disabled="true"
          data-rac=""
          id="_r_0_"
          role="group"
        >
          <div
            class="dataList dataList--dense dataList--inset dataList--noGap"
          >
            <button
              aria-pressed="true"
              class="multiSelectField__selectAll dataList__item dataList__item--hasDivider dataList__item--gap"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-react-aria-pressable="true"
              disabled=""
              tabindex="0"
              type="button"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="true"
                  class="checkboxField checkboxField--checked"
                  data-checked="true"
                  data-disabled="true"
                  label="Select all"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Select all
                </span>
              </div>
            </button>
          </div>
          <div
            class="multiSelectField__divider"
          />
          <div
            aria-disabled="true"
            aria-label="Label"
            aria-multiselectable="true"
            class="dataList dataList--dense dataList--inset dataList--noGap"
            data-collection="react-aria-_r_1_"
            id="react-aria-_r_2_"
            role="listbox"
            tabindex="0"
          >
            <div
              aria-disabled="true"
              aria-selected="true"
              class="dataList__item dataList__item--gap"
              data-collection="react-aria-_r_1_"
              data-disabled="true"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-key="1"
              id="react-aria-_r_2_-option-1"
              role="option"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="true"
                  class="checkboxField checkboxField--checked"
                  data-checked="true"
                  data-disabled="true"
                  label="Option 1"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Option 1
                </span>
              </div>
            </div>
            <div
              aria-disabled="true"
              aria-selected="false"
              class="dataList__item dataList__item--gap"
              data-collection="react-aria-_r_1_"
              data-disabled="true"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-key="2"
              id="react-aria-_r_2_-option-2"
              role="option"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="true"
                  class="checkboxField"
                  data-checked="false"
                  data-disabled="true"
                  label="Option 2"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Option 2
                </span>
              </div>
            </div>
            <section
              aria-labelledby="react-aria-_r_3_"
              class="dataList__section"
              role="group"
            >
              <header
                class="dataList__sectionHeader dataList__sectionHeader--gap"
                id="react-aria-_r_3_"
                role="presentation"
              >
                <span
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
                  id="react-aria-_r_3_"
                  role="presentation"
                >
                  Section 1
                </span>
              </header>
              <div
                aria-disabled="true"
                aria-selected="true"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="true"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="3"
                id="react-aria-_r_2_-option-3"
                role="option"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="true"
                    class="checkboxField checkboxField--checked"
                    data-checked="true"
                    data-disabled="true"
                    label="Option 3"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 3
                  </span>
                </div>
              </div>
              <div
                aria-disabled="true"
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="true"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="4"
                id="react-aria-_r_2_-option-4"
                role="option"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="true"
                    class="checkboxField"
                    data-checked="false"
                    data-disabled="true"
                    label="Option 4"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 4
                  </span>
                </div>
              </div>
            </section>
            <section
              aria-labelledby="react-aria-_r_4_"
              class="dataList__section"
              role="group"
            >
              <header
                class="dataList__sectionHeader dataList__sectionHeader--gap"
                id="react-aria-_r_4_"
                role="presentation"
              >
                <span
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
                  id="react-aria-_r_4_"
                  role="presentation"
                >
                  Section 2
                </span>
              </header>
              <div
                aria-disabled="true"
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="true"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="5"
                id="react-aria-_r_2_-option-5"
                role="option"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="true"
                    class="checkboxField"
                    data-checked="false"
                    data-disabled="true"
                    label="Option 5"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 5
                  </span>
                </div>
              </div>
              <div
                aria-disabled="true"
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="true"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="6"
                id="react-aria-_r_2_-option-6"
                role="option"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="true"
                    class="checkboxField"
                    data-checked="false"
                    data-disabled="true"
                    label="Option 6"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 6
                  </span>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders DisabledDropdown story', () => {
    const Story = composedStories.DisabledDropdown;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          disabled=""
          id="_r_0_"
          role="combobox"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders WarningContent story', () => {
    const Story = composedStories.WarningContent;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <div
          aria-label="Label"
          class="multiSelectField__content md"
          data-rac=""
          id="_r_0_"
          role="group"
        >
          <div
            class="dataList dataList--dense dataList--inset dataList--noGap"
          >
            <button
              aria-pressed="false"
              class="multiSelectField__selectAll dataList__item dataList__item--hasDivider dataList__item--gap"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  class="checkboxField warning-field"
                  data-checked="false"
                  label="Select all"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Select all
                </span>
              </div>
            </button>
          </div>
          <div
            class="multiSelectField__divider"
          />
          <div
            aria-label="Label"
            aria-multiselectable="true"
            class="dataList dataList--dense dataList--inset dataList--noGap"
            data-collection="react-aria-_r_1_"
            id="react-aria-_r_2_"
            role="listbox"
            tabindex="0"
          >
            <div
              aria-selected="false"
              class="dataList__item dataList__item--gap"
              data-collection="react-aria-_r_1_"
              data-disabled="false"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-key="1"
              data-react-aria-pressable="true"
              id="react-aria-_r_2_-option-1"
              role="option"
              tabindex="-1"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="false"
                  class="checkboxField warning-field"
                  data-checked="false"
                  data-disabled="false"
                  label="Option 1"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Option 1
                </span>
              </div>
            </div>
            <div
              aria-selected="false"
              class="dataList__item dataList__item--gap"
              data-collection="react-aria-_r_1_"
              data-disabled="false"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-key="2"
              data-react-aria-pressable="true"
              id="react-aria-_r_2_-option-2"
              role="option"
              tabindex="-1"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="false"
                  class="checkboxField warning-field"
                  data-checked="false"
                  data-disabled="false"
                  label="Option 2"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Option 2
                </span>
              </div>
            </div>
            <section
              aria-labelledby="react-aria-_r_3_"
              class="dataList__section"
              role="group"
            >
              <header
                class="dataList__sectionHeader dataList__sectionHeader--gap"
                id="react-aria-_r_3_"
                role="presentation"
              >
                <span
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
                  id="react-aria-_r_3_"
                  role="presentation"
                >
                  Section 1
                </span>
              </header>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="3"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-3"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField warning-field"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 3"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 3
                  </span>
                </div>
              </div>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="4"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-4"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField warning-field"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 4"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 4
                  </span>
                </div>
              </div>
            </section>
            <section
              aria-labelledby="react-aria-_r_4_"
              class="dataList__section"
              role="group"
            >
              <header
                class="dataList__sectionHeader dataList__sectionHeader--gap"
                id="react-aria-_r_4_"
                role="presentation"
              >
                <span
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
                  id="react-aria-_r_4_"
                  role="presentation"
                >
                  Section 2
                </span>
              </header>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="5"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-5"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField warning-field"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 5"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 5
                  </span>
                </div>
              </div>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="6"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-6"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField warning-field"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 6"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 6
                  </span>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders WarningDropdown story', () => {
    const Story = composedStories.WarningDropdown;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md warning-field"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders ErrorContent story', () => {
    const Story = composedStories.ErrorContent;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <div
          aria-label="Label"
          class="multiSelectField__content md"
          data-rac=""
          id="_r_0_"
          role="group"
        >
          <div
            class="dataList dataList--dense dataList--inset dataList--noGap"
          >
            <button
              aria-pressed="false"
              class="multiSelectField__selectAll dataList__item dataList__item--hasDivider dataList__item--gap"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-react-aria-pressable="true"
              tabindex="0"
              type="button"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  class="checkboxField error-field"
                  data-checked="false"
                  label="Select all"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Select all
                </span>
              </div>
            </button>
          </div>
          <div
            class="multiSelectField__divider"
          />
          <div
            aria-label="Label"
            aria-multiselectable="true"
            class="dataList dataList--dense dataList--inset dataList--noGap"
            data-collection="react-aria-_r_1_"
            id="react-aria-_r_2_"
            role="listbox"
            tabindex="0"
          >
            <div
              aria-selected="false"
              class="dataList__item dataList__item--gap"
              data-collection="react-aria-_r_1_"
              data-disabled="false"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-key="1"
              data-react-aria-pressable="true"
              id="react-aria-_r_2_-option-1"
              role="option"
              tabindex="-1"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="false"
                  class="checkboxField error-field"
                  data-checked="false"
                  data-disabled="false"
                  label="Option 1"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Option 1
                </span>
              </div>
            </div>
            <div
              aria-selected="false"
              class="dataList__item dataList__item--gap"
              data-collection="react-aria-_r_1_"
              data-disabled="false"
              data-focus-visible="false"
              data-focused="false"
              data-hovered="false"
              data-key="2"
              data-react-aria-pressable="true"
              id="react-aria-_r_2_-option-2"
              role="option"
              tabindex="-1"
            >
              <div
                aria-hidden="true"
                class="dataList__itemCell"
              >
                <span
                  aria-disabled="false"
                  class="checkboxField error-field"
                  data-checked="false"
                  data-disabled="false"
                  label="Option 2"
                />
              </div>
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--left"
                >
                  Option 2
                </span>
              </div>
            </div>
            <section
              aria-labelledby="react-aria-_r_3_"
              class="dataList__section"
              role="group"
            >
              <header
                class="dataList__sectionHeader dataList__sectionHeader--gap"
                id="react-aria-_r_3_"
                role="presentation"
              >
                <span
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
                  id="react-aria-_r_3_"
                  role="presentation"
                >
                  Section 1
                </span>
              </header>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="3"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-3"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField error-field"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 3"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 3
                  </span>
                </div>
              </div>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="4"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-4"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField error-field"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 4"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 4
                  </span>
                </div>
              </div>
            </section>
            <section
              aria-labelledby="react-aria-_r_4_"
              class="dataList__section"
              role="group"
            >
              <header
                class="dataList__sectionHeader dataList__sectionHeader--gap"
                id="react-aria-_r_4_"
                role="presentation"
              >
                <span
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
                  id="react-aria-_r_4_"
                  role="presentation"
                >
                  Section 2
                </span>
              </header>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="5"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-5"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField error-field"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 5"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 5
                  </span>
                </div>
              </div>
              <div
                aria-selected="false"
                class="dataList__item dataList__item--gap"
                data-collection="react-aria-_r_1_"
                data-disabled="false"
                data-focus-visible="false"
                data-focused="false"
                data-hovered="false"
                data-key="6"
                data-react-aria-pressable="true"
                id="react-aria-_r_2_-option-6"
                role="option"
                tabindex="-1"
              >
                <div
                  aria-hidden="true"
                  class="dataList__itemCell"
                >
                  <span
                    aria-disabled="false"
                    class="checkboxField error-field"
                    data-checked="false"
                    data-disabled="false"
                    label="Option 6"
                  />
                </div>
                <div
                  class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
                >
                  <span
                    class="typography typography__bodyCopyM typography--left"
                  >
                    Option 6
                  </span>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders ErrorDropdown story', () => {
    const Story = composedStories.ErrorDropdown;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md error-field"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders EmptyContent story', () => {
    const Story = composedStories.EmptyContent;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <div
          aria-label="Label"
          class="multiSelectField__content md"
          data-rac=""
          id="_r_0_"
          role="group"
        >
          <div
            aria-label="Label"
            aria-multiselectable="true"
            class="dataList dataList--dense dataList--inset dataList--noGap"
            data-collection="react-aria-_r_1_"
            id="react-aria-_r_2_"
            role="listbox"
            tabindex="0"
          >
            <div
              aria-disabled="true"
              class="dataList__item dataList__item--gap"
              role="option"
            >
              <div
                class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
              >
                <span
                  class="typography typography__bodyCopyM typography--center"
                >
                  No options found
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders EmptyDropdown story', () => {
    const Story = composedStories.EmptyDropdown;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders Placeholder story', () => {
    const Story = composedStories.Placeholder;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Choose some apples
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders Loading story', () => {
    const Story = composedStories.Loading;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
        <div
          aria-label="Loading"
          aria-live="polite"
          aria-valuemax="100"
          aria-valuemin="0"
          class="loader loader--sm"
          id="react-aria-_r_1_"
          role="progressbar"
        />
      </div>
    </label>
  </div>
</div>
`);
  });

  it('renders Tooltip story', () => {
    const Story = composedStories.Tooltip;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
      </div>
      <button
        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
        role="button"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-info"
        />
      </button>
    </label>
  </div>
</div>
`);
  });

  it('renders LongOption story', () => {
    const Story = composedStories.LongOption;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <label
      class="v2FormField"
      for="_r_0_"
    >
      <span
        class="v2FormField__label"
      >
        <span
          class="v2FormField__labelText"
        >
          Label
        </span>
      </span>
      <div
        class="v2FormField__multiSelect"
      >
        <button
          aria-autocomplete="none"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-label="Label"
          class="multiSelectField md"
          data-react-aria-pressable="true"
          id="_r_0_"
          role="combobox"
          tabindex="0"
          type="button"
        >
          <span
            class="multiSelectField__value multiSelectField__value--muted"
          >
            Select an option
          </span>
        </button>
      </div>
    </label>
  </div>
</div>
`);
  });
});