Merge pull request #15167 from guardian/dina/admin-ab-tests-CODE-route

Fix AB tests admin opt-in/opt-out `CODE` routes

Author: deedeeh

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

@@ -63,8 +63,13 @@ jobs:
       - name: Set up Node environment
         uses: ./.github/actions/setup-node-env
 
-      - name: Build UI
-        run: pnpm build
+      - name: Build UI for CODE
+        if: github.ref != 'refs/heads/main'
+        run: AB_TESTING_ENV=code pnpm build
+
+      - name: Build UI for PROD
+        if: github.ref == 'refs/heads/main'
+        run: AB_TESTING_ENV=production pnpm build
 
       - name: Save build
         uses: actions/upload-artifact@v5

ab-testing/config/abTests.ts

@@ -1,5 +1,15 @@
 import type { ABTest } from "./types.ts";
 
+/**
+ * URL for AB test opt-in/opt-out links
+ * PROD: https://www.theguardian.com/
+ * CODE: https://m.code.dev-theguardian.com/
+ */
+const hostname =
+	process.env.AB_TESTING_ENV === "code"
+		? "https://m.code.dev-theguardian.com"
+		: "https://www.theguardian.com";
+
 /**
  * Tests are defined here. They will be assigned mvt ranges based on the
  * size of the test and the number of groups, these ranges may not be contiguous.
@@ -74,4 +84,4 @@ const ABTests: ABTest[] = [
 
 const activeABtests = ABTests.filter((test) => test.status === "ON");
 
-export { ABTests as allABTests, activeABtests };
+export { ABTests as allABTests, activeABtests, hostname };

ab-testing/config/index.ts

@@ -1,4 +1,4 @@
 // this file is covered by the dotcom-rendering tsconfig.json,
 // not the one in this directory (hence no need for .ts extension)
-export { activeABtests, allABTests } from "./abTests";
+export { activeABtests, allABTests, hostname } from "./abTests";
 export type { ABTest } from "./types";

ab-testing/frontend/src/lib/components/TestVariants.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { hostname } from "@guardian/ab-testing-config";
+
 	interface Props {
 		testName: string;
 		testGroups: string[];
@@ -26,15 +28,15 @@
 					</td>
 					<td>
 						<a
-							href={`https://www.theguardian.com/ab-tests/opt-in/${testName}:${group}`}
+							href={`${hostname}/ab-tests/opt-in/${testName}:${group}`}
 							target="_blank"
 						>
 							opt in
 						</a>
 					</td>
 					<td>
 						<a
-							href={`https://www.theguardian.com/ab-tests/opt-out/${testName}:${group}`}
+							href={`${hostname}/ab-tests/opt-out/${testName}:${group}`}
 							target="_blank"
 						>
 							opt out

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

@@ -1,5 +1,9 @@
 <script lang="ts">
-	import { allABTests, activeABtests } from "@guardian/ab-testing-config";
+	import {
+		allABTests,
+		activeABtests,
+		hostname,
+	} from "@guardian/ab-testing-config";
 	import Table from "$lib/components/TableFixed.svelte";
 	import AudienceBreakdown from "$lib/components/AudienceBreakdown.svelte";
 </script>
@@ -15,7 +19,7 @@
 	</p>
 	<p>
 		AB tests are defined in <a
-			href="https://github.com/guardian/dotcom-rendering/blob/main/ab-testing/abTest.ts"
+			href="https://github.com/guardian/dotcom-rendering/blob/main/ab-testing/config/abTests.ts"
 			>guardian/dotcom-rendering</a
 		>
 	</p>
@@ -24,7 +28,7 @@
 		this will override any cookie based test assignment.
 	</p>
 	<p>
-		<a href="https://www.theguardian.com/ab-tests/opt-out"
+		<a href={`${hostname}/ab-tests/opt-out`}
 			>Use this link to opt out of all tests you've opted into</a
 		>
 	</p>

ab-testing/frontend/vite.config.ts

@@ -3,4 +3,9 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
 	plugins: [sveltekit()],
+	define: {
+		"process.env.AB_TESTING_ENV": JSON.stringify(
+			process.env.AB_TESTING_ENV || "production",
+		),
+	},
 });

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

@@ -139,7 +139,7 @@ If you want to test your changes on CODE you need to follow these steps:
 
 2. Deploy your code changes on DCR and/or Frontend to CODE as normal
 
-3. Deploy the A/B test config to CODE by deploying the `dotcom::ab-testing` riff-raff project against your branch, there will be a comment in the PR with a link to do this once the config has been validated.
+3. Deploy the A/B test config to CODE by deploying the `dotcom:ab-testing` riff-raff project against your branch, there will be a comment in the PR with a link to do this once the config has been validated.
 
 The 3rd step is crucial as Fastly buckets users into tests/cohorts and returns your A/B test participations as response headers.