test: add Playwright + axe specs for home, archive, single

tests/archive.spec.js

@@ -0,0 +1,25 @@
+const { test, expect } = require('@playwright/test');
+const AxeBuilder = require('@axe-core/playwright').default;
+
+test.use({ viewport: { width: 1920, height: 1080 } });
+
+test.describe('archive-projects', () => {
+  test('project archive renders grid or empty + zero axe violations', async ({ page }, testInfo) => {
+    await page.goto('/projects/');
+    await page.screenshot({ path: 'test-results/archive.png', fullPage: true });
+
+    await expect(page.locator('.archive-projects__head h1')).toBeVisible();
+    const grid = page.locator('.archive-projects__grid');
+    const empty = page.locator('.archive-projects__empty');
+    await expect(grid.or(empty)).toBeVisible();
+
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'])
+      .analyze();
+    await testInfo.attach('axe', {
+      body: JSON.stringify(results, null, 2),
+      contentType: 'application/json',
+    });
+    expect(results.violations).toEqual([]);
+  });
+});

tests/home.spec.js

@@ -0,0 +1,28 @@
+const { test, expect } = require('@playwright/test');
+const AxeBuilder = require('@axe-core/playwright').default;
+
+test.use({ viewport: { width: 1920, height: 1080 } });
+
+test.describe('home', () => {
+  test('home renders Carbon Blue hero + recent projects + zero axe violations', async ({ page }, testInfo) => {
+    await page.goto('/');
+    await page.screenshot({ path: 'test-results/home.png', fullPage: true });
+
+    // Hero region must be present.
+    await expect(page.locator('.home-hero')).toBeVisible();
+
+    // Either the grid OR the empty state must be present.
+    const grid = page.locator('.home-recent__grid');
+    const empty = page.locator('.home-recent__empty');
+    await expect(grid.or(empty)).toBeVisible();
+
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'])
+      .analyze();
+    await testInfo.attach('axe', {
+      body: JSON.stringify(results, null, 2),
+      contentType: 'application/json',
+    });
+    expect(results.violations).toEqual([]);
+  });
+});

tests/single.spec.js

@@ -0,0 +1,36 @@
+const { test, expect } = require('@playwright/test');
+const AxeBuilder = require('@axe-core/playwright').default;
+
+test.use({ viewport: { width: 1920, height: 1080 } });
+
+test.describe('single-project', () => {
+  test('project detail renders hero, sidebar, no axe violations', async ({ page }, testInfo) => {
+    // Pick the first project; skip the test gracefully if none exist.
+    const response = await page.goto('/projects/');
+    expect(response && response.status()).toBeLessThan(400);
+
+    const firstLink = page.locator('.archive-projects__grid a.project-card__title-link').first();
+    if (await firstLink.count() === 0) {
+      test.skip(true, 'No projects to test detail page');
+      return;
+    }
+
+    await Promise.all([
+      page.waitForLoadState('networkidle'),
+      firstLink.click(),
+    ]);
+    await page.screenshot({ path: 'test-results/single.png', fullPage: true });
+
+    await expect(page.locator('.single-project__title')).toBeVisible();
+    await expect(page.locator('.single-project__sidebar')).toBeVisible();
+
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'])
+      .analyze();
+    await testInfo.attach('axe', {
+      body: JSON.stringify(results, null, 2),
+      contentType: 'application/json',
+    });
+    expect(results.violations).toEqual([]);
+  });
+});