1 files changed, 146 insertions, 0 deletions
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSImage.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSImage.test.jsx
new file mode 100644
index 0000000000..bb2ce3b0b3
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSImage.test.jsx
@@ -0,0 +1,146 @@
+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", () => {
+    const img = mount(<DSImage source="https://placekitten.com/g/640/480" />);
+
+    assert.equal(
+      img.find("img").prop("src"),
+      "https://placekitten.com/g/640/480"
+    );
+  });
+
+  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
+        rawSource="https://placekitten.com/g/640/480"
+        sizes={testSizes}
+      />
+    );
+
+    assert.equal(
+      img.find("img").prop("src"),
+      "https://placekitten.com/g/640/480"
+    );
+    assert.equal(
+      img.find("img").prop("srcSet"),
+      [
+        "https://img-getpocket.cdn.mozilla.net/296x148/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 296w",
+        "https://img-getpocket.cdn.mozilla.net/592x296/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 592w",
+        "https://img-getpocket.cdn.mozilla.net/218x109/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 218w",
+        "https://img-getpocket.cdn.mozilla.net/436x218/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 436w",
+        "https://img-getpocket.cdn.mozilla.net/202x101/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 202w",
+        "https://img-getpocket.cdn.mozilla.net/404x202/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 404w",
+      ].join(",")
+    );
+  });
+
+  it("should fall back to unoptimized when optimized failed", () => {
+    const img = mount(
+      <DSImage
+        source="https://placekitten.com/g/640/480"
+        rawSource="https://placekitten.com/g/640/480"
+      />
+    );
+    img.setState({
+      isSeen: true,
+      containerWidth: 640,
+      containerHeight: 480,
+    });
+
+    img.instance().onOptimizedImageError();
+    img.update();
+
+    assert.equal(
+      img.find("img").prop("src"),
+      "https://placekitten.com/g/640/480"
+    );
+  });
+
+  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(
+      <DSImage rawSource="https://placekitten.com/g/640/480" />
+    );
+
+    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);
+    });
+  });
+});