fix: match mobile header and hero design

2026-06-27 17:38:49 -05:00
parent dd063f1df0
commit 6d3bb76b17
4 changed files with 190 additions and 23 deletions
@@ -0,0 +1,128 @@
+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 toggle = page.locator(".nav-main__toggle");
+    const toggleBox = await getBox(toggle);
+
+    expectNear(header.height, 70, 2);
+    expectNear(toggleBox.width, 72, 2);
+    expectNear(toggleBox.height, 45, 2);
+    await expect(toggle).toHaveCSS(
+        "background-color",
+        "oklch(0.6353 0.1751 29.61)",
+    );
+});
+
+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 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(firstButton.y, secondButton.y, 2);
+    expectNear(firstButton.width, 148, 4);
+    expectNear(secondButton.width, 156, 4);
+
+    const location = page.locator(".homepage-hero__location");
+    if ((await location.count()) > 0) {
+        await expect(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 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);
+});
+
+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([]);
+});