Fix persisting of forced ab test to localstorage (#1658)

.changeset/curvy-ads-scream.md

@@ -0,0 +1,5 @@
+---
+'@guardian/commercial': minor
+---
+
+Fix persisting of forced ab tests to localstorage

docs/ab-testing/readme.md

@@ -4,17 +4,17 @@
 
 ### Setup
 
-1. Follow steps 1-6 in [the DCR documentation](https://github.com/guardian/frontend/blob/main/common/app/conf/switches/ABTestSwitches.scala)
-1. Create a test in [src/experiments/tests](https://github.com/guardian/commercial-core/blob/main/src/experiments/tests)
-1. Add the test to [concurrent tests](https://github.com/guardian/commercial-core/blob/main/src/experiments/ab-tests.ts)
+1. Follow steps 1-6 in [the DCR documentation](https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/docs/development/ab-testing-in-dcr.md)
+1. Create a test in [src/experiments/tests](https://github.com/guardian/commercial/blob/main/src/experiments/tests)
+1. Add the test to [concurrent tests](https://github.com/guardian/commercial/blob/main/src/experiments/ab-tests.ts)
 
 ### Example usage
 
 ```ts
-import { isInVariantSynchronous } from 'experiments/ab';
+import { isUserInVariant } from 'experiments/ab';
 import { sectionAdDensity } from 'experiments/tests/section-ad-density';
 
-const isInVariant = isInVariantSynchronous(sectionAdDensity, 'variant');
+const isInVariant = isUserInVariant(sectionAdDensity, 'variant');
 ```
 
 ### How to test
@@ -23,6 +23,8 @@ Use the URL opt-in link to force yourself into a particular variant, e.g. `http:
 
 If you test has multiple variants, you can test each one by updating the `yourVariant` part of the above URL.
 
+To remove yourself from the test unset the varaint e.g. `http://localhost:3030/Front/https://www.theguardian.com/uk#ab-yourTest=`
+
 ## Server-side tests
 
 ### Setup

src/core/lib/ab-localstorage.ts

@@ -19,3 +19,9 @@ export const getParticipationsFromLocalStorage = (): Participations => {
 	const participations = storage.local.get(participationsKey);
 	return isParticipations(participations) ? participations : {};
 };
+
+export const setParticipationsInLocalStorage = (
+	participations: Participations,
+): void => {
+	storage.local.set(participationsKey, participations);
+};

src/experiments/ab-url.ts

@@ -6,12 +6,18 @@ export const getForcedParticipationsFromUrl = (): Participations => {
 
 		return tokens.reduce((obj, token) => {
 			const [testId, variantId] = token.split('=');
-			if (testId && variantId) {
+			if (testId) {
+				if (variantId) {
+					return {
+						...obj,
+						[testId]: {
+							variant: variantId,
+						},
+					};
+				}
 				return {
 					...obj,
-					[testId]: {
-						variant: variantId,
-					},
+					[testId]: undefined,
 				};
 			}
 			return obj;

src/experiments/ab.ts

@@ -1,6 +1,10 @@
 import type { ABTest } from '@guardian/ab-core';
 import { AB } from '@guardian/ab-core';
 import { getCookie, log } from '@guardian/libs';
+import {
+	getParticipationsFromLocalStorage,
+	setParticipationsInLocalStorage,
+} from '../core/lib/ab-localstorage';
 import { concurrentTests } from './ab-tests';
 import { getForcedParticipationsFromUrl } from './ab-url';
 
@@ -71,13 +75,20 @@ const abTestSwitches = Object.entries(window.guardian.config.switches).reduce(
 );
 
 const init = () => {
+	const forcedTestVariants = {
+		...getParticipationsFromLocalStorage(),
+		...getForcedParticipationsFromUrl(),
+	};
+
+	setParticipationsInLocalStorage(forcedTestVariants);
+
 	const ab = new AB({
 		mvtId: mvtId ?? -1,
 		mvtMaxValue,
 		pageIsSensitive: window.guardian.config.page.isSensitive,
 		abTestSwitches,
 		arrayOfTestObjects: concurrentTests,
-		forcedTestVariants: getForcedParticipationsFromUrl(),
+		forcedTestVariants,
 		ophanRecord: getOphan().record,
 		serverSideTests: window.guardian.config.tests ?? {},
 		errorReporter: (error) => {