Feature/update context tests (#122)

Author: Nir Maoz

src/Util/extractCloudinaryProps.js

@@ -1,31 +1,47 @@
-import {Util} from "cloudinary-core";
+import {Transformation, Util} from 'cloudinary-core';
+
+const CLOUDINARY_REACT_PROPS = {includeOwnBody: true};
+
+// Map Cloudinary props from array to object for efficient lookup
+const CLOUDINARY_PROPS = Transformation.PARAM_NAMES.map(Util.camelCase).reduce(
+  (accumulator, cloudinaryPropName) => {
+    accumulator[cloudinaryPropName] = true;
+    return accumulator;
+  },
+  {}
+);
 
 const isDefined = (props, key) => {
   return (props[key] !== undefined && props[key] !== null);
 };
 
 /**
- * Extracts cloudinaryProps and nonCloudinaryProps from given props according to given validProps
+ * Extracts cloudinaryProps and nonCloudinaryProps from given props
+ *
  * @param props
- * @param validProps
- * @returns {{cloudinaryProps: {}, nonCloudinaryProps: {}}}
+ * @returns {{children: *, cloudinaryReactProps: {}, cloudinaryProps: {}, nonCloudinaryProps: {}}}
  */
-export default (props = {}, validProps = {}) => {
+export default ({children, ...props}) => {
   let result = {
+    children,
     cloudinaryProps: {},
-    nonCloudinaryProps: {}
+    nonCloudinaryProps: {},
+    cloudinaryReactProps: {}
   };
 
   Object.keys(props).forEach(key => {
     const camelKey = Util.camelCase(key);
+    const value = props[key];
 
     //if valid and defined add to cloudinaryProps
-    if (validProps[camelKey]) {
+    if (CLOUDINARY_PROPS[camelKey]) {
       if (isDefined(props, key)) {
-        result.cloudinaryProps[camelKey] = props[key];
+        result.cloudinaryProps[camelKey] = value;
       }
+    } else if (CLOUDINARY_REACT_PROPS[camelKey]) { //cloudinary-react spesific prop
+      result.cloudinaryReactProps[camelKey] = value;
     } else { //not valid so add to nonCloudinaryProps
-      result.nonCloudinaryProps[key] = props[key];
+      result.nonCloudinaryProps[key] = value;
     }
   });
 

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -106,10 +106,9 @@ class CloudinaryComponent extends PureComponent {
     return cl.url(extendedProps.publicId, transformation);
   }
 }
-CloudinaryComponent.VALID_OPTIONS = Transformation.PARAM_NAMES.map(camelCase);
-CloudinaryComponent.contextType = CloudinaryContextType;
 
-CloudinaryComponent.propTypes = typesFrom(CloudinaryComponent.VALID_OPTIONS);
+CloudinaryComponent.contextType = CloudinaryContextType;
+CloudinaryComponent.propTypes = typesFrom(Transformation.PARAM_NAMES.map(camelCase));
 CloudinaryComponent.propTypes.publicId = PropTypes.string;
 CloudinaryComponent.propTypes.responsive = PropTypes.bool;
 

src/components/CloudinaryContext/CloudinaryContext.js

@@ -17,55 +17,22 @@ import {CloudinaryContextType} from './CloudinaryContextType';
 class CloudinaryContext extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
-
-    this.calcState = this.calcState.bind(this);
-    this.state = this.calcState();
-  }
-
-  /**
-   * Calculates current state
-   * @returns {context, childrenProps, includeOwnBody}
-   */
-  calcState() {
-    const context = this.context || {}; //context might not exist
-    const props = {...context, ...this.props}; //merge context with props
-
-    //split the props to cloudinary/non-cloudinary props
-    const {cloudinaryProps, nonCloudinaryProps} = extractCloudinaryProps(
-      props, CloudinaryContext.CLOUDINARY_PROPS
-    );
-
-    //extract includeOwnBody which is used only by this context and should not be passed to children
-    const {includeOwnBody, ...childrenProps} = nonCloudinaryProps;
-
-    return {
-      context: cloudinaryProps,
-      childrenProps,
-      includeOwnBody
-    };
   }
 
   render() {
-    const {children} = this.props;
-    const {context, childrenProps, includeOwnBody} = this.state;
+    const context = this.context || {};
+    const props = {...context, ...this.props};
+
+    const {children, cloudinaryProps, nonCloudinaryProps, cloudinaryReactProps} = extractCloudinaryProps(props);
 
     return (
-      <CloudinaryContextType.Provider value={context}>
-        {includeOwnBody ? children : <div {...childrenProps}>{children}</div>}
+      <CloudinaryContextType.Provider value={cloudinaryProps}>
+        {cloudinaryReactProps.includeOwnBody ? children : <div {...nonCloudinaryProps}>{children}</div>}
       </CloudinaryContextType.Provider>
     );
   }
 }
 
-// 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, includeOwnBody: PropTypes.bool};
 CloudinaryContext.defaultProps = {includeOwnBody: false};
 CloudinaryContext.contextType = CloudinaryContextType;

src/components/Image/Image.js

@@ -57,7 +57,6 @@ class Image extends CloudinaryComponent {
       state.url = url;
     }
 
-
     return state;
   }
 
@@ -87,7 +86,7 @@ class Image extends CloudinaryComponent {
   }
 
   componentDidUpdate(prevProps) {
-    this.setState(this.prepareState(this.props, this.state));
+    this.setState(this.prepareState());
     if (this.state.responsive) {
       const wait = firstDefined(this.props.responsiveDebounce, this.context.responsiveDebounce, 100);
       if (this.listener) {
@@ -103,7 +102,6 @@ class Image extends CloudinaryComponent {
       CloudinaryComponent.normalizeOptions(this.props, this.context);
     const attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     const {url} = this.state;
-
     return (
       <img {...attributes} src={url} ref={(e) => {
         this.element = e;

test/ContextTest.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { expect } from 'chai';
-import { mount } from 'enzyme';
-import setProps from './setProps';
+import {expect} from 'chai';
+import {mount} from 'enzyme';
 import cloudinary from './cloudinary-proxy';
-const {Image, CloudinaryContext, Transformation} = cloudinary;
+
+const {Image, CloudinaryContext} = cloudinary;
 
 describe('CloudinaryContext', () => {
-  it("should pass properties to children", function() {
+  it("should pass properties to children", function () {
     let tag = mount(
       <CloudinaryContext className="root" cloudName="demo">
-        <Image publicId="sample" />
+        <Image publicId="sample"/>
       </CloudinaryContext>
     );
 
@@ -20,48 +20,48 @@ describe('CloudinaryContext', () => {
     expect(img.instance().state.url).to.equal("http://res.cloudinary.com/demo/image/upload/sample");
   });
 
-   it("should render without div", function() {
+  it("should render without div", function () {
     let tag = mount(
       <CloudinaryContext className="root" cloudName="demo" includeOwnBody={true}>
-        <Image publicId="sample" />
+        <Image publicId="sample"/>
       </CloudinaryContext>
     );
 
     expect(tag.html().startsWith("<div")).to.equal(false);
   });
-  it("should render with div", function() {
+  it("should render with div", function () {
     let tag = mount(
       <CloudinaryContext className="root" cloudName="demo" includeOwnBody={false}>
-        <Image publicId="sample" />
+        <Image publicId="sample"/>
       </CloudinaryContext>
     );
 
     expect(tag.html().startsWith("<div")).to.equal(true);
   });
 
-  it("should pass properties to children with snake case", function() {
-      let tag = mount(
-          <CloudinaryContext className="root" cloudName="demo" fetch_format="auto" >
-              <Image publicId="sample" />
-          </CloudinaryContext>
-      );
+  it("should pass properties to children with snake case", function () {
+    let tag = mount(
+      <CloudinaryContext className="root" cloudName="demo" fetch_format="auto">
+        <Image publicId="sample"/>
+      </CloudinaryContext>
+    );
 
-      let img = tag.find("div").childAt(0);
-      expect(img.instance().state.url).to.equal("http://res.cloudinary.com/demo/image/upload/f_auto/sample");
+    let img = tag.find("div").childAt(0);
+    expect(img.instance().state.url).to.equal("http://res.cloudinary.com/demo/image/upload/f_auto/sample");
   });
 
-  it("should pass properties to children with kebab case", function() {
-      let tag = mount(
-          <CloudinaryContext className="root" cloudName="demo" fetch-format="auto" >
-              <Image publicId="sample" />
-          </CloudinaryContext>
-      );
+  it("should pass properties to children with kebab case", function () {
+    let tag = mount(
+      <CloudinaryContext className="root" cloudName="demo" fetch-format="auto">
+        <Image publicId="sample"/>
+      </CloudinaryContext>
+    );
 
-      let img = tag.find("div").childAt(0);
-      expect(img.instance().state.url).to.equal("http://res.cloudinary.com/demo/image/upload/f_auto/sample");
+    let img = tag.find("div").childAt(0);
+    expect(img.instance().state.url).to.equal("http://res.cloudinary.com/demo/image/upload/f_auto/sample");
   });
 
-  it("should remove Cloudinary custom properties from CloudinaryContext component", function() {
+  it("should remove Cloudinary custom properties from CloudinaryContext component", function () {
     let html = mount(
       <CloudinaryContext
         className="root"
@@ -71,7 +71,7 @@ describe('CloudinaryContext', () => {
         role="tab"
         aria-live="polite"
       >
-        <Image publicId="sample" />
+        <Image publicId="sample"/>
       </CloudinaryContext>
     );
 
@@ -86,35 +86,28 @@ describe('CloudinaryContext', () => {
     expect(contextDiv.find('img').prop("src")).to.equal("https://res.cloudinary.com/demo/image/upload/q_auto/sample");
   });
 
-  it("should allow chained Contexts", function() {
+  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.find('img').prop('src')
     ).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_100/sample");
   });
-  it("updates transformations dynamically on context change", function () {
-    const cloudName1 = "demo";
-    const cloudName2 = "demo2";
 
-    let tag = mount(
-      <CloudinaryContext cloudName={cloudName1}>
-        <Image publicId="sample">
-          <Transformation width="100" crop="scale"/>
-        </Image>
+  it("should update url on context change", function () {
+    const tag = mount(
+      <CloudinaryContext cloudName="demo">
+        <Image publicId="sample"/>
       </CloudinaryContext>
     );
 
-    expect(tag.find('img').getElement().props.src).to.equal(`http://res.cloudinary.com/${cloudName1}/image/upload/c_scale,w_100/sample`);
-
-    tag.setProps({cloudName: cloudName2});
-    setProps(tag, {cloudName: cloudName2}).then(tag => {
-      expect(tag.find('img').getElement().props.src).to.equal(`http://res.cloudinary.com/${cloudName2}/image/upload/c_scale,w_100/sample`);
-    });
+    expect(tag.find('img').prop('src')).to.equal("http://res.cloudinary.com/demo/image/upload/sample");
+    tag.setProps({cloudName: "demo2"}).update();
+    expect(tag.find('img').prop('src')).to.equal("http://res.cloudinary.com/demo2/image/upload/sample");
   });
 });

test/TransformationTest.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { expect } from "chai";
-import { shallow, mount } from "enzyme";
-import setProps from './setProps';
+import { shallow } from "enzyme";
 import cloudinary from './cloudinary-proxy';
 const {Image, Transformation} = cloudinary;
 
@@ -46,18 +45,17 @@ describe("Transformation", () => {
     );
   });
   it("updates transformations dynamically", function() {
-    let image = mount(
+    let image = shallow(
       <Image publicId="sample" cloudName="demo">
         <Transformation width="100" crop="scale" />
       </Image>
     );
 
-    expect(image.find('img').getElement().props.src).to.equal('http://res.cloudinary.com/demo/image/upload/c_scale,w_100/sample');
+    expect(image.props().src).to.equal('http://res.cloudinary.com/demo/image/upload/c_scale,w_100/sample');
 
-    const transformation = mount(<Transformation width="200" crop="scale"/>);
+    const transformation = <Transformation width="200" crop="scale"/>;
+    image.setProps({children: [transformation]});
 
-    setProps(image, {children: [transformation]}).then(image=>{
-      expect(image.find('img').getElement().props.src).to.equal('http://res.cloudinary.com/demo/image/upload/c_scale,w_200/sample');
-    });
+    expect(image.props().src).to.equal('http://res.cloudinary.com/demo/image/upload/c_scale,w_200/sample');
   });
 });