CWC/tests/mobile-homepage.spec.js

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

const homepage = "http://community-works-collaborative.test/";

const getBox = async (locator) => {
    const box = await locator.boundingBox();
    expect(box).not.toBeNull();
    return box;
};

const expectNear = (actual, expected, tolerance = 3) => {
    expect(Math.abs(actual - expected)).toBeLessThanOrEqual(tolerance);
};

test.use({ viewport: { width: 402, height: 874 } });

test("mobile header preserves its layout and uses the designed hamburger", async ({
    page,
}) => {
    await page.goto(homepage);

    const header = await getBox(page.locator(".site-header"));
    const logo = await getBox(page.locator(".site-header__logo"));
    const toggle = page.locator(".nav-main__toggle").first();
    const toggleBox = await getBox(toggle);
    const hamburgerIcon = toggle.locator(".nav-toggle-hamburger svg");
    const closeIcon = toggle.locator(".nav-toggle-x svg");

    expectNear(header.height, 70, 2);
    expectNear(logo.x, 16, 2);
    expectNear(logo.width, 116, 2);
    expectNear(logo.height, 36, 2);
    expectNear(toggleBox.width, 72, 2);
    expectNear(toggleBox.height, 45, 2);
    await expect(toggle).toHaveCSS(
        "background-color",
        "oklch(0.6353 0.1751 29.61)",
    );
    await expect(toggle).toHaveCSS("border-radius", "22.4px 5.6px");
    await expect(hamburgerIcon).toHaveCSS("fill", "oklch(1 0 0)");
    await expect(closeIcon).toHaveCSS("stroke", "oklch(1 0 0)");
});

test("mobile hero matches the 402px reference composition", async ({
    page,
}) => {
    await page.goto(homepage);

    const hero = await getBox(page.locator(".homepage-hero"));
    const heading = await getBox(page.locator(".homepage-hero .intro h1"));
    const vector = await getBox(
        page.locator(".homepage-hero .heroVector .vector"),
    );
    const buttons = page.locator(".homepage-hero .reset .button");
    const firstButton = await getBox(buttons.nth(0));
    const secondButton = await getBox(buttons.nth(1));

    expectNear(hero.height, 752, 8);
    expectNear(heading.x, 32, 3);
    expect(heading.width).toBeGreaterThanOrEqual(330);
    expectNear(vector.x, -414, 8);
    expectNear(firstButton.y, secondButton.y, 2);
    expectNear(firstButton.width, 148, 4);
    expectNear(secondButton.width, 156, 4);

    await expect(page.locator(".homepage-hero__location")).toBeVisible();
});

test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => {
    await page.setViewportSize({ width: 320, height: 800 });
    await page.goto(homepage);

    const vector = await getBox(
        page.locator(".homepage-hero .heroVector .vector"),
    );
    const buttons = page.locator(".homepage-hero .reset .button");
    const firstButton = await getBox(buttons.nth(0));
    const secondButton = await getBox(buttons.nth(1));

    expectNear(firstButton.y, secondButton.y, 2);
    expect(secondButton.x + secondButton.width).toBeLessThanOrEqual(320);
    expect(vector.x + vector.width).toBeGreaterThanOrEqual(316);
});

test("mobile hero vector covers the 767px composition", async ({ page }) => {
    await page.setViewportSize({ width: 767, height: 900 });
    await page.goto(homepage);

    const vector = await getBox(
        page.locator(".homepage-hero .heroVector .vector"),
    );

    expect(vector.x).toBeLessThan(0);
    expect(vector.x + vector.width).toBeGreaterThanOrEqual(760);
});

test("mobile recent posts exposes previous and next controls", async ({
    page,
}) => {
    await page.goto(homepage);

    await expect(
        page.getByRole("button", { name: "Previous article" }),
    ).toBeVisible();
    await expect(
        page.getByRole("button", { name: "Next article" }),
    ).toBeVisible();
});

test("mobile recent posts advances to the next article", async ({ page }) => {
    await page.goto(homepage);

    const cards = page.locator(".recent-posts__card");
    await expect(cards.nth(0)).toBeVisible();
    await expect(cards.nth(1)).toBeHidden();

    await page.getByRole("button", { name: "Next article" }).click();

    await expect(cards.nth(0)).toBeHidden();
    await expect(cards.nth(1)).toBeVisible();
});

test("configured footer channels use the prepared SVG icons", async ({
    page,
}) => {
    await page.goto(homepage);

    await expect(
        page.locator('.social-links img[src*="social-facebook.svg"]'),
    ).toBeVisible();
    await expect(
        page.locator('.social-links img[src*="social-linkedin.svg"]'),
    ).toBeVisible();
});

test("mobile homepage has no automated accessibility violations", async ({
    page,
}) => {
    await page.goto(homepage);

    const results = await new AxeBuilder({ page })
        .withTags([
            "wcag2a",
            "wcag2aa",
            "wcag21a",
            "wcag21aa",
            "wcag22a",
            "wcag22aa",
        ])
        .analyze();

    expect(results.violations).toEqual([]);
});