Added storybook interaction tests for football match header

Co-authored-by: James M <1166188+jamesmockett@users.noreply.github.com>

Author: marjisound

dotcom-rendering/fixtures/manual/footballMatches.ts

@@ -66,7 +66,7 @@ export const matchDayLive: FEMatchDay = {
 	},
 	awayTeam: {
 		...matchData.awayTeam,
-		score: 3,
+		score: 4,
 	},
 };
 

dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.stories.tsx

@@ -1,14 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { FootballMatchHeader as FootballMatchHeaderComponent } from './FootballMatchHeader';
+import { expect, waitFor, within } from 'storybook/test';
+import { SWRConfig } from 'swr';
 import {
 	matchDayLive,
 	matchFixture,
 	matchResult,
 } from '../../../fixtures/manual/footballMatches';
 import type { FEFootballMatchHeader } from '../../frontend/feFootballMatchHeader';
+import { FootballMatchHeader as FootballMatchHeaderComponent } from './FootballMatchHeader';
 
 const meta = {
 	component: FootballMatchHeaderComponent,
+	decorators: [
+		(Story) => (
+			// This resets the SWR cache on every story
+			<SWRConfig value={{ provider: () => new Map() }}>
+				<Story />
+			</SWRConfig>
+		),
+	],
 } satisfies Meta<typeof FootballMatchHeaderComponent>;
 
 export default meta;
@@ -49,7 +59,7 @@ export const Fixture = {
 		},
 		edition: 'UK',
 		getHeaderData: () =>
-			Promise.resolve({
+			getMockData({
 				...feHeaderData,
 				liveURL: undefined,
 				reportURL: undefined,
@@ -59,6 +69,18 @@ export const Fixture = {
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
 		),
 	},
+	play: async ({ canvasElement }) => {
+		const list = await getListElement(canvasElement);
+		const items = within(list).getAllByRole('listitem');
+		void expect(items.length).toBe(1);
+		void expect(items[0]).toHaveTextContent('Match info');
+
+		await waitFor(() => {
+			const items = within(list).getAllByRole('listitem');
+			void expect(items.length).toBe(1);
+			void expect(items[0]).toHaveTextContent('Match info');
+		});
+	},
 } satisfies Story;
 
 export const Live = {
@@ -93,16 +115,26 @@ export const Live = {
 		},
 		edition: 'EUR',
 		matchHeaderURL: new URL(
-			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/11/39/9.json',
+			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
 		),
 		refreshInterval: Fixture.args.refreshInterval,
 		getHeaderData: () =>
-			Promise.resolve({
+			getMockData({
 				...feHeaderData,
 				footballMatch: matchDayLive,
 				reportURL: undefined,
 			}),
 	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(canvas.getByLabelText('Score: 0')).toBeInTheDocument();
+		expect(canvas.getByLabelText('Score: 13')).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(canvas.getByLabelText('Score: 3')).toBeInTheDocument();
+			expect(canvas.getByLabelText('Score: 4')).toBeInTheDocument();
+		});
+	},
 } satisfies Story;
 
 export const Result = {
@@ -118,13 +150,43 @@ export const Result = {
 		},
 		edition: 'AU',
 		matchHeaderURL: new URL(
-			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/10/45/42.json',
+			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
 		),
 		refreshInterval: Fixture.args.refreshInterval,
 		getHeaderData: () =>
-			Promise.resolve({
+			getMockData({
 				...feHeaderData,
 				footballMatch: matchResult,
 			}),
 	},
+
+	play: async ({ canvasElement }) => {
+		const list = await getListElement(canvasElement);
+		const items = within(list).getAllByRole('listitem');
+		void expect(items.length).toBe(1);
+		void expect(items[0]).toHaveTextContent('Match info');
+
+		await waitFor(() => {
+			const items = within(list).getAllByRole('listitem');
+			void expect(items.length).toBe(3);
+			void expect(items[0]).toHaveTextContent('Match report');
+			void expect(items[1]).toHaveTextContent('Live feed');
+			void expect(items[2]).toHaveTextContent('Match info');
+		});
+	},
 } satisfies Story;
+
+const getListElement = async (canvasElement: HTMLElement) => {
+	const canvas = within(canvasElement);
+	const nav = await canvas.findByRole('navigation');
+	const navQueries = within(nav);
+	// Get the list element that is within a nav element
+	return await navQueries.findByRole('list');
+};
+
+const getMockData = (data: FEFootballMatchHeader) =>
+	new Promise((resolve) => {
+		setTimeout(() => {
+			resolve(data);
+		}, 1000);
+	});

dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { log } from '@guardian/libs';
 import {
 	from,
 	headlineBold20Object,
@@ -11,6 +12,8 @@ import {
 	until,
 } from '@guardian/source/foundations';
 import { type ComponentProps, type ReactNode, useMemo } from 'react';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
 import type { FootballMatch } from '../../footballMatchV2';
 import { grid } from '../../grid';
 import {
@@ -23,11 +26,8 @@ import type { ColourName } from '../../paletteDeclarations';
 import { BigNumber } from '../BigNumber';
 import { FootballCrest } from '../FootballCrest';
 import { background, border, primaryText, secondaryText } from './colours';
-import { Tabs } from './Tabs';
-import type { SWRConfiguration } from 'swr';
-import useSWR from 'swr';
 import { type HeaderData, parse as parseHeaderData } from './headerData';
-import { log } from '@guardian/libs';
+import { Tabs } from './Tabs';
 
 type Props = {
 	leagueName: string;

dotcom-rendering/src/components/FootballMatchHeader/headerData.ts

@@ -1,15 +1,15 @@
+import type { ComponentProps } from 'react';
 import { safeParse } from 'valibot';
 import {
-	parseFootballMatchV2,
 	type FootballMatch,
+	parseFootballMatchV2,
 } from '../../footballMatchV2';
-import { error, fromValibot, ok, type Result } from '../../lib/result';
 import {
-	feFootballMatchHeaderSchema,
 	type FEFootballMatchHeader,
+	feFootballMatchHeaderSchema,
 } from '../../frontend/feFootballMatchHeader';
 import { safeParseURL } from '../../lib/parse';
-import type { ComponentProps } from 'react';
+import { error, fromValibot, ok, type Result } from '../../lib/result';
 import type { Tabs } from './Tabs';
 
 export type HeaderData = {