// 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('List of countries')).toBeVisible();

  expect(screen.queryByText('United States of America')).not.toBeInTheDocument();
  expect(screen.queryByText('Canada')).not.toBeInTheDocument();
  expect(screen.queryByText('Mexico')).not.toBeInTheDocument();

  const iconButton = screen.getByRole('button');
  fireEvent.click(iconButton);

  expect(await screen.findByText('United States of America')).toBeVisible();
  expect(await screen.findByText('Canada')).toBeVisible();
  expect(await screen.findByText('Mexico')).toBeVisible();

  const iconLink = screen.getByRole('link');
  expect(iconLink).toHaveAttribute('href', 'about:blank');
});