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

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

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

const composedStories = composeStories(stories);

describe('RatingsOverview Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Positive',
      'Negative',
      'Neutral',
      'PositiveWithTooltip',
      'NegativeWithTooltip',
      'NeutralWithTooltip',
    ]);

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

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

  it('renders Positive story', () => {
    const Story = composedStories.Positive;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="ratingsOverview ratingsOverview--sentimentPositive shoptet-icon icon icon--md shp-face-positive"
  />
</div>
`);
  });

  it('renders Negative story', () => {
    const Story = composedStories.Negative;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="ratingsOverview ratingsOverview--sentimentNegative shoptet-icon icon icon--md shp-face-negative"
  />
</div>
`);
  });

  it('renders Neutral story', () => {
    const Story = composedStories.Neutral;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="ratingsOverview ratingsOverview--sentimentNeutral shoptet-icon icon icon--md shp-face-neutral"
  />
</div>
`);
  });

  it('renders PositiveWithTooltip story', () => {
    const Story = composedStories.PositiveWithTooltip;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="ratingsOverview ratingsOverview--button ratingsOverview--sentimentPositive shoptet-icon icon icon--md shp-face-positive"
    role="button"
    tabindex="0"
  />
</div>
`);
  });

  it('renders NegativeWithTooltip story', () => {
    const Story = composedStories.NegativeWithTooltip;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="ratingsOverview ratingsOverview--button ratingsOverview--sentimentNegative shoptet-icon icon icon--md shp-face-negative"
    role="button"
    tabindex="0"
  />
</div>
`);
  });

  it('renders NeutralWithTooltip story', () => {
    const Story = composedStories.NeutralWithTooltip;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="ratingsOverview ratingsOverview--button ratingsOverview--sentimentNeutral shoptet-icon icon icon--md shp-face-neutral"
    role="button"
    tabindex="0"
  />
</div>
`);
  });
});