// import { expect, test } from '@jest/globals';
import { fireEvent, render, screen } from '@testing-library/react';
import { composeStories } from '@storybook/react';
import '@testing-library/jest-dom';

import * as DemoStories from './demo.stories';

const { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);

test('renders {{COMPONENT_CLASS_NAME}}', async () => {
  render(<Base{{COMPONENT_CLASS_NAME}} />);
  expect(await screen.findByText('Picklist Sample')).toBeVisible();
  expect(await screen.findByText('Picklist Helper Text')).toBeVisible();

  const radioElement = (screen.getByTestId('picklist-12345678') as HTMLSelectElement);
  expect(radioElement.value).toBeUndefined();

  const optionRadios = screen.getAllByRole('radio');
  const option1 = optionRadios[1] as HTMLInputElement;
  const option2 = optionRadios[2] as HTMLInputElement;

  fireEvent.click(option1);
  expect(option1).toBeChecked();

  fireEvent.click(option2);
  expect(option2).toBeChecked();
  expect(option1).not.toBeChecked();

});