From 063d668dd4a75a3adbf25564c1a9f44e4d695540 Mon Sep 17 00:00:00 2001 From: nschubach Date: Thu, 13 Jun 2024 13:55:55 -0400 Subject: [PATCH] THEMES-1916: Full Author was not accounting for "original" author data (#2163) * THEMES-1916: Full Author was not accounting for "original" author data --- .../_children/Presentation/index.jsx | 1 + .../_children/Presentation/index.test.jsx | 245 +++++------------- .../features/full-author-bio/default.jsx | 22 +- blocks/full-author-bio-block/index.story.jsx | 20 +- package-lock.json | 6 +- 5 files changed, 103 insertions(+), 191 deletions(-) diff --git a/blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.jsx b/blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.jsx index 1d8052e806..11c9d9a18a 100644 --- a/blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.jsx +++ b/blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.jsx @@ -62,6 +62,7 @@ const AuthorImage = ({ image, altText = "" }) => { const Presentation = ({ author = {}, authorProfileLink }) => { const phrases = usePhrases(); const supportedSocials = Object.keys(socialIcons); + const socials = Object.entries(author) .filter(([key, value]) => supportedSocials.includes(key) && value) .map(([key]) => key); diff --git a/blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.test.jsx b/blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.test.jsx index 1efabc1af0..354f7deea8 100644 --- a/blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.test.jsx +++ b/blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.test.jsx @@ -9,6 +9,12 @@ jest.mock("@wpmedia/arc-themes-components", () => ({ Icon: ({ name }) =>
, })); +const _id = "janedoe"; +const byline = "Jane Da Doe"; +const role = "Senior Product Manager"; +const longBio = "She works on Arc Themes"; +const image = "img.jpg"; + describe("Full Author Bio Block", () => { beforeEach(() => { jest.spyOn(console, "error").mockImplementation((message) => @@ -25,89 +31,62 @@ describe("Full Author Bio Block", () => { }); it("should not render if the author is invalid", () => { - const author = undefined; - const { container } = render(); - + const { container } = render(); expect(container).toBeEmptyDOMElement(); }); - it("should render the author url if the authorProfileLink if true", () => { - const author = { - _id: "janedoe", - byline: "Jane Da Doe", - }; - render( - , - ); - const link = screen.getByRole("link", { name: author.byline }); + it("should render the author url if it exists", () => { + render(); + const link = screen.getByRole("link", { name: byline }); expect(link).not.toBeNull(); expect(link.href).toBe("http://localhost/author/profile"); }); it("should render the byline", () => { - const author = { - _id: "janedoe", - byline: "Jane Da Doe", - }; - render(); - expect(screen.getByRole("heading", { name: author.byline })).not.toBeNull(); + render(); + expect(screen.getByRole("heading", { name: byline })).not.toBeNull(); }); it("should render the role", () => { - const author = { - _id: "janedoe", - role: "Senior Product Manager", - }; - render(); - expect(screen.getByRole("heading", { name: author.role })).not.toBeNull(); + render(); + expect(screen.getByRole("heading", { name: role })).not.toBeNull(); }); it("should render the long bio", () => { - const author = { - _id: "janedoe", - longBio: "Jane Doe is a senior product manager for Arc Publishing. \nShe works on Arc Themes", - }; - render(); - expect(screen.getByText("She works on Arc Themes", { exact: false })).not.toBeNull(); + render(); + expect(screen.getByText(longBio)).not.toBeNull(); }); it("should render the photo with byline alt text", () => { - const author = { - _id: "janedoe", - byline: "Jane Da Doe", - image: "image.jpg", - }; - render(); - expect(screen.getByRole("img", { name: author.byline })).not.toBeNull(); + render(); + expect(screen.getByRole("img", { name: byline, exact: false })).not.toBeNull(); }); it("should render the photo without byline as blank alt text", () => { - const author = { - _id: "janedoe", - image: "img.jpg", - }; - render(); + render(); expect(screen.getByRole("img", { name: "" })).not.toBeNull(); }); it("should render the resized photo if resizer information is available", () => { - const author = { - _id: "janedoe", - image: "img.jpg", - byline: "resized image", - ansImage: { - url: "resized.jpg", - auth: { 2: "12345" }, - }, - }; - render(); - const image = screen.getByRole("img", { - name: "resized image", - }); - expect(image?.src).toBe( + render( + , + ); + const resizedImage = screen.getByRole("img", { name: "resized image" }); + expect(resizedImage?.src).toBe( "http://url.com/resized.jpg?smart=true&auth=12345&width=180&height=180", ); - const imageSrcSet = new Set(image?.srcset?.split(", ")); + const imageSrcSet = new Set(resizedImage?.srcset?.split(", ")); expect(imageSrcSet).toContain( "http://url.com/resized.jpg?smart=true&auth=12345&width=180&height=180 180w", ); @@ -120,24 +99,27 @@ describe("Full Author Bio Block", () => { }); it("should render the all the supported icons if specified", () => { - const author = { - _id: "janedoe", - email: "janedoe", - facebook: "janedoe", - instagram: "janedoe", - linkedin: "janedoe", - medium: "janedoe", - pinterest: "janedoe", - reddit: "janedoe", - rss: "janedoe", - snapchat: "janedoe", - soundcloud: "janedoe", - tumblr: "janedoe", - twitter: "janedoe", - whatsapp: "janedoe", - youtube: "janedoe", - }; - render(); + render( + , + ); expect(screen.getByTestId("Envelope")).not.toBeNull(); expect(screen.getByTestId("Facebook")).not.toBeNull(); expect(screen.getByTestId("Instagram")).not.toBeNull(); @@ -155,162 +137,79 @@ describe("Full Author Bio Block", () => { }); it("should not render the missing supported icon (twitter) if missing from author", () => { - const author = { - _id: "janedoe", - email: "janedoe", - facebook: "janedoe", - instagram: "janedoe", - linkedin: "janedoe", - medium: "janedoe", - pinterest: "janedoe", - reddit: "janedoe", - rss: "janedoe", - snapchat: "janedoe", - soundcloud: "janedoe", - tumblr: "janedoe", - whatsapp: "janedoe", - youtube: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Envelope")).not.toBeNull(); - expect(screen.getByTestId("Facebook")).not.toBeNull(); - expect(screen.getByTestId("Instagram")).not.toBeNull(); - expect(screen.getByTestId("LinkedIn")).not.toBeNull(); - expect(screen.getByTestId("Medium")).not.toBeNull(); - expect(screen.getByTestId("Pinterest")).not.toBeNull(); - expect(screen.getByTestId("Reddit")).not.toBeNull(); - expect(screen.getByTestId("Rss")).not.toBeNull(); - expect(screen.getByTestId("Snapchat")).not.toBeNull(); - expect(screen.getByTestId("SoundCloud")).not.toBeNull(); - expect(screen.getByTestId("Tumblr")).not.toBeNull(); expect(screen.queryByTestId("Twitter")).toBeNull(); - expect(screen.getByTestId("WhatsApp")).not.toBeNull(); expect(screen.getByTestId("Youtube")).not.toBeNull(); }); it("should render the email icon if specified", () => { - const author = { - _id: "janedoe", - email: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Envelope")).not.toBeNull(); }); it("should render the Facebook icon if specified", () => { - const author = { - _id: "janedoe", - facebook: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Facebook")).not.toBeNull(); }); it("should render the Instagram icon if specified", () => { - const author = { - _id: "janedoe", - instagram: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Instagram")).not.toBeNull(); }); it("should render the LinkedIn icon if specified", () => { - const author = { - _id: "janedoe", - linkedin: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("LinkedIn")).not.toBeNull(); }); it("should render the RSS icon if specified", () => { - const author = { - _id: "janedoe", - rss: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Rss")).not.toBeNull(); }); it("should render the Twitter icon if specified", () => { - const author = { - _id: "janedoe", - twitter: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Twitter")).not.toBeNull(); }); it("should render the Medium icon if specified", () => { - const author = { - _id: "janedoe", - medium: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Medium")).not.toBeNull(); }); it("should render the Pinterest icon if specified", () => { - const author = { - _id: "janedoe", - pinterest: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Pinterest")).not.toBeNull(); }); it("should render the Reddit icon if specified", () => { - const author = { - _id: "janedoe", - reddit: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Reddit")).not.toBeNull(); }); it("should render the Snapchat icon if specified", () => { - const author = { - _id: "janedoe", - snapchat: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Snapchat")).not.toBeNull(); }); it("should render the SoundCloud icon if specified", () => { - const author = { - _id: "janedoe", - soundcloud: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("SoundCloud")).not.toBeNull(); }); it("should render the Tumblr icon if specified", () => { - const author = { - _id: "janedoe", - tumblr: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Tumblr")).not.toBeNull(); }); it("should render the WhatsApp icon if specified", () => { - const author = { - _id: "janedoe", - whatsapp: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("WhatsApp")).not.toBeNull(); }); it("should render the Youtube icon if specified", () => { - const author = { - _id: "janedoe", - youtube: "janedoe", - }; - render(); + render(); expect(screen.getByTestId("Youtube")).not.toBeNull(); }); }); diff --git a/blocks/full-author-bio-block/features/full-author-bio/default.jsx b/blocks/full-author-bio-block/features/full-author-bio/default.jsx index adbf9075dd..45e9ce599c 100644 --- a/blocks/full-author-bio-block/features/full-author-bio/default.jsx +++ b/blocks/full-author-bio-block/features/full-author-bio/default.jsx @@ -7,6 +7,8 @@ import { isServerSide, LazyLoad } from "@wpmedia/arc-themes-components"; import Presentation from "./_children/Presentation"; +const firstTruthyValue = (...objects) => objects.find((value) => value || null); + const FullAuthorBio = ({ customFields = {} }) => { const { globalContent, isAdmin } = useFusionContext(); @@ -15,17 +17,31 @@ const FullAuthorBio = ({ customFields = {} }) => { return null; } - const currentAuthor = - globalContent?.authors?.[0] || globalContent?.credits?.by?.[0]?.additional_properties?.original; + const currentAuthor = firstTruthyValue( + globalContent?.authors?.[0], + globalContent?.credits?.by?.[0]?.additional_properties?.original, + ); const authorProfileLink = currentAuthor === globalContent?.credits?.by?.[0]?.additional_properties?.original ? globalContent?.credits?.by?.[0]?.url : null; + const authorImage = firstTruthyValue( + globalContent?.authors?.[0]?.ansImage, + globalContent?.credits?.by?.[0]?.ansImage, + globalContent?.credits?.by?.[0]?.additional_properties?.ansImage, + globalContent?.authors?.[0]?.image, + globalContent?.credits?.by?.[0]?.image, + globalContent?.credits?.by?.[0]?.additional_properties?.image, + ); + return currentAuthor ? ( - + ) : null; }; diff --git a/blocks/full-author-bio-block/index.story.jsx b/blocks/full-author-bio-block/index.story.jsx index 1d8fdf92e3..5a30096b16 100644 --- a/blocks/full-author-bio-block/index.story.jsx +++ b/blocks/full-author-bio-block/index.story.jsx @@ -39,9 +39,7 @@ const authorObject = { soundcloud: "someusername", }; -export const allFieldsFull = () => ( - -); +export const allFieldsFull = () => ; export const noSocialAccounts = () => { const { @@ -62,7 +60,7 @@ export const noSocialAccounts = () => { ...authorNoSocialKeys } = authorObject; - return ; + return ; }; export const noRole = () => { @@ -71,7 +69,7 @@ export const noRole = () => { role: "", }; - return ; + return ; }; export const noByline = () => { @@ -80,7 +78,7 @@ export const noByline = () => { byline: "", }; - return ; + return ; }; export const noBioNorLongBio = () => { @@ -90,7 +88,7 @@ export const noBioNorLongBio = () => { longBio: "", }; - return ; + return ; }; export const noImage = () => { @@ -100,15 +98,13 @@ export const noImage = () => { resized_params: {}, }; - return ; + return ; }; -export const linkedAuthorName = () => ( - -); +export const linkedAuthorName = () => ; export const withRtl = () => (
- +
); diff --git a/package-lock.json b/package-lock.json index ba98225b88..c978470606 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11108,9 +11108,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001588", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz", - "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==", + "version": "1.0.30001627", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001627.tgz", + "integrity": "sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==", "dev": true, "funding": [ {