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 1/6] 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 2ea7271b5..30734e9a8 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", From 0cf279b67cec829b0898308db79417aa77974de6 Mon Sep 17 00:00:00 2001 From: blakeganderson <85515364+blakeganderson@users.noreply.github.com> Date: Fri, 1 Nov 2024 16:18:42 -0400 Subject: [PATCH 2/6] updated small promo to make the headline editable (#2248) --- .prettierrc | 4 ++-- blocks/small-promo-block/features/small-promo/default.jsx | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/.prettierrc b/.prettierrc index f7b00e972..9d6346b28 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { "useTabs": true, "printWidth": 100, - experimentalTernaries: false, -} + "experimentalTernaries": false +} \ No newline at end of file diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx index 7bc6e985d..bced08732 100644 --- a/blocks/small-promo-block/features/small-promo/default.jsx +++ b/blocks/small-promo-block/features/small-promo/default.jsx @@ -35,7 +35,7 @@ const SmallPromo = ({ customFields }) => { } = customFields; const { registerSuccessEvent } = useComponentContext(); const { arcSite, isAdmin } = useFusionContext(); - const { searchableField } = useEditableContent(); + const { editableContent, searchableField } = useEditableContent(); const shouldLazyLoad = lazyLoad && !isAdmin; const content = @@ -171,9 +171,12 @@ const SmallPromo = ({ customFields }) => { ) : null; + const editableItem = + content?.headlines ? editableContent(content, "headlines.basic") : {}; + const promoHeading = showHeadline && headline ? ( - + Date: Fri, 1 Nov 2024 16:26:32 -0400 Subject: [PATCH 3/6] Themes 2013 (#2247) * 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 --------- Co-authored-by: Gripholder --- .../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 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 ? ( 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..5a960560c 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 026e20b8f77972923f0a7c16e1aa46a5474222ee Mon Sep 17 00:00:00 2001 From: malavikakoppula <83021791+malavikakoppula@users.noreply.github.com> Date: Fri, 1 Nov 2024 16:30:54 -0400 Subject: [PATCH 4/6] [Themes 2014] Inline Editing | Large Promo Block (#2204) * Added editableContent to heading * Fixed tests * Removed editable * Added editingContent to overline * updated overline --------- Co-authored-by: Blake Anderson Co-authored-by: blakeganderson <85515364+blakeganderson@users.noreply.github.com> --- .../features/large-promo/default.jsx | 35 ++++++++++- .../features/large-promo/default.test.jsx | 63 ++++++++++--------- 2 files changed, 65 insertions(+), 33 deletions(-) diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx index 45b716349..6e28a563f 100644 --- a/blocks/large-promo-block/features/large-promo/default.jsx +++ b/blocks/large-promo-block/features/large-promo/default.jsx @@ -49,6 +49,8 @@ export const LargePromoPresentation = ({ contentUrl, displayDate, editableDescription, + editableHeading, + editableOverline, embedMarkup, labelIconName, labelIconText, @@ -111,12 +113,18 @@ export const LargePromoPresentation = ({ contentDate ? ( {contentOverline ? ( - {contentOverline} + + {contentOverline} + ) : null} {contentHeading || contentDescription || contentAuthors || contentDate ? ( {contentHeading ? ( - + { : ""; const phrases = usePhrases(); + const editableHeading = content?.headlines ? editableContent(content, "headlines.basic") : {}; + const editableDescription = content?.description ? editableContent(content, "description.basic") : {}; @@ -328,6 +338,25 @@ const LargePromoItem = ({ customFields, arcSite }) => { content?.websites?.[arcSite]?.website_section || {}; let [overlineText, overlineURL] = [sectionText, sectionUrl]; + const shouldUseLabel = !!labelDisplay; + + 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") + : {}; + } + if (content?.owner?.sponsored) { overlineText = content?.label?.basic?.text || phrases.t("global.sponsored-content"); overlineURL = null; @@ -380,6 +409,8 @@ const LargePromoItem = ({ customFields, arcSite }) => { contentUrl={contentUrl} displayDate={displayDate} editableDescription={editableDescription} + editableHeading={editableHeading} + editableOverline={editableOverline} embedMarkup={embedMarkup} labelIconName={labelIconName} labelIconText={labelIconText} diff --git a/blocks/large-promo-block/features/large-promo/default.test.jsx b/blocks/large-promo-block/features/large-promo/default.test.jsx index 5d9dbc67f..95558c7bc 100644 --- a/blocks/large-promo-block/features/large-promo/default.test.jsx +++ b/blocks/large-promo-block/features/large-promo/default.test.jsx @@ -112,7 +112,7 @@ describe("Large Promo", () => { }; isServerSide.mockReturnValue(true); const { container } = render(); - expect(container.firstChild).toBe(null); + expect(container.innerHTML).toBe(''); }); it("should render complete promo", () => { @@ -130,11 +130,11 @@ describe("Large Promo", () => { />, ); - expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByAltText("Baby panda born at the zoo")).not.toBeNull(); }); it("should not render overline", () => { @@ -152,10 +152,10 @@ describe("Large Promo", () => { />, ); expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should not render date when disabled", () => { @@ -173,10 +173,10 @@ describe("Large Promo", () => { />, ); expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should not render date when null", () => { @@ -218,11 +218,11 @@ describe("Large Promo", () => { }} />, ); - expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should not render headline", () => { @@ -239,11 +239,11 @@ describe("Large Promo", () => { }} />, ); - expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull(); + expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull(); expect(screen.queryByText(largePromoMock.headlines.basic)).toBeNull(); - expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should not render description", () => { @@ -260,11 +260,11 @@ describe("Large Promo", () => { }} />, ); - expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); expect(screen.queryByText(largePromoMock.description.basic)).toBeNull(); - expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it("should only render Image", () => { @@ -281,7 +281,7 @@ describe("Large Promo", () => { expect(screen.queryByText(largePromoMock.headlines.basic)).toBeNull(); expect(screen.queryByText(largePromoMock.description.basic)).toBeNull(); expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).toBeNull(); - expect(screen.queryByRole("img")).not.toBeNull(); + expect(screen.getByRole("img")).not.toBeNull(); }); it('should not render Image if "showImage" is false', () => { @@ -366,15 +366,15 @@ describe("Large Promo", () => { />, ); expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull(); - expect(screen.queryByText("global.sponsored-content")).not.toBeNull(); - expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull(); + expect(screen.getByText("global.sponsored-content")).not.toBeNull(); + expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull(); expect(screen.queryByText(largePromoMock.description.basic)).toBeNull(); }); it("should render image icon label", () => { useContent.mockReturnValueOnce(largePromoMock); - const { container } = render( + render( { }} />, ); - expect(container.querySelector(".b-large-promo__icon_label")).not.toBeNull(); + const img = screen.getByAltText("Baby panda born at the zoo"); + expect(img).not.toBeNull(); }); // it("should render video player media when 'playVideoInPlace' prop is passed", () => { From 7bf9d27bbf7563ee808a2ee8f09e07f0aa392c7f Mon Sep 17 00:00:00 2001 From: Mohamed Elkarim Date: Fri, 1 Nov 2024 13:35:42 -0700 Subject: [PATCH 5/6] =?UTF-8?q?Add=20editable=20headline,=20description=20?= =?UTF-8?q?and=20overline=20for=20extra-large-promo=E2=80=A6=20(#2255)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add editable headline, description and overline for extra-large-promo-block * updated tests * updated tests --------- Co-authored-by: Blake Anderson Co-authored-by: blakeganderson <85515364+blakeganderson@users.noreply.github.com> --- .../features/extra-large-promo/default.jsx | 37 +++++++++- .../extra-large-promo/default.test.jsx | 74 +++++++++++++++---- 2 files changed, 92 insertions(+), 19 deletions(-) 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(); }); }); From 735d2edded74289ca8395dc31699dbe7ecde3329 Mon Sep 17 00:00:00 2001 From: LauraPinilla <54566275+LauraPinilla@users.noreply.github.com> Date: Fri, 8 Nov 2024 14:32:04 -0600 Subject: [PATCH 6/6] ASUB-8899 Match password sign up (#2268) * match password sign up * solving issue reported on ACS-32025 --- .../components/form-password-confirm/index.jsx | 8 +++++++- .../components/social-sign-on/_children/AppleSignIn.jsx | 2 +- blocks/identity-block/utils/validate-password-pattern.js | 9 +++++++-- .../utils/validate-password-pattern.test.js | 7 ++++--- 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/blocks/identity-block/components/form-password-confirm/index.jsx b/blocks/identity-block/components/form-password-confirm/index.jsx index 6732cc34f..fe135ada9 100644 --- a/blocks/identity-block/components/form-password-confirm/index.jsx +++ b/blocks/identity-block/components/form-password-confirm/index.jsx @@ -19,6 +19,12 @@ const FormPasswordConfirm = ({ }) => { const [password, setPassword] = useState(""); + const escapeForHtmlPattern = (value) =>{ + const specialChars = /[.*+?^${}()|[\]\\]/g; + const newValue = value.replace(specialChars, '\\$&'); + return newValue; + }; + const fieldParameters = { ...(autoComplete ? { autoComplete } : {}), ...(placeholder ? { placeholder } : {}), @@ -55,7 +61,7 @@ const FormPasswordConfirm = ({ name={`${name}-confirmation`} required type="password" - validationPattern={`^${password}$`} + validationPattern={escapeForHtmlPattern(password)} className={className} /> diff --git a/blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx b/blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx index 7e5742aad..90f3cbd6f 100644 --- a/blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx +++ b/blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx @@ -9,7 +9,7 @@ function AppleSignIn({ customButtons, socialSignOnIn, className, oidcClients = [ const phrases = usePhrases(); const { Identity } = useIdentity(); - const appleOIDCClient = oidcClients.find((oidcClient) => { + const appleOIDCClient = oidcClients && oidcClients.find((oidcClient) => { const parsedClientId = oidcClient.clientId.split(';')[0]; return oidcClient.protocol === 'Apple' && parsedClientId === appleClientId; diff --git a/blocks/identity-block/utils/validate-password-pattern.js b/blocks/identity-block/utils/validate-password-pattern.js index 8d0299a5b..8001ede15 100644 --- a/blocks/identity-block/utils/validate-password-pattern.js +++ b/blocks/identity-block/utils/validate-password-pattern.js @@ -1,4 +1,9 @@ -const SPECIAL_CHARACTERS_ALLOWED = "@$!%*?&"; +const SPECIAL_CHARACTERS_ALLOWED = + ".@$!%*+?&#<=>^:;,-" + + "\\/\\(\\)\\{\\}\\[\\]\\|\\`\\\\" + + "~_" + + '"' + + "'"; // positive lookahead (?= ) // with a non-capturing group within (?: ) @@ -12,7 +17,7 @@ const validatePasswordPattern = ( pwMinLength, pwPwNumbers, pwSpecialCharacters, - pwUppercase + pwUppercase, ) => `(?=(?:.*[a-z]){${pwLowercase},})(?=(?:.*[A-Z]){${pwUppercase},})(?=(?:.*\\d){${pwPwNumbers},})(?=(?:.*[${SPECIAL_CHARACTERS_ALLOWED}]){${pwSpecialCharacters},}).{${pwMinLength},}`; diff --git a/blocks/identity-block/utils/validate-password-pattern.test.js b/blocks/identity-block/utils/validate-password-pattern.test.js index 2e2dc9b79..420cc5d06 100644 --- a/blocks/identity-block/utils/validate-password-pattern.test.js +++ b/blocks/identity-block/utils/validate-password-pattern.test.js @@ -111,8 +111,9 @@ describe("Validate Password", () => { it("Takes matching special characters", () => { const pattern = new RegExp(validatePasswordPattern(0, 1, 0, 7, 0)); - expect(pattern.test("@$!%*?&")).toBe(true); - expect(pattern.test("---------")).toBe(false); - expect(pattern.test("^^^^^^^^^^^^^^^^^^^^^^^")).toBe(false); + expect(pattern.test("@$!%*?&")).toBe(true); + expect(pattern.test("---")).toBe(false); + expect(pattern.test("---------")).toBe(true); + expect(pattern.test("^^^^^^^^^^^^^^^^^^^^^^^")).toBe(true); }); });