Skip to content

Commit

Permalink
THEMES-1916: Full Author was not accounting for "original" author data (
Browse files Browse the repository at this point in the history 
#2163)

* THEMES-1916: Full Author was not accounting for "original" author data
  • Loading branch information
@nschubach
nschubach authored Jun 13, 2024
1 parent 1ecfe5c commit 063d668
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 191 deletions.
1 change: 1 addition & 0 deletions blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
245 changes: 72 additions & 173 deletions blocks/full-author-bio-block/features/full-author-bio/_children/Presentation/index.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ jest.mock("@wpmedia/arc-themes-components", () => ({
Icon: ({ name }) => <div data-testid={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) =>
Expand All @@ -25,89 +31,62 @@ describe("Full Author Bio Block", () => {
});

it("should not render if the author is invalid", () => {
const author = undefined;
const { container } = render(<Presentation arcSite="test-site" author={author} />);

const { container } = render(<Presentation />);
expect(container).toBeEmptyDOMElement();
});

it("should render the author url if the authorProfileLink if true", () => {
const author = {
_id: "janedoe",
byline: "Jane Da Doe",
};
render(
<Presentation arcSite="test-site" author={author} authorProfileLink="/author/profile" />,
);
const link = screen.getByRole("link", { name: author.byline });
it("should render the author url if it exists", () => {
render(<Presentation author={{ _id, byline }} authorProfileLink="/author/profile" />);
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(<Presentation arcSite="test-site" author={author} />);
expect(screen.getByRole("heading", { name: author.byline })).not.toBeNull();
render(<Presentation author={{ _id, byline }} />);
expect(screen.getByRole("heading", { name: byline })).not.toBeNull();
});

it("should render the role", () => {
const author = {
_id: "janedoe",
role: "Senior Product Manager",
};
render(<Presentation arcSite="test-site" author={author} />);
expect(screen.getByRole("heading", { name: author.role })).not.toBeNull();
render(<Presentation author={{ _id, role }} />);
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(<Presentation arcSite="test-site" author={author} />);
expect(screen.getByText("She works on Arc Themes", { exact: false })).not.toBeNull();
render(<Presentation author={{ _id, longBio }} />);
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(<Presentation arcSite="test-site" author={author} />);
expect(screen.getByRole("img", { name: author.byline })).not.toBeNull();
render(<Presentation author={{ _id, byline, image }} />);
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(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, image }} />);
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(
render(
<Presentation
author={{
_id,
image,
byline: "resized image",

ansImage: {
url: "resized.jpg",
auth: { 2: "12345" },
},
}}
/>,
);
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",
);
Expand All @@ -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(<Presentation arcSite="test-site" author={author} />);
render(
<Presentation
author={{
_id,
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",
}}
/>,
);
expect(screen.getByTestId("Envelope")).not.toBeNull();
expect(screen.getByTestId("Facebook")).not.toBeNull();
expect(screen.getByTestId("Instagram")).not.toBeNull();
Expand All @@ -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(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, email: "janedoe", youtube: "janedoe" }} />);
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(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, email: "janedoe" }} />);
expect(screen.getByTestId("Envelope")).not.toBeNull();
});

it("should render the Facebook icon if specified", () => {
const author = {
_id: "janedoe",
facebook: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, facebook: "janedoe" }} />);
expect(screen.getByTestId("Facebook")).not.toBeNull();
});

it("should render the Instagram icon if specified", () => {
const author = {
_id: "janedoe",
instagram: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, instagram: "janedoe" }} />);
expect(screen.getByTestId("Instagram")).not.toBeNull();
});

it("should render the LinkedIn icon if specified", () => {
const author = {
_id: "janedoe",
linkedin: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, linkedin: "janedoe" }} />);
expect(screen.getByTestId("LinkedIn")).not.toBeNull();
});

it("should render the RSS icon if specified", () => {
const author = {
_id: "janedoe",
rss: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, rss: "janedoe" }} />);
expect(screen.getByTestId("Rss")).not.toBeNull();
});

it("should render the Twitter icon if specified", () => {
const author = {
_id: "janedoe",
twitter: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, twitter: "janedoe" }} />);
expect(screen.getByTestId("Twitter")).not.toBeNull();
});

it("should render the Medium icon if specified", () => {
const author = {
_id: "janedoe",
medium: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, medium: "janedoe" }} />);
expect(screen.getByTestId("Medium")).not.toBeNull();
});

it("should render the Pinterest icon if specified", () => {
const author = {
_id: "janedoe",
pinterest: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, pinterest: "janedoe" }} />);
expect(screen.getByTestId("Pinterest")).not.toBeNull();
});

it("should render the Reddit icon if specified", () => {
const author = {
_id: "janedoe",
reddit: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, reddit: "janedoe" }} />);
expect(screen.getByTestId("Reddit")).not.toBeNull();
});

it("should render the Snapchat icon if specified", () => {
const author = {
_id: "janedoe",
snapchat: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, snapchat: "janedoe" }} />);
expect(screen.getByTestId("Snapchat")).not.toBeNull();
});

it("should render the SoundCloud icon if specified", () => {
const author = {
_id: "janedoe",
soundcloud: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, soundcloud: "janedoe" }} />);
expect(screen.getByTestId("SoundCloud")).not.toBeNull();
});

it("should render the Tumblr icon if specified", () => {
const author = {
_id: "janedoe",
tumblr: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, tumblr: "janedoe" }} />);
expect(screen.getByTestId("Tumblr")).not.toBeNull();
});

it("should render the WhatsApp icon if specified", () => {
const author = {
_id: "janedoe",
whatsapp: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, whatsapp: "janedoe" }} />);
expect(screen.getByTestId("WhatsApp")).not.toBeNull();
});

it("should render the Youtube icon if specified", () => {
const author = {
_id: "janedoe",
youtube: "janedoe",
};
render(<Presentation arcSite="test-site" author={author} />);
render(<Presentation author={{ _id, youtube: "janedoe" }} />);
expect(screen.getByTestId("Youtube")).not.toBeNull();
});
});
Loading

0 comments on commit 063d668

Please sign in to comment.