fix(compare): anchor grade-5 & EBacc rows; restore secondary-button outline

SF1 (expert sign-off): the secondary academics 'Grade 5+ in English & maths' and 'EBacc entry' rows rendered as bare numbers — the one place the 'every number anchored against the England average' promise broke. Both now show the official England anchor (already in the payload) + an Above/Close/Below verdict chip, matching Attainment 8 (which also gains a chip for consistency). Button affordance: globals.css has a duplicate .btn block whose 'border: none' overrode the base '1px solid transparent', so .btn-secondary/.btn-active's 'border-color' had no width — every outline button (the modal's '+ Compare', search-result '+ Compare', 'Comparing') rendered as borderless teal text. Give the outline variants the full 'border' shorthand so the outline renders regardless of the clobbered base. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
2026-07-18 08:26:59 +01:00
parent a1128bd801
commit b0c5b6bb57
3 changed files with 116 additions and 6 deletions
@@ -0,0 +1,65 @@
+/**
+ * Secondary academics: every headline number carries its England anchor and a
+ * verdict chip (expert sign-off SF1 — the grade-5 and EBacc rows previously
+ * rendered as bare numbers, breaking the "anchored against England" promise).
+ */
+
+import { render, screen, within } from '@testing-library/react';
+
+import { CompareAcademics } from '@/components/compare/CompareAcademics';
+import type { ComparisonData, NationalAverages, School } from '@/lib/types';
+
+function school(urn: number, name: string): School {
+  return { urn, school_name: name, attainment_8_score: 58.7 } as School;
+}
+
+function data(urn: number): ComparisonData {
+  return {
+    school_info: school(urn, 'Test High'),
+    yearly_data: [
+      {
+        year: 202425,
+        attainment_8_score: 58.7,
+        english_maths_strong_pass_pct: 30,
+        ebacc_entry_pct: 10,
+      },
+    ] as ComparisonData['yearly_data'],
+    ofsted: null,
+    census: null,
+    admissions: null,
+    admissions_history: [],
+    deprivation: null,
+  };
+}
+
+const NATIONAL: NationalAverages = {
+  year: 202425,
+  primary: {},
+  secondary: {
+    attainment_8_score: 46.0,
+    english_maths_strong_pass_pct: 45.4,
+    ebacc_entry_pct: 40.5,
+  },
+  by_year: [],
+};
+
+test('grade-5 and EBacc rows show the England anchor and a Below chip when under it', () => {
+  const s = school(137086, 'Bishop Stopford School');
+  render(
+    <CompareAcademics
+      schools={[s]}
+      data={{ '137086': data(137086) }}
+      nationalAverages={NATIONAL}
+      isSecondary
+    />,
+  );
+
+  // The official anchors appear (45.4% and 40.5%), not just the school numbers.
+  expect(screen.getByText(/England average 45%/)).toBeInTheDocument();
+  expect(screen.getByText(/England average 41%/)).toBeInTheDocument();
+
+  // 30% grade-5 and 10% EBacc are both well below their anchors → Below chips.
+  // Attainment 8 (58.7 vs 46.0) is above → at least one "Above" chip too.
+  expect(screen.getAllByText(/Below England average/).length).toBeGreaterThanOrEqual(2);
+  expect(screen.getAllByText(/Above England average/).length).toBeGreaterThanOrEqual(1);
+});