diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx index 1d683f78d..9cc4a5d53 100644 --- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx +++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx @@ -39,9 +39,12 @@ const getType = (type, content) => (content?.type === type ? content : undefined export const ExtraLargePromoPresentation = ({ hasOverline, + editableOverline, contentHeading, + editableHeading, showImage, contentDescription, + editableDescription, hasDate, shouldLazyLoad, overlineUrl, @@ -61,7 +64,11 @@ export const ExtraLargePromoPresentation = ({ hasOverline || contentHeading || showImage || contentDescription || contentAuthors || hasDate ? (
- {hasOverline ? {overlineText} : null} + {hasOverline ? ( + + {overlineText} + + ) : null} {contentHeading || showImage || contentDescription || @@ -71,7 +78,7 @@ export const ExtraLargePromoPresentation = ({ {contentHeading ? ( - + {contentHeading} @@ -112,7 +119,11 @@ export const ExtraLargePromoPresentation = ({ )} ) : null} - {contentDescription ? {contentDescription} : null} + {contentDescription ? ( + + {contentDescription} + + ) : null} {contentAuthors || hasDate ? ( @@ -136,7 +147,7 @@ export const ExtraLargePromoPresentation = ({ const ExtraLargePromo = ({ customFields }) => { const { arcSite, isAdmin } = useFusionContext(); - const { searchableField } = useEditableContent(); + const { editableContent, searchableField } = useEditableContent(); const { dateLocalization: { language, timeZone, dateTimeFormat } = { language: "en", @@ -290,17 +301,32 @@ 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; 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 embedMarkup = playVideoInPlace && getVideoFromANS(content); const contentAuthors = @@ -351,9 +377,12 @@ const ExtraLargePromo = ({ customFields }) => { return ( { const config = { lazyLoad: true, }; - const { container } = render(); - expect(container.firstChild).toBe(null); + render(); + expect(screen.queryByTestId("extra-large-promo")).toBeNull(); }); it("should return null if no show flag is true", () => { const config = {}; - const { container } = render(); - expect(container.firstChild).toBeNull(); + render(); + expect(screen.queryByTestId("extra-large-promo")).toBeNull(); }); it("should return an overline if showOverline is true", () => { @@ -42,7 +43,28 @@ describe("the extra large promo feature", () => { showOverline: true, }; render(); - expect(screen.queryByRole("link", { name: "Premium" })).not.toBeNull(); + expect(screen.getByRole("link", { name: "Premium" })).not.toBeNull(); + }); + + it("should overline text be an editable field", () => { + const arcSite = "dagen"; // using default website + + const config = { + showOverline: true, + }; + render(); + + let overline = mockData?.websites[arcSite]?.website_section?.name; + + if (mockData.owner?.sponsored) { + overline = mockData.label.basic.text; + } else if (mockData?.label?.basic?.display) { + overline = mockData?.label?.basic?.text; + } + + if (overline) { + expect(screen.getByText(overline)).toHaveAttribute("contenteditable", "true"); + } }); it("should return a headline if showHeadline is true", () => { @@ -50,7 +72,27 @@ describe("the extra large promo feature", () => { showHeadline: true, }; render(); - expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull(); + expect(screen.getByRole("heading", { name: config.headline })).not.toBeNull(); + }); + + it("should headline be an editable field", () => { + const config = { + showHeadline: true, + }; + render(); + + expect(screen.getByRole("heading", { name: mockData.headlines.basic })).toHaveAttribute( + "contenteditable", + ); + }); + + it("should description be an editable field", () => { + const config = { + showDescription: true, + }; + render(); + + expect(screen.getByText(mockData.description.basic)).toHaveAttribute("contenteditable"); }); it("should return a image if showImage is true", () => { @@ -65,7 +107,7 @@ describe("the extra large promo feature", () => { }), }; render(); - 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", () => { @@ -74,7 +116,7 @@ describe("the extra large promo feature", () => { showImage: true, }; render(); - 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", () => { @@ -125,7 +167,7 @@ describe("the extra large promo feature", () => { }; render(); 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(); }); @@ -133,10 +175,12 @@ describe("the extra large promo feature", () => { const config = { showByline: true, }; - const { getByText } = render(); + render(); expect( - getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3"), - ).not.toBeNull(); + screen.getByText( + "global.by-text Example Author1, Example Author2, global.and-text Example Author3", + ), + ).toBeInTheDocument(); }); it("should return a byline if showDate is true", () => { @@ -144,7 +188,7 @@ describe("the extra large promo feature", () => { showDate: true, }; render(); - 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", () => { @@ -153,7 +197,7 @@ describe("the extra large promo feature", () => { showOverline: true, }; render(); - expect(screen.queryByText("Sponsored")).not.toBeNull(); + expect(screen.getByText("Sponsored")).not.toBeNull(); }); it("should return a video if playVideoInPlace is true and video content available", () => { @@ -163,6 +207,6 @@ describe("the extra large promo feature", () => { showImage: true, }; render(); - expect(screen.queryByText("video embed")).not.toBeNull(); + expect(screen.getByText("video embed")).not.toBeNull(); }); });