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

test.describe('<%= classify(name) %>', () => {
  test('opens mounted alert dialog and closes it from an action', async ({ page }) => {
    await page.goto('/__semmet-e2e/<%= dasherize(name) %>');

    const component = page.locator('<%= selector %>').first();
    test.skip(
      (await component.count()) === 0,
      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
    );

    const trigger = component.getByRole('button', { name: /delete item/i }).first();
    test.skip(
      (await trigger.count()) === 0,
      'Keep a Delete item trigger inside <<%= selector %> /> to enable this generated alert-dialog e2e test.'
    );

    await trigger.click();

    const dialog = page.getByRole('alertdialog').first();
    await expect(dialog).toBeVisible();
    await expect(dialog).toHaveAttribute('aria-modal', 'true');
    await expect(dialog).toHaveAttribute('aria-describedby', /.+/);

    await dialog.getByRole('button', { name: /cancel/i }).click();
    await expect(dialog).toBeHidden();
  });
});