test(e2e): compare journeys for the parent-first redesign

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

e2e/tests/journeys.spec.ts

@@ -138,7 +138,7 @@ test('results map fullscreen falls back to an overlay on iOS', async ({ page })
   await expect(openFs).toBeVisible();
 });
 
-test('comparing two schools shows both side by side', async ({ page }) => {
+test('comparing two schools shows the parent-first sections side by side', async ({ page }) => {
   // Collect two school URNs from search results, then load the share URL
   await searchByName(page, 'primary');
   await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
@@ -152,6 +152,36 @@ test('comparing two schools shows both side by side', async ({ page }) => {
   // Both schools' detail links should render in the comparison view
   await expect(page.locator(`a[href*="${urns[0]}"]`).first()).toBeVisible({ timeout: 15_000 });
   await expect(page.locator(`a[href*="${urns[1]}"]`).first()).toBeVisible();
+
+  // The parent-first sections render in order (data-invariant: headings only)
+  for (const heading of [
+    'At a glance',
+    'Ofsted inspection',
+    /How (children|students) do academically/,
+    'Who goes there',
+    'Explore trends',
+  ]) {
+    await expect(
+      page.getByRole('heading', { name: heading }).first(),
+    ).toBeVisible({ timeout: 15_000 });
+  }
+
+  // Every number gets an anchor: at least one England-average tick or label
+  await expect(page.getByText(/England \d+/).first()).toBeVisible();
+
+  // Ofsted linkout goes to the school's provider page, never a report deep-link
+  const ofstedLink = page.getByRole('link', { name: /Ofsted page/i }).first();
+  await expect(ofstedLink).toBeVisible();
+  expect(await ofstedLink.getAttribute('href')).toMatch(
+    /reports\.ofsted\.gov\.uk\/provider\/21\/\d+/
+  );
+
+  // A school never shows both an overall-grade badge AND report-card detail:
+  // "Report card" implies "no overall grade is given" copy is present too.
+  const reportCards = await page.getByText('Report card', { exact: true }).count();
+  if (reportCards > 0) {
+    await expect(page.getByText(/no overall grade/i).first()).toBeVisible();
+  }
 });
 
 test('compare chart on mobile shows school chips with tap-to-focus', async ({ page }) => {
@@ -170,9 +200,22 @@ test('compare chart on mobile shows school chips with tap-to-focus', async ({ pa
   expect(urns.length).toBeGreaterThanOrEqual(3);
 
   await page.goto(`/compare?urns=${urns[0]},${urns[1]},${urns[2]}`);
+
+  // Mobile is measure-first: the At a glance section stacks all active-phase
+  // schools inside one flow — no horizontal swiping between school columns.
+  await expect(
+    page.getByRole('heading', { name: 'At a glance' }),
+  ).toBeVisible({ timeout: 15_000 });
+  const body = page.locator('body');
+  const bodyOverflowsX = await body.evaluate(
+    (el) => el.scrollWidth > el.clientWidth + 1,
+  );
+  expect(bodyOverflowsX).toBe(false);
+
+  // The trends chart still renders (inside the Explore trends section)…
   await expect(page.locator('canvas:visible').first()).toBeVisible({ timeout: 15_000 });
 
-  // The mobile chart legend renders one chip per school in the active phase.
+  // …with the mobile chart legend chips and tap-to-focus behaviour intact.
   const chipGroup = page.getByRole('group', { name: /highlight a school/i });
   const chips = chipGroup.getByRole('button');
   await expect(chips.first()).toBeVisible({ timeout: 15_000 });