diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 4abf9622847..49a7c4a1dff 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -65,8 +65,7 @@ import { ComponentToRenderProps, TimeStampProps } from './types';
import AmpExperiment from '../../components/AmpExperiment';
import {
experimentTopStoriesConfig,
- enableExperimentTopStories,
- insertExperimentTopStories,
+ getExperimentTopStoriesBlocks,
ExperimentTopStories,
} from './experimentTopStories/helpers';
@@ -139,18 +138,14 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
};
const topStoriesContent = pageData?.secondaryColumn?.topStories;
- const shouldEnableExperimentTopStories =
- enableExperimentTopStories({
+ const { shouldEnableExperimentTopStories, transformedBlocks } =
+ getExperimentTopStoriesBlocks({
+ blocks,
+ topStoriesContent,
isAmp,
service,
id,
- }) && topStoriesContent;
- const blocksWithExperimentTopStories = shouldEnableExperimentTopStories
- ? insertExperimentTopStories({
- blocks,
- topStoriesContent,
- })
- : blocks;
+ });
const componentsToRender = {
visuallyHiddenHeadline,
@@ -196,7 +191,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
),
podcastPromo: () => (podcastPromoEnabled ? : null),
experimentTopStories: () =>
- shouldEnableExperimentTopStories ? (
+ topStoriesContent ? (
) : null,
};
@@ -208,8 +203,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
};
const articleBlocks = startsWithHeading
- ? blocksWithExperimentTopStories
- : [visuallyHiddenBlock, ...blocksWithExperimentTopStories];
+ ? transformedBlocks
+ : [visuallyHiddenBlock, ...transformedBlocks];
const promoImageBlocks =
pageData?.promo?.images?.defaultPromoImage?.blocks ?? [];
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 6faf3102ac6..2c13bee5724 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -1,57 +1,60 @@
-import {
- enableExperimentTopStories,
- insertExperimentTopStories,
-} from './helpers';
+import { getExperimentTopStoriesBlocks } from './helpers';
import { topStoriesList } from '../PagePromoSections/TopStoriesSection/fixture/index';
describe('AMP top stories experiment', () => {
- describe('enableExperimentTopStories()', () => {
- it('should return true if props match conditions.', () => {
- expect(
- enableExperimentTopStories({
+ const mockTextBlock = {
+ type: 'text',
+ model: {
+ blocks: [],
+ },
+ };
+ const expectedExperimentTopStoriesBlock = {
+ type: 'experimentTopStories',
+ model: topStoriesList,
+ id: 'experimentTopStories-1',
+ };
+
+ const blocksEvenLength = [mockTextBlock, mockTextBlock];
+ const blocksOddLength = [mockTextBlock, mockTextBlock, mockTextBlock];
+
+ describe('getExperimentTopStoriesBlocks()', () => {
+ it('returns shouldEnableExperimentTopStories as true if props match conditions.', () => {
+ const { shouldEnableExperimentTopStories } =
+ getExperimentTopStoriesBlocks({
+ blocks: blocksEvenLength,
+ topStoriesContent: topStoriesList,
isAmp: true,
id: 'c6v11qzyv8po',
service: 'news',
- }),
- ).toBe(true);
+ });
+ expect(shouldEnableExperimentTopStories).toBe(true);
});
it.each`
- testDescription | isAmp | pathname | service
- ${'all props are undefined'} | ${false} | ${undefined} | ${undefined}
- ${'only isAmp is true'} | ${true} | ${undefined} | ${undefined}
- ${'only pathname is undefined'} | ${true} | ${undefined} | ${'news'}
- ${'only pathname is defined and valid'} | ${false} | ${'/news/articles/c6v11qzyv8po.amp'} | ${undefined}
- ${'all props defined but pathname is invalid'} | ${false} | ${'/news/articles/c1231qzyv8po.amp'} | ${undefined}
- ${'only service is undefined'} | ${true} | ${'/news/articles/c6v11qzyv8po.amp'} | ${undefined}
- ${'only service is defined and valid'} | ${false} | ${undefined} | ${'news'}
- ${'all props defined but service is invalid'} | ${true} | ${'/news/articles/c6v11qzyv8po.amp'} | ${'igbo'}
- `('should return false if $testDescription.', ({ isAmp, id, service }) => {
- expect(
- enableExperimentTopStories({
- isAmp,
- id,
- service,
- }),
- ).toBe(false);
- });
- });
+ testDescription | isAmp | id | service
+ ${'all props are undefined'} | ${false} | ${undefined} | ${undefined}
+ ${'only isAmp is true'} | ${true} | ${undefined} | ${undefined}
+ ${'only pathname is undefined'} | ${true} | ${undefined} | ${'news'}
+ ${'only pathname is defined and valid'} | ${false} | ${'c6v11qzyv8po'} | ${undefined}
+ ${'all props defined but pathname is invalid'} | ${false} | ${'c1231qzyv8po'} | ${undefined}
+ ${'only service is undefined'} | ${true} | ${'c6v11qzyv8po'} | ${undefined}
+ ${'only service is defined and valid'} | ${false} | ${undefined} | ${'news'}
+ ${'all props defined but service is invalid'} | ${true} | ${'c6v11qzyv8po'} | ${'igbo'}
+ `(
+ 'returns shouldEnableExperimentTopStories as false because $testDescription.',
+ ({ isAmp, id, service }) => {
+ const { shouldEnableExperimentTopStories } =
+ getExperimentTopStoriesBlocks({
+ blocks: blocksEvenLength,
+ topStoriesContent: topStoriesList,
+ isAmp,
+ id,
+ service,
+ });
- describe('insertExperimentTopStories()', () => {
- const mockTextBlock = {
- type: 'text',
- model: {
- blocks: [],
+ expect(shouldEnableExperimentTopStories).toBe(false);
},
- };
- const expectedExperimentTopStoriesBlock = {
- type: 'experimentTopStories',
- model: topStoriesList,
- id: 'experimentTopStories-1',
- };
-
- const blocksEvenLength = [mockTextBlock, mockTextBlock];
- const blocksOddLength = [mockTextBlock, mockTextBlock, mockTextBlock];
+ );
const expectedBlocksEvenLength = [
mockTextBlock,
@@ -72,12 +75,14 @@ describe('AMP top stories experiment', () => {
`(
'should insert experimentTopStories block into blocks array in the correct position when blocks.length is $testType',
({ inputBlocks, expectedOutput }) => {
- expect(
- insertExperimentTopStories({
- blocks: inputBlocks,
- topStoriesContent: topStoriesList,
- }),
- ).toEqual(expectedOutput);
+ const { transformedBlocks } = getExperimentTopStoriesBlocks({
+ blocks: inputBlocks,
+ topStoriesContent: topStoriesList,
+ isAmp: true,
+ id: 'c6v11qzyv8po',
+ service: 'news',
+ });
+ expect(transformedBlocks).toEqual(expectedOutput);
},
);
});
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index a5e1ea10e1e..04c8dda5895 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -14,16 +14,18 @@ export const experimentTopStoriesConfig = {
},
};
-export const enableExperimentTopStories = ({
+const enableExperimentTopStories = ({
+ topStoriesContent,
isAmp,
service,
id,
}: {
+ topStoriesContent: TopStoryItem[] | undefined;
isAmp: boolean;
service: string;
id: string | null;
}) => {
- if (!isAmp || !service || !id) return false;
+ if (!topStoriesContent || !isAmp || !service || !id) return false;
const newsTestAsset = 'c6v11qzyv8po';
const newsAsset = 'cz7xywn940ro';
const sportAsset = 'cpgw0xjmpd3o';
@@ -38,7 +40,7 @@ export const enableExperimentTopStories = ({
);
};
-export const insertExperimentTopStories = ({
+const insertExperimentTopStories = ({
blocks,
topStoriesContent,
}: {
@@ -57,6 +59,43 @@ export const insertExperimentTopStories = ({
return blocksClone;
};
+export const getExperimentTopStoriesBlocks = ({
+ blocks,
+ topStoriesContent,
+ isAmp,
+ service,
+ id,
+}: {
+ blocks: OptimoBlock[];
+ topStoriesContent: TopStoryItem[] | undefined;
+ isAmp: boolean;
+ service: string;
+ id: string | null;
+}) => {
+ if (!topStoriesContent)
+ return {
+ transformedBlocks: blocks,
+ shouldEnableExperimentTopStories: false,
+ };
+
+ const shouldEnableExperimentTopStories = enableExperimentTopStories({
+ topStoriesContent,
+ isAmp,
+ service,
+ id,
+ });
+
+ const transformedBlocks = insertExperimentTopStories({
+ blocks,
+ topStoriesContent,
+ });
+
+ return {
+ transformedBlocks,
+ shouldEnableExperimentTopStories,
+ };
+};
+
export const ExperimentTopStories = ({
topStoriesContent,
}: {