WSTEAM1-1312 Run an Optimizely AA Test

src/app/legacy/components/ScrollablePromo/index.jsx

@@ -20,6 +20,7 @@ import { GridItemMediumNoMargin } from '#components/Grid';
 import useViewTracker from '#hooks/useViewTracker';
 import useClickTrackerHandler from '#hooks/useClickTrackerHandler';
 import idSanitiser from '#lib/utilities/idSanitiser';
+import { OptimizelyContext } from '@optimizely/react-sdk';
 import { ServiceContext } from '../../../contexts/ServiceContext';
 import Promo from './Promo';
 import PromoList from './PromoList';
@@ -59,10 +60,12 @@ const LabelComponent = styled.strong`
 
 const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => {
   const { script, service, dir, translations } = useContext(ServiceContext);
+  const { optimizely } = useContext(OptimizelyContext);
 
   const eventTrackingData = {
     componentName: `edoj${blockGroupIndex}`,
     format: 'CHD=edoj',
+    optimizely,
   };
 
   const viewRef = useViewTracker(eventTrackingData);

src/app/legacy/components/ScrollablePromo/index.test.jsx

@@ -78,6 +78,7 @@ describe('ScrollablePromo', () => {
       expect(viewTrackerSpy).toHaveBeenCalledWith({
         componentName: 'edoj1',
         format: 'CHD=edoj',
+        optimizely: null,
       });
     });
 
@@ -94,10 +95,12 @@ describe('ScrollablePromo', () => {
       expect(viewTrackerSpy).toHaveBeenCalledWith({
         componentName: 'edoj1',
         format: 'CHD=edoj',
+        optimizely: null,
       });
       expect(viewTrackerSpy).toHaveBeenCalledWith({
         componentName: 'edoj2',
         format: 'CHD=edoj',
+        optimizely: null,
       });
     });
 
@@ -110,6 +113,7 @@ describe('ScrollablePromo', () => {
       expect(clickTrackerSpy).toHaveBeenCalledWith({
         componentName: 'edoj1',
         format: 'CHD=edoj',
+        optimizely: null,
       });
     });
 
@@ -126,10 +130,12 @@ describe('ScrollablePromo', () => {
       expect(clickTrackerSpy).toHaveBeenCalledWith({
         componentName: 'edoj1',
         format: 'CHD=edoj',
+        optimizely: null,
       });
       expect(clickTrackerSpy).toHaveBeenCalledWith({
         componentName: 'edoj2',
         format: 'CHD=edoj',
+        optimizely: null,
       });
     });
   });

src/app/lib/config/optimizely/index.js

@@ -1,5 +1,5 @@
 export default {
-  flagId: 'ws_test_flag',
+  flagId: 'scrollable_promo',
   viewClickAttributeId: 'wsoj',
   variationMappings: {
     on: 'on',

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -41,6 +41,10 @@ import CpsRecommendations from '#containers/CpsRecommendations';
 import InlinePodcastPromo from '#containers/PodcastPromo/Inline';
 import { Article, OptimoBylineBlock } from '#app/models/types/optimo';
 
+import useOptimizelyVariation from '#app/hooks/useOptimizelyVariation';
+import OptimizelyArticleCompleteTracking from '#app/legacy/containers/OptimizelyArticleCompleteTracking';
+import OptimizelyPageViewTracking from '#app/legacy/containers/OptimizelyPageViewTracking';
+import useOptimizelyScrollDepth from '#app/hooks/useOptimizelyScrollDepth';
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
 import EmbedImages from '../../components/Embeds/EmbedImages';
@@ -133,6 +137,10 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     ...(isCPS && { pageTitle: `${atiAnalytics.pageTitle} - ${brandName}` }),
   };
 
+  const scrollablePromoVariation = useOptimizelyVariation(
+    'scrollable_promo',
+  ) as unknown as string;
+
   const componentsToRender = {
     visuallyHiddenHeadline,
     headline: headings,
@@ -166,7 +174,12 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     embedImages: EmbedImages,
     embedUploader: Uploader,
     group: gist,
-    links: (props: ComponentToRenderProps) => <ScrollablePromo {...props} />,
+    links: (props: ComponentToRenderProps) =>
+      scrollablePromoVariation === 'variation_1_aa' ? (
+        <ScrollablePromo {...props} />
+      ) : (
+        <ScrollablePromo {...props} />
+      ),
     mpu: (props: ComponentToRenderProps) =>
       allowAdvertising ? <AdContainer {...props} slotType="mpu" /> : null,
     wsoj: (props: ComponentToRenderProps) => (
@@ -197,7 +210,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   );
 
   const promoImageRawBlock = filterForBlockType(promoImageBlocks, 'rawImage');
-
   const promoImageAltText =
     promoImageAltTextBlock?.model?.blocks?.[0]?.model?.blocks?.[0]?.model?.text;
 
@@ -207,6 +219,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     showRelatedTopics && topics.length > 0 && !isTransliterated,
   );
 
+  useOptimizelyScrollDepth();
+
   return (
     <div css={styles.pageWrapper}>
       <ATIAnalytics atiData={atiData} />
@@ -282,6 +296,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
           mobileDivider={showTopics}
         />
       )}
+      <OptimizelyArticleCompleteTracking />
+      <OptimizelyPageViewTracking />
     </div>
   );
 };

src/app/pages/ArticlePage/index.test.tsx

@@ -52,6 +52,11 @@ jest.mock('#app/legacy/containers/OptimizelyArticleCompleteTracking');
 jest.mock('#app/legacy/containers/OptimizelyPageViewTracking');
 jest.mock('#app/hooks/useOptimizelyScrollDepth');
 
+jest.mock('#app/hooks/useOptimizelyVariation', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
 const input = {
   bbcOrigin: 'https://www.test.bbc.co.uk',
   id: 'c0000000000o',

src/app/pages/ArticlePage/index.tsx

@@ -2,6 +2,6 @@ import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOpti
 import ArticlePage from './ArticlePage';
 import applyBasicPageHandlers from '../utils/applyBasicPageHandlers';
 
-const ArticleWithOptimizely = withOptimizelyProvider(ArticlePage);
+const OptimizelyArticle = withOptimizelyProvider(ArticlePage);
 
-export default applyBasicPageHandlers(ArticleWithOptimizely);
+export default applyBasicPageHandlers(OptimizelyArticle);

src/app/routes/index.test.jsx

@@ -30,20 +30,6 @@ import {
 import { suppressPropWarnings } from '../legacy/psammead/psammead-test-helpers/src';
 import * as fetchDataFromBFF from './utils/fetchDataFromBFF';
 
-jest.mock('@optimizely/react-sdk', () => {
-  return {
-    setLogger: jest.fn(),
-    OptimizelyExperiment: jest.fn(),
-    createInstance: jest.fn(),
-    useDecision: jest.fn(),
-    OptimizelyProvider: ({ children }) => children,
-  };
-});
-
-jest.mock('#app/legacy/containers/OptimizelyArticleCompleteTracking');
-jest.mock('#app/legacy/containers/OptimizelyPageViewTracking');
-jest.mock('#app/hooks/useOptimizelyScrollDepth');
-
 global.performance.getEntriesByName = jest.fn(() => []);
 
 // mock pages/index.js to return a non async page component