From 39d6f7d5e44c2622e3550cdc6d938199318ca268 Mon Sep 17 00:00:00 2001 From: Gripholder Date: Thu, 12 Sep 2024 09:10:13 -0700 Subject: [PATCH 1/5] Add editable headline and description for medium-promo-block --- .../features/medium-promo/default.jsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx index 8607eed5c..9a69a4d8a 100644 --- 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 ? ( - + { ) : null} - {showDescription ? {contentDescription} : null} + {showDescription ? ( + + {contentDescription} + + ) : null} {hasAuthors || showDate ? ( From 5ff58907301cbc5994e8477d8c468477e6ff2e42 Mon Sep 17 00:00:00 2001 From: Gripholder Date: Thu, 12 Sep 2024 12:53:49 -0700 Subject: [PATCH 2/5] Added testing for editable headline and description on medium-promo-block --- .../features/medium-promo/default.test.jsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/blocks/medium-promo-block/features/medium-promo/default.test.jsx b/blocks/medium-promo-block/features/medium-promo/default.test.jsx index ad50adcd6..0c2854fbe 100644 --- a/blocks/medium-promo-block/features/medium-promo/default.test.jsx +++ b/blocks/medium-promo-block/features/medium-promo/default.test.jsx @@ -1,10 +1,12 @@ import React from "react"; +import "@testing-library/jest-dom"; import { render, screen } from "@testing-library/react"; import { useContent } from "fusion:content"; import MediumPromo from "./default"; import mockData from "./mock-data"; +import { showDescription } from "../../../extra-large-manual-promo-block/index.story"; jest.mock("@wpmedia/arc-themes-components", () => ({ ...jest.requireActual("@wpmedia/arc-themes-components"), @@ -47,7 +49,27 @@ describe("the medium promo feature", () => { }; render(); - expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull(); + expect(screen.queryByRole("heading", { name: mockData.headlines.basic })).not.toBeNull(); + }); + + it("should headline be an editable field", () => { + const config = { + showHeadline: true, + }; + render(); + + expect(screen.queryByRole("heading", { name: mockData.headlines.basic })).toHaveAttribute( + "contenteditable", + ); + }); + + it("should description be an editable field", () => { + const config = { + showDescription: true, + }; + render(); + + expect(screen.queryByText(mockData.description.basic)).toHaveAttribute("contenteditable"); }); it("should display an image if showImage is true", () => { From f1e9d6c825acc945b70b566c5ea3dd20bc615aac Mon Sep 17 00:00:00 2001 From: Gripholder Date: Thu, 12 Sep 2024 12:55:49 -0700 Subject: [PATCH 3/5] Removed unneeded line in medium-promo-block test file --- blocks/medium-promo-block/features/medium-promo/default.test.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/medium-promo-block/features/medium-promo/default.test.jsx b/blocks/medium-promo-block/features/medium-promo/default.test.jsx index 0c2854fbe..475fd71df 100644 --- a/blocks/medium-promo-block/features/medium-promo/default.test.jsx +++ b/blocks/medium-promo-block/features/medium-promo/default.test.jsx @@ -6,7 +6,6 @@ import { useContent } from "fusion:content"; import MediumPromo from "./default"; import mockData from "./mock-data"; -import { showDescription } from "../../../extra-large-manual-promo-block/index.story"; jest.mock("@wpmedia/arc-themes-components", () => ({ ...jest.requireActual("@wpmedia/arc-themes-components"), From ac7fd7c77d01e30835b28b5869c75112ae8ee715 Mon Sep 17 00:00:00 2001 From: Gripholder Date: Thu, 12 Sep 2024 13:05:35 -0700 Subject: [PATCH 4/5] Updated test file queries for medium-promo-block --- .../features/medium-promo/default.test.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/blocks/medium-promo-block/features/medium-promo/default.test.jsx b/blocks/medium-promo-block/features/medium-promo/default.test.jsx index 475fd71df..b429018cf 100644 --- a/blocks/medium-promo-block/features/medium-promo/default.test.jsx +++ b/blocks/medium-promo-block/features/medium-promo/default.test.jsx @@ -48,7 +48,7 @@ describe("the medium promo feature", () => { }; render(); - expect(screen.queryByRole("heading", { name: mockData.headlines.basic })).not.toBeNull(); + expect(screen.getByRole("heading", { name: mockData.headlines.basic })).not.toBeNull(); }); it("should headline be an editable field", () => { @@ -78,7 +78,7 @@ describe("the medium 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", () => { @@ -129,7 +129,7 @@ describe("the medium 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 display a description if showDescription is true", () => { @@ -138,7 +138,7 @@ describe("the medium 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(); }); @@ -146,9 +146,11 @@ describe("the medium promo feature", () => { const config = { showByline: true, }; - const { getByText } = render(); + render(); 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(); }); @@ -157,6 +159,6 @@ describe("the medium 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(); }); }); From 3c7ec4146869f08ef6cb2be5431f8af4a5ca4807 Mon Sep 17 00:00:00 2001 From: Gripholder Date: Thu, 12 Sep 2024 13:20:15 -0700 Subject: [PATCH 5/5] Updated test file queries for medium-promo-block --- .../features/medium-promo/default.test.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/blocks/medium-promo-block/features/medium-promo/default.test.jsx b/blocks/medium-promo-block/features/medium-promo/default.test.jsx index b429018cf..5a960560c 100644 --- a/blocks/medium-promo-block/features/medium-promo/default.test.jsx +++ b/blocks/medium-promo-block/features/medium-promo/default.test.jsx @@ -28,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(); - expect(container.firstChild).toBe(null); + render(); + 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(); - expect(container.firstChild).toBeNull(); + render(); + expect(screen.queryByRole("article")).not.toBeInTheDocument(); }); it("should display a headline if showHeadline is true", () => {