import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test.describe("Team Grid block on /team/", () => {
    test("renders the photo, name, and title for each member", async ({ page }) => {
        await page.goto("/team/");

        const cards = page.locator(".team-grid__card");
        await expect(cards.first()).toBeVisible();

        const firstCard = cards.first();
        await expect(firstCard.locator(".team-grid__photo")).toBeVisible();
        await expect(firstCard.locator(".team-grid__name")).toBeVisible();
        await expect(firstCard.locator(".team-grid__title")).toBeVisible();
    });

    test("bio is hidden by default and expands on summary click", async ({ page }) => {
        await page.goto("/team/");

        const firstDetails = page.locator(".team-grid__details").first();
        // Bio is closed by default.
        await expect(firstDetails).not.toHaveAttribute("open", "");

        // Click the summary; the details should open and the bio should be visible.
        await firstDetails.locator(".team-grid__summary").click();
        await expect(firstDetails).toHaveAttribute("open", "");
        await expect(firstDetails.locator(".team-grid__bio")).toBeVisible();

        // Click again; the details should close.
        await firstDetails.locator(".team-grid__summary").click();
        await expect(firstDetails).not.toHaveAttribute("open", "");
    });

    test("no axe violations on the team-grid block", async ({ page }) => {
        await page.goto("/team/");
        const results = await new AxeBuilder({ page })
            .include(".team-grid")
            .analyze();
        expect(results.violations).toEqual([]);
    });
});