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

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

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

const composedStories = composeStories(stories);

describe('Divider Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Horizontal', 'OnDarkBackground', 'Vertical']);

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

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

  it('renders Horizontal story', () => {
    const Story = composedStories.Horizontal;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; flex-direction: column; gap: 16px;"
  >
    <p>
      First section content
    </p>
    <div
      aria-orientation="horizontal"
      class="divider"
      role="separator"
    />
    <p>
      Second section content
    </p>
  </div>
</div>
`);
  });

  it('renders OnDarkBackground story', () => {
    const Story = composedStories.OnDarkBackground;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; flex-direction: column; gap: 16px; padding: 16px; background-color: var(--colors-surface-inverted); color: rgb(255, 255, 255);"
  >
    <p>
      First section content
    </p>
    <div
      aria-orientation="horizontal"
      class="divider"
      role="separator"
    />
    <p>
      Second section content
    </p>
  </div>
</div>
`);
  });

  it('renders Vertical story', () => {
    const Story = composedStories.Vertical;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; align-items: center; gap: 16px; height: 48px;"
  >
    <span>
      Left content
    </span>
    <div
      aria-orientation="vertical"
      class="divider divider--vertical"
      role="separator"
    />
    <span>
      Right content
    </span>
  </div>
</div>
`);
  });
});