Merge pull request #15460 from guardian/jm/fix-top-article-text

fix restrict designable banner v2 article count to >= 5 articles

Author: juabara

dotcom-rendering/src/components/marketing/banners/designableBanner/v2/bannerSelectors.ts

@@ -14,6 +14,7 @@ type BuildBannerSelectorsArgs = {
 	tickerSettings?: BannerRenderProps['tickerSettings'];
 	separateArticleCount?: boolean;
 	separateArticleCountSettings?: BannerRenderProps['separateArticleCountSettings'];
+	articleCounts: BannerRenderProps['articleCounts'];
 };
 
 export const buildBannerSelectors = ({
@@ -26,6 +27,7 @@ export const buildBannerSelectors = ({
 	tickerSettings,
 	separateArticleCount,
 	separateArticleCountSettings,
+	articleCounts,
 }: BuildBannerSelectorsArgs): BannerSelectors => {
 	const copyForViewport = isTabletOrAbove
 		? content.mainContent
@@ -60,7 +62,8 @@ export const buildBannerSelectors = ({
 		!!settings.tickerStylingSettings;
 	const showArticleCount =
 		!isCollapsed &&
-		Boolean(separateArticleCountSettings ?? separateArticleCount);
+		Boolean(separateArticleCountSettings ?? separateArticleCount) &&
+		articleCounts.forTargetedWeeks >= 5;
 	const showBodyVisual = !!settings.imageSettings && !isCollapsed;
 	const showHeaderImage = !!settings.headerSettings?.headerImage;
 

dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx

@@ -233,7 +233,7 @@ describe('DesignableBanner V2', () => {
 		expect(screen.getByText('£20')).toBeInTheDocument();
 	});
 
-	it('renders article count when separateArticleCount is true', () => {
+	it('renders article count when separateArticleCount is true and >= 5 articles', () => {
 		const articleCountProps: BannerRenderProps = {
 			...mockProps,
 			separateArticleCount: true,
@@ -250,4 +250,21 @@ describe('DesignableBanner V2', () => {
 		expect(screen.getByText(/You've read/)).toBeInTheDocument();
 		expect(screen.getByText(/5/)).toBeInTheDocument();
 	});
+
+	it('does not render article count when separateArticleCount is true but user has read < 5 articles', () => {
+		const articleCountProps: BannerRenderProps = {
+			...mockProps,
+			separateArticleCount: true,
+			articleCounts: {
+				forTargetedWeeks: 4,
+				for52Weeks: 10,
+			},
+		};
+
+		render(<BannerComponent {...articleCountProps} />);
+
+		// Should not be in the document
+		expect(screen.queryByText(/You've read/)).not.toBeInTheDocument();
+		expect(screen.queryByText(/4/)).not.toBeInTheDocument();
+	});
 });

dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useDesignableBannerModel.ts

@@ -346,6 +346,7 @@ export const useDesignableBannerModel = ({
 			tickerSettings,
 			separateArticleCount,
 			separateArticleCountSettings,
+			articleCounts,
 		});
 
 		return {