Add FE schema and parser for cricket match data (#13733)

* Create cricket match schema parser

- move DCR types to parsing file
- add test
- add fixture data
- add FE schema
- add validation function
- remove "Data" suffix from types

Author: andrewHEguardian

dotcom-rendering/fixtures/generated/cricket-match.ts

@@ -1,8 +1,8 @@
 // @ts-check
-import path from 'node:path';
 import fs from 'node:fs';
-import TJS from 'typescript-json-schema';
+import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import TJS from 'typescript-json-schema';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const root = path.resolve(__dirname, '..', '..');
@@ -15,6 +15,7 @@ const program = TJS.getProgramFromFiles(
 		path.resolve(`${root}/src/frontend/feTagPage.ts`),
 		path.resolve(`${root}/src/types/newslettersPage.ts`),
 		path.resolve(`${root}/src/types/editionsCrossword.ts`),
+		path.resolve(`${root}/src/frontend/feCricketMatchPage.ts`),
 		path.resolve(`${root}/src/frontend/feFootballMatchListPage.ts`),
 		path.resolve(`${root}/src/frontend/feFootballTablesPage.ts`),
 	],
@@ -67,6 +68,10 @@ const schemas = [
 		typeName: 'FEFootballTablesPage',
 		file: `${root}/src/frontend/schemas/feFootballTablesPage.json`,
 	},
+	{
+		typeName: 'FECricketMatchPage',
+		file: `${root}/src/frontend/schemas/feCricketMatchPage.json`,
+	},
 ];
 
 /**

dotcom-rendering/scripts/jsonSchema/schema.mjs

@@ -8,6 +8,7 @@ const { config } = require('../../fixtures/config');
 const { configOverrides } = require('../../fixtures/config-overrides');
 const { switchOverrides } = require('../../fixtures/switch-overrides');
 const {
+	validateAsCricketMatchPageType,
 	validateAsFEArticle,
 	validateAsFootballMatchListPage,
 } = require('../../src/model/validate');
@@ -356,6 +357,48 @@ requests.push(
 		}),
 );
 
+requests.push(
+	// This match data will expire after two months, find a new match if this needs updating
+	fetch(
+		'https://www.theguardian.com/sport/cricket/match/2025-03-26/australia-women-s-cricket-team.json?dcr',
+	)
+		.then((res) => res.json())
+		.then((json) => {
+			// These configs are returning from frontend
+			// but are not necessary for cricket pages
+			delete json.config.hasLiveBlogTopAd;
+			delete json.config.userAttributesApiUrl;
+			delete json.config.weatherapiurl;
+			delete json.config.isAdFree;
+			delete json.config.userBenefitsApiUrl;
+
+			const cricketMatchData = validateAsCricketMatchPageType(json);
+
+			// Write the new frontend fixture data
+			const contents = `${HEADER}
+			import type { FECricketMatchPage } from '../../src/frontend/feCricketMatch';
+
+			export const cricketMatchData: FECricketMatchPage = ${JSON.stringify(
+				cricketMatchData,
+				null,
+				4,
+			)}
+		`;
+
+			return fs.writeFile(
+				`${root}/fixtures/generated/cricket-match.ts`,
+				contents,
+				'utf8',
+			);
+		})
+		.then(() => 'cricket-match.ts')
+		.catch((err) => {
+			throw new Error('Failed to create cricket-match.ts', {
+				cause: err,
+			});
+		}),
+);
+
 Promise.allSettled(requests)
 	.then((results) => {
 		const successful = results.filter(

dotcom-rendering/scripts/test-data/gen-fixtures.js

@@ -11,6 +11,15 @@ import {
 } from '@guardian/source/foundations';
 import { Stack } from '@guardian/source/react-components';
 import type { ReactNode } from 'react';
+import type {
+	Batter,
+	Bowler,
+	CricketTeam,
+	Extras,
+	FallOfWicket,
+	Innings,
+	InningsTotals,
+} from '../cricketMatch';
 import { palette } from '../palette';
 
 const borderStyle = css`
@@ -108,60 +117,7 @@ const getExtrasDescription = ({
 	</>
 );
 
-type BowlerData = {
-	name: string;
-	overs: number;
-	maidens: number;
-	runs: number;
-	wickets: number;
-	balls: number;
-};
-
-type BatterData = {
-	name: string;
-	ballsFaced: number;
-	runs: number;
-	fours: number;
-	sixes: number;
-	howOut: string;
-};
-
-type Extras = {
-	byes: number;
-	legByes: number;
-	noBalls: number;
-	penalties: number;
-	wides: number;
-};
-
-type InningsTotals = {
-	runs: number;
-	overs: string;
-	wickets: number;
-	extras: number;
-};
-
-type FallOfWicketData = {
-	order: number;
-	name: string;
-	runs: number;
-};
-
-type CricketTeam = {
-	name: string;
-	lineup: string[];
-};
-
-type InningsData = {
-	description: string;
-	bowlers: BowlerData[];
-	batters: BatterData[];
-	extras: Extras;
-	inningsTotals: InningsTotals;
-	fallOfWickets: FallOfWicketData[];
-};
-
-const Bowling = ({ bowlers }: { bowlers: BowlerData[] }) => (
+const Bowling = ({ bowlers }: { bowlers: Bowler[] }) => (
 	<table css={tableStyles}>
 		<thead>
 			<tr>
@@ -195,7 +151,7 @@ const Batting = ({
 	extras,
 	inningsTotals,
 }: {
-	batters: BatterData[];
+	batters: Batter[];
 	extras: Extras;
 	inningsTotals: InningsTotals;
 }) => (
@@ -284,7 +240,7 @@ const Batting = ({
 const FallOfWickets = ({
 	fallOfWickets,
 }: {
-	fallOfWickets: FallOfWicketData[];
+	fallOfWickets: FallOfWicket[];
 }) => (
 	<table css={tableStyles}>
 		<thead>
@@ -307,7 +263,7 @@ const FallOfWickets = ({
 );
 
 type Props = {
-	allInnings: InningsData[];
+	allInnings: Innings[];
 	officials: string[];
 	homeTeam: CricketTeam;
 	awayTeam: CricketTeam;

dotcom-rendering/src/components/CricketScorecard.tsx

@@ -0,0 +1,62 @@
+import { cricketMatchData } from '../fixtures/generated/cricket-match';
+import { parse } from './cricketMatch';
+import type { FECricketMatch } from './frontend/feCricketMatchPage';
+import { okOrThrow } from './lib/result';
+
+describe('parse', () => {
+	it('parses cricket match correctly', () => {
+		const parsedResult = okOrThrow(
+			parse(cricketMatchData.cricketMatch),
+			'Expected parsing cricket match to succeed',
+		);
+		expect(parsedResult.awayTeam.lineup.length).toBe(11);
+		expect(parsedResult.innings.length).toBe(2);
+	});
+
+	it('reverses the innings for display', () => {
+		const parsedResult = okOrThrow(
+			parse(cricketMatchData.cricketMatch),
+			'Expected parsing cricket match to succeed',
+		);
+
+		expect(parsedResult.innings[1]?.description).toBe(
+			cricketMatchData.cricketMatch.innings[0]?.description,
+		);
+
+		expect(parsedResult.innings[0]?.fallOfWickets.length).toBe(8);
+		expect(parsedResult.innings[0]?.inningsTotals.wickets).toBe(8);
+	});
+
+	it('calculates the number of wickets fallen', () => {
+		const parsedResult = okOrThrow(
+			parse(cricketMatchData.cricketMatch),
+			'Expected parsing cricket match to succeed',
+		);
+
+		expect(parsedResult.innings[0]?.fallOfWickets.length).toBe(8);
+		expect(parsedResult.innings[0]?.inningsTotals.wickets).toBe(8);
+	});
+
+	it('returns an error if home and away team cannot be determined', () => {
+		const cricketMatch: FECricketMatch = {
+			...cricketMatchData.cricketMatch,
+			teams: [
+				{
+					name: '',
+					lineup: [],
+					home: true,
+					id: '',
+				},
+				{
+					name: '',
+					lineup: [],
+					home: true,
+					id: '2',
+				},
+			],
+		};
+
+		const parsedResult = parse(cricketMatch);
+		expect(parsedResult.kind).toBe('error');
+	});
+});

dotcom-rendering/src/cricketMatch.test.ts

@@ -0,0 +1,130 @@
+import { isUndefined } from '@guardian/libs';
+import type {
+	FECricketInnings,
+	FECricketMatch,
+} from './frontend/feCricketMatchPage';
+import type { FEFootballPageConfig } from './frontend/feFootballDataPage';
+import type { EditionId } from './lib/edition';
+import { error, ok, type Result } from './lib/result';
+import type { NavType } from './model/extract-nav';
+import type { FooterType } from './types/footer';
+
+export type Bowler = {
+	name: string;
+	overs: number;
+	maidens: number;
+	runs: number;
+	wickets: number;
+	balls: number;
+};
+
+export type Batter = {
+	name: string;
+	ballsFaced: number;
+	runs: number;
+	fours: number;
+	sixes: number;
+	howOut: string;
+};
+
+export type Extras = {
+	byes: number;
+	legByes: number;
+	noBalls: number;
+	penalties: number;
+	wides: number;
+};
+
+export type InningsTotals = {
+	runs: number;
+	overs: string;
+	wickets: number;
+	extras: number;
+};
+
+export type FallOfWicket = {
+	order: number;
+	name: string;
+	runs: number;
+};
+
+export type CricketTeam = {
+	name: string;
+	lineup: string[];
+};
+
+export type Innings = {
+	description: string;
+	bowlers: Bowler[];
+	batters: Batter[];
+	extras: Extras;
+	inningsTotals: InningsTotals;
+	fallOfWickets: FallOfWicket[];
+};
+
+type CricketMatch = {
+	homeTeam: CricketTeam;
+	awayTeam: CricketTeam;
+	officials: string[];
+	innings: Innings[];
+};
+
+const feInningsToDCARInnings = (feInnings: FECricketInnings): Innings => {
+	const inningsTotals = {
+		runs: feInnings.runsScored,
+		overs: feInnings.overs,
+		wickets: feInnings.fallOfWicket.length,
+		extras: feInnings.extras,
+	};
+
+	const extras = {
+		byes: feInnings.byes,
+		legByes: feInnings.legByes,
+		noBalls: feInnings.noBalls,
+		penalties: feInnings.penalties,
+		wides: feInnings.wides,
+	};
+
+	return {
+		description: feInnings.description,
+		inningsTotals,
+		extras,
+		fallOfWickets: feInnings.fallOfWicket,
+		batters: feInnings.batters,
+		bowlers: feInnings.bowlers,
+	};
+};
+
+export const parse = (
+	feCricketMatch: FECricketMatch,
+): Result<string, CricketMatch> => {
+	const homeTeam = feCricketMatch.teams.find((team) => team.home);
+	const awayTeam = feCricketMatch.teams.find((team) => !team.home);
+
+	if (isUndefined(homeTeam) || isUndefined(awayTeam)) {
+		return error('Could not determine home and away cricket teams');
+	}
+
+	const innings = feCricketMatch.innings
+		.map(feInningsToDCARInnings)
+		.reverse();
+
+	return ok({
+		homeTeam,
+		awayTeam,
+		officials: feCricketMatch.officials,
+		innings,
+	});
+};
+
+export type CricketMatchPage = {
+	match: CricketMatch;
+	nav: NavType;
+	editionId: EditionId;
+	guardianBaseURL: string;
+	config: FEFootballPageConfig;
+	pageFooter: FooterType;
+	isAdFreeUser: boolean;
+	canonicalUrl?: string;
+	contributionsServiceUrl: string;
+};