Source code
Revision control
Copy as Markdown
Other Tools
import { act, render } from "@testing-library/react";
import { DSImage } from "content-src/components/DiscoveryStreamComponents/DSImage/DSImage";
import React from "react";
describe("Discovery Stream <DSImage>", () => {
it("should have a child with class ds-image", () => {
const { container } = render(<DSImage />);
expect(container.querySelectorAll(".ds-image")).toHaveLength(1);
});
it("should set proper sources if only `source` is available", () => {
const { container } = render(
);
expect(container.querySelector("img")).toHaveAttribute(
"src",
);
});
it("should set proper sources if `rawSource` is available", () => {
const testSizes = [
{
mediaMatcher: "(min-width: 1122px)",
width: 296,
height: 148,
},
{
mediaMatcher: "(min-width: 866px)",
width: 218,
height: 109,
},
{
mediaMatcher: "(max-width: 610px)",
width: 202,
height: 101,
},
];
const { container } = render(
<DSImage
sizes={testSizes}
/>
);
const renderedImage = container.querySelector("img");
expect(renderedImage).toHaveAttribute(
"src",
);
expect(renderedImage).toHaveAttribute(
"srcset",
[
].join(",")
);
// The last size doubles as an explicit pixel size on the img so it renders
// at its downloaded dimensions regardless of card width.
expect(renderedImage).toHaveStyle({ width: "202px", height: "101px" });
});
it("should not set an explicit size when no sizes are provided", () => {
const { container } = render(
);
expect(container.querySelector("img")).not.toHaveAttribute("style");
});
it("should fall back to unoptimized when optimized failed", () => {
const imageRef = React.createRef();
const { container } = render(
<DSImage
ref={imageRef}
/>
);
act(() => {
imageRef.current.setState({
isSeen: true,
containerWidth: 640,
containerHeight: 480,
});
imageRef.current.onOptimizedImageError();
});
expect(container.querySelector("img")).toHaveAttribute(
"src",
);
});
it("should render a placeholder image with no source and recent save", () => {
const imageRef = React.createRef();
const { container } = render(
<DSImage isRecentSave={true} url="foo" title="bar" ref={imageRef} />
);
act(() => {
imageRef.current.setState({ isSeen: true });
});
expect(container.querySelector("div")).toHaveClass("placeholder-image", {
exact: true,
});
});
it("should render a broken image with a source and a recent save", () => {
const imageRef = React.createRef();
const { container } = render(
<DSImage isRecentSave={true} source="foo" ref={imageRef} />
);
act(() => {
imageRef.current.setState({ isSeen: true });
imageRef.current.onNonOptimizedImageError();
});
expect(container.querySelector("div")).toHaveClass("broken-image", {
exact: true,
});
});
it("should render a broken image without a source and not a recent save", () => {
const imageRef = React.createRef();
const { container } = render(
<DSImage isRecentSave={false} ref={imageRef} />
);
act(() => {
imageRef.current.setState({ isSeen: true });
imageRef.current.onNonOptimizedImageError();
});
expect(container.querySelector("div")).toHaveClass("broken-image", {
exact: true,
});
});
it("should update loaded state when seen", () => {
const imageRef = React.createRef();
render(
);
act(() => {
imageRef.current.onLoad();
});
expect(imageRef.current.state.isLoaded).toBe(true);
});
it("should set proper ohttp src if secureImage is true", () => {
const { container } = render(
<DSImage rawSource={rawSource} secureImage={true} />
);
expect(container.querySelector("img")).toHaveAttribute(
"src",
);
});
describe("DSImage with Idle Callback", () => {
let wrapperRef;
const windowStub = {
requestIdleCallback: jest.fn().mockReturnValue(1),
cancelIdleCallback: jest.fn(),
};
beforeEach(() => {
wrapperRef = React.createRef();
render(<DSImage windowObj={windowStub} ref={wrapperRef} />);
});
it("should call requestIdleCallback on componentDidMount", () => {
expect(windowStub.requestIdleCallback).toHaveBeenCalledTimes(1);
});
it("should call cancelIdleCallback on componentWillUnmount", () => {
wrapperRef.current.componentWillUnmount();
expect(windowStub.cancelIdleCallback).toHaveBeenCalled();
});
});
});
describe("<DSImage>", () => {
it("should render", () => {
const { container } = render(<DSImage />);
expect(container.querySelector(".ds-image")).toBeInTheDocument();
});
});