From c7fb86e23f8bf0b323cb52484e264630eecd6d39 Mon Sep 17 00:00:00 2001
From: Stephen Cook <stephen@stephencookdev.co.uk>
Date: Thu, 2 Apr 2020 00:56:44 +0100
Subject: [PATCH] fix(background): fortify `hasDOMDimensions` check for null
 height (#592)

---
 package.json                   |  3 ++-
 src/react-imgix-bg.jsx         |  3 ++-
 test/unit/react-imgix.test.jsx | 47 ++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4f141802..3d51dc10 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "Max Kolyanov (https://github.com/maxkolyanov)",
     "Sherwin Heydarbeygi <sherwin@imgix.com> (https://github.com/sherwinski)",
     "Baldur Helgason <baldur.helgason@gmail.com> (https://github.com/baldurh)",
-    "Tanner Stirrat <tstirrat@gmail.com> (https://github.com/tstirrat15)"
+    "Tanner Stirrat <tstirrat@gmail.com> (https://github.com/tstirrat15)",
+    "Stephen Cook <stephen@stephencookdev.com> (https://github.com/stephencookdev)"
   ],
   "license": "ISC",
   "bugs": {
diff --git a/src/react-imgix-bg.jsx b/src/react-imgix-bg.jsx
index eb56e50d..78531135 100644
--- a/src/react-imgix-bg.jsx
+++ b/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;
diff --git a/test/unit/react-imgix.test.jsx b/test/unit/react-imgix.test.jsx
index 8ca92b91..533e9e60 100644
--- a/test/unit/react-imgix.test.jsx
+++ b/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(() => {