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

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

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

const composedStories = composeStories(stories);

describe('ReviewCard Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Default', 'MatchHeights', 'AsH4']);

    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="reviewCard"
  >
    <div
      class="reviewCard__header"
    >
      <h2
        class="typography typography__headline2 typography--left"
      >
        Review title
      </h2>
    </div>
    <div
      class="reviewCard__content"
    >
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque, ante a dictum fringilla, nisi sapien fermentum lorem, at malesuada risus quam ut purus.
      </p>
    </div>
    <div
      class="reviewCard__footer"
    >
      <figure
        aria-label="Jane Doe, React Developer"
        class="avatar"
        title="Jane Doe, React Developer"
      >
        <span
          aria-hidden="true"
          class="avatar__image"
          role="presentation"
        >
          <abbr
            class="avatar__abbreviation"
            title="Jane Doe"
          >
            JD
          </abbr>
          <img
            alt=""
            aria-hidden="true"
            class="avatar__imageImg"
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
            style="opacity: 0; transition: none;"
          />
        </span>
        <figcaption
          class="avatar__text"
        >
          <span
            class="avatar__textName"
          >
            Jane Doe
          </span>
          <span
            class="avatar__textDescription"
          >
            React Developer
          </span>
        </figcaption>
      </figure>
    </div>
  </div>
</div>
`);
  });

  it('renders MatchHeights story', () => {
    const Story = composedStories.MatchHeights;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="grid grid--3columns grid--gap grid--noPadding grid--responsive"
  >
    <div
      class="reviewCard"
    >
      <div
        class="reviewCard__header"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Review title
        </h2>
      </div>
      <div
        class="reviewCard__content"
      >
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Lorem ipsum
        </p>
      </div>
      <div
        class="reviewCard__footer"
      >
        <figure
          aria-label="Jane Doe, React Developer"
          class="avatar"
          title="Jane Doe, React Developer"
        >
          <span
            aria-hidden="true"
            class="avatar__image"
            role="presentation"
          >
            <abbr
              class="avatar__abbreviation"
              title="Jane Doe"
            >
              JD
            </abbr>
            <img
              alt=""
              aria-hidden="true"
              class="avatar__imageImg"
              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
              style="opacity: 0; transition: none;"
            />
          </span>
          <figcaption
            class="avatar__text"
          >
            <span
              class="avatar__textName"
            >
              Jane Doe
            </span>
            <span
              class="avatar__textDescription"
            >
              React Developer
            </span>
          </figcaption>
        </figure>
      </div>
    </div>
    <div
      class="reviewCard"
    >
      <div
        class="reviewCard__header"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Review title
        </h2>
      </div>
      <div
        class="reviewCard__content"
      >
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div
        class="reviewCard__footer"
      >
        <figure
          aria-label="Jane Doe, React Developer"
          class="avatar"
          title="Jane Doe, React Developer"
        >
          <span
            aria-hidden="true"
            class="avatar__image"
            role="presentation"
          >
            <abbr
              class="avatar__abbreviation"
              title="Jane Doe"
            >
              JD
            </abbr>
            <img
              alt=""
              aria-hidden="true"
              class="avatar__imageImg"
              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
              style="opacity: 0; transition: none;"
            />
          </span>
          <figcaption
            class="avatar__text"
          >
            <span
              class="avatar__textName"
            >
              Jane Doe
            </span>
            <span
              class="avatar__textDescription"
            >
              React Developer
            </span>
          </figcaption>
        </figure>
      </div>
    </div>
    <div
      class="reviewCard"
    >
      <div
        class="reviewCard__header"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Review title
        </h2>
      </div>
      <div
        class="reviewCard__content"
      >
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque, ante a dictum fringilla, nisi sapien fermentum lorem, at malesuada risus quam ut purus.
        </p>
      </div>
      <div
        class="reviewCard__footer"
      >
        <figure
          aria-label="Jane Doe, React Developer"
          class="avatar"
          title="Jane Doe, React Developer"
        >
          <span
            aria-hidden="true"
            class="avatar__image"
            role="presentation"
          >
            <abbr
              class="avatar__abbreviation"
              title="Jane Doe"
            >
              JD
            </abbr>
            <img
              alt=""
              aria-hidden="true"
              class="avatar__imageImg"
              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
              style="opacity: 0; transition: none;"
            />
          </span>
          <figcaption
            class="avatar__text"
          >
            <span
              class="avatar__textName"
            >
              Jane Doe
            </span>
            <span
              class="avatar__textDescription"
            >
              React Developer
            </span>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders AsH4 story', () => {
    const Story = composedStories.AsH4;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="reviewCard"
  >
    <div
      class="reviewCard__header"
    >
      <h4
        class="typography typography__headline2 typography--left"
      >
        Review title
      </h4>
    </div>
    <div
      class="reviewCard__content"
    >
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque, ante a dictum fringilla, nisi sapien fermentum lorem, at malesuada risus quam ut purus.
      </p>
    </div>
    <div
      class="reviewCard__footer"
    >
      <figure
        aria-label="Jane Doe, React Developer"
        class="avatar"
        title="Jane Doe, React Developer"
      >
        <span
          aria-hidden="true"
          class="avatar__image"
          role="presentation"
        >
          <abbr
            class="avatar__abbreviation"
            title="Jane Doe"
          >
            JD
          </abbr>
          <img
            alt=""
            aria-hidden="true"
            class="avatar__imageImg"
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
            style="opacity: 0; transition: none;"
          />
        </span>
        <figcaption
          class="avatar__text"
        >
          <span
            class="avatar__textName"
          >
            Jane Doe
          </span>
          <span
            class="avatar__textDescription"
          >
            React Developer
          </span>
        </figcaption>
      </figure>
    </div>
  </div>
</div>
`);
  });
});