From 9e56a2138e447d960eb8a5867870943d116f48e8 Mon Sep 17 00:00:00 2001 From: Mohamed Elkarim Date: Thu, 12 Sep 2024 13:25:04 -0700 Subject: [PATCH 1/3] 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 --- .../features/medium-promo/default.jsx | 16 ++++-- .../features/medium-promo/default.test.jsx | 49 ++++++++++++++----- 2 files changed, 49 insertions(+), 16 deletions(-) diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx index 8607eed5c1..9a69a4d8a2 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 ? ( 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 ad50adcd67..5a960560c2 100644 --- 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(); - 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", () => { @@ -47,7 +48,27 @@ describe("the medium promo feature", () => { }; render(); - 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(); + + 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", () => { @@ -57,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", () => { @@ -108,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", () => { @@ -117,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(); }); @@ -125,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(); }); @@ -136,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 647bfc7a1434ad256ac91151fca166f997832e94 Mon Sep 17 00:00:00 2001 From: Mohamed Elkarim Date: Tue, 17 Sep 2024 11:31:31 -0700 Subject: [PATCH 2/3] Revert "Add editable headline and description for medium-promo-block" (#2220) Revert "Add editable headline and description for medium-promo-block (#2217)" This reverts commit 9e56a2138e447d960eb8a5867870943d116f48e8. --- .../features/medium-promo/default.jsx | 16 ++---- .../features/medium-promo/default.test.jsx | 49 +++++-------------- 2 files changed, 16 insertions(+), 49 deletions(-) diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx index 9a69a4d8a2..8607eed5c1 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 { editableContent, searchableField } = useEditableContent(); + const { searchableField } = useEditableContent(); const { dateLocalization: { language, timeZone, dateTimeFormat } = { language: "en", @@ -163,13 +163,7 @@ 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; @@ -243,7 +237,7 @@ const MediumPromo = ({ customFields }) => { ) : null} {contentHeading ? ( - + { ) : null} - {showDescription ? ( - - {contentDescription} - - ) : null} + {showDescription ? {contentDescription} : null} {hasAuthors || showDate ? ( 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 5a960560c2..ad50adcd67 100644 --- a/blocks/medium-promo-block/features/medium-promo/default.test.jsx +++ b/blocks/medium-promo-block/features/medium-promo/default.test.jsx @@ -1,5 +1,4 @@ import React from "react"; -import "@testing-library/jest-dom"; import { render, screen } from "@testing-library/react"; import { useContent } from "fusion:content"; @@ -28,18 +27,18 @@ describe("the medium promo feature", () => { jest.clearAllMocks(); }); - it("should not render if lazyLoad on the server and not in the admin", () => { + it("should return null if lazyLoad on the server and not in the admin", () => { const config = { lazyLoad: true, }; - render(); - expect(screen.queryByRole("article")).not.toBeInTheDocument(); + const { container } = render(); + expect(container.firstChild).toBe(null); }); - it("should not render if none of the show... flags are true", () => { + it("should return null if none of the show... flags are true", () => { const config = {}; - render(); - expect(screen.queryByRole("article")).not.toBeInTheDocument(); + const { container } = render(); + expect(container.firstChild).toBeNull(); }); it("should display a headline if showHeadline is true", () => { @@ -48,27 +47,7 @@ describe("the medium promo feature", () => { }; render(); - expect(screen.getByRole("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"); + expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull(); }); it("should display an image if showImage is true", () => { @@ -78,7 +57,7 @@ describe("the medium promo feature", () => { showImage: true, }; render(); - expect(screen.getByRole("img", { name: config.headline })).not.toBeNull(); + expect(screen.queryByRole("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 +108,7 @@ describe("the medium promo feature", () => { showImage: true, }; render(); - expect(screen.getByRole("img", { name: config.headline })).not.toBeNull(); + expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull(); }); it("should display a description if showDescription is true", () => { @@ -138,7 +117,7 @@ describe("the medium promo feature", () => { }; render(); expect( - screen.getByText("Why does August seem hotter? Maybe it comes from weariness."), + screen.queryByText("Why does August seem hotter? Maybe it comes from weariness."), ).not.toBeNull(); }); @@ -146,11 +125,9 @@ describe("the medium promo feature", () => { const config = { showByline: true, }; - render(); + const { getByText } = render(); expect( - screen.getByText( - "global.by-text Example Author1, Example Author2, global.and-text Example Author3", - ), + getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3"), ).not.toBeNull(); }); @@ -159,6 +136,6 @@ describe("the medium promo feature", () => { showDate: true, }; render(); - expect(screen.getByText("January 30, 2020", { exact: false })).not.toBeNull(); + expect(screen.queryByText("January 30, 2020", { exact: false })).not.toBeNull(); }); }); From 4c73cf47f5dc8ea2ff34fe2dfeae0c98b517ed13 Mon Sep 17 00:00:00 2001 From: malavikakoppula <83021791+malavikakoppula@users.noreply.github.com> Date: Tue, 17 Sep 2024 15:55:13 -0400 Subject: [PATCH 3/3] Updated to 2.5.2 version (#2227) --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 2ea7271b52..30734e9a85 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "generate:feature:feature": "hygen feature feature", "generate:intl": "node locale/scripts/generate-intl.js", "lint": "eslint --ext js --ext jsx blocks .storybook --no-error-on-unmatched-pattern", - "lint:changed-feature-branch": "eslint --max-warnings 0 --no-error-on-unmatched-pattern $(git diff --name-only origin/arc-themes-release-version-2.5.0 | grep -E \"(.js$|.jsx$)\" || echo \"no js/jsx files changed\")", + "lint:changed-feature-branch": "eslint --max-warnings 0 --no-error-on-unmatched-pattern $(git diff --name-only origin/arc-themes-release-version-2.5.2 | grep -E \"(.js$|.jsx$)\" || echo \"no js/jsx files changed\")", "lint:changed-feature-branch:fix": "npm run lint:changed-feature-branch -- --fix", "lint:fix": "npm run lint -- --fix", "lint:styles": "stylelint '**/*.scss' --formatter verbose", @@ -32,7 +32,7 @@ "-ignore-prepare": "husky install", "storybook": "storybook dev -p 6006", "test": "jest", - "test:changed-feature-branch": "jest --changedSince=origin/arc-themes-release-version-2.5.0 --coverage --passWithNoTests", + "test:changed-feature-branch": "jest --changedSince=origin/arc-themes-release-version-2.5.2 --coverage --passWithNoTests", "test:coverage": "jest --coverage", "test:watch": "npm run test -- --watch -o --coverage" }, @@ -69,7 +69,7 @@ "@stripe/stripe-js": "^2.1.9", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.0.0", - "@wpmedia/arc-themes-components": "arc-themes-release-version-2.5.0", + "@wpmedia/arc-themes-components": "arc-themes-release-version-2.5.2", "algoliasearch": "^4.20.0", "babel-jest": "^29.7.0", "babel-loader": "^9.1.3",