Merging 2.3.2 into 2.4.0

blocks/medium-promo-block/features/medium-promo/default.jsx

@@ -159,7 +159,7 @@ const MediumPromo = ({ customFields }) => {
 		return null;
 	}
 
-	const hasAuthors = showByline ? content?.credits?.by && content?.credits?.by.length : null;
+	const hasAuthors = showByline ? content?.credits?.by && content?.credits?.by?.length : null;
 	const contentDescription = showDescription ? content?.description?.basic : null;
 	const contentHeading = showHeadline ? content?.headlines?.basic : null;
 	const contentUrl = content?.websites?.[arcSite]?.website_url;

blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx

@@ -85,7 +85,10 @@ const ExtraLarge = (props) => {
 	const contentHeading = showHeadlineXL ? element?.headlines?.basic : null;
 	const contentUrl = element?.websites?.[arcSite]?.website_url;
 	const embedMarkup = playVideoInPlaceXL && getVideoFromANS(element);
-	const hasAuthors = showBylineXL && element?.credits?.by.length > 0;
+	const contentAuthors =
+		showBylineXL && element?.credits?.by?.length > 0
+			? formatAuthors(element.credits.by, phrases.t("global.and-text"))
+			: null;
 	const ansImage = getImageFromANS(element);
 	const imageParams =
 		element && ansImage
@@ -107,12 +110,12 @@ const ExtraLarge = (props) => {
 		contentHeading ||
 		showImageXL ||
 		contentDescription ||
-		hasAuthors ||
+		contentAuthors ||
 		hasDate ? (
 		<>
 			<article className={BLOCK_CLASS_NAME}>
 				{hasOverline ? <Overline href={overlineUrl}>{overlineText}</Overline> : null}
-				{contentHeading || showImageXL || contentDescription || hasAuthors || hasDate ? (
+				{contentHeading || showImageXL || contentDescription || contentAuthors || hasDate ? (
 					<Stack>
 						{contentHeading ? (
 							<HeadingSection>
@@ -140,13 +143,13 @@ const ExtraLarge = (props) => {
 							</MediaItem>
 						) : null}
 						{contentDescription ? <Paragraph>{contentDescription}</Paragraph> : null}
-						{hasAuthors || hasDate ? (
+						{contentAuthors || hasDate ? (
 							<Attribution>
 								<Join separator={Separator}>
-									{hasAuthors ? (
+									{contentAuthors ? (
 										<Join separator={() => " "}>
 											{phrases.t("global.by-text")}
-											{formatAuthors(element?.credits?.by, phrases.t("global.and-text"))}
+											{contentAuthors}
 										</Join>
 									) : null}
 									{hasDate ? (

blocks/top-table-list-block/features/top-table-list/_children/extra-large.test.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import '@testing-library/jest-dom'
 import mockData from "../../../mock-data";
 
 import ExtraLarge from "./extra-large";
@@ -14,23 +15,23 @@ describe("the extra large promo feature", () => {
 	it("should return null if no show flag is true", () => {
 		const config = {};
 		const { container } = render(<ExtraLarge element={mockData} customFields={config} />);
-		expect(container.firstChild).toBeNull();
+		expect(container).toBeEmptyDOMElement();
 	});
 
 	it("should return an overline if showOverline is true", () => {
 		const config = {
 			showOverlineXL: true,
 		};
 		render(<ExtraLarge element={mockData} customFields={config} />);
-		expect(screen.queryByRole("link", { name: "Premium" })).not.toBeNull();
+		expect(screen.getByRole("link", { name: "Premium" })).not.toBeNull();
 	});
 
 	it("should return a headline if showHeadline is true", () => {
 		const config = {
 			showHeadlineXL: true,
 		};
 		render(<ExtraLarge element={mockData} customFields={config} />);
-		expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull();
+		expect(screen.getByRole("heading", { name: config.headline })).not.toBeNull();
 	});
 
 	it("should return a image if showImage is true", () => {
@@ -39,7 +40,7 @@ describe("the extra large promo feature", () => {
 			showImageXL: true,
 		};
 		render(<ExtraLarge element={mockData} customFields={config} />);
-		expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
+		expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
 	});
 
 	it("should return a fallback image if showImage is true and imageUrl is not valid", () => {
@@ -48,7 +49,7 @@ describe("the extra large promo feature", () => {
 			showImageXL: true,
 		};
 		render(<ExtraLarge element={mockData} customFields={config} />);
-		expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
+		expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
 	});
 
 	it("should return a description if showDescription is true", () => {
@@ -57,17 +58,17 @@ describe("the extra large promo feature", () => {
 		};
 		render(<ExtraLarge element={mockData} customFields={config} />);
 		expect(
-			screen.queryByText("Why does August seem hotter? Maybe it comes from weariness.")
+			screen.getByText("Why does August seem hotter? Maybe it comes from weariness.")
 		).not.toBeNull();
 	});
 
 	it("should return a byline if showByline is true", () => {
 		const config = {
 			showBylineXL: true,
 		};
-		const { getByText } = render(<ExtraLarge element={mockData} customFields={config} />);
+		render(<ExtraLarge element={mockData} customFields={config} />);
 		expect(
-			getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3")
+			screen.getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3")
 		).not.toBeNull();
 	});
 
@@ -76,7 +77,7 @@ describe("the extra large promo feature", () => {
 			showDateXL: true,
 		};
 		render(<ExtraLarge element={mockData} customFields={config} />);
-		expect(screen.queryByText("January 30, 2020", { exact: false })).not.toBeNull();
+		expect(screen.getByText("January 30, 2020", { exact: false })).not.toBeNull();
 	});
 
 	it("should returned a sponsored overline if it's sponsored content", () => {
@@ -89,7 +90,7 @@ describe("the extra large promo feature", () => {
 			showOverlineXL: true,
 		};
 		render(<ExtraLarge element={modifiedData} customFields={config} />);
-		expect(screen.queryByText("global.sponsored-content")).not.toBeNull();
+		expect(screen.getByText("global.sponsored-content")).not.toBeNull();
 	});
 
 	it("should return a video if playVideoInPlace is true and video content available", () => {
@@ -106,6 +107,6 @@ describe("the extra large promo feature", () => {
 			showImageXL: true,
 		};
 		render(<ExtraLarge element={modifiedData} customFields={config} />);
-		expect(screen.queryByText("video embed")).not.toBeNull();
+		expect(screen.getByText("video embed")).not.toBeNull();
 	});
 });

blocks/top-table-list-block/features/top-table-list/_children/medium.jsx

@@ -54,7 +54,7 @@ const Medium = (props) => {
 
 	const showBottomBorder = typeof showBottomBorderMD === "undefined" ? true : showBottomBorderMD;
 
-	const hasAuthors = showBylineMD ? element?.credits?.by && element?.credits?.by.length : null;
+	const hasAuthors = showBylineMD ? element?.credits?.by && element?.credits?.by?.length : null;
 	const contentDescription = showDescriptionMD ? element?.description?.basic : null;
 	const contentHeading = showHeadlineMD ? element?.headlines?.basic : null;
 	const contentUrl = element?.websites?.[arcSite]?.website_url;