fix: callback refs overwritting htmlAttributes.ref

imgix · Nov 13, 2019 · 9d7abbf · 9d7abbf
1 parent aca4ceb
commit 9d7abbf
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 40 deletions.
diff --git a/src/react-imgix.jsx b/src/react-imgix.jsx
@@ -220,14 +220,20 @@ class ReactImgix extends Component {
       defaultAttributeMap,
       this.props.attributeConfig
     );
-    const childProps = Object.assign({}, this.props.htmlAttributes, {
-      [attributeConfig.sizes]: this.props.sizes,
-      className: this.props.className,
-      width: width <= 1 ? null : width,
-      height: height <= 1 ? null : height,
-      [attributeConfig.src]: src,
-      ref: el => (this.imgRef = el)
-    });
+    const childProps = Object.assign(
+      {},
+      {
+        [attributeConfig.sizes]: this.props.sizes,
+        className: this.props.className,
+        width: width <= 1 ? null : width,
+        height: height <= 1 ? null : height,
+        [attributeConfig.src]: src,
+        ref: el => {
+          this.imgRef = el;
+        }
+      },
+      this.props.htmlAttributes
+    );
     if (!disableSrcSet) {
       childProps[attributeConfig.srcSet] = srcSet;
     }
@@ -331,13 +337,17 @@ class SourceImpl extends Component {
       defaultAttributeMap,
       this.props.attributeConfig
     );
-    const childProps = Object.assign({}, this.props.htmlAttributes, {
-      [attributeConfig.sizes]: this.props.sizes,
-      className: this.props.className,
-      width: width <= 1 ? null : width,
-      height: height <= 1 ? null : height,
-      ref: el => (this.sourceRef = el)
-    });
+    const childProps = Object.assign(
+      {},
+      {
+        [attributeConfig.sizes]: this.props.sizes,
+        className: this.props.className,
+        width: width <= 1 ? null : width,
+        height: height <= 1 ? null : height,
+        ref: el => (this.sourceRef = el)
+      },
+      this.props.htmlAttributes
+    );
 
     // inside of a <picture> element a <source> element ignores its src
     // attribute in favor of srcSet so we set that with either an actual

diff --git a/test/unit/react-imgix.test.jsx b/test/unit/react-imgix.test.jsx
@@ -166,6 +166,7 @@ describe("When in image mode", () => {
       />
     );
 
+    expect(onMountedSpy.called);
     expect(onMountedSpy.callCount).toEqual(1);
     const onMountArg = onMountedSpy.lastCall.args[0];
     expect(onMountArg).toBeInstanceOf(HTMLImageElement);
@@ -309,6 +310,56 @@ describe("When in <source> mode", () => {
     const onMountArg = onMountedSpy.lastCall.args[0];
     expect(onMountArg).toBeInstanceOf(HTMLSourceElement);
   });
+
+  describe("using the htmlAttributes prop", () => {
+    it("assigns an alt attribute given htmlAttributes.alt", async () => {
+      const htmlAttributes = {
+        alt: "Example alt attribute"
+      };
+
+      sut = mount(
+        <Source
+          src={"https://mysource.imgix.net/demo.png"}
+          sizes="100vw"
+          htmlAttributes={htmlAttributes}
+        />
+      );
+
+      expect(sut.props()["htmlAttributes"].alt).toEqual(htmlAttributes.alt);
+    });
+
+    it("passes any attributes via htmlAttributes to the rendered element", () => {
+      const htmlAttributes = {
+        "data-src": "https://mysource.imgix.net/demo.png"
+      };
+      sut = mount(
+        <Source
+          src={"https://mysource.imgix.net/demo.png"}
+          sizes="100vw"
+          htmlAttributes={htmlAttributes}
+        />
+      );
+
+      expect(sut.props()["htmlAttributes"]["data-src"]).toEqual(
+        htmlAttributes["data-src"]
+      );
+    });
+
+    it("attaches a ref via htmlAttributes", () => {
+      const callback = sinon.spy();
+
+      sut = mount(
+        <Source
+          src={"https://mysource.imgix.net/demo.png"}
+          sizes="100vw"
+          htmlAttributes={{ ref: callback }}
+        />
+      );
+
+      expect(callback.called).toBeTruthy();
+      expect(callback.callCount).toEqual(1);
+    });
+  });
 });
 
 describe("When in picture mode", () => {
@@ -706,33 +757,50 @@ describe("When using the component", () => {
     });
   });
 
-  it("an alt attribute should be set given htmlAttributes.alt", async () => {
-    const htmlAttributes = {
-      alt: "Example alt attribute"
-    };
-    sut = shallow(
-      <Imgix
-        src={"https://mysource.imgix.net/demo.png"}
-        sizes="100vw"
-        htmlAttributes={htmlAttributes}
-      />
-    );
-    expect(sut.props().alt).toEqual(htmlAttributes.alt);
-  });
+  describe("using the htmlAttributes prop", () => {
+    it("assigns an alt attribute given htmlAttributes.alt", async () => {
+      const htmlAttributes = {
+        alt: "Example alt attribute"
+      };
+      sut = shallow(
+        <Imgix
+          src={"https://mysource.imgix.net/demo.png"}
+          sizes="100vw"
+          htmlAttributes={htmlAttributes}
+        />
+      );
+      expect(sut.props().alt).toEqual(htmlAttributes.alt);
+    });
 
-  it("any attributes passed via htmlAttributes should be added to the rendered element", () => {
-    const htmlAttributes = {
-      "data-src": "https://mysource.imgix.net/demo.png"
-    };
-    sut = shallow(
-      <Imgix
-        src={"https://mysource.imgix.net/demo.png"}
-        sizes="100vw"
-        htmlAttributes={htmlAttributes}
-      />
-    );
+    it("passes any attributes via htmlAttributes to the rendered element", () => {
+      const htmlAttributes = {
+        "data-src": "https://mysource.imgix.net/demo.png"
+      };
+      sut = shallow(
+        <Imgix
+          src={"https://mysource.imgix.net/demo.png"}
+          sizes="100vw"
+          htmlAttributes={htmlAttributes}
+        />
+      );
 
-    expect(sut.props()["data-src"]).toEqual(htmlAttributes["data-src"]);
+      expect(sut.props()["data-src"]).toEqual(htmlAttributes["data-src"]);
+    });
+
+    it("attaches a ref via htmlAttributes", () => {
+      const callback = sinon.spy();
+
+      sut = mount(
+        <Imgix
+          src={"https://mysource.imgix.net/demo.png"}
+          sizes="100vw"
+          htmlAttributes={{ ref: callback }}
+        />
+      );
+
+      expect(callback.called).toBeTruthy();
+      expect(callback.callCount).toEqual(1);
+    });
   });
 
   it("an ixlib parameter should be included by default in the computed src and srcSet", () => {