From f2d7d6c168861a96049a43242a5abcfe623ce1b3 Mon Sep 17 00:00:00 2001
From: nschubach <nschubach@gmail.com>
Date: Mon, 3 Jun 2024 11:06:50 -0400
Subject: [PATCH] THEMES-1916: Update Author images to use signed resizer
 images if available. (#2148)

* THEMES-1916: Update Author images to use signed resizer images if available.
---
 .../features/author-bio/default.jsx           |   45 +-
 .../features/author-bio/default.test.jsx      | 1408 +++++++++--------
 .../_children/Presentation/index.jsx          |   39 +-
 .../_children/Presentation/index.test.jsx     |  144 +-
 .../features/full-author-bio/default.test.jsx |   27 +-
 .../full-author-bio-block/package-lock.json   |    5 -
 6 files changed, 891 insertions(+), 777 deletions(-)
 delete mode 100644 blocks/full-author-bio-block/package-lock.json

diff --git a/blocks/author-bio-block/features/author-bio/default.jsx b/blocks/author-bio-block/features/author-bio/default.jsx
index 0a4d0c7982..bcb3f78c78 100644
--- a/blocks/author-bio-block/features/author-bio/default.jsx
+++ b/blocks/author-bio-block/features/author-bio/default.jsx
@@ -4,6 +4,7 @@ import { useFusionContext } from "fusion:context";
 import {
 	Conditional,
 	formatSocialURL,
+	getFocalFromANS,
 	Heading,
 	HeadingSection,
 	Icon,
@@ -41,32 +42,52 @@ const AuthorBioItemsContainer = () => {
 	return <AuthorBioItems content={content} />;
 };
 
+const AuthorImage = ({ ansImage, altText }) => {
+	if (ansImage?.auth) {
+		return (
+			<Image
+				alt={altText}
+				ansImage={ansImage}
+				aspectRatio="1:1"
+				resizedOptions={getFocalFromANS(ansImage)}
+				responsiveImages={[100, 200, 400]}
+				width={100}
+			/>
+		);
+	}
+	if (ansImage?.url) {
+		return <Image alt={altText} src={ansImage.url} width={100} />;
+	}
+	return null;
+};
+
 export const AuthorBioItems = ({ content }) => {
 	const phrases = usePhrases();
 	const { credits = {} } = content;
 	const { by = [] } = credits;
 
-	// Generate a list of author components
 	const authors = by
-		// If the author doesn't have a description, then do not add them to the list
-		// Also check for their bio, which means that they are a staff
 		.filter(
 			({ additional_properties: additionalProperties = {}, description = "" }) =>
-				description?.length && additionalProperties?.original?.bio?.length
+				description?.length && additionalProperties?.original?.bio?.length,
 		)
-		// A loop to generate the list of social media links.
-		// If no url is provided, then the social link will be skipped.
 		.map(
 			({
-				additional_properties: { original: { byline } } = {},
+				additional_properties: {
+					original: { byline },
+				},
 				description,
 				name,
-				image: { url: imageUrl = "", alt_text: altText = "" } = {},
+				image: { alt_text: altText = "", ...ansImage } = {},
 				social_links: socialLinks = [],
 				url: authorUrl,
 			}) => (
-				<Stack direction="horizontal" className={`${BLOCK_CLASS_NAME}__author`} key={name}>
-					{imageUrl ? <Image src={imageUrl} alt={altText || name} width={100} /> : null}
+				<Stack
+					direction="horizontal"
+					className={`${BLOCK_CLASS_NAME}__author`}
+					key={`${name}_${authorUrl}`}
+				>
+					<AuthorImage ansImage={ansImage} altText={altText || name || ""} />
 					<Stack>
 						{byline ? (
 							<Conditional
@@ -109,7 +130,7 @@ export const AuthorBioItems = ({ content }) => {
 						) : null}
 					</Stack>
 				</Stack>
-			)
+			),
 		);
 
 	return authors.length ? <Stack className={BLOCK_CLASS_NAME}>{authors}</Stack> : null;
@@ -118,7 +139,7 @@ export const AuthorBioItems = ({ content }) => {
 const AuthorBio = ({ customFields = {} }) => {
 	const { isAdmin } = useFusionContext();
 
-	if (customFields.lazyLoad && isServerSide() && !isAdmin) {
+	if (customFields?.lazyLoad && isServerSide() && !isAdmin) {
 		// On Server
 		return null;
 	}
diff --git a/blocks/author-bio-block/features/author-bio/default.test.jsx b/blocks/author-bio-block/features/author-bio/default.test.jsx
index eac906ea04..7dacf39705 100644
--- a/blocks/author-bio-block/features/author-bio/default.test.jsx
+++ b/blocks/author-bio-block/features/author-bio/default.test.jsx
@@ -1,699 +1,713 @@
-describe("This test is disabled", () => {
-	it("should succeed", () => {
-		expect(true);
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import AuthorBio, { AuthorBioItems } from "./default";
+
+jest.mock("@wpmedia/arc-themes-components", () => ({
+	__esModule: true,
+	...jest.requireActual("@wpmedia/arc-themes-components"),
+	isServerSide: jest.fn().mockReturnValue(true),
+	LazyLoad: ({ children }) => children,
+}));
+
+jest.mock("fusion:context", () => ({
+	useFusionContext: () => ({ isAdmin: false, globalContent: { credits: {} } }),
+}));
+
+describe("Given the list of author(s) from the article", () => {
+	beforeEach(() => {
+		jest.spyOn(console, "error").mockImplementation((message) =>
+			message === "No auth token provided for resizer"
+				? null
+				: // eslint-disable-next-line no-console
+					console.warn("Error Thrown:", message),
+		);
+	});
+
+	afterEach(() => {
+		// eslint-disable-next-line no-console
+		console.error.mockRestore();
+	});
+
+	it("should return null if lazyLoad on the server and not in the admin", () => {
+		const { container } = render(<AuthorBio customFields={{ lazyLoad: true }} />);
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it("should return null if empty global content object", () => {
+		const { container } = render(<AuthorBio />);
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it("should return null if credits are missing", () => {
+		const { container } = render(<AuthorBioItems content={{}} />);
+
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it("should return null if additional_properties are missing", () => {
+		const { container } = render(
+			<AuthorBioItems
+				content={{
+					credits: {
+						by: [
+							{
+								type: "author",
+								name: "Sara Carothers",
+								description: "description",
+								image: {
+									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+								},
+							},
+						],
+					},
+				}}
+			/>,
+		);
+
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it("should render even if byline is missing", () => {
+		render(
+			<AuthorBioItems
+				content={{
+					credits: {
+						by: [
+							{
+								type: "author",
+								name: "Sara Carothers",
+								description: "description",
+								image: {
+									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+								},
+								additional_properties: {
+									original: {
+										_id: "saracarothers",
+										bio_page: "/author/sara-carothers/",
+										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+									},
+								},
+							},
+						],
+					},
+				}}
+			/>,
+		);
+
+		expect(screen.getByRole("img", { name: "Sara Carothers" })).not.toBeNull();
+	});
+
+	it("should show one author's bio", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+		expect(screen.getByRole("img", { name: "Sara Carothers" })).toHaveAttribute(
+			"src",
+			"https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+		);
+		expect(screen.getByRole("heading", { name: "Sara Lynn Carothers" })).not.toBeNull();
+	});
+
+	it("should show two authors' bio", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+					{
+						type: "author",
+						name: "Sara Carothers2",
+						description: "description",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers2",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+		expect(screen.getByRole("img", { name: "Sara Carothers" })).toHaveAttribute(
+			"src",
+			"https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+		);
+		expect(screen.getByRole("img", { name: "Sara Carothers2" })).toHaveAttribute(
+			"src",
+			"https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+		);
+		expect(screen.queryAllByRole("heading")).toHaveLength(2);
+	});
+
+	it("should show no author if there's no description", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		const { container } = render(<AuthorBioItems content={content} />);
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it("should show no social buttons if there are no urls provided", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+						social_links: [{ site: "twitter" }, { site: "instagram" }],
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+		expect(screen.queryAllByRole("link")).toHaveLength(0);
+	});
+
+	it("should include the author image when the author image url is present", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+		expect(screen.getByRole("img", { name: "Sara Carothers" })).toHaveAttribute(
+			"src",
+			"https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+		);
+	});
+
+	it("should not have an author image element if there is no author image url", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+		expect(screen.queryAllByRole("img")).toHaveLength(0);
 	});
-});
 
-// import React from "react";
-// import { mount } from "enzyme";
-
-// jest.mock("@wpmedia/arc-themes-components", () => ({
-// 	__esModule: true,
-// 	...jest.requireActual("@wpmedia/arc-themes-components"),
-// 	isServerSide: jest.fn().mockReturnValue(true),
-// 	LazyLoad: ({ children }) => children,
-// }));
-
-// jest.mock("fusion:themes", () =>
-// 	jest.fn(() => ({
-// 		"primary-color": "blue",
-// 	}))
-// );
-
-// jest.mock("fusion:context", () => ({
-// 	useFusionContext: () => ({ isAdmin: false, globalContent: { credits: {} } }),
-// }));
-
-// jest.mock("fusion:properties", () =>
-// 	jest.fn(() => ({
-// 		locale: "en",
-// 	}))
-// );
-
-// describe("Given the list of author(s) from the article", () => {
-// 	it("should return null if lazyLoad on the server and not in the admin", () => {
-// 		const { default: AuthorBio } = require("./default");
-// 		const config = {
-// 			lazyLoad: true,
-// 		};
-// 		const wrapper = mount(<AuthorBio customFields={config} />);
-// 		expect(wrapper.html()).toBe(null);
-// 	});
-
-// 	it("should show one author's bio", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 									{
-// 										site: "instagram",
-// 										url: "https://www.instagram.com/scarothers/",
-// 									},
-// 								],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper.find("AuthorBio").children().children()).toHaveLength(1);
-// 	});
-
-// 	it("should show two authors' bio", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 									{
-// 										site: "instagram",
-// 										url: "https://www.instagram.com/scarothers/",
-// 									},
-// 								],
-// 							},
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers2",
-// 								description: "description",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers2",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 									{
-// 										site: "instagram",
-// 										url: "https://www.instagram.com/scarothers/",
-// 									},
-// 								],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper.find(".b-author-bio").children().length).toBe(3);
-// 	});
-
-// 	it("should show no author if there's no description", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 									{
-// 										site: "instagram",
-// 										url: "https://www.instagram.com/scarothers/",
-// 									},
-// 								],
-// 							},
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers2",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers2",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 									{
-// 										site: "instagram",
-// 										url: "https://www.instagram.com/scarothers/",
-// 									},
-// 								],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper.find("section.authors")).toHaveLength(0);
-// 	});
-
-// 	it("should show no social buttons if there are no urls provided", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [{ site: "twitter" }, { site: "instagram" }],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper.find("section.socialButtons").children()).toHaveLength(0);
-// 	});
-
-// 	it("should include the author image when the author image url is present", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [{ site: "twitter" }, { site: "instagram" }],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper.find("Image")).toHaveLength(1);
-// 		expect(wrapper.find("Image").prop("src")).toEqual(
-// 			"https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg"
-// 		);
-// 	});
-
-// 	it("should not have an author image element if there is no author image url", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [{ site: "twitter" }, { site: "instagram" }],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper.find("img")).toHaveLength(0);
-// 	});
-
-// 	it("should not show an image if there is no image object", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper.find("img")).toHaveLength(0);
-// 	});
-
-// 	it("should show social icons for youtube, tumblr, Medium, Reddit, Pinterest, snap, whatsapp, facebook, rss, soundcloud not the mail fallback", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		const mockUseFusionContext = {
-// 			arcSite: "the-sun",
-// 			globalContent: {
-// 				credits: {
-// 					by: [
-// 						{
-// 							type: "author",
-// 							name: "Sara Carothers",
-// 							description: "description",
-// 							image: {
-// 								url: "",
-// 							},
-// 							additional_properties: {
-// 								original: {
-// 									_id: "saracarothers",
-// 									byline: "Sara Lynn Carothers",
-// 									bio_page: "/author/sara-carothers/",
-// 									bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 								},
-// 							},
-// 							social_links: [
-// 								{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 								{
-// 									site: "instagram",
-// 									url: "https://www.instagram.com/scarothers/",
-// 								},
-// 								{ site: "facebook", url: "https://www.thefacebook.com" },
-// 								{ site: "reddit", url: "https://reddit.com" },
-// 								{ site: "youtube", url: "https://youtube.com" },
-// 								{ site: "medium", url: "https://medium.com" },
-// 								{ site: "tumblr", url: "https://tumblr.com" },
-// 								{ site: "pinterest", url: "https://pinterest.com" },
-// 								{ site: "snapchat", url: "https://snapchat.com" },
-// 								{ site: "whatsapp", url: "https://whatsapp.com" },
-// 								{ site: "linkedin", url: "https://whatsapp.com" },
-// 								{ site: "rss", url: "rss feed" },
-// 								{ site: "soundcloud", url: "https://soundcloud.com" },
-// 							],
-// 						},
-// 					],
-// 				},
-// 			},
-// 		};
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => mockUseFusionContext),
-// 		}));
-
-// 		const wrapper = mount(<AuthorBio />);
-// 		const socialButtonsContainer = wrapper.find(".b-author-bio__social-link-wrapper");
-// 		const socialLinks = socialButtonsContainer.find("a");
-// 		expect(socialLinks).toHaveLength(13);
-// 		socialLinks.forEach((link) => {
-// 			expect(typeof link.prop("aria-label")).toEqual("string");
-// 		});
-// 	});
-// 	it("should show null if no social link objects, with url and title, are provided", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-
-// 		const wrapper = mount(<AuthorBio />);
-
-// 		const socialButtonsContainer = wrapper.find(".b-author-bio__social-link-wrapper");
-// 		const socialLinks = socialButtonsContainer.find("a");
-// 		expect(socialLinks.children()).toHaveLength(0);
-// 	});
-
-// 	it("a snapchat social object does not render the default envelope icon but its correct snap one", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [{ site: "snapchat", url: "https://snapchat.com" }],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-// 		const socialButtonsContainer = wrapper.find(".b-author-bio__social-link");
-// 		const socialLinks = socialButtonsContainer.find("a");
-// 		expect(socialLinks.props().href.includes("snapchat")).toBe(true);
-// 	});
-
-// 	it("an unrecognized social media title renders an envelope icon with site as key", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{
-// 										site: "Something Gamechanging",
-// 										url: "https://tiktiktoktoktok.com",
-// 									},
-// 								],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-
-// 		const socialButtonsContainer = wrapper.find(".b-author-bio__social-link-wrapper");
-// 		const socialLinks = socialButtonsContainer.find("a");
-// 		expect(socialLinks.props().children[0].props.name).toBe("Envelope");
-// 	});
-
-// 	it("should fallback gracefully if author name does not exist and not render authorName link", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 									{
-// 										site: "instagram",
-// 										url: "https://www.instagram.com/scarothers/",
-// 									},
-// 								],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper.find(".b-author-bio__authorName").length).toBe(0);
-// 	});
-// 	it("finds an author name if url exists", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								url: "https://google.com",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 									{
-// 										site: "instagram",
-// 										url: "https://www.instagram.com/scarothers/",
-// 									},
-// 								],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-
-// 		const targetAuthorLink = wrapper.find("a.b-author-bio__author-name-link");
-// 		expect(targetAuthorLink.length).toBe(1);
-// 		expect(targetAuthorLink.props().href).toBe("https://google.com");
-// 	});
-
-// 	it("handles no author name or description", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "",
-// 								description: "desc",
-// 								url: "https://google.com",
-// 								image: {
-// 									url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [
-// 									{ site: "twitter", url: "https://twitter.com/sLcarothers" },
-// 									{
-// 										site: "instagram",
-// 										url: "https://www.instagram.com/scarothers/",
-// 									},
-// 								],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-
-// 		expect(wrapper.find(".b-author-bio").children().length).toBe(2);
-// 	});
-
-// 	it("it should show email link with malito email", () => {
-// 		const { default: AuthorBio } = require("./default");
-
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({
-// 				globalContent: {
-// 					credits: {
-// 						by: [
-// 							{
-// 								type: "author",
-// 								name: "Sara Carothers",
-// 								description: "description",
-// 								image: {
-// 									url: "",
-// 								},
-// 								additional_properties: {
-// 									original: {
-// 										_id: "saracarothers",
-// 										byline: "Sara Lynn Carothers",
-// 										bio_page: "/author/sara-carothers/",
-// 										bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
-// 									},
-// 								},
-// 								social_links: [{ site: "email", url: "bernstein@washpost.com" }],
-// 							},
-// 						],
-// 					},
-// 				},
-// 			})),
-// 		}));
-// 		const wrapper = mount(<AuthorBio />);
-
-// 		const socialButtonsContainer = wrapper.find(".b-author-bio__social-link");
-// 		const socialLinks = socialButtonsContainer.find("a");
-// 		expect(socialLinks.props().href).toBe("mailto:bernstein@washpost.com");
-// 	});
-// 	it("should not throw by undefined error if empty global content object", () => {
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({ globalContent: {} })),
-// 		}));
-// 		const { default: AuthorBio } = require("./default");
-
-// 		expect(() => {
-// 			mount(<AuthorBio />);
-// 		}).not.toThrow(TypeError("Cannot read property 'by' of undefined"));
-// 	});
-
-// 	it("should return null if empty global content object", () => {
-// 		jest.mock("fusion:context", () => ({
-// 			useFusionContext: jest.fn(() => ({ globalContent: {} })),
-// 		}));
-// 		const { default: AuthorBio } = require("./default");
-
-// 		const wrapper = mount(<AuthorBio />);
-// 		expect(wrapper).toBeEmptyRender();
-// 	});
-// });
+	it("should not show an image if there is no image object", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+
+		render(<AuthorBioItems content={content} />);
+		expect(screen.queryAllByRole("img")).toHaveLength(0);
+	});
+
+	it("should show social icons for youtube, tumblr, Medium, Reddit, Pinterest, snap, whatsapp, facebook, rss, soundcloud not the mail fallback", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+						social_links: [
+							{ site: "twitter", url: "https://twitter.com/sLcarothers" },
+							{
+								site: "instagram",
+								url: "https://www.instagram.com/scarothers/",
+							},
+							{ site: "facebook", url: "https://www.thefacebook.com" },
+							{ site: "reddit", url: "https://reddit.com" },
+							{ site: "youtube", url: "https://youtube.com" },
+							{ site: "medium", url: "https://medium.com" },
+							{ site: "tumblr", url: "https://tumblr.com" },
+							{ site: "pinterest", url: "https://pinterest.com" },
+							{ site: "snapchat", url: "https://snapchat.com" },
+							{ site: "whatsapp", url: "https://whatsapp.com" },
+							{ site: "linkedin", url: "https://whatsapp.com" },
+							{ site: "rss", url: "rss feed" },
+							{ site: "soundcloud", url: "https://soundcloud.com" },
+						],
+					},
+				],
+			},
+		};
+
+		const socialLabels = [
+			"global.social-twitter-connect",
+			"global.social-instagram-connect",
+			"global.social-facebook-connect",
+			"global.social-reddit-connect",
+			"global.social-youtube-connect",
+			"global.social-medium-connect",
+			"global.social-tumblr-connect",
+			"global.social-pinterest-connect",
+			"global.social-snapchat-connect",
+			"global.social-whatsapp-connect",
+			"global.social-linkedin-connect",
+			"global.social-rss-connect",
+			"global.social-soundcloud-connect",
+		];
+
+		render(<AuthorBioItems content={content} />);
+		const socialLinks = screen.queryAllByRole("link");
+		expect(socialLinks).toHaveLength(13);
+		socialLinks.forEach((link, index) =>
+			expect(link).toHaveAttribute("aria-label", socialLabels[index]),
+		);
+	});
+	it("should show null if no social link objects, with url and title, are provided", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+						social_links: [],
+					},
+				],
+			},
+		};
+
+		render(<AuthorBioItems content={content} />);
+
+		const socialLinks = screen.queryAllByRole("link");
+		expect(socialLinks).toHaveLength(0);
+	});
+
+	it("a snapchat social object does not render the default envelope icon but its correct snap one", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+						social_links: [{ site: "snapchat", url: "https://snapchat.com" }],
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+		const socialLinks = screen.queryAllByRole("link");
+		expect(socialLinks[0]).toHaveAttribute("href", "https://snapchat.com");
+	});
+
+	it("an unrecognized social media title renders an envelope icon with site as key", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+						social_links: [
+							{
+								site: "Something Gamechanging",
+								url: "https://tiktiktoktoktok.com",
+							},
+						],
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+		expect(
+			screen.getByRole("link", { name: "global.social-something gamechanging-connect" }),
+		).toHaveAttribute("href", "https://tiktiktoktoktok.com");
+	});
+
+	it("should fallback gracefully if author name does not exist and not render authorName link", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+		expect(screen.queryByRole("heading")).toBeNull();
+	});
+
+	it("finds an author name if url exists", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						url: "https://google.com",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+
+		expect(
+			screen.getByRole("link", { name: "Sara Lynn Carothers Opens in new window" }),
+		).not.toBeNull();
+		expect(screen.getByRole("heading", { name: "Sara Lynn Carothers" })).not.toBeNull();
+	});
+
+	it("handles no author name or description", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "",
+						description: "desc",
+						url: "https://google.com",
+						image: {
+							url: "https://s3.amazonaws.com/arc-authors/corecomponents/b80bd029-16d8-4a28-a874-78fc07ebc14a.jpg",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+
+		expect(screen.getByRole("img", { name: "" })).not.toBeNull();
+	});
+
+	it("it should show email link with malito email", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "",
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+						social_links: [{ site: "email", url: "bernstein@washpost.com" }],
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+
+		const socialLinks = screen.queryAllByRole("link");
+		expect(socialLinks[0]).toHaveAttribute("href", "mailto:bernstein@washpost.com");
+	});
+
+	it("should not throw by undefined error if empty global content object", () => {
+		jest.mock("fusion:context", () => ({
+			useFusionContext: jest.fn(() => ({ globalContent: {} })),
+		}));
+
+		expect(() => {
+			render(<AuthorBio />);
+		}).not.toThrow(TypeError("Cannot read property 'by' of undefined"));
+	});
+
+	it("should render the resized photo if resizer information is available", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							url: "resized.jpg",
+							auth: { 2: "12345" },
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+
+		const image = screen.queryByRole("img");
+		expect(image?.src).toBe(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=100&height=100",
+		);
+		const imageSrcSet = new Set(image?.srcset?.split(", "));
+		expect(imageSrcSet).toContain(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=100&height=100 100w",
+		);
+		expect(imageSrcSet).toContain(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=200&height=200 200w",
+		);
+		expect(imageSrcSet).toContain(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=400&height=400 400w",
+		);
+	});
+
+	it("should render the photo with alt_text", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						name: "Sara Carothers",
+						description: "description",
+						image: {
+							alt_text: "alt text",
+							url: "resized.jpg",
+							auth: { 2: "12345" },
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+
+		const image = screen.getByRole("img", { name: "alt text" });
+		expect(image?.src).toBe(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=100&height=100",
+		);
+	});
+
+	it("should render the photo without alt_text or an author name", () => {
+		const content = {
+			credits: {
+				by: [
+					{
+						type: "author",
+						description: "description",
+						image: {
+							url: "resized.jpg",
+							auth: { 2: "12345" },
+						},
+						additional_properties: {
+							original: {
+								_id: "saracarothers",
+								byline: "Sara Lynn Carothers",
+								bio_page: "/author/sara-carothers/",
+								bio: "Sara Carothers is a senior product manager for Arc Publishing. This is a short bio. ",
+							},
+						},
+					},
+				],
+			},
+		};
+		render(<AuthorBioItems content={content} />);
+
+		const image = screen.getByRole("img", { name: "" });
+		expect(image?.src).toBe(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=100&height=100",
+		);
+	});
+});
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 c5cd1c6e3e..1d8052e806 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
@@ -3,6 +3,7 @@ import React from "react";
 import {
 	Conditional,
 	formatSocialURL,
+	getFocalFromANS,
 	Heading,
 	HeadingSection,
 	Icon,
@@ -33,6 +34,31 @@ const socialIcons = {
 
 const BLOCK_CLASS_NAME = "b-full-author-bio";
 
+const AuthorImage = ({ image, altText = "" }) => {
+	if (image?.auth) {
+		return (
+			<MediaItem>
+				<Image
+					alt={altText}
+					ansImage={image}
+					aspectRatio="1:1"
+					resizedOptions={getFocalFromANS(image)}
+					responsiveImages={[180, 360, 720]}
+					width={180}
+				/>
+			</MediaItem>
+		);
+	}
+	if (typeof image === "string" && image !== "") {
+		return (
+			<MediaItem>
+				<Image alt={altText} src={image} width={180} />
+			</MediaItem>
+		);
+	}
+	return null;
+};
+
 const Presentation = ({ author = {}, authorProfileLink }) => {
 	const phrases = usePhrases();
 	const supportedSocials = Object.keys(socialIcons);
@@ -42,13 +68,14 @@ const Presentation = ({ author = {}, authorProfileLink }) => {
 
 	const bio = author?.longBio || author?.bio;
 
-	return author?.byline || author?.image || author?.role || bio || socials.length ? (
+	return author?.byline ||
+		author?.ansImage ||
+		author?.image ||
+		author?.role ||
+		bio ||
+		socials.length ? (
 		<div className={BLOCK_CLASS_NAME}>
-			{author?.image ? (
-				<MediaItem>
-					<Image src={author.image} alt={author.byline || ""} />
-				</MediaItem>
-			) : null}
+			<AuthorImage image={author?.ansImage || author?.image} altText={author?.byline} />
 			{author?.byline || author?.role || bio || socials.length ? (
 				<HeadingSection>
 					<Stack className={`${BLOCK_CLASS_NAME}__text`}>
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 6654ee01b4..1efabc1af0 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
@@ -1,5 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
 
 import Presentation from ".";
 
@@ -9,11 +10,25 @@ jest.mock("@wpmedia/arc-themes-components", () => ({
 }));
 
 describe("Full Author Bio Block", () => {
+	beforeEach(() => {
+		jest.spyOn(console, "error").mockImplementation((message) =>
+			message === "No auth token provided for resizer"
+				? null
+				: // eslint-disable-next-line no-console
+					console.warn("Error Thrown:", message),
+		);
+	});
+
+	afterEach(() => {
+		// eslint-disable-next-line no-console
+		console.error.mockRestore();
+	});
+
 	it("should not render if the author is invalid", () => {
 		const author = undefined;
 		const { container } = render(<Presentation arcSite="test-site" author={author} />);
 
-		expect(container.firstChild).toBeNull();
+		expect(container).toBeEmptyDOMElement();
 	});
 
 	it("should render the author url if the authorProfileLink if true", () => {
@@ -22,9 +37,9 @@ describe("Full Author Bio Block", () => {
 			byline: "Jane Da Doe",
 		};
 		render(
-			<Presentation arcSite="test-site" author={author} authorProfileLink="/author/profile" />
+			<Presentation arcSite="test-site" author={author} authorProfileLink="/author/profile" />,
 		);
-		const link = screen.queryByRole("link", { name: author.byline });
+		const link = screen.getByRole("link", { name: author.byline });
 		expect(link).not.toBeNull();
 		expect(link.href).toBe("http://localhost/author/profile");
 	});
@@ -35,7 +50,7 @@ describe("Full Author Bio Block", () => {
 			byline: "Jane Da Doe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByRole("heading", { name: author.byline })).not.toBeNull();
+		expect(screen.getByRole("heading", { name: author.byline })).not.toBeNull();
 	});
 
 	it("should render the role", () => {
@@ -44,7 +59,7 @@ describe("Full Author Bio Block", () => {
 			role: "Senior Product Manager",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByRole("heading", { name: author.role })).not.toBeNull();
+		expect(screen.getByRole("heading", { name: author.role })).not.toBeNull();
 	});
 
 	it("should render the long bio", () => {
@@ -53,7 +68,7 @@ describe("Full Author Bio Block", () => {
 			longBio: "Jane Doe is a senior product manager for Arc Publishing. \nShe works on Arc Themes",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByText("She works on Arc Themes", { exact: false })).not.toBeNull();
+		expect(screen.getByText("She works on Arc Themes", { exact: false })).not.toBeNull();
 	});
 
 	it("should render the photo with byline alt text", () => {
@@ -61,20 +76,47 @@ describe("Full Author Bio Block", () => {
 			_id: "janedoe",
 			byline: "Jane Da Doe",
 			image: "image.jpg",
-			resized_params: { "158x158": "" },
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByRole("img", { name: author.byline })).not.toBeNull();
+		expect(screen.getByRole("img", { name: author.byline })).not.toBeNull();
 	});
 
 	it("should render the photo without byline as blank alt text", () => {
 		const author = {
 			_id: "janedoe",
 			image: "img.jpg",
-			resized_params: { "158x158": "" },
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByRole("img", { name: "" })).not.toBeNull();
+		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(<Presentation arcSite="test-site" author={author} />);
+		const image = screen.getByRole("img", {
+			name: "resized image",
+		});
+		expect(image?.src).toBe(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=180&height=180",
+		);
+		const imageSrcSet = new Set(image?.srcset?.split(", "));
+		expect(imageSrcSet).toContain(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=180&height=180 180w",
+		);
+		expect(imageSrcSet).toContain(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=360&height=360 360w",
+		);
+		expect(imageSrcSet).toContain(
+			"http://url.com/resized.jpg?smart=true&auth=12345&width=720&height=720 720w",
+		);
 	});
 
 	it("should render the all the supported icons if specified", () => {
@@ -96,20 +138,20 @@ describe("Full Author Bio Block", () => {
 			youtube: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Envelope")).not.toBeNull();
-		expect(screen.queryByTestId("Facebook")).not.toBeNull();
-		expect(screen.queryByTestId("Instagram")).not.toBeNull();
-		expect(screen.queryByTestId("LinkedIn")).not.toBeNull();
-		expect(screen.queryByTestId("Medium")).not.toBeNull();
-		expect(screen.queryByTestId("Pinterest")).not.toBeNull();
-		expect(screen.queryByTestId("Reddit")).not.toBeNull();
-		expect(screen.queryByTestId("Rss")).not.toBeNull();
-		expect(screen.queryByTestId("Snapchat")).not.toBeNull();
-		expect(screen.queryByTestId("SoundCloud")).not.toBeNull();
-		expect(screen.queryByTestId("Tumblr")).not.toBeNull();
-		expect(screen.queryByTestId("Twitter")).not.toBeNull();
-		expect(screen.queryByTestId("WhatsApp")).not.toBeNull();
-		expect(screen.queryByTestId("Youtube")).not.toBeNull();
+		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.getByTestId("Twitter")).not.toBeNull();
+		expect(screen.getByTestId("WhatsApp")).not.toBeNull();
+		expect(screen.getByTestId("Youtube")).not.toBeNull();
 	});
 
 	it("should not render the missing supported icon (twitter) if missing from author", () => {
@@ -130,20 +172,20 @@ describe("Full Author Bio Block", () => {
 			youtube: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Envelope")).not.toBeNull();
-		expect(screen.queryByTestId("Facebook")).not.toBeNull();
-		expect(screen.queryByTestId("Instagram")).not.toBeNull();
-		expect(screen.queryByTestId("LinkedIn")).not.toBeNull();
-		expect(screen.queryByTestId("Medium")).not.toBeNull();
-		expect(screen.queryByTestId("Pinterest")).not.toBeNull();
-		expect(screen.queryByTestId("Reddit")).not.toBeNull();
-		expect(screen.queryByTestId("Rss")).not.toBeNull();
-		expect(screen.queryByTestId("Snapchat")).not.toBeNull();
-		expect(screen.queryByTestId("SoundCloud")).not.toBeNull();
-		expect(screen.queryByTestId("Tumblr")).not.toBeNull();
+		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.queryByTestId("WhatsApp")).not.toBeNull();
-		expect(screen.queryByTestId("Youtube")).not.toBeNull();
+		expect(screen.getByTestId("WhatsApp")).not.toBeNull();
+		expect(screen.getByTestId("Youtube")).not.toBeNull();
 	});
 
 	it("should render the email icon if specified", () => {
@@ -152,7 +194,7 @@ describe("Full Author Bio Block", () => {
 			email: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Envelope")).not.toBeNull();
+		expect(screen.getByTestId("Envelope")).not.toBeNull();
 	});
 
 	it("should render the Facebook icon if specified", () => {
@@ -161,7 +203,7 @@ describe("Full Author Bio Block", () => {
 			facebook: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Facebook")).not.toBeNull();
+		expect(screen.getByTestId("Facebook")).not.toBeNull();
 	});
 
 	it("should render the Instagram icon if specified", () => {
@@ -170,7 +212,7 @@ describe("Full Author Bio Block", () => {
 			instagram: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Instagram")).not.toBeNull();
+		expect(screen.getByTestId("Instagram")).not.toBeNull();
 	});
 
 	it("should render the LinkedIn icon if specified", () => {
@@ -179,7 +221,7 @@ describe("Full Author Bio Block", () => {
 			linkedin: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("LinkedIn")).not.toBeNull();
+		expect(screen.getByTestId("LinkedIn")).not.toBeNull();
 	});
 
 	it("should render the RSS icon if specified", () => {
@@ -188,7 +230,7 @@ describe("Full Author Bio Block", () => {
 			rss: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Rss")).not.toBeNull();
+		expect(screen.getByTestId("Rss")).not.toBeNull();
 	});
 
 	it("should render the Twitter icon if specified", () => {
@@ -197,7 +239,7 @@ describe("Full Author Bio Block", () => {
 			twitter: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Twitter")).not.toBeNull();
+		expect(screen.getByTestId("Twitter")).not.toBeNull();
 	});
 
 	it("should render the Medium icon if specified", () => {
@@ -206,7 +248,7 @@ describe("Full Author Bio Block", () => {
 			medium: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Medium")).not.toBeNull();
+		expect(screen.getByTestId("Medium")).not.toBeNull();
 	});
 
 	it("should render the Pinterest icon if specified", () => {
@@ -215,7 +257,7 @@ describe("Full Author Bio Block", () => {
 			pinterest: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Pinterest")).not.toBeNull();
+		expect(screen.getByTestId("Pinterest")).not.toBeNull();
 	});
 
 	it("should render the Reddit icon if specified", () => {
@@ -224,7 +266,7 @@ describe("Full Author Bio Block", () => {
 			reddit: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Reddit")).not.toBeNull();
+		expect(screen.getByTestId("Reddit")).not.toBeNull();
 	});
 
 	it("should render the Snapchat icon if specified", () => {
@@ -233,7 +275,7 @@ describe("Full Author Bio Block", () => {
 			snapchat: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Snapchat")).not.toBeNull();
+		expect(screen.getByTestId("Snapchat")).not.toBeNull();
 	});
 
 	it("should render the SoundCloud icon if specified", () => {
@@ -242,7 +284,7 @@ describe("Full Author Bio Block", () => {
 			soundcloud: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("SoundCloud")).not.toBeNull();
+		expect(screen.getByTestId("SoundCloud")).not.toBeNull();
 	});
 
 	it("should render the Tumblr icon if specified", () => {
@@ -251,7 +293,7 @@ describe("Full Author Bio Block", () => {
 			tumblr: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Tumblr")).not.toBeNull();
+		expect(screen.getByTestId("Tumblr")).not.toBeNull();
 	});
 
 	it("should render the WhatsApp icon if specified", () => {
@@ -260,7 +302,7 @@ describe("Full Author Bio Block", () => {
 			whatsapp: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("WhatsApp")).not.toBeNull();
+		expect(screen.getByTestId("WhatsApp")).not.toBeNull();
 	});
 
 	it("should render the Youtube icon if specified", () => {
@@ -269,6 +311,6 @@ describe("Full Author Bio Block", () => {
 			youtube: "janedoe",
 		};
 		render(<Presentation arcSite="test-site" author={author} />);
-		expect(screen.queryByTestId("Youtube")).not.toBeNull();
+		expect(screen.getByTestId("Youtube")).not.toBeNull();
 	});
 });
diff --git a/blocks/full-author-bio-block/features/full-author-bio/default.test.jsx b/blocks/full-author-bio-block/features/full-author-bio/default.test.jsx
index 9e3826aee6..8d88cdc4cc 100644
--- a/blocks/full-author-bio-block/features/full-author-bio/default.test.jsx
+++ b/blocks/full-author-bio-block/features/full-author-bio/default.test.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
 
 import { useFusionContext } from "fusion:context";
 import getProperties from "fusion:properties";
@@ -32,6 +33,20 @@ const authors = [
 ];
 
 describe("Full author bio block", () => {
+	beforeEach(() => {
+		jest.spyOn(console, "error").mockImplementation((message) =>
+			message === "No auth token provided for resizer"
+				? null
+				: // eslint-disable-next-line no-console
+					console.warn("Error Thrown:", message),
+		);
+	});
+
+	afterEach(() => {
+		// eslint-disable-next-line no-console
+		console.error.mockRestore();
+	});
+
 	describe("lazy load and isAdmin", () => {
 		it("should return null if lazyLoad on the server and not in the admin", () => {
 			useFusionContext.mockImplementation(() => ({
@@ -41,7 +56,7 @@ describe("Full author bio block", () => {
 				isAdmin: false,
 			}));
 			const { container } = render(<FullAuthorBio customFields={{ lazyLoad: true }} />);
-			expect(container.firstChild).toBeNull();
+			expect(container).toBeEmptyDOMElement();
 		});
 
 		it("should not return null if not lazyLoad on the server and isAdmin", () => {
@@ -52,7 +67,7 @@ describe("Full author bio block", () => {
 				isAdmin: true,
 			}));
 			const { container } = render(<FullAuthorBio customFields={{ lazyLoad: false }} />);
-			expect(container.firstChild).not.toBeNull();
+			expect(container).not.toBeEmptyDOMElement();
 		});
 
 		it("should not return null if lazyLoad on the server and isAdmin", () => {
@@ -63,7 +78,7 @@ describe("Full author bio block", () => {
 				isAdmin: true,
 			}));
 			const { container } = render(<FullAuthorBio customFields={{ lazyLoad: true }} />);
-			expect(container.firstChild).not.toBeNull();
+			expect(container).not.toBeEmptyDOMElement();
 		});
 	});
 
@@ -79,7 +94,7 @@ describe("Full author bio block", () => {
 
 		it("should render", () => {
 			const { container } = render(<FullAuthorBio customFields={{ lazyLoad: false }} />);
-			expect(container.firstChild).not.toBeNull();
+			expect(container).not.toBeEmptyDOMElement();
 		});
 	});
 
@@ -98,7 +113,7 @@ describe("Full author bio block", () => {
 
 		it("should still render", () => {
 			const { container } = render(<FullAuthorBio customFields={{ lazyLoad: false }} />);
-			expect(container.firstChild).not.toBeNull();
+			expect(container).not.toBeEmptyDOMElement();
 		});
 	});
 
@@ -114,7 +129,7 @@ describe("Full author bio block", () => {
 		it("should NOT render anything", () => {
 			const { container } = render(<FullAuthorBio />);
 
-			expect(container.firstChild).toBeNull();
+			expect(container).toBeEmptyDOMElement();
 		});
 	});
 });
diff --git a/blocks/full-author-bio-block/package-lock.json b/blocks/full-author-bio-block/package-lock.json
deleted file mode 100644
index 6fa092aabf..0000000000
--- a/blocks/full-author-bio-block/package-lock.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "@wpmedia/full-author-bio-block",
-  "version": "5.19.0",
-  "lockfileVersion": 1
-}