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

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

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

const composedStories = composeStories(stories);

describe('List Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'PlainList',
      'PlainListDense',
      'PlainValueList',
      'CheckList',
      'Advanced',
      'AlignTop',
      'AlignCenter',
      'AlignBottom',
      'ListWithBasicItem',
    ]);

    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>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 1
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 1
              </strong>
            </p>
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 2
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2
              </strong>
            </p>
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 3
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3
              </strong>
            </p>
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 4
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 4
              </strong>
            </p>
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 5
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor 5
              </strong>
            </p>
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 6
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 6
              </strong>
            </p>
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders PlainList story', () => {
    const Story = composedStories.PlainList;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 1
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 4
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 5
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 6
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders PlainListDense story', () => {
    const Story = composedStories.PlainListDense;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--dense list__item--alignTop"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 1
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--dense list__item--alignTop"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--dense list__item--alignTop"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--dense list__item--alignTop"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 4
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--dense list__item--alignTop"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 5
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--dense list__item--alignTop"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 6
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders PlainValueList story', () => {
    const Story = composedStories.PlainValueList;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 1
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 4
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 5
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 6
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders CheckList story', () => {
    const Story = composedStories.CheckList;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 1
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 1
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 2
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 3
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 4
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 4
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 5
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 5
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 6
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                This is my lorem ipsum dolor sit ament 6
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders Advanced story', () => {
    const Story = composedStories.Advanced;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 1
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                Icon and its color is passed via context
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 2
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                Icon and its color is passed via context
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-checkmark"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 3
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                Icon and its color is passed via context
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 4
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                Heart icon, primary variant is defined by the item 
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--secondary icon--sm shp-alert"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 5
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                Alert icon, secondary variant is defined by the item
              </strong>
            </p>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      />
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 6
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <strong>
              Overriden by the item: icon placeholder padding, 
              <a
                href="#"
              >
                link is defined
              </a>
               as children, ellipsis is disabled
            </strong>
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withoutIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemLabel"
        >
          <p
            class="typography typography__bodyCopyM typography--left"
          >
            Item 6
          </p>
        </div>
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            <p
              class="typography typography__bodyCopyM typography--left"
            >
              <strong>
                No icon and no padding but with an action
              </strong>
            </p>
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders AlignTop story', () => {
    const Story = composedStories.AlignTop;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 1
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 4
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 5
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignTop"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 6
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders AlignCenter story', () => {
    const Story = composedStories.AlignCenter;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 1
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 4
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 5
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignCenter"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 6
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders AlignBottom story', () => {
    const Story = composedStories.AlignBottom;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignBottom"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 1
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignBottom"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignBottom"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignBottom"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 4
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignBottom"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 5
          </div>
        </div>
      </div>
    </li>
    <li
      class="list__item list__item--withIcon list__item--ellipsis list__item--alignBottom"
    >
      <div
        class="list__itemIcon"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--primary icon--sm shp-heart"
        />
      </div>
      <div
        class="list__itemContent"
      >
        <div
          class="list__itemValue"
        >
          <div
            class="list__itemValueContent"
          >
            This is my lorem ipsum dolor sit ament 6
          </div>
          <div
            class="list__itemAction"
          >
            <a
              data-react-aria-pressable="true"
              href="#"
            >
              Action
            </a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
`);
  });

  it('renders ListWithBasicItem story', () => {
    const Story = composedStories.ListWithBasicItem;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <ul
    class="list"
  >
    <li
      class="list__basicItem"
    >
      This is my lorem ipsum dolor sit ament 1
    </li>
    <li
      class="list__basicItem"
    >
      This is my lorem ipsum dolor sit ament 2
    </li>
    <li
      class="list__basicItem"
    >
      This is my lorem ipsum dolor sit ament 3
    </li>
    <li
      class="list__basicItem"
    >
      This is my lorem ipsum dolor sit ament 4
    </li>
    <li
      class="list__basicItem"
    >
      This is my lorem ipsum dolor sit ament 5
    </li>
    <li
      class="list__basicItem"
    >
      This is my lorem ipsum dolor sit ament 6
    </li>
  </ul>
</div>
`);
  });
});