// import { expect, test } from '@jest/globals';
import { 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('TimeOfDay Label')).toBeVisible();
  expect(await screen.findByText('TimeOfDay helper text')).toBeVisible();

  // const dateElement = screen.getByRole('textbox');
  // for some odd reason, checking the full string of "USD 0.00" doesn't pass
  // expect(currencyElement).toHaveValue('USD 0.00');

  const myHour = (screen.getByTestId(':time-input:control-hour') as HTMLInputElement);
  expect(myHour.value).toContain('01');
  expect(myHour).toHaveAttribute('placeholder', 'hh');

  const myMinute = (screen.getByTestId(':time-input:control-minute') as HTMLInputElement);
  expect(myMinute.value).toContain('30');
  expect(myMinute).toHaveAttribute('placeholder', 'mm');

  const myPeriod = (screen.getByTestId(':time-input:control-period') as HTMLSelectElement).value;
  expect(myPeriod).toContain('PM');

  // no clear button

  // pressing time button, reveals a <div> that has no ID, so can't test for it.
});