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 file,
import { render } from "@testing-library/react";
import { HighlightPopoverBody } from "content-src/components/DiscoveryStreamComponents/FeatureHighlight/HighlightPopoverBody";
const defaultBody = {
image: { src: "default.png" },
title: { l10nId: "default-title-id" },
subtitle: { l10nId: "default-subtitle-id" },
};
describe("<HighlightPopoverBody>", () => {
it("renders defaults from the registry body when content has no overrides", () => {
const { container } = render(
<HighlightPopoverBody body={defaultBody} content={{}} />
);
expect(container.querySelector(".title").getAttribute("data-l10n-id")).toBe(
"default-title-id"
);
expect(
container.querySelector(".subtitle").getAttribute("data-l10n-id")
).toBe("default-subtitle-id");
expect(container.querySelector("img").getAttribute("src")).toBe(
"default.png"
);
});
it("renders raw strings from content.cardTitle / cardMessage when provided", () => {
const { container } = render(
<HighlightPopoverBody
body={defaultBody}
content={{ cardTitle: "Raw Title", cardMessage: "Raw Body" }}
/>
);
expect(container.querySelector(".title").textContent).toBe("Raw Title");
expect(container.querySelector(".title").hasAttribute("data-l10n-id")).toBe(
false
);
expect(container.querySelector(".subtitle").textContent).toBe("Raw Body");
});
it("renders custom l10n ids from content.title / subtitle when raw is absent", () => {
const { container } = render(
<HighlightPopoverBody
body={defaultBody}
content={{ title: "custom-title-id", subtitle: "custom-subtitle-id" }}
/>
);
expect(container.querySelector(".title").getAttribute("data-l10n-id")).toBe(
"custom-title-id"
);
expect(
container.querySelector(".subtitle").getAttribute("data-l10n-id")
).toBe("custom-subtitle-id");
});
it("renders content.imageURL override over registry default", () => {
const { container } = render(
<HighlightPopoverBody
body={defaultBody}
content={{ imageURL: "override.png" }}
/>
);
expect(container.querySelector("img").getAttribute("src")).toBe(
"override.png"
);
});
it("hides the image when content.hideImage is truthy", () => {
const { container } = render(
<HighlightPopoverBody body={defaultBody} content={{ hideImage: true }} />
);
expect(container.querySelector("img")).toBeNull();
});
it("renders a <picture> with srcset when body has srcLight/srcDark", () => {
const { container } = render(
<HighlightPopoverBody
body={{
...defaultBody,
image: { srcLight: "light.png", srcDark: "dark.png" },
}}
content={{}}
/>
);
expect(container.querySelector("picture")).toBeInTheDocument();
expect(
container.querySelector('source[media="(prefers-color-scheme: dark)"]')
.srcset
).toBe("dark.png");
expect(
container.querySelector('source[media="(prefers-color-scheme: light)"]')
.srcset
).toBe("light.png");
});
});