Add editable headline and description for medium-promo-block (#2217)

* Add editable headline and description for medium-promo-block * Added testing for editable headline and description on medium-promo-block * Removed unneeded line in medium-promo-block test file * Updated test file queries for medium-promo-block * Updated test file queries for medium-promo-block
WPMedia · Sep 12, 2024 · 9e56a21 · 9e56a21
1 parent a72c711
commit 9e56a21
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 16 deletions.
diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -35,7 +35,7 @@ const BLOCK_CLASS_NAME = "b-medium-promo";
 const MediumPromo = ({ customFields }) => {
 	const { registerSuccessEvent } = useComponentContext();
 	const { arcSite, isAdmin } = useFusionContext();
-	const { searchableField } = useEditableContent();
+	const { editableContent, searchableField } = useEditableContent();
 	const {
 		dateLocalization: { language, timeZone, dateTimeFormat } = {
 			language: "en",
@@ -163,7 +163,13 @@ const MediumPromo = ({ customFields }) => {
 
 	const hasAuthors = showByline ? content?.credits?.by && content?.credits?.by?.length : null;
 	const contentDescription = showDescription ? content?.description?.basic : null;
+	const editableDescription = content?.description
+		? editableContent(content, "description.basic")
+		: {};
 	const contentHeading = showHeadline ? content?.headlines?.basic : null;
+	const editableHeading = content?.headlines?.basic
+		? editableContent(content, "headlines.basic")
+		: {};
 	const contentUrl = content?.websites?.[arcSite]?.website_url;
 
 	const contentDate = content?.display_date;
@@ -237,7 +243,7 @@ const MediumPromo = ({ customFields }) => {
 					) : null}
 
 					{contentHeading ? (
-						<Heading>
+						<Heading suppressContentEditableWarning {...editableHeading}>
 							<Conditional
 								component={Link}
 								condition={contentUrl}
@@ -249,7 +255,11 @@ const MediumPromo = ({ customFields }) => {
 						</Heading>
 					) : null}
 
-					{showDescription ? <Paragraph>{contentDescription}</Paragraph> : null}
+					{showDescription ? (
+						<Paragraph suppressContentEditableWarning {...editableDescription}>
+							{contentDescription}
+						</Paragraph>
+					) : null}
 					{hasAuthors || showDate ? (
 						<Attribution>
 							<Join separator={Separator}>

diff --git a/blocks/medium-promo-block/features/medium-promo/default.test.jsx b/blocks/medium-promo-block/features/medium-promo/default.test.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { useContent } from "fusion:content";
 
@@ -27,18 +28,18 @@ describe("the medium promo feature", () => {
 		jest.clearAllMocks();
 	});
 
-	it("should return null if lazyLoad on the server and not in the admin", () => {
+	it("should not render if lazyLoad on the server and not in the admin", () => {
 		const config = {
 			lazyLoad: true,
 		};
-		const { container } = render(<MediumPromo customFields={config} />);
-		expect(container.firstChild).toBe(null);
+		render(<MediumPromo customFields={config} />);
+		expect(screen.queryByRole("article")).not.toBeInTheDocument();
 	});
 
-	it("should return null if none of the show... flags are true", () => {
+	it("should not render if none of the show... flags are true", () => {
 		const config = {};
-		const { container } = render(<MediumPromo customFields={config} />);
-		expect(container.firstChild).toBeNull();
+		render(<MediumPromo customFields={config} />);
+		expect(screen.queryByRole("article")).not.toBeInTheDocument();
 	});
 
 	it("should display a headline if showHeadline is true", () => {
@@ -47,7 +48,27 @@ describe("the medium promo feature", () => {
 		};
 		render(<MediumPromo customFields={config} />);
 
-		expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull();
+		expect(screen.getByRole("heading", { name: mockData.headlines.basic })).not.toBeNull();
+	});
+
+	it("should headline be an editable field", () => {
+		const config = {
+			showHeadline: true,
+		};
+		render(<MediumPromo customFields={config} />);
+
+		expect(screen.queryByRole("heading", { name: mockData.headlines.basic })).toHaveAttribute(
+			"contenteditable",
+		);
+	});
+
+	it("should description be an editable field", () => {
+		const config = {
+			showDescription: true,
+		};
+		render(<MediumPromo customFields={config} />);
+
+		expect(screen.queryByText(mockData.description.basic)).toHaveAttribute("contenteditable");
 	});
 
 	it("should display an image if showImage is true", () => {
@@ -57,7 +78,7 @@ describe("the medium promo feature", () => {
 			showImage: true,
 		};
 		render(<MediumPromo customFields={config} />);
-		expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
+		expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
 	});
 
 	it("should make a blank call to the signing-service if the image is from PhotoCenter and has an Auth value", () => {
@@ -108,7 +129,7 @@ describe("the medium promo feature", () => {
 			showImage: true,
 		};
 		render(<MediumPromo customFields={config} />);
-		expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
+		expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
 	});
 
 	it("should display a description if showDescription is true", () => {
@@ -117,17 +138,19 @@ describe("the medium promo feature", () => {
 		};
 		render(<MediumPromo 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 display a byline if showByline is true", () => {
 		const config = {
 			showByline: true,
 		};
-		const { getByText } = render(<MediumPromo customFields={config} />);
+		render(<MediumPromo 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();
 	});
 
@@ -136,6 +159,6 @@ describe("the medium promo feature", () => {
 			showDate: true,
 		};
 		render(<MediumPromo customFields={config} />);
-		expect(screen.queryByText("January 30, 2020", { exact: false })).not.toBeNull();
+		expect(screen.getByText("January 30, 2020", { exact: false })).not.toBeNull();
 	});
 });