import { Meta } from '@storybook/react-webpack5';
import Button from './Button.resolver';
import { expect, userEvent, within } from 'storybook/test';
import { storyConfig } from '../test-utils';

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'Actions/Button/Tests',
};
export default meta;

export const FocusTertiary = storyConfig(
  {
    render: () => (
      <Button v2 priority="tertiary">
        Focus has underline
      </Button>
    ),
  },
  {},
);
FocusTertiary.play = async ({ canvasElement }) => {
  await userEvent.tab();
  const canvas = within(canvasElement);
  const buttonElement: HTMLButtonElement = canvas.getByRole('button');
  await expect(buttonElement).toHaveFocus();
};
