WithABProvider

dotcom-rendering/src/web/components/BootReact.tsx

@@ -1,13 +1,11 @@
 import ReactDOM from 'react-dom';
 
 import { App } from '@root/src/web/components/App';
-import { ABProvider } from '@guardian/ab-react';
 import { tests } from '@frontend/web/experiments/ab-tests';
-import { getForcedParticipationsFromUrl } from '@frontend/web/lib/getAbUrlHash';
-import { getCypressSwitches } from '@frontend/web/experiments/cypress-switches';
 import { loadableReady } from '@loadable/component';
 import { getOphanRecordFunction } from '@root/src/web/browser/ophan/ophan';
 import { getCookie } from '@guardian/libs';
+import { WithABProvider } from './WithABProvider';
 
 type Props = {
 	CAPI: CAPIBrowserType;
@@ -27,28 +25,17 @@ export const BootReact = ({ CAPI }: Props) => {
 
 	const ophanRecord = getOphanRecordFunction();
 
-	const windowHash = window && window.location && window.location.hash;
-
-	// Get the forced switches to use for when running within cypress
-	// Is empty object if not in cypress
-	const cypressAbSwitches = getCypressSwitches();
-
 	loadableReady(() => {
 		ReactDOM.render(
-			<ABProvider
+			<WithABProvider
 				arrayOfTestObjects={tests}
-				abTestSwitches={{
-					...CAPI.config.switches,
-					...cypressAbSwitches, // by adding cypress switches below CAPI, we can override any production switch in Cypress
-				}}
+				abTestSwitches={CAPI.config.switches}
 				pageIsSensitive={CAPI.config.isSensitive}
-				mvtMaxValue={1000000}
 				mvtId={mvtId}
 				ophanRecord={ophanRecord}
-				forcedTestVariants={getForcedParticipationsFromUrl(windowHash)}
 			>
 				<App CAPI={CAPI} ophanRecord={ophanRecord} />
-			</ABProvider>,
+			</WithABProvider>,
 
 			document.getElementById('react-root'),
 		);

dotcom-rendering/src/web/components/WithABProvider.tsx

@@ -0,0 +1,42 @@
+import { CoreAPIConfig, OphanAPIConfig } from '@guardian/ab-core/dist/types';
+import { ABProvider } from '@guardian/ab-react';
+import { getCypressSwitches } from '../experiments/cypress-switches';
+import { getForcedParticipationsFromUrl } from '../lib/getAbUrlHash';
+
+type Props = {
+	arrayOfTestObjects: CoreAPIConfig['arrayOfTestObjects'];
+	abTestSwitches: CoreAPIConfig['abTestSwitches'];
+	pageIsSensitive: CoreAPIConfig['pageIsSensitive'];
+	mvtId: CoreAPIConfig['mvtId'];
+	ophanRecord: OphanAPIConfig['ophanRecord'];
+	children: JSX.Element;
+};
+export const WithABProvider = ({
+	arrayOfTestObjects,
+	abTestSwitches,
+	pageIsSensitive,
+	mvtId,
+	ophanRecord,
+	children,
+}: Props) => {
+	const windowHash = window?.location.hash;
+	// Get the forced switches to use for when running within cypress
+	// Is empty object if not in cypress
+	const cypressAbSwitches = getCypressSwitches();
+	return (
+		<ABProvider
+			arrayOfTestObjects={arrayOfTestObjects}
+			abTestSwitches={{
+				...abTestSwitches,
+				...cypressAbSwitches, // by adding cypress switches below CAPI, we can override any production switch in Cypress
+			}}
+			pageIsSensitive={pageIsSensitive}
+			mvtMaxValue={1000000}
+			mvtId={mvtId}
+			ophanRecord={ophanRecord}
+			forcedTestVariants={getForcedParticipationsFromUrl(windowHash)}
+		>
+			{children}
+		</ABProvider>
+	);
+};