Filter Cloudinary custom props from rendered div (#37)

* Filter Cloudinary custom props from rendered div

When rendering the div underlying CloudinaryContext remove Cloudinary custom props to avoid errors such as "React does not recognize the `cloudName` prop on a DOM element"

* Restore single quote import style, add case to unit test

* Fix test after merge with React 16

Author: eitanp461

src/components/CloudinaryContext/CloudinaryContext.js

@@ -30,12 +30,26 @@ class CloudinaryContext extends CloudinaryComponent {
   }
 
   render() {
-    return (
-      <div {...this.props}>{this.props.children}</div>
-    );
+    // Remove Cloudinary custom props that don't belong to div
+    const nonCloudinaryProps = Object.keys(this.props)
+      .filter(propName => !CloudinaryContext.CLOUDINARY_PROPS[propName])
+      .reduce((allowedProps, currentProp) => {
+        allowedProps[currentProp] = this.props[currentProp];
+        return allowedProps;
+      }, {});
+    return <div {...nonCloudinaryProps}>{this.props.children}</div>;
   }
 }
 
+// Map Cloudinary props from array to object for efficient lookup
+CloudinaryContext.CLOUDINARY_PROPS = CloudinaryComponent.VALID_OPTIONS.reduce(
+  (accumulator, cloudinaryPropName) => {
+    accumulator[cloudinaryPropName] = true;
+    return accumulator;
+  },
+  {}
+);
+
 CloudinaryContext.propTypes = CloudinaryComponent.propTypes;
 CloudinaryContext.defaultProps = {};
 CloudinaryContext.childContextTypes = CloudinaryComponent.contextTypes;

test/ContextTest.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import { expect } from 'chai';
-import { shallow, mount, render } from 'enzyme';
+import { mount } from 'enzyme';
 import Image from '../src/components/Image';
 import Transformation from '../src/components/Transformation';
 import CloudinaryContext from '../src/components/CloudinaryContext';
 
-
 describe('CloudinaryContext', () => {
-  beforeEach(() => {
-  });
   it("should pass properties to children", function() {
     let tag = mount(
       <CloudinaryContext className="root" cloudName="demo">
-        <Image publicId="sample"  />
+        <Image publicId="sample" />
       </CloudinaryContext>
     );
 
@@ -23,16 +20,43 @@ describe('CloudinaryContext', () => {
     expect(img.instance().state.url).to.equal("http://res.cloudinary.com/demo/image/upload/sample");
   });
 
+  it("should remove Cloudinary custom properties from CloudinaryContext component", function() {
+    let html = mount(
+      <CloudinaryContext
+        className="root"
+        cloudName="demo"
+        quality="auto"
+        secure="true"
+        role="tab"
+        aria-live="polite"
+      >
+        <Image publicId="sample" />
+      </CloudinaryContext>
+    );
+
+    const contextDiv = html.find("div");
+    expect(contextDiv.find(".root").length).to.equal(1);
+    expect(contextDiv.find("[role='tab']").length).to.equal(1);
+    expect(contextDiv.find("[aria-live='polite']").length).to.equal(1);
+    expect(contextDiv.find("[cloudName='demo']").length).to.equal(0);
+    expect(contextDiv.find("[quality]").length).to.equal(0);
+
+    // Verify that transformations from context are applied to components
+    expect(contextDiv.find('img').prop("src")).to.equal("https://res.cloudinary.com/demo/image/upload/q_auto/sample");
+  });
+
   it("should allow chained Contexts", function() {
     let tag = mount(
       <CloudinaryContext cloudName="demo">
         <CloudinaryContext width="100" crop="scale">
-          <Image publicId="sample"/>
+          <Image publicId="sample" />
         </CloudinaryContext>
       </CloudinaryContext>
     );
-    expect(tag.containsMatchingElement(
-      <img src="http://res.cloudinary.com/demo/image/upload/c_scale,w_100/sample"/>
-    )).to.equal(true);
+    expect(
+      tag.containsMatchingElement(
+        <img src="http://res.cloudinary.com/demo/image/upload/c_scale,w_100/sample" />
+      )
+    ).to.equal(true);
   });
-});
+});

yarn.lock

@@ -1809,6 +1809,10 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
+chai-string@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/chai-string/-/chai-string-1.4.0.tgz#359140c051d36a4e4b1a5fc6b910152f438a8d49"
+
 chai@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.1.2.tgz#0f64584ba642f0f2ace2806279f4f06ca23ad73c"
@@ -4969,10 +4973,6 @@ react-addons-create-fragment@^15.5.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.0"
 
-react-addons-test-utils@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.2.tgz#c12b6efdc2247c10da7b8770d185080a7b047156"
-
 react-docgen@^2.15.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.20.0.tgz#41a6da483a34a4aaed041a9909f5e61864d681cb"