Merge branch 'main' into al-1710-popstate

Author: akinsola-guardian

ab-testing/README.md

@@ -63,6 +63,10 @@ To add a test where there is not enough space in the default audience space (`A`
 
 For example if there are already 3 25% tests in space `A` totalling 75%, and you want to run a 50% test, you can set the `audienceSpace` to `B` to allow this test to overlap with the existing tests.
 
+### Test Status
+
+Tests can be set to `ON` or `OFF` using the `status` field. Only tests with status `ON` will be validated and deployed.
+
 ## How it works
 
 The AB testing framework uses Deno to run scripts that validate and deploy the tests. The `deno.json` file contains the tasks that can be run, such as `validate`, `deploy`, and `build`.

ab-testing/abTest.ts

@@ -19,4 +19,8 @@ import type { ABTest } from './types';
  * - 100% Test	variant		MVT 500-999
  */
 
-export const ABTests: ABTest[] = [];
+const ABTests: ABTest[] = [];
+
+const activeABtests = ABTests.filter((test) => test.status === 'ON');
+
+export { ABTests as allABTests, activeABtests };

ab-testing/frontend/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ABTests } from '../../../abTest';
+	import { allABTests, activeABtests } from '../../../abTest';
 	import Table from '$lib/components/TableFixed.svelte';
 	import AudienceBreakdown from '$lib/components/AudienceBreakdown.svelte';
 </script>
@@ -31,8 +31,8 @@
 	</p>
 </section>
 <section>
-	<AudienceBreakdown tests={ABTests} />
-	<Table tests={ABTests} />
+	<AudienceBreakdown tests={activeABtests} />
+	<Table tests={allABTests} />
 </section>
 
 <style>

ab-testing/index.ts

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

ab-testing/scripts/build/index.ts

@@ -1,10 +1,10 @@
-import { ABTests } from '../../abTest.ts';
 import { getMVTGroupsFromDictionary } from '../lib/fastly-api.ts';
 import { buildABTestGroupKeyValues } from './build-ab-tests-dict.ts';
 import { parseArgs } from 'jsr:@std/cli/parse-args';
 import { calculateAllSpaceUpdates } from './calculate-mvt-updates.ts';
 import { parseMVTValue, stringifyMVTValue } from '../lib/fastly-subfield.ts';
 import { dirname } from 'jsr:@std/path';
+import { activeABtests } from '../../abTest.ts';
 
 const flags = parseArgs(Deno.args, {
 	string: ['mvts', 'ab-tests'],
@@ -26,9 +26,9 @@ const mvtGroups = new Map(
 	}),
 );
 
-const abTestGroupKeyValues = buildABTestGroupKeyValues(ABTests);
+const abTestGroupKeyValues = buildABTestGroupKeyValues(activeABtests);
 
-const mvtIdKeyValues = calculateAllSpaceUpdates(mvtGroups, ABTests);
+const mvtIdKeyValues = calculateAllSpaceUpdates(mvtGroups, activeABtests);
 
 const mvtDictArray = Array.from(
 	mvtIdKeyValues.entries().map(([key, value]) => ({

ab-testing/scripts/validation/index.ts

@@ -1,5 +1,5 @@
-import { ABTests } from '../../abTest.ts';
 import { ABTest } from '../../types.ts';
+import { activeABtests } from '../../abTest.ts';
 import { enoughSpace } from './enoughSpace.ts';
 import { limitServerSideTests } from './limitServerSide.ts';
 import { uniqueName } from './uniqueName.ts';
@@ -19,7 +19,7 @@ function validateTests(testList: ABTest[]) {
 }
 
 try {
-	validateTests(ABTests);
+	validateTests(activeABtests);
 	console.log('AB test validations passed');
 } catch (err) {
 	const error = err as Error;

ab-testing/scripts/validation/validExpiration.ts

@@ -12,7 +12,7 @@ export function allExpirationsValid(tests: ABTest[]): boolean {
 		throw new Error(
 			`${
 				test.name
-			} has an expiration date in the past: ${expires.toISOString()}, has it expired?`,
+			} has an expiration date in the past: ${expires.toISOString()}, has it expired? If it doesn't belong to you or your team, you can set the status to OFF for now.`,
 		);
 	});
 }

dotcom-rendering/package.json

@@ -59,11 +59,11 @@
 		"@storybook/test": "8.6.14",
 		"@storybook/theming": "8.6.14",
 		"@svgr/webpack": "8.1.0",
-		"@swc/cli": "0.7.7",
-		"@swc/core": "1.11.31",
-		"@swc/jest": "0.2.38",
-		"@testing-library/dom": "10.4.0",
-		"@testing-library/jest-dom": "6.6.3",
+		"@swc/cli": "0.7.8",
+		"@swc/core": "1.13.5",
+		"@swc/jest": "0.2.39",
+		"@testing-library/dom": "10.4.1",
+		"@testing-library/jest-dom": "6.9.1",
 		"@testing-library/react": "16.3.0",
 		"@testing-library/user-event": "14.6.1",
 		"@types/body-parser": "1.19.2",

dotcom-rendering/src/client/userFeatures/user-features.ts

@@ -30,6 +30,7 @@ const refresh = async (): Promise<void> => {
 const requestNewData = async () => {
 	const authStatus = await getAuthStatus();
 	if (authStatus.kind !== 'SignedIn') {
+		// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
 		return Promise.reject('The user is not signed in');
 	}
 	return syncDataFromUserBenefitsApi(authStatus).then(persistResponse);

dotcom-rendering/src/components/Avatar.tsx

@@ -57,19 +57,17 @@ type Props = {
 	alt: string;
 	shape?: AvatarShape;
 	imageSize?: MediaSizeType;
-	isInAllBoostsTest?: boolean;
 };
 
 const decideImageWidths = (
 	imageSize: MediaSizeType,
-	isInAllBoostsTest = false,
 ): [ImageWidthType, ...ImageWidthType[]] => {
 	switch (imageSize) {
 		case 'small':
 			return [
 				{
 					breakpoint: breakpoints.mobile,
-					width: isInAllBoostsTest ? 150 : 80,
+					width: 80,
 					aspectRatio: '1:1',
 				},
 			];
@@ -144,15 +142,9 @@ const defaultImageSizes: [ImageWidthType, ...ImageWidthType[]] = [
 	{ breakpoint: breakpoints.tablet, width: 140 },
 ];
 
-export const Avatar = ({
-	src,
-	alt,
-	shape = 'round',
-	imageSize,
-	isInAllBoostsTest,
-}: Props) => {
+export const Avatar = ({ src, alt, shape = 'round', imageSize }: Props) => {
 	const imageWidths = imageSize
-		? decideImageWidths(imageSize, isInAllBoostsTest)
+		? decideImageWidths(imageSize)
 		: defaultImageSizes;
 
 	const sources = generateSources(getSourceImageUrl(src), imageWidths);