From 3aba2181dca008e918caf6f5c6228dc094d52503 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Wed, 29 Apr 2026 14:31:51 +0200
Subject: [PATCH] feat(test): extract anchor iPhone device descriptors to
 shared fixture

Move the four iPhone viewport descriptors (SE, 15/16, 16/17 Pro, Pro Max)
into tests/e2e/fixtures/devices.ts so the upcoming visual spec (Task 23)
can share the same anchors. The mobile-audit spec now spreads each
descriptor and adds a slug `name` plus a human `label` for the run header.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 tests/e2e/audit/mobile.spec.ts | 24 +++++++++++--------
 tests/e2e/fixtures/devices.ts  | 44 ++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 tests/e2e/fixtures/devices.ts

diff --git a/tests/e2e/audit/mobile.spec.ts b/tests/e2e/audit/mobile.spec.ts
index 4b666e2..1810e84 100644
--- a/tests/e2e/audit/mobile.spec.ts
+++ b/tests/e2e/audit/mobile.spec.ts
@@ -13,6 +13,7 @@
 import { test, type Page, type APIRequestContext } from '@playwright/test';
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
+import { IPHONE_DEVICES } from '../fixtures/devices';
 
 const PORT_SLUG = 'port-nimara';
 const ADMIN = {
@@ -26,10 +27,14 @@ const OUT_ROOT = path.resolve(process.cwd(), '.audit/mobile');
 // Anchor viewports covering the active iPhone range (portrait CSS pixels).
 // See docs/superpowers/specs/2026-04-29-mobile-optimization-design.md §2.1.
 const VIEWPORTS = [
-  { name: 'iphone-se', label: 'iPhone SE 3 (375×667)', width: 375, height: 667 },
-  { name: 'iphone-16', label: 'iPhone 15/16 (393×852)', width: 393, height: 852 },
-  { name: 'iphone-16-pro', label: 'iPhone 16/17 Pro (402×874)', width: 402, height: 874 },
-  { name: 'iphone-pro-max', label: 'iPhone 16/17 Pro Max (440×956)', width: 440, height: 956 },
+  { ...IPHONE_DEVICES.iphoneSe, name: 'iphone-se', label: IPHONE_DEVICES.iphoneSe.name },
+  { ...IPHONE_DEVICES.iphone16, name: 'iphone-16', label: IPHONE_DEVICES.iphone16.name },
+  { ...IPHONE_DEVICES.iphone16Pro, name: 'iphone-16-pro', label: IPHONE_DEVICES.iphone16Pro.name },
+  {
+    ...IPHONE_DEVICES.iphoneProMax,
+    name: 'iphone-pro-max',
+    label: IPHONE_DEVICES.iphoneProMax.name,
+  },
 ] as const;
 
 type Auth = 'admin' | 'public';
@@ -348,12 +353,11 @@ test('mobile audit — every page at iPhone viewports', async ({ browser, reques
     await fs.mkdir(outDir, { recursive: true });
 
     const context = await browser.newContext({
-      viewport: { width: vp.width, height: vp.height },
-      deviceScaleFactor: 2,
-      isMobile: true,
-      hasTouch: true,
-      userAgent:
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+      viewport: vp.viewport,
+      deviceScaleFactor: vp.deviceScaleFactor,
+      isMobile: vp.isMobile,
+      hasTouch: vp.hasTouch,
+      userAgent: vp.userAgent,
     });
     const page = await context.newPage();
 
diff --git a/tests/e2e/fixtures/devices.ts b/tests/e2e/fixtures/devices.ts
new file mode 100644
index 0000000..7adb086
--- /dev/null
+++ b/tests/e2e/fixtures/devices.ts
@@ -0,0 +1,44 @@
+/**
+ * Shared device descriptors for mobile/tablet Playwright runs.
+ *
+ * Anchors per docs/superpowers/specs/2026-04-29-mobile-optimization-design.md §2.1:
+ * narrowest, common, current Pro, current Pro Max.
+ */
+export const IPHONE_DEVICES = {
+  iphoneSe: {
+    name: 'iPhone SE 3 (375×667)',
+    viewport: { width: 375, height: 667 },
+    deviceScaleFactor: 2,
+    isMobile: true,
+    hasTouch: true,
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+  },
+  iphone16: {
+    name: 'iPhone 15/16 (393×852)',
+    viewport: { width: 393, height: 852 },
+    deviceScaleFactor: 3,
+    isMobile: true,
+    hasTouch: true,
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+  },
+  iphone16Pro: {
+    name: 'iPhone 16/17 Pro (402×874)',
+    viewport: { width: 402, height: 874 },
+    deviceScaleFactor: 3,
+    isMobile: true,
+    hasTouch: true,
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+  },
+  iphoneProMax: {
+    name: 'iPhone 16/17 Pro Max (440×956)',
+    viewport: { width: 440, height: 956 },
+    deviceScaleFactor: 3,
+    isMobile: true,
+    hasTouch: true,
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+  },
+} as const;