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

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

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

const composedStories = composeStories(stories);

describe('Avatar Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'ImageFallbackAndNameAndDescription',
      'ImageAndName',
      'FallbackAndName',
      'ImageOnly',
      'FallbackOnly',
      'NameAndDescription',
      'NameOnly',
    ]);

    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>
  <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>
`);
  });

  it('renders ImageFallbackAndNameAndDescription story', () => {
    const Story = composedStories.ImageFallbackAndNameAndDescription;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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"
      />
    </span>
    <figcaption
      class="avatar__text"
    >
      <span
        class="avatar__textName"
      >
        Jane Doe
      </span>
      <span
        class="avatar__textDescription"
      >
        React Developer
      </span>
    </figcaption>
  </figure>
</div>
`);
  });

  it('renders ImageAndName story', () => {
    const Story = composedStories.ImageAndName;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <figure
    aria-label="Jane Doe"
    class="avatar"
    title="Jane Doe"
  >
    <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"
      />
    </figcaption>
  </figure>
</div>
`);
  });

  it('renders FallbackAndName story', () => {
    const Story = composedStories.FallbackAndName;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <figure
    aria-label="Jane Doe"
    class="avatar"
    title="Jane Doe"
  >
    <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"
      />
    </span>
    <figcaption
      class="avatar__text"
    >
      <span
        class="avatar__textName"
      >
        Jane Doe
      </span>
      <span
        class="avatar__textDescription"
      />
    </figcaption>
  </figure>
</div>
`);
  });

  it('renders ImageOnly story', () => {
    const Story = composedStories.ImageOnly;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <figure
    aria-label="Jane Doe"
    class="avatar"
    title="Jane Doe"
  >
    <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"
      style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
    >
      <span
        class="avatar__textName"
      >
        Jane Doe
      </span>
      <span
        class="avatar__textDescription"
      />
    </figcaption>
  </figure>
</div>
`);
  });

  it('renders FallbackOnly story', () => {
    const Story = composedStories.FallbackOnly;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <figure
    aria-label="Jane Doe"
    class="avatar"
    title="Jane Doe"
  >
    <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"
      />
    </span>
    <figcaption
      class="avatar__text"
      style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
    >
      <span
        class="avatar__textName"
      >
        Jane Doe
      </span>
      <span
        class="avatar__textDescription"
      />
    </figcaption>
  </figure>
</div>
`);
  });

  it('renders NameAndDescription story', () => {
    const Story = composedStories.NameAndDescription;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <figure
    aria-label="Jane Doe, React Developer"
    class="avatar"
    title="Jane Doe, React Developer"
  >
    <figcaption
      class="avatar__text"
    >
      <span
        class="avatar__textName"
      >
        Jane Doe
      </span>
      <span
        class="avatar__textDescription"
      >
        React Developer
      </span>
    </figcaption>
  </figure>
</div>
`);
  });

  it('renders NameOnly story', () => {
    const Story = composedStories.NameOnly;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <figure
    aria-label="Jane Doe"
    class="avatar"
    title="Jane Doe"
  >
    <figcaption
      class="avatar__text"
    >
      <span
        class="avatar__textName"
      >
        Jane Doe
      </span>
      <span
        class="avatar__textDescription"
      />
    </figcaption>
  </figure>
</div>
`);
  });
});