Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import { render, fireEvent } from "@testing-library/react";
import { SectionFollowButton } from "content-src/components/DiscoveryStreamComponents/SectionFollowButton/SectionFollowButton";
const DEFAULT_PROPS = {
following: false,
onFollowClick: jest.fn(),
onUnfollowClick: jest.fn(),
title: "Health",
};
describe("<SectionFollowButton>", () => {
it("should render a plus icon and default button type in idle state", () => {
const { container } = render(<SectionFollowButton {...DEFAULT_PROPS} />);
const button = container.querySelector("moz-button");
expect(button.getAttribute("iconsrc")).toContain("plus.svg");
expect(button.getAttribute("type")).toBe("default");
});
it("should show primary button type and follow label on hover", () => {
const { container } = render(<SectionFollowButton {...DEFAULT_PROPS} />);
fireEvent.mouseEnter(container.querySelector(".section-follow"));
const button = container.querySelector("moz-button");
expect(button.getAttribute("type")).toBe("primary");
expect(button.getAttribute("data-l10n-id")).toBe(
"newtab-section-follow-button"
);
});
it("should render a check icon and following class when following", () => {
const { container } = render(
<SectionFollowButton {...DEFAULT_PROPS} following={true} />
);
const button = container.querySelector("moz-button");
expect(button.getAttribute("iconsrc")).toContain("check.svg");
expect(
container.querySelector(".section-follow.following")
).toBeInTheDocument();
});
it("should show destructive button type and close icon on hover when following", () => {
const { container } = render(
<SectionFollowButton {...DEFAULT_PROPS} following={true} />
);
fireEvent.mouseEnter(container.querySelector(".section-follow"));
const button = container.querySelector("moz-button");
expect(button.getAttribute("type")).toBe("destructive");
expect(button.getAttribute("iconsrc")).toContain("close.svg");
});
it("should have an aria-label containing topic in idle state", () => {
const { container } = render(<SectionFollowButton {...DEFAULT_PROPS} />);
const button = container.querySelector("moz-button");
expect(button.getAttribute("data-l10n-id")).toBe(
"newtab-section-follow-button-label"
);
expect(button.getAttribute("data-l10n-args")).toBe(
JSON.stringify({ topic: "Health" })
);
});
it("should use unfollow aria-label in idle state when following", () => {
const { container } = render(
<SectionFollowButton {...DEFAULT_PROPS} following={true} />
);
const button = container.querySelector("moz-button");
expect(button.getAttribute("data-l10n-id")).toBe(
"newtab-section-unfollow-button-label"
);
expect(button.getAttribute("data-l10n-args")).toBe(
JSON.stringify({ topic: "Health" })
);
});
});