fix(background): fortify hasDOMDimensions check for null height (#592)

package.json

@@ -8,7 +8,8 @@
     "Max Kolyanov (https://github.com/maxkolyanov)",
     "Sherwin Heydarbeygi <[email protected]> (https://github.com/sherwinski)",
     "Baldur Helgason <[email protected]> (https://github.com/baldurh)",
-    "Tanner Stirrat <[email protected]> (https://github.com/tstirrat15)"
+    "Tanner Stirrat <[email protected]> (https://github.com/tstirrat15)",
+    "Stephen Cook <[email protected]> (https://github.com/stephencookdev)"
   ],
   "license": "ISC",
   "bugs": {

src/react-imgix-bg.jsx

@@ -26,7 +26,8 @@ const BackgroundImpl = props => {
     className = ""
   } = props;
   const { w: forcedWidth, h: forcedHeight } = imgixParams;
-  const hasDOMDimensions = contentRect.bounds.top != null;
+  const hasDOMDimensions =
+    contentRect.bounds.width != null && contentRect.bounds.height != null;
   const htmlAttributes = props.htmlAttributes || {};
   const dpr = toFixed(2, imgixParams.dpr || global.devicePixelRatio || 1);
   const ref = htmlAttributes.ref;

test/unit/react-imgix.test.jsx

@@ -12,6 +12,7 @@ import Imgix, {
   __SourceImpl,
   __PictureImpl
 } from "react-imgix";
+import { __BackgroundImpl } from "react-imgix-bg";
 
 function shallow(element, target = __ReactImgixImpl, shallowOptions) {
   return shallowUntilTarget(element, target, {
@@ -23,6 +24,14 @@ function shallow(element, target = __ReactImgixImpl, shallowOptions) {
 const shallowSource = element => shallow(element, __SourceImpl);
 const shallowPicture = element => shallow(element, __PictureImpl);
 
+const makeBackgroundWithBounds = bounds => props => (
+  <__BackgroundImpl
+    measureRef={() => null}
+    contentRect={{ bounds }}
+    {...props}
+  />
+);
+
 const src = "http://domain.imgix.net/image.jpg";
 let sut;
 let oldConsole, log;
@@ -504,6 +513,44 @@ describe("When in picture mode", () => {
   });
 });
 
+describe("When in background mode", () => {
+  it("should be loading when there is a width but no height", () => {
+    const Background = makeBackgroundWithBounds({ top: 10, width: 100 });
+
+    sut = mount(
+      <Background
+        src={`${src}`}
+        className="bg-img"
+        contentRect={{ bounds: { top: 10, width: 100 } }}
+      >
+        <div>Content</div>
+      </Background>
+    );
+
+    expect(sut.find("div.bg-img").hasClass("react-imgix-bg-loading")).toBe(
+      true
+    );
+  });
+
+  it("should not be loading when a width and height are available", () => {
+    const Background = makeBackgroundWithBounds({
+      top: 10,
+      width: 100,
+      height: 100
+    });
+
+    sut = mount(
+      <Background src={`${src}`} className="bg-img">
+        <div>Content</div>
+      </Background>
+    );
+
+    expect(sut.find("div.bg-img").hasClass("react-imgix-bg-loading")).toBe(
+      false
+    );
+  });
+});
+
 describe("When using the component", () => {
   let className = "img--enabled";
   beforeEach(() => {