Merge remote-tracking branch 'origin/main' into jlk/warn-on-expired-test

Author: Jakeii

ab-testing/config/abTests.ts

@@ -24,8 +24,8 @@ const ABTests: ABTest[] = [
 		name: "commercial-prebid-v10",
 		description: "Testing Prebid.js v10 integration on DCR",
 		owners: ["[email protected]"],
-		status: "OFF",
-		expirationDate: "2025-12-10",
+		status: "ON",
+		expirationDate: "2026-01-10",
 		type: "client",
 		audienceSize: 10 / 100,
 		audienceSpace: "A",
@@ -37,26 +37,14 @@ const ABTests: ABTest[] = [
 		description:
 			"Tests whether we can get the users email, hash it and pass pd value to the userId array",
 		owners: ["[email protected]"],
-		expirationDate: `2025-12-19`,
+		expirationDate: `2026-01-15`,
 		type: "client",
-		status: "ON",
+		status: "OFF",
 		audienceSize: 10 / 100,
 		audienceSpace: "A",
 		groups: ["control", "variant"],
 		shouldForceMetricsCollection: true,
 	},
-	{
-		name: "thefilter-product-element",
-		description:
-			"A hold back test to measure uplift of the product element",
-		owners: ["[email protected]"],
-		status: "ON",
-		expirationDate: "2025-12-30",
-		type: "server",
-		audienceSize: 40 / 100,
-		groups: ["control", "variant"],
-		shouldForceMetricsCollection: false,
-	},
 	{
 		name: "commercial-user-module-uid2",
 		description:

dotcom-rendering/.storybook/preview.ts

@@ -12,13 +12,19 @@ import { Picture } from '../src/components/Picture';
 import { mockFetch } from '../src/lib/mockRESTCalls';
 import { setABTests } from '../src/lib/useAB';
 import { ConfigContextDecorator } from './decorators/configContextDecorator';
+import { sb } from 'storybook/test';
 import { Preview } from '@storybook/react-webpack5';
 import {
 	globalColourScheme,
 	globalColourSchemeDecorator,
 } from './toolbar/globalColourScheme';
 import { palette as sourcePalette } from '@guardian/source/foundations';
 
+// Set up module mocking for auth and newsletter subscription hooks
+sb.mock(import('../src/lib/useNewsletterSubscription.ts'), { spy: true });
+sb.mock(import('../src/lib/useAuthStatus.ts'), { spy: true });
+sb.mock(import('../src/lib/fetchEmail.ts'), { spy: true });
+
 // Prevent components being lazy rendered when we're taking Chromatic snapshots
 Lazy.disabled = isChromatic();
 Picture.disableLazyLoading = isChromatic();
@@ -64,6 +70,7 @@ style.appendChild(document.createTextNode(css));
 		},
 		page: {
 			ajaxUrl: 'https://api.nextgen.guardianapps.co.uk',
+			idApiUrl: 'https://idapi.theguardian.com',
 		},
 		tests: {},
 		switches: {},

dotcom-rendering/docs/development/ab-testing-in-dcr.md

@@ -255,3 +255,20 @@ These links are also in the [frontend admin](https://frontend.gutools.co.uk/anal
 -   Opt-out on PROD: `https://theguardian.com/ab-tests/opt/out`
 
 You can use the same routes on CODE.
+
+### 6. Forcing yourself into a test locally
+
+Use the opt-in and opt-out URL fragments to force yourself into or out of a test using a query parameter.
+
+When opted-in, the test will override any mvt based assignment and you'll only be in the opted-in test group.
+
+**Opt-in Example**
+
+-   Articles: `http://localhost:3030/Article/?ab-commercial-test-example=variant`
+-   Fronts: `http://localhost:3030/Front/https://www.theguardian.com/international?ab-commercial-test-example=variant`
+-   Interactives: `http://localhost:3030/Interactive/https://www.theguardian.com/global-development/ng-interactive/2022/jun/09/the-black-sea-blockade-mapping-the-impact-of-war-in-ukraine-on-the-worlds-food-supply-interactive?ab--commercial-test-example=variant`
+
+You can verify that you're in the test by checking:
+
+-   Server-side tests: `window.guardian.config.serverSideABTests` in the browser console
+-   Client-side tests: `window.guardian.modules.abTests.getParticipations()` in the browser console

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

@@ -274,7 +274,7 @@ export const matchReport: MatchReportType = {
 		shotsOff: 6,
 		corners: 10,
 		fouls: 4,
-		colours: '#ffffff',
+		colours: '#01009a',
 		crest: 'https://sport.guim.co.uk/football/crests/120/7699.png',
 	},
 	awayTeam: {

dotcom-rendering/fixtures/manual/footballTable.ts

@@ -0,0 +1,147 @@
+import { type FootballTable } from '../../src/footballTables';
+
+export const table: FootballTable = {
+	entries: [
+		{
+			position: 1,
+			team: {
+				name: 'Liverpool',
+				id: '9',
+				url: '/football/liverpool',
+			},
+			gamesPlayed: 29,
+			won: 21,
+			drawn: 7,
+			lost: 1,
+			goalsFor: 69,
+			goalsAgainst: 27,
+			goalDifference: 42,
+			points: 70,
+			results: [
+				{
+					matchId: '1',
+					self: { name: 'Liverpool', score: 1 },
+					foe: { name: 'Chelsea', score: 0 },
+				},
+				{
+					matchId: '2',
+					self: { name: 'Liverpool', score: 3 },
+					foe: { name: 'Arsenal', score: 5 },
+				},
+				{
+					matchId: '3',
+					self: { name: 'Liverpool', score: 0 },
+					foe: { name: 'West Ham', score: 0 },
+				},
+				{
+					matchId: '4',
+					self: { name: 'Liverpool', score: 8 },
+					foe: { name: 'Tottenham', score: 10 },
+				},
+				{
+					matchId: '5',
+					self: { name: 'Liverpool', score: 0 },
+					foe: { name: 'Brighton', score: 0 },
+				},
+			],
+		},
+		{
+			position: 2,
+			team: {
+				name: 'Arsenal',
+				id: '1006',
+				url: '/football/arsenal',
+			},
+			gamesPlayed: 29,
+			won: 21,
+			drawn: 10,
+			lost: 3,
+			goalsFor: 53,
+			goalsAgainst: 24,
+			goalDifference: 29,
+			points: 58,
+			results: [
+				{
+					matchId: '1',
+					self: { name: 'Arsenal', score: 4 },
+					foe: { name: 'Brighton', score: 0 },
+				},
+				{
+					matchId: '2',
+					self: { name: 'Arsenal', score: 3 },
+					foe: {
+						name: 'Manchester United',
+						score: 0,
+					},
+				},
+				{
+					matchId: '3',
+					self: { name: 'Arsenal', score: 5 },
+					foe: { name: 'West Ham', score: 0 },
+				},
+				{
+					matchId: '4',
+					self: { name: 'Arsenal', score: 9 },
+					foe: {
+						name: 'Manchester City',
+						score: 0,
+					},
+				},
+				{
+					matchId: '5',
+					self: { name: 'Arsenal', score: 0 },
+					foe: { name: 'Tottenham', score: 0 },
+				},
+			],
+		},
+		{
+			position: 3,
+			team: {
+				name: 'Nottm Forest',
+				id: '15',
+				url: '/football/nottinghamforest',
+			},
+			gamesPlayed: 29,
+			won: 16,
+			drawn: 6,
+			lost: 7,
+			goalsFor: 49,
+			goalsAgainst: 35,
+			goalDifference: 14,
+			points: 54,
+			results: [
+				{
+					matchId: '1',
+					self: { name: 'Nottm Forest', score: 4 },
+					foe: { name: 'Brighton', score: 4 },
+				},
+				{
+					matchId: '2',
+					self: { name: 'Nottm Forest', score: 0 },
+					foe: {
+						name: 'Manchester United',
+						score: 0,
+					},
+				},
+				{
+					matchId: '3',
+					self: { name: 'Nottm Forest', score: 0 },
+					foe: { name: 'West Ham', score: 7 },
+				},
+				{
+					matchId: '4',
+					self: { name: 'Nottm Forest', score: 9 },
+					foe: {
+						name: 'Manchester City',
+						score: 0,
+					},
+				},
+				{
+					matchId: '5',
+					self: { name: 'Nottm Forest', score: 10 },
+					foe: { name: 'Tottenham', score: 0 },
+				},
+			],
+		},
+	],
+};