Add headline test uuid to card links WIP

Author: emma-imber

dotcom-rendering/src/components/Card/Card.tsx

@@ -164,6 +164,7 @@ export type Props = {
 	headlinePosition?: 'inner' | 'outer';
 	starRatingSize?: RatingSizeType;
 	contentSpacing?: 'small' | 'large';
+	headlineTestUuid?: string;
 };
 
 const waveformWrapper = (
@@ -410,6 +411,7 @@ export const Card = ({
 	starRatingSize = 'small',
 	articleMedia,
 	contentSpacing,
+	headlineTestUuid,
 }: Props) => {
 	const ab = useAB();
 	const isInLoopClickTestControl = Boolean(
@@ -830,6 +832,7 @@ export const Card = ({
 				isExternalLink={isExternalLink}
 				isLoopAndInLoopClickTest={isLoopAndInLoopClickTest}
 				shouldRaiseZIndexForAbTest={false} // The z-index is raised in a new CardLink in the SelfHostedVideo island.
+				headlineTestUuid={headlineTestUuid}
 			/>
 			{headlinePosition === 'outer' && (
 				<div

dotcom-rendering/src/components/Card/components/CardLink.tsx

@@ -33,18 +33,21 @@ type Props = {
 	 * Refers to the AB test with name: fronts-and-curation-loop-click-through
 	 */
 	shouldRaiseZIndexForAbTest: boolean;
+	headlineTestUuid?: string;
 };
 
 const InternalLink = ({
 	linkTo,
 	headlineText,
 	dataLinkName,
 	shouldRaiseZIndexForAbTest,
+	headlineTestUuid,
 }: {
 	linkTo: string;
 	headlineText: string;
 	dataLinkName?: string;
 	shouldRaiseZIndexForAbTest: boolean;
+	headlineTestUuid?: string;
 }) => {
 	return (
 		<a
@@ -54,6 +57,9 @@ const InternalLink = ({
 				shouldRaiseZIndexForAbTest ? abTestZIndexStyles : zIndexStyles,
 			]}
 			data-link-name={dataLinkName}
+			{...(headlineTestUuid != undefined && {
+				'data-fronts-test-uuid': headlineTestUuid,
+			})}
 			aria-label={headlineText}
 		/>
 	);
@@ -64,11 +70,13 @@ const ExternalLink = ({
 	headlineText,
 	dataLinkName,
 	shouldRaiseZIndexForAbTest,
+	headlineTestUuid,
 }: {
 	linkTo: string;
 	headlineText: string;
 	dataLinkName?: string;
 	shouldRaiseZIndexForAbTest: boolean;
+	headlineTestUuid?: string;
 }) => {
 	return (
 		<a
@@ -78,6 +86,9 @@ const ExternalLink = ({
 				shouldRaiseZIndexForAbTest ? abTestZIndexStyles : zIndexStyles,
 			]}
 			data-link-name={dataLinkName}
+			{...(headlineTestUuid != undefined && {
+				'data-fronts-test-uuid': headlineTestUuid,
+			})}
 			aria-label={headlineText + ' (opens in new tab)'}
 			target="_blank"
 			rel="noreferrer"
@@ -92,6 +103,7 @@ export const CardLink = ({
 	isExternalLink,
 	isLoopAndInLoopClickTest,
 	shouldRaiseZIndexForAbTest,
+	headlineTestUuid,
 }: Props) => {
 	/**
 	 * If we are in the loop click through test, we add a unique string to the data link name
@@ -109,6 +121,7 @@ export const CardLink = ({
 					headlineText={headlineText}
 					dataLinkName={clickThroughLinkName}
 					shouldRaiseZIndexForAbTest={shouldRaiseZIndexForAbTest}
+					headlineTestUuid={headlineTestUuid}
 				/>
 			)}
 			{!isExternalLink && (
@@ -117,6 +130,7 @@ export const CardLink = ({
 					headlineText={headlineText}
 					dataLinkName={clickThroughLinkName}
 					shouldRaiseZIndexForAbTest={shouldRaiseZIndexForAbTest}
+					headlineTestUuid={headlineTestUuid}
 				/>
 			)}
 		</>

dotcom-rendering/src/components/FeatureCard.tsx

@@ -407,6 +407,7 @@ export type Props = {
 	 */
 	isImmersive?: boolean;
 	starRatingSize: RatingSizeType;
+	headlineTestUuid?: string;
 };
 
 export const FeatureCard = ({
@@ -445,6 +446,7 @@ export const FeatureCard = ({
 	isImmersive = false,
 	starRatingSize,
 	articleMedia,
+	headlineTestUuid,
 }: Props) => {
 	const ab = useAB();
 	const isInLoopClickTestControl = Boolean(
@@ -546,6 +548,7 @@ export const FeatureCard = ({
 							shouldRaiseZIndexForAbTest={
 								isLoopAndInLoopClickTestVariant
 							}
+							headlineTestUuid={headlineTestUuid}
 						/>
 					)}
 					<div css={contentStyles}>
@@ -769,6 +772,9 @@ export const FeatureCard = ({
 												shouldRaiseZIndexForAbTest={
 													isLoopAndInLoopClickTestVariant
 												}
+												headlineTestUuid={
+													headlineTestUuid
+												}
 											/>
 										)}
 

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -141,6 +141,7 @@ const ImmersiveCardLayout = ({
 					isImmersive={true}
 					starRatingSize="medium"
 					articleMedia={card.articleMedia}
+					headlineTestUuid={card.headlineTestUuid}
 				/>
 			</LI>
 		</UL>

dotcom-rendering/src/components/FrontCard.tsx

@@ -59,6 +59,7 @@ export const FrontCard = (props: Props) => {
 		starRating: trail.starRating,
 		uniqueId: trail.uniqueId,
 		webPublicationDate: trail.webPublicationDate,
+		headlineTestUuid: trail.headlineTestUuid,
 	};
 
 	return Card({ ...defaultProps, ...cardProps });

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -37,6 +37,7 @@ export type HighlightsCardProps = {
 	byline?: string;
 	isExternalLink: boolean;
 	starRating?: Rating;
+	headlineTestUuid?: string;
 };
 
 const container = css`
@@ -135,6 +136,7 @@ export const HighlightsCard = ({
 	isExternalLink,
 	starRating,
 	articleMedia,
+	headlineTestUuid,
 }: HighlightsCardProps) => {
 	const isMediaCard = isMedia(format);
 
@@ -154,6 +156,7 @@ export const HighlightsCard = ({
 					isExternalLink={isExternalLink}
 					isLoopAndInLoopClickTest={false}
 					shouldRaiseZIndexForAbTest={false}
+					headlineTestUuid={headlineTestUuid}
 				/>
 
 				<div css={[content, shouldJustifyContent && spaceBetween]}>

dotcom-rendering/src/components/ScrollableFeature.island.tsx

@@ -91,6 +91,7 @@ export const ScrollableFeature = ({
 						showQuotes={card.showQuotedHeadline}
 						starRatingSize={'small'}
 						articleMedia={card.articleMedia}
+						headlineTestUuid={card.headlineTestUuid}
 					/>
 				</ScrollableCarousel.Item>
 			))}

dotcom-rendering/src/components/StaticFeatureTwo.tsx

@@ -80,6 +80,7 @@ export const StaticFeatureTwo = ({
 							showQuotes={card.showQuotedHeadline}
 							starRatingSize={'medium'}
 							articleMedia={card.articleMedia}
+							headlineTestUuid={card.headlineTestUuid}
 						/>
 					</LI>
 				);

dotcom-rendering/src/components/SupportingContent.tsx

@@ -186,6 +186,9 @@ export const SupportingContent = ({
 								: verticalSublinkStyles,
 						]}
 						data-link-name={`sublinks | ${index + 1}`}
+						{...(subLink.headlineTestUuid != undefined && {
+							'data-fronts-test-uuid': subLink.headlineTestUuid,
+						})}
 					>
 						<FormatBoundary format={subLinkFormat}>
 							<ContainerOverrides

dotcom-rendering/src/model/enhanceCards.ts

@@ -62,6 +62,12 @@ const enhanceSupportingContent = (
 			url: decideUrl(subLink),
 			kickerText:
 				!kickerText && supportingContentIsLive ? 'Live' : kickerText,
+			// headlineTestUuid: findHeadlineTestUuid(
+			// 	subLink,
+			// 	serverSideABTests,
+			// 	isEditorialABTestingEnabled,
+			// 	pageId,
+			// ),
 		};
 	});
 };
@@ -254,6 +260,38 @@ export const decideHeadline = (
 	return variantMeta.meta.headline;
 };
 
+/**
+ * Find the UUID of a headline test if one is running on the card
+ */
+export const findHeadlineTestUuid = (
+	faciaCard: FEFrontCard,
+	serverSideABTests: Record<string, string>,
+	isEditorialABTestingEnabled: boolean,
+	pageId?: string,
+): string | undefined => {
+	const testBucket = serverSideABTests['fronts-and-curation-editorial-test'];
+
+	const activeEditorialTest = findActiveEditorialTest(
+		faciaCard.properties.tests,
+	);
+
+	if (
+		!isEditorialABTestingEnabled ||
+		isUndefined(testBucket) ||
+		!activeEditorialTest
+	) {
+		return undefined;
+	}
+
+	const testCanRunOnPage =
+		!isUndefined(pageId) &&
+		activeEditorialTest.frontsThisTestCanRunOn.includes(pageId);
+
+	if (!testCanRunOnPage) return undefined;
+
+	return activeEditorialTest.testUuid;
+};
+
 /**
  * While the first Media Atom is *not* guaranteed to be the main media,
  * it *happens to be* correct in the majority of cases.
@@ -596,5 +634,11 @@ export const enhanceCards = (
 							?.allImages[0]?.fields.altText ?? '',
 				},
 			}),
+			headlineTestUuid: findHeadlineTestUuid(
+				faciaCard,
+				serverSideABTests,
+				isEditorialABTestingEnabled,
+				pageId,
+			),
 		};
 	});