TudorandClaude Opus 5
752eb07310
page.tsx now composes the sections and passes them through SchoolDetailShell
as children, so ~1,300 lines of static markup stop shipping as client
JavaScript. The shell keeps what is genuinely interactive: back link, header
reveal, hero map, compare CTA, sticky nav and scroll-spy.
The scroll-spy already located sections via document.getElementById, so it
works unchanged against server-rendered children.
Charts needed a client wrapper: next/dynamic with ssr:false is illegal in a
Server Component, so components/school/charts.tsx is the boundary that keeps
Chart.js (64 KB gz) lazy and browser-only.
Measured on this build:
- school route client chunk: 8 KB gz (33 KB raw)
- total static JS across all chunks: 380.6 -> 350.7 KB gz
- section markup is absent from every client chunk ("Got their first choice",
"Ofsted reports", "Most deprived" etc. all return 0 hits); shell strings
still present, as expected
- shared baseline unchanged at 172 KB gz -- out of scope, as designed
The 14 characterization tests pass byte-identical to the commit that
introduced them. Only the render helper changed.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
/**
|
|
* The single seam between the characterization tests and the component tree.
|
|
*
|
|
* This file is the ONLY thing the server/client split was allowed to change.
|
|
* It now renders the shell + server-sections composition that
|
|
* app/school/[slug]/page.tsx builds, instead of the old monolithic views.
|
|
* Every assertion in schoolDetail.characterization.test.tsx is unchanged —
|
|
* that is the proof the refactor preserved behaviour.
|
|
*/
|
|
|
|
import { render } from '@testing-library/react';
|
|
import type { ReactNode } from 'react';
|
|
import { ComparisonProvider } from '@/context/ComparisonProvider';
|
|
import { SchoolDetailShell } from '@/components/school/SchoolDetailShell';
|
|
import { PrimarySchoolSections } from '@/components/school/PrimarySchoolSections';
|
|
import { SecondarySchoolSections } from '@/components/school/SecondarySchoolSections';
|
|
import {
|
|
computeSchoolFlags, buildNavItems,
|
|
computeSecondaryFlags, buildSecondaryNavItems,
|
|
} from '@/lib/schoolSections';
|
|
import { nationalAveragesFixture } from './schoolFixtures';
|
|
|
|
// The shell calls useComparison(), which throws outside the provider. In the
|
|
// app this wrapper comes from app/layout.tsx.
|
|
function withProviders(ui: ReactNode) {
|
|
return <ComparisonProvider>{ui}</ComparisonProvider>;
|
|
}
|
|
|
|
export function renderSchoolDetail(fixture: any) {
|
|
const flags = computeSchoolFlags(fixture);
|
|
const navItems = buildNavItems(flags, {
|
|
ofsted: fixture.ofsted,
|
|
admissions: fixture.admissions,
|
|
yearlyDataLength: fixture.yearlyData.length,
|
|
});
|
|
|
|
return render(
|
|
withProviders(
|
|
<SchoolDetailShell
|
|
{...fixture}
|
|
nationalAvg={nationalAveragesFixture}
|
|
navItems={navItems}
|
|
>
|
|
<PrimarySchoolSections
|
|
{...fixture}
|
|
nationalAvg={nationalAveragesFixture}
|
|
flags={flags}
|
|
/>
|
|
</SchoolDetailShell>,
|
|
),
|
|
);
|
|
}
|
|
|
|
export function renderSecondarySchoolDetail(fixture: any) {
|
|
const flags = computeSecondaryFlags(fixture);
|
|
const navItems = buildSecondaryNavItems(flags, {
|
|
ofsted: fixture.ofsted,
|
|
admissions: fixture.admissions,
|
|
yearlyDataLength: fixture.yearlyData.length,
|
|
});
|
|
|
|
return render(
|
|
withProviders(
|
|
<SchoolDetailShell
|
|
{...fixture}
|
|
nationalAvg={nationalAveragesFixture}
|
|
navItems={navItems}
|
|
>
|
|
<SecondarySchoolSections
|
|
{...fixture}
|
|
nationalAvg={nationalAveragesFixture}
|
|
flags={flags}
|
|
/>
|
|
</SchoolDetailShell>,
|
|
),
|
|
);
|
|
}
|