THEMES-2015 Add editable headline, description and overline for extra…

…-large-promo-block

blocks/extra-large-promo-block/features/extra-large-promo/default.jsx

@@ -39,6 +39,7 @@ const getType = (type, content) => (content?.type === type ? content : undefined
 
 export const ExtraLargePromoPresentation = ({
 	hasOverline,
+	editableOverline,
 	contentHeading,
 	editableHeading,
 	showImage,
@@ -63,7 +64,11 @@ export const ExtraLargePromoPresentation = ({
 	hasOverline || contentHeading || showImage || contentDescription || contentAuthors || hasDate ? (
 		<LazyLoad enabled={shouldLazyLoad}>
 			<article className={BLOCK_CLASS_NAME}>
-				{hasOverline ? <Overline href={overlineUrl}>{overlineText}</Overline> : null}
+				{hasOverline ? (
+					<Overline href={overlineUrl} suppressContentEditableWarning {...editableOverline}>
+						{overlineText}
+					</Overline>
+				) : null}
 				{contentHeading ||
 				showImage ||
 				contentDescription ||
@@ -296,12 +301,21 @@ const ExtraLargePromo = ({ customFields }) => {
 
 	// Default to websites object data
 	let [overlineText, overlineUrl] = [sectionText, sectionUrl];
+	let editableOverline = content?.websites?.[arcSite]?.website_section?.name
+		? editableContent(content, `websites.${[arcSite]}.website_section.name`)
+		: {};
 
 	if (content?.owner?.sponsored) {
 		overlineText = content?.label?.basic?.text || phrases.t("global.sponsored-content");
 		overlineUrl = null;
+		editableOverline = content?.label?.basic?.text
+			? editableContent(content, "label.basic.text")
+			: {};
 	} else if (shouldUseLabel) {
 		[overlineText, overlineUrl] = [labelText, labelUrl];
+		editableOverline = content?.label?.basic?.text
+			? editableContent(content, "label.basic.text")
+			: {};
 	}
 
 	const hasOverline = showOverline && overlineText;
@@ -363,6 +377,7 @@ const ExtraLargePromo = ({ customFields }) => {
 	return (
 		<ExtraLargePromoPresentation
 			hasOverline={hasOverline}
+			editableOverline={editableOverline}
 			contentHeading={contentHeading}
 			editableHeading={editableHeading}
 			showImage={showImage}

blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

@@ -1,11 +1,13 @@
 import React from "react";
+import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { useContent } from "fusion:content";
 
 import ExtraLargePromo from "./default";
 
 import mockData from "./mock-data";
 import mockDataSponsoredVideo from "./mock-data-sponsored";
+import { useFusionContext } from "../../../../jest/mocks/context";
 
 jest.mock("@wpmedia/arc-themes-components", () => ({
 	...jest.requireActual("@wpmedia/arc-themes-components"),
@@ -22,6 +24,10 @@ jest.mock("fusion:content", () => ({
 	})),
 }));
 
+jest.mock("fusion:context", () => ({
+	useFusionContext: jest.fn(() => ({})),
+}));
+
 describe("the extra large promo feature", () => {
 	it("should return null if lazyLoad on the server and not in the admin", () => {
 		const config = {
@@ -38,11 +44,29 @@ describe("the extra large promo feature", () => {
 	});
 
 	it("should return an overline if showOverline is true", () => {
+		useContent.mockReturnValueOnce(mockDataSponsoredVideo);
+		const config = {
+			showOverline: true,
+		};
+		const { container } = render(<ExtraLargePromo customFields={config} />);
+		// screen.debug();
+		expect(screen.queryByRole("link", { name: "Sponsored" })).not.toBeNull();
+	});
+
+	it("should overline text be an editable field - using section information", () => {
+		const arcSite = "the-sun";
 		const config = {
 			showOverline: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
-		expect(screen.queryByRole("link", { name: "Premium" })).not.toBeNull();
+		// expect(container.firstChild.firstChild).toHaveAttribute("contenteditable"); // this is dependent on the HTML structure of the component. Looking for the element that is displaying the overline and confirming it has contenteditable attribute.
+		let overline = screen.getByText(mockData.websites[arcSite].website_section.name);
+		if (mockData.owner?.sponsored) {
+			overline = screen.getByText(mockData.label.basic.text);
+		}
+		console.log(overline);
+		screen.debug();
+		expect(overline).toHaveAttribute("contenteditable", "true");
 	});
 
 	it("should return a headline if showHeadline is true", () => {
@@ -73,6 +97,22 @@ describe("the extra large promo feature", () => {
 		expect(screen.queryByText(mockData.description.basic)).toHaveAttribute("contenteditable");
 	});
 
+	// it("should overline text be an editable field - using label.basic", () => {
+	// 	const { arcSite } = useFusionContext();
+	// 	const config = {
+	// 		showOverline: true,
+	// 		arcSite,
+	// 	};
+	// 	render(<ExtraLargePromo customFields={config} />);
+	// 	screen.debug();
+	// 	console.log("test");
+	// 	console.log(mockDataSponsoredVideo.label.basic.text);
+
+	// 	expect(screen.queryByText(mockDataSponsoredVideo.label.basic.text)).toHaveAttribute(
+	// 		"contenteditable",
+	// 	);
+	// });
+
 	it("should return a image if showImage is true", () => {
 		const config = {
 			imageOverrideURL: "#",