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 1d8052e80..11c9d9a18 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 1efabc1af..354f7deea 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 adbf9075d..45e9ce599 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 1d8fdf92e..5a30096b1 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 ba98225b8..c97847060 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": [
{