// 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('Phone Sample')).toBeVisible();
  expect(await screen.findByText('Phone Helper Text')).toBeVisible();


  const phoneElement = (screen.getByTestId('phone-12345678') as HTMLInputElement);
  expect(phoneElement.value).toBe('');

  expect(phoneElement).toHaveAttribute('placeholder', 'Phone Placeholder');

  const countryElement = (screen.getByTestId(":phone-input:country-code") as HTMLSelectElement);
  expect(countryElement.value).toContain("+1");
});