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

test.describe('<%= classify(name) %>', () => {
  test('toggles mounted disclosure content through its trigger', 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.'
    );

    await expect(component).toBeVisible();

    const trigger = component.getByRole('button').first();
    await expect(trigger).toHaveAttribute('aria-controls', /.+/);

    const panelId = await trigger.getAttribute('aria-controls');
    const panel = page.locator(`#${panelId}`);

    await trigger.click();
    await expect(trigger).toHaveAttribute('aria-expanded', 'true');
    await expect(panel).toBeVisible();

    await trigger.click();
    await expect(trigger).toHaveAttribute('aria-expanded', 'false');
  });
});