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

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

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

const composedStories = composeStories(stories);

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

    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="perexBox"
  >
    <div
      class="perexBox__content"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit.
    </div>
  </div>
</div>
`);
  });

  it('renders WithImg story', () => {
    const Story = composedStories.WithImg;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="perexBox"
  >
    <div
      class="perexBox__content"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit.
    </div>
    <div
      class="perexBox__image"
    >
      <a
        href="https://example.com"
      >
        <img
          alt="Logo"
          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgODAiIHdpZHRoPSIxMjAiIGhlaWdodD0iODAiPgogIDxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMjB4ODA8L3RleHQ+Cjwvc3ZnPg=="
        />
      </a>
    </div>
  </div>
</div>
`);
  });

  it('renders InStack story', () => {
    const Story = composedStories.InStack;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="stack stack--alignItemsStretch stack--flexDirectionColumn stack--gapSm stack--justifyContentStart stack--noPadding stack--noWrap"
  >
    <div
      class="perexBox"
    >
      <div
        class="perexBox__content"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit.
      </div>
      <div
        class="perexBox__image"
      >
        <a
          href="https://example.com"
        >
          <img
            alt="Logo"
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgODAiIHdpZHRoPSIxMjAiIGhlaWdodD0iODAiPgogIDxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMjB4ODA8L3RleHQ+Cjwvc3ZnPg=="
          />
        </a>
      </div>
    </div>
    <div
      class="perexBox"
    >
      <div
        class="perexBox__content"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit.
      </div>
      <div
        class="perexBox__image"
      >
        <a
          href="https://example.com"
        >
          <img
            alt="Logo"
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgODAiIHdpZHRoPSIxMjAiIGhlaWdodD0iODAiPgogIDxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMjB4ODA8L3RleHQ+Cjwvc3ZnPg=="
          />
        </a>
      </div>
    </div>
    <div
      class="perexBox"
    >
      <div
        class="perexBox__content"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit.
      </div>
      <div
        class="perexBox__image"
      >
        <a
          href="https://example.com"
        >
          <img
            alt="Logo"
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgODAiIHdpZHRoPSIxMjAiIGhlaWdodD0iODAiPgogIDxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMjB4ODA8L3RleHQ+Cjwvc3ZnPg=="
          />
        </a>
      </div>
    </div>
  </div>
</div>
`);
  });
});