import { expect, test } from '@playwright/test';

test.describe('<%= classify(name) %>', () => {
  test('opens mounted menu button and closes it with Escape', async ({ page }) => {
    await page.goto('/__semmet-e2e/<%= dasherize(name) %>');

    const component = page.locator('[<%= camelize(name) %>]').first();
    test.skip(
      (await component.count()) === 0,
      'Mount an element with [<%= camelize(name) %>] in a route or host component to enable this generated e2e test.'
    );

    const button = component.getByRole('button').first();
    const menu = component.getByRole('menu').first();

    await expect(button).toHaveAttribute('aria-haspopup', 'true');
    await expect(button).toHaveAttribute('aria-expanded', 'false');
    await expect(menu).toBeHidden();

    await button.click();
    await expect(button).toHaveAttribute('aria-expanded', 'true');
    await expect(menu).toBeVisible();

    const firstItem = component.getByRole('menuitem').first();
    await firstItem.press('Escape');
    await expect(button).toHaveAttribute('aria-expanded', 'false');
    await expect(menu).toBeHidden();
    await expect(button).toBeFocused();
  });
});