Merge pull request #14880 from guardian/ds/force-ab-test-participation-in-development

add force participations to Local AB test participations

Author: dskamiotis

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/src/server/lib/get-abtests-from-query-params.ts

@@ -0,0 +1,54 @@
+import { isObject } from '@guardian/libs';
+import type { Handler } from 'express';
+import { logger } from './logging';
+
+type AbServerSideTestType = {
+	config: {
+		serverSideABTests?: Record<string, string>;
+	};
+};
+
+const SAFE_AB_VALUE = /^[a-zA-Z0-9_-]+$/;
+const MAX_LENGTH = 100;
+
+export const getABTestsFromQueryParams: Handler = (req, res, next) => {
+	const body = req.body as AbServerSideTestType | undefined;
+	try {
+		if (body?.config && isObject(body.config)) {
+			const { config } = req.body as AbServerSideTestType;
+			const queryParamsAb = req.query;
+			const filteredQuery: Record<string, string> = {};
+
+			for (const [key, value] of Object.entries(queryParamsAb)) {
+				if (!key.startsWith('ab-') || typeof value !== 'string') {
+					continue;
+				}
+
+				const testId = key.replace(/^ab-/, '');
+
+				if (
+					testId.length > 0 &&
+					testId.length <= MAX_LENGTH &&
+					value.length > 0 &&
+					value.length <= MAX_LENGTH &&
+					SAFE_AB_VALUE.test(testId) &&
+					SAFE_AB_VALUE.test(value)
+				) {
+					filteredQuery[testId] = value;
+				} else {
+					logger.warn(
+						`Rejected invalid AB test parameter: ${key}=${value}`,
+					);
+				}
+			}
+			config.serverSideABTests = {
+				...config.serverSideABTests,
+				...filteredQuery,
+			};
+		}
+	} catch (error) {
+		logger.error('Error processing AB test query params', error);
+		return next();
+	}
+	next();
+};

dotcom-rendering/src/server/server.dev.ts

@@ -21,6 +21,7 @@ import {
 	handleFootballMatchPage,
 	handleFootballTablesPage,
 } from './handler.sportDataPage.web';
+import { getABTestsFromQueryParams } from './lib/get-abtests-from-query-params';
 import { getContentFromURLMiddleware } from './lib/get-content-from-url';
 
 /** article URLs contain a part that looks like “2022/nov/25” */
@@ -90,6 +91,7 @@ const renderer = Router();
 // populates req.body with the content data from a production
 // URL if req.params.url is present
 renderer.use(getContentFromURLMiddleware);
+renderer.use(getABTestsFromQueryParams);
 renderer.get('/Article/*url', handleArticle);
 renderer.get('/Interactive/*url', handleInteractive);
 renderer.get('/Blocks/*url', handleBlocks);