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

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

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

const composedStories = composeStories(stories);

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

    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>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Switch me:
      </span>
    </span>
    <input
      aria-label="Switch me:"
      class="switch switch--md"
      role="switch"
      type="checkbox"
    />
  </label>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Switch me:
      </span>
    </span>
    <input
      aria-label="Switch me:"
      class="switch switch--md"
      disabled=""
      role="switch"
      type="checkbox"
    />
  </label>
</div>
`);
  });

  it('renders Justify story', () => {
    const Story = composedStories.Justify;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label v2FormField__label--justify"
    >
      <span
        class="v2FormField__labelText"
      >
        Switch me:
      </span>
    </span>
    <input
      aria-label="Switch me:"
      class="switch switch--md"
      role="switch"
      type="checkbox"
    />
  </label>
</div>
`);
  });

  it('renders Required story', () => {
    const Story = composedStories.Required;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label v2FormField__label--required"
    >
      <span
        class="v2FormField__labelText"
      >
        Switch me:
      </span>
    </span>
    <input
      aria-label="Switch me:"
      class="switch switch--md"
      required=""
      role="switch"
      type="checkbox"
    />
  </label>
</div>
`);
  });
});