Source code
Revision control
Copy as Markdown
Other Tools
import { DSImage } from "content-src/components/DiscoveryStreamComponents/DSImage/DSImage";
import { mount } from "enzyme";
import React from "react";
describe("Discovery Stream <DSImage>", () => {
it("should have a child with class ds-image", () => {
const img = mount(<DSImage />);
const child = img.find(".ds-image");
assert.lengthOf(child, 1);
});
it("should set proper sources if only `source` is available", () => {
assert.equal(
img.find("img").prop("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 img = mount(
<DSImage
sizes={testSizes}
/>
);
assert.equal(
img.find("img").prop("src"),
);
assert.equal(
img.find("img").prop("srcSet"),
[
].join(",")
);
});
it("should fall back to unoptimized when optimized failed", () => {
const img = mount(
<DSImage
/>
);
img.setState({
isSeen: true,
containerWidth: 640,
containerHeight: 480,
});
img.instance().onOptimizedImageError();
img.update();
assert.equal(
img.find("img").prop("src"),
);
});
it("should render a placeholder image with no source and recent save", () => {
const img = mount(<DSImage isRecentSave={true} url="foo" title="bar" />);
img.setState({ isSeen: true });
img.update();
assert.equal(img.find("div").prop("className"), "placeholder-image");
});
it("should render a broken image with a source and a recent save", () => {
const img = mount(<DSImage isRecentSave={true} source="foo" />);
img.setState({ isSeen: true });
img.instance().onNonOptimizedImageError();
img.update();
assert.equal(img.find("div").prop("className"), "broken-image");
});
it("should render a broken image without a source and not a recent save", () => {
const img = mount(<DSImage isRecentSave={false} />);
img.setState({ isSeen: true });
img.instance().onNonOptimizedImageError();
img.update();
assert.equal(img.find("div").prop("className"), "broken-image");
});
it("should update loaded state when seen", () => {
const img = mount(
);
img.instance().onLoad();
assert.propertyVal(img.state(), "isLoaded", true);
});
describe("DSImage with Idle Callback", () => {
let wrapper;
let windowStub = {
requestIdleCallback: sinon.stub().returns(1),
cancelIdleCallback: sinon.stub(),
};
beforeEach(() => {
wrapper = mount(<DSImage windowObj={windowStub} />);
});
it("should call requestIdleCallback on componentDidMount", () => {
assert.calledOnce(windowStub.requestIdleCallback);
});
it("should call cancelIdleCallback on componentWillUnmount", () => {
wrapper.instance().componentWillUnmount();
assert.calledOnce(windowStub.cancelIdleCallback);
});
});
});