Create AllBoosts AB test

Author: domlander

dotcom-rendering/src/components/DecideContainer.tsx

@@ -46,6 +46,7 @@ type Props = {
 	sectionId: string;
 	frontId?: string;
 	collectionId: number;
+	isInAllBoostsTest?: boolean;
 	containerLevel?: DCRContainerLevel;
 	isInHideTrailsAbTest?: boolean;
 };
@@ -62,9 +63,38 @@ export const DecideContainer = ({
 	sectionId,
 	frontId,
 	collectionId,
+	isInAllBoostsTest,
 	containerLevel,
 	isInHideTrailsAbTest,
 }: Props) => {
+	if (isInAllBoostsTest) {
+		return (
+			<FlexibleGeneral
+				groupedTrails={
+					containerType === 'flexible/general' ||
+					containerType === 'flexible/special'
+						? groupedTrails
+						: {
+								snap: [],
+								huge: [],
+								veryBig: [],
+								big: [],
+								splash: [],
+								standard: trails,
+						  }
+				}
+				absoluteServerTimes={absoluteServerTimes}
+				aspectRatio={aspectRatio}
+				collectionId={collectionId}
+				containerLevel={containerLevel}
+				containerPalette={containerPalette}
+				imageLoading={imageLoading}
+				isInHideTrailsAbTest={!!isInHideTrailsAbTest}
+				showAge={showAge}
+			/>
+		);
+	}
+
 	switch (containerType) {
 		case 'dynamic/fast':
 			return (

dotcom-rendering/src/components/FlexibleGeneral.test.tsx

@@ -14,21 +14,24 @@ const boostedCard = {
 
 describe('FlexibleGeneral', () => {
 	it('Should return a one card half width row layout if one standard card is provided', () => {
-		expect(decideCardPositions([standardCard])).toEqual([
+		expect(decideCardPositions([standardCard], false)).toEqual([
 			{
 				layout: 'oneCardHalfWidth',
 				cards: [standardCard],
 			},
 		]);
 	});
 	it('Should return a one card full width row layout if one boosted card is provided', () => {
-		expect(decideCardPositions([boostedCard])).toEqual([
+		expect(decideCardPositions([boostedCard], false)).toEqual([
 			{ layout: 'oneCardFullWidth', cards: [boostedCard] },
 		]);
 	});
 	it('Should return a one card full width row layout if one immersive card is provided', () => {
 		expect(
-			decideCardPositions([{ ...standardCard, isImmersive: true }]),
+			decideCardPositions(
+				[{ ...standardCard, isImmersive: true }],
+				false,
+			),
 		).toEqual([
 			{
 				layout: 'oneCardFullWidth',
@@ -37,17 +40,17 @@ describe('FlexibleGeneral', () => {
 		]);
 	});
 	it('Should return a two card row layout if two standard cards are provided', () => {
-		expect(decideCardPositions([standardCard, standardCard])).toEqual([
-			{ layout: 'twoCard', cards: [standardCard, standardCard] },
-		]);
+		expect(
+			decideCardPositions([standardCard, standardCard], false),
+		).toEqual([{ layout: 'twoCard', cards: [standardCard, standardCard] }]);
 	});
 
 	it('Should return a one card half width row layout if one card without boost level is provided', () => {
 		const cardWithoutBoostLevel = {
 			...standardCard,
 			boostLevel: undefined,
 		};
-		expect(decideCardPositions([cardWithoutBoostLevel])).toEqual([
+		expect(decideCardPositions([cardWithoutBoostLevel], false)).toEqual([
 			{
 				layout: 'oneCardHalfWidth',
 				cards: [cardWithoutBoostLevel],
@@ -57,12 +60,10 @@ describe('FlexibleGeneral', () => {
 
 	it('Should return two rows of two card row layouts if four standard cards are provided', () => {
 		expect(
-			decideCardPositions([
-				standardCard,
-				standardCard,
-				standardCard,
-				standardCard,
-			]),
+			decideCardPositions(
+				[standardCard, standardCard, standardCard, standardCard],
+				false,
+			),
 		).toEqual([
 			{ layout: 'twoCard', cards: [standardCard, standardCard] },
 			{ layout: 'twoCard', cards: [standardCard, standardCard] },
@@ -71,12 +72,10 @@ describe('FlexibleGeneral', () => {
 
 	it('Should return three rows of expected row layouts if a boosted card and three standard cards are provided', () => {
 		expect(
-			decideCardPositions([
-				boostedCard,
-				standardCard,
-				standardCard,
-				standardCard,
-			]),
+			decideCardPositions(
+				[boostedCard, standardCard, standardCard, standardCard],
+				false,
+			),
 		).toEqual([
 			{ layout: 'oneCardFullWidth', cards: [boostedCard] },
 			{ layout: 'twoCard', cards: [standardCard, standardCard] },
@@ -86,12 +85,10 @@ describe('FlexibleGeneral', () => {
 
 	it('Should return three rows of expected row layouts if a standard, then boosted card and two standard cards are provided', () => {
 		expect(
-			decideCardPositions([
-				standardCard,
-				boostedCard,
-				standardCard,
-				standardCard,
-			]),
+			decideCardPositions(
+				[standardCard, boostedCard, standardCard, standardCard],
+				false,
+			),
 		).toEqual([
 			{ layout: 'oneCardHalfWidth', cards: [standardCard] },
 			{ layout: 'oneCardFullWidth', cards: [boostedCard] },

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -33,6 +33,7 @@ type Props = {
 	containerLevel?: DCRContainerLevel;
 	collectionId: number;
 	isInHideTrailsAbTest?: boolean;
+	isInAllBoostsTest?: boolean;
 };
 
 type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -43,7 +44,10 @@ type GroupedRow = {
 };
 type GroupedCards = GroupedRow[];
 
-export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => {
+export const decideCardPositions = (
+	cards: DCRFrontCard[],
+	isInAllBoostsTest: boolean,
+): GroupedCards => {
 	const createNewRow = (
 		layout: RowLayout,
 		card: DCRFrontCard,
@@ -61,7 +65,8 @@ export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => {
 		// Early return if the card is boosted or immersive since it takes up a whole row
 		if (
 			card.isImmersive ||
-			(card.boostLevel && card.boostLevel !== 'default')
+			!!(card.boostLevel && card.boostLevel !== 'default') ||
+			isInAllBoostsTest
 		) {
 			return [...acc, createNewRow('oneCardFullWidth', card)];
 		}
@@ -595,6 +600,7 @@ export const FlexibleGeneral = ({
 	imageLoading,
 	aspectRatio,
 	containerLevel = 'Primary',
+	isInAllBoostsTest = false,
 	collectionId,
 	isInHideTrailsAbTest,
 }: Props) => {
@@ -610,7 +616,7 @@ export const FlexibleGeneral = ({
 			uniqueId: `collection-${collectionId}-standard-${i}`,
 		}));
 
-	const groupedCards = decideCardPositions(cards);
+	const groupedCards = decideCardPositions(cards, isInAllBoostsTest);
 
 	return (
 		<>

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -590,6 +590,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 									}
 									sectionId={ophanName}
 									collectionId={index + 1}
+									isInAllBoostsTest={
+										front.isNetworkFront &&
+										abTests.allBoostsVariant === 'variant'
+									}
 									containerLevel={collection.containerLevel}
 									isInHideTrailsAbTest={
 										front.isNetworkFront &&