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

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

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

const composedStories = composeStories(stories);

describe('Loader Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Default', 'SmallLoader', 'MediumLoader', 'LargeLoader', 'LabelOverride']);

    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
    aria-label="Loading"
    aria-live="polite"
    aria-valuemax="100"
    aria-valuemin="0"
    class="loader loader--lg"
    id="react-aria-_r_0_"
    role="progressbar"
  />
</div>
`);
  });

  it('renders SmallLoader story', () => {
    const Story = composedStories.SmallLoader;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-label="Loading"
    aria-live="polite"
    aria-valuemax="100"
    aria-valuemin="0"
    class="loader loader--sm"
    id="react-aria-_r_0_"
    role="progressbar"
  />
</div>
`);
  });

  it('renders MediumLoader story', () => {
    const Story = composedStories.MediumLoader;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-label="Loading"
    aria-live="polite"
    aria-valuemax="100"
    aria-valuemin="0"
    class="loader loader--md"
    id="react-aria-_r_0_"
    role="progressbar"
  />
</div>
`);
  });

  it('renders LargeLoader story', () => {
    const Story = composedStories.LargeLoader;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-label="Loading"
    aria-live="polite"
    aria-valuemax="100"
    aria-valuemin="0"
    class="loader loader--lg"
    id="react-aria-_r_0_"
    role="progressbar"
  />
</div>
`);
  });

  it('renders LabelOverride story', () => {
    const Story = composedStories.LabelOverride;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-label="Loading..."
    aria-live="polite"
    aria-valuemax="100"
    aria-valuemin="0"
    class="loader loader--lg"
    id="react-aria-_r_0_"
    role="progressbar"
  />
</div>
`);
  });
});