DSImage.test.jsx (5023B)
1 import { DSImage } from "content-src/components/DiscoveryStreamComponents/DSImage/DSImage"; 2 import { mount } from "enzyme"; 3 import React from "react"; 4 5 describe("Discovery Stream <DSImage>", () => { 6 it("should have a child with class ds-image", () => { 7 const img = mount(<DSImage />); 8 const child = img.find(".ds-image"); 9 10 assert.lengthOf(child, 1); 11 }); 12 13 it("should set proper sources if only `source` is available", () => { 14 const img = mount(<DSImage source="https://placekitten.com/g/640/480" />); 15 16 assert.equal( 17 img.find("img").prop("src"), 18 "https://placekitten.com/g/640/480" 19 ); 20 }); 21 22 it("should set proper sources if `rawSource` is available", () => { 23 const testSizes = [ 24 { 25 mediaMatcher: "(min-width: 1122px)", 26 width: 296, 27 height: 148, 28 }, 29 30 { 31 mediaMatcher: "(min-width: 866px)", 32 width: 218, 33 height: 109, 34 }, 35 36 { 37 mediaMatcher: "(max-width: 610px)", 38 width: 202, 39 height: 101, 40 }, 41 ]; 42 43 const img = mount( 44 <DSImage 45 rawSource="https://placekitten.com/g/640/480" 46 sizes={testSizes} 47 /> 48 ); 49 50 assert.equal( 51 img.find("img").prop("src"), 52 "https://placekitten.com/g/640/480" 53 ); 54 assert.equal( 55 img.find("img").prop("srcSet"), 56 [ 57 "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", 58 "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", 59 "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", 60 "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", 61 "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", 62 "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", 63 ].join(",") 64 ); 65 }); 66 67 it("should fall back to unoptimized when optimized failed", () => { 68 const img = mount( 69 <DSImage 70 source="https://placekitten.com/g/640/480" 71 rawSource="https://placekitten.com/g/640/480" 72 /> 73 ); 74 img.setState({ 75 isSeen: true, 76 containerWidth: 640, 77 containerHeight: 480, 78 }); 79 80 img.instance().onOptimizedImageError(); 81 img.update(); 82 83 assert.equal( 84 img.find("img").prop("src"), 85 "https://placekitten.com/g/640/480" 86 ); 87 }); 88 89 it("should render a placeholder image with no source and recent save", () => { 90 const img = mount(<DSImage isRecentSave={true} url="foo" title="bar" />); 91 img.setState({ isSeen: true }); 92 93 img.update(); 94 95 assert.equal(img.find("div").prop("className"), "placeholder-image"); 96 }); 97 98 it("should render a broken image with a source and a recent save", () => { 99 const img = mount(<DSImage isRecentSave={true} source="foo" />); 100 img.setState({ isSeen: true }); 101 102 img.instance().onNonOptimizedImageError(); 103 img.update(); 104 105 assert.equal(img.find("div").prop("className"), "broken-image"); 106 }); 107 108 it("should render a broken image without a source and not a recent save", () => { 109 const img = mount(<DSImage isRecentSave={false} />); 110 img.setState({ isSeen: true }); 111 112 img.instance().onNonOptimizedImageError(); 113 img.update(); 114 115 assert.equal(img.find("div").prop("className"), "broken-image"); 116 }); 117 118 it("should update loaded state when seen", () => { 119 const img = mount( 120 <DSImage rawSource="https://placekitten.com/g/640/480" /> 121 ); 122 123 img.instance().onLoad(); 124 assert.propertyVal(img.state(), "isLoaded", true); 125 }); 126 127 it("should set proper ohttp src if secureImage is true", () => { 128 const rawSource = "https://placekitten.com/g/640/480"; 129 const img = mount(<DSImage rawSource={rawSource} secureImage={true} />); 130 131 assert.equal( 132 img.find("img").prop("src"), 133 `moz-cached-ohttp://newtab-image/?url=${encodeURIComponent(rawSource)}` 134 ); 135 }); 136 137 describe("DSImage with Idle Callback", () => { 138 let wrapper; 139 let windowStub = { 140 requestIdleCallback: sinon.stub().returns(1), 141 cancelIdleCallback: sinon.stub(), 142 }; 143 beforeEach(() => { 144 wrapper = mount(<DSImage windowObj={windowStub} />); 145 }); 146 147 it("should call requestIdleCallback on componentDidMount", () => { 148 assert.calledOnce(windowStub.requestIdleCallback); 149 }); 150 151 it("should call cancelIdleCallback on componentWillUnmount", () => { 152 wrapper.instance().componentWillUnmount(); 153 assert.calledOnce(windowStub.cancelIdleCallback); 154 }); 155 }); 156 });