Merge remote-tracking branch 'refs/remotes/origin/jlk/new-ab-testing-definitions' into jlk/new-ab-testing-definitions

Author: i-hardy

.github/workflows/ab-testing-ui.yml

@@ -14,7 +14,7 @@ jobs:
       run:
         working-directory: ab-testing/frontend
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       # https://github.com/denoland/setup-deno#latest-stable-for-a-major
       - uses: denoland/setup-deno@v1
@@ -41,7 +41,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
           persist-credentials: false
@@ -50,7 +50,7 @@ jobs:
         uses: ./.github/actions/setup-node-env
 
       - name: Fetch build
-        uses: actions/download-artifact@v4.3.0
+        uses: actions/download-artifact@v5.0.0
         with:
           name: ui-build
           path: output/ab-tests.html

.github/workflows/chromatic-label-helper.yml

@@ -19,7 +19,7 @@ jobs:
     if: ${{ github.event.pull_request.draft == false}}
 
     steps:
-      - uses: actions/github-script@v7
+      - uses: actions/github-script@v8
         with:
           script: |
             const labels = await github.rest.issues

.github/workflows/dcr-chromatic.yml

@@ -54,7 +54,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Remove run_chromatic label
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         with:
           script: |
             await github.rest.issues.removeLabel({

.github/workflows/labeler.yml

@@ -9,7 +9,7 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v5
+      - uses: actions/labeler@v6
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           sync-labels: true # remove redundant labels after a change

ab-testing/abTest.ts

@@ -31,6 +31,7 @@ export const ABTests: ABTest[] = [
 		type: 'client',
 		audienceSize: 0 / 100,
 		groups: ['control', 'variant'],
+		shouldForceMetricsCollection: true,
 	},
 	{
 		name: 'commercial-server-side-test',
@@ -42,5 +43,6 @@ export const ABTests: ABTest[] = [
 		type: 'server',
 		audienceSize: 0 / 100,
 		groups: ['control', 'variant'],
+		shouldForceMetricsCollection: true,
 	},
 ];

ab-testing/index.ts

@@ -0,0 +1,4 @@
+// @ts-ignore - extension is required to import this as a package in DCR
+import { ABTests } from './abTest.ts';
+
+export { ABTests };

ab-testing/package.json

@@ -0,0 +1,7 @@
+{
+	"name": "@guardian/ab-testing",
+	"version": "1.0.0",
+	"description": "A/B test definitions and configuration",
+	"main": "index.ts",
+	"type": "module"
+}

ab-testing/types.ts

@@ -37,6 +37,10 @@ type ABTest = {
 	audienceSpace?: 'A' | 'B' | 'C';
 	/** Test group definition */
 	groups: string[];
+	/** Bypasses sampling to force metrics collection for this test
+	 * See DCR Metrics component for end usage
+	 */
+	shouldForceMetricsCollection?: boolean;
 };
 
 export type { ABTest, FastlyTestParams, AudienceSpace, AllSpace };

dotcom-rendering/package.json

@@ -27,6 +27,7 @@
 		"@emotion/react": "11.14.0",
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
+		"@guardian/ab-testing": "workspace:ab-testing",
 		"@guardian/braze-components": "22.2.0",
 		"@guardian/bridget": "8.7.0",
 		"@guardian/browserslist-config": "6.1.0",
@@ -37,7 +38,7 @@
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
-		"@guardian/libs": "25.2.0",
+		"@guardian/libs": "25.3.0",
 		"@guardian/ophan-tracker-js": "2.3.2",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",
@@ -46,7 +47,7 @@
 		"@guardian/support-dotcom-components": "7.7.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
-		"@sentry/browser": "10.3.0",
+		"@sentry/browser": "10.10.0",
 		"@storybook/addon-essentials": "8.6.14",
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-webpack5-compiler-swc": "3.0.0",

dotcom-rendering/src/components/Avatar.tsx

@@ -88,6 +88,7 @@ const decideImageWidths = (
 			];
 
 		case 'large':
+		case 'xlarge':
 			return [
 				{
 					breakpoint: breakpoints.mobile,