Merge branch 'main' into use-user-benefits-abtest

Author: rupertbates

dotcom-rendering/src/components/AdSlot.web.stories.tsx

@@ -0,0 +1,105 @@
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import { remSpace, textSans14 } from '@guardian/source/foundations';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { createRoot } from 'react-dom/client';
+import {
+	centreColumnDecorator,
+	rightColumnDecorator,
+} from '../../.storybook/decorators/gridDecorators';
+import { ArticleDisplay } from '../lib/articleFormat';
+import { AdSlot } from './AdSlot.web';
+
+const meta = {
+	component: AdSlot,
+	title: 'Components/Ad Slot (web)',
+} satisfies Meta<typeof AdSlot>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const adLabelsStyles = css`
+	${textSans14}
+	padding: ${remSpace[3]};
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	p {
+		margin: 0;
+		font-size: 16px;
+		font-weight: 400;
+	}
+`;
+
+const squareAdStyles = css`
+	padding-bottom: 250px;
+	width: 300px;
+`;
+
+const bannerAdStyles = css`
+	padding-bottom: 250px;
+	width: 100%;
+`;
+
+function renderTestAd(
+	adStyles: SerializedStyles,
+	slotId = 'slot',
+): Story['play'] {
+	return async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const slot = await canvas.findByTestId(slotId);
+		const root = createRoot(slot);
+
+		root.render(
+			<aside>
+				<div css={adLabelsStyles}>
+					<p>Advertisement</p>
+				</div>
+				<div css={adStyles}></div>
+			</aside>,
+		);
+	};
+}
+
+export const Right = {
+	args: {
+		position: 'right',
+		display: ArticleDisplay.Standard,
+	},
+	decorators: [rightColumnDecorator],
+	play: renderTestAd(squareAdStyles),
+} satisfies Story;
+
+export const TopAboveNav = {
+	args: {
+		position: 'top-above-nav',
+	},
+	play: renderTestAd(bannerAdStyles),
+} satisfies Story;
+
+export const FrontsBanner = {
+	args: {
+		position: 'fronts-banner',
+		index: 1,
+	},
+	play: renderTestAd(bannerAdStyles),
+} satisfies Story;
+
+export const LiveblogInline = {
+	args: {
+		position: 'liveblog-inline',
+		index: 0,
+	},
+	decorators: [centreColumnDecorator],
+	play: renderTestAd(bannerAdStyles, 'liveblog-inline--inline1'),
+} satisfies Story;
+
+export const Merchandising = {
+	args: {
+		position: 'merchandising',
+	},
+	decorators: [centreColumnDecorator],
+	play: renderTestAd(bannerAdStyles),
+} satisfies Story;

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

@@ -397,6 +397,7 @@ export const AdSlot = ({
 								].join(' ')}
 								data-link-name="ad slot right"
 								data-name="right"
+								data-testid="slot"
 								aria-hidden="true"
 							/>
 						</div>
@@ -422,6 +423,7 @@ export const AdSlot = ({
 								].join(' ')}
 								data-link-name="ad slot right"
 								data-name="right"
+								data-testid="slot"
 								aria-hidden="true"
 							/>
 						</div>
@@ -480,6 +482,7 @@ export const AdSlot = ({
 									]}
 									data-link-name="ad slot right"
 									data-name="right"
+									data-testid="slot"
 									aria-hidden="true"
 								/>
 							</div>
@@ -504,6 +507,7 @@ export const AdSlot = ({
 						].join(' ')}
 						data-link-name="ad slot comments"
 						data-name="comments"
+						data-testid="slot"
 						aria-hidden="true"
 					/>
 				</div>
@@ -526,6 +530,7 @@ export const AdSlot = ({
 						].join(' ')}
 						data-link-name="ad slot top-above-nav"
 						data-name="top-above-nav"
+						data-testid="slot"
 						aria-hidden="true"
 					></div>
 				</div>
@@ -550,6 +555,7 @@ export const AdSlot = ({
 							css={[mostPopAdStyles]}
 							data-link-name="ad slot mostpop"
 							data-name="mostpop"
+							data-testid="slot"
 							aria-hidden="true"
 						/>
 					</div>
@@ -573,6 +579,7 @@ export const AdSlot = ({
 						data-link-name="ad slot merchandising-high"
 						data-name="merchandising-high"
 						data-refresh="false"
+						data-testid="slot"
 						aria-hidden="true"
 					/>
 				</div>
@@ -594,6 +601,7 @@ export const AdSlot = ({
 						css={[merchandisingAdStyles]}
 						data-link-name="ad slot merchandising"
 						data-name="merchandising"
+						data-testid="slot"
 						aria-hidden="true"
 					/>
 				</div>
@@ -625,6 +633,7 @@ export const AdSlot = ({
 							css={[frontsBannerAdStyles]}
 							data-link-name={`ad slot ${advertId}`}
 							data-name={`${advertId}`}
+							data-testid="slot"
 							aria-hidden="true"
 						/>
 					</div>
@@ -646,6 +655,7 @@ export const AdSlot = ({
 					data-label="false"
 					data-refresh="false"
 					data-out-of-page="true"
+					data-testid="slot"
 					aria-hidden="true"
 				/>
 			);
@@ -717,6 +727,7 @@ export const AdSlot = ({
 						css={[liveBlogTopAdStyles]}
 						data-link-name="ad slot liveblog-top"
 						data-name="liveblog-top"
+						data-testid="slot"
 						aria-hidden="true"
 					/>
 				</div>
@@ -740,6 +751,7 @@ export const AdSlot = ({
 						css={[mobileFrontAdStyles]}
 						data-link-name={`ad slot ${advertId}`}
 						data-name={advertId}
+						data-testid="slot"
 						aria-hidden="true"
 					/>
 				</div>
@@ -763,6 +775,7 @@ export const AdSlot = ({
 						data-refresh="false"
 						data-out-of-page="true"
 						data-wide="1,1"
+						data-testid="slot"
 						aria-hidden="true"
 					/>
 				</div>
@@ -782,6 +795,7 @@ export const AdSlot = ({
 						css={[articleEndAdStyles]}
 						data-link-name="ad slot article-end"
 						data-name="article-end"
+						data-testid="slot"
 						aria-hidden="true"
 					/>
 				</div>

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -449,7 +449,7 @@ export const FlexibleGeneral = ({
 	aspectRatio,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1);
-	const cards = [...groupedTrails.standard].slice(0, 8);
+	const cards = [...groupedTrails.standard].slice(0, 19);
 	const groupedCards = decideCardPositions(cards);
 
 	return (

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

@@ -1,21 +1,78 @@
 import { render } from '@testing-library/react';
-import { FrontsBannerAdSlot, MerchHighOrMobileAdSlot } from './FrontsAdSlots';
+import {
+	FrontsBannerAdSlot,
+	MerchHighAdSlot,
+	MobileAdSlot,
+} from './FrontsAdSlots';
 
-describe('MerchHighOrMobileAdSlot', () => {
+describe('MobileAdSlot', () => {
 	it("should return null if we shouldn't render ads", () => {
 		const { container } = render(
-			<MerchHighOrMobileAdSlot
+			<MobileAdSlot renderAds={false} adSlotIndex={4} />,
+		);
+
+		expect(container.innerHTML).toBe('');
+	});
+
+	it('should render ad slot if renderAds is true', () => {
+		const { container } = render(
+			<MobileAdSlot renderAds={true} adSlotIndex={4} />,
+		);
+
+		expect(container.innerHTML).not.toBe('');
+		expect(container.innerHTML).toMatch('ad slot inline');
+	});
+});
+
+describe('MerchHighAdSlot', () => {
+	it("should return null if we shouldn't render ads", () => {
+		const { container } = render(
+			<MerchHighAdSlot
 				renderAds={false}
-				index={4}
-				collectionCount={10}
 				isPaidContent={false}
-				mobileAdPositions={[]}
-				hasPageSkin={false}
+				collectionCount={4}
+			/>,
+		);
+
+		expect(container.innerHTML).toBe('');
+	});
+
+	it('should return null if front has 2 or fewer containers', () => {
+		const { container } = render(
+			<MerchHighAdSlot
+				renderAds={true}
+				isPaidContent={false}
+				collectionCount={2}
 			/>,
 		);
 
 		expect(container.innerHTML).toBe('');
 	});
+
+	it('should return null if it is paid content and front has 1 or fewer containers', () => {
+		const { container } = render(
+			<MerchHighAdSlot
+				renderAds={true}
+				isPaidContent={true}
+				collectionCount={1}
+			/>,
+		);
+
+		expect(container.innerHTML).toBe('');
+	});
+
+	it('should render the merch high slot if more than 2 containers', () => {
+		const { container } = render(
+			<MerchHighAdSlot
+				renderAds={true}
+				isPaidContent={false}
+				collectionCount={4}
+			/>,
+		);
+
+		expect(container.innerHTML).not.toBe('');
+		expect(container.innerHTML).toMatch('ad slot merchandising-high');
+	});
 });
 
 describe('FrontsBannerAdSlot', () => {
@@ -24,8 +81,7 @@ describe('FrontsBannerAdSlot', () => {
 			<FrontsBannerAdSlot
 				renderAds={false}
 				hasPageSkin={false}
-				index={2}
-				desktopAdPositions={[2, 5]}
+				adSlotIndex={2}
 			/>,
 		);
 
@@ -37,52 +93,23 @@ describe('FrontsBannerAdSlot', () => {
 			<FrontsBannerAdSlot
 				renderAds={true}
 				hasPageSkin={true}
-				index={2}
-				desktopAdPositions={[2, 5]}
+				adSlotIndex={2}
 			/>,
 		);
 
 		expect(container.innerHTML).toBe('');
 	});
 
-	test.each([
-		[[2, 5], 3],
-		[[2, 5], 0],
-		[[], 1],
-	])(
-		'should return null if desktopAdPositions %p does NOT contain index %i',
-		(adPositions, i) => {
-			const { container } = render(
-				<FrontsBannerAdSlot
-					renderAds={true}
-					hasPageSkin={false}
-					index={i}
-					desktopAdPositions={adPositions}
-				/>,
-			);
-
-			expect(container.innerHTML).toBe('');
-		},
-	);
-
-	test.each([
-		[[2, 5], 2],
-		[[2, 5], 5],
-		[[1], 1],
-	])(
-		'should NOT return null if desktopAdPositions %p contains index %i',
-		(adPositions, i) => {
-			const { container } = render(
-				<FrontsBannerAdSlot
-					renderAds={true}
-					hasPageSkin={false}
-					index={i}
-					desktopAdPositions={adPositions}
-				/>,
-			);
-
-			expect(container.innerHTML).not.toBe('');
-			expect(container.innerHTML).toMatch('ad-slot-container');
-		},
-	);
+	it('should render ad slot if there is no page skin and renderAds is true', () => {
+		const { container } = render(
+			<FrontsBannerAdSlot
+				renderAds={true}
+				hasPageSkin={false}
+				adSlotIndex={2}
+			/>,
+		);
+
+		expect(container.innerHTML).not.toBe('');
+		expect(container.innerHTML).toMatch('ad slot fronts-banner');
+	});
 });