// 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 searchboxElement = screen.getByTestId(
    'picklist-12345678:combo-box:control'
  ) as HTMLInputElement;
  // expect(searchboxElement).toHaveAttribute('role', 'searchbox');
  expect(searchboxElement).toHaveAttribute('role', 'combobox');
  expect(searchboxElement).toHaveAttribute('autocomplete', 'off');
  expect(searchboxElement).toHaveAttribute('placeholder', 'Select...');
  expect(searchboxElement.value).toContain('');

  fireEvent.click(searchboxElement);

  // because need to wait after button pressed before finding the data picker pop up, need to do this
  // via "await" and "findByTestId" (as opposed to getByTestId)
  const dataPickerPopUp = await screen.findByTestId(':menu:');
  expect(dataPickerPopUp).not.toBeNull();



});