Refactor. Add tests. Add index.js.

Author: Amir Tocker

index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import CloudinaryContext from './src/components/CloudinaryContext';
+import Image from './src/components/Image';
+import Transformation from './src/components/Transformation';
+import Video from './src/components/Video';
+
+export  { CloudinaryContext, Image, Transformation, Video};

src/Util/Util.js

@@ -2,6 +2,8 @@ import debounce from './debounce';
 import firstDefined from './firstDefined';
 import closestAbove from './closestAbove';
 
-module.exports = {
+let Util = {
   debounce, firstDefined, closestAbove
 };
+
+export default Util;

src/components/CloudinaryContext/CloudinaryContext.js

@@ -56,6 +56,7 @@ export default class CloudinaryContext extends CloudinaryComponent {
     );
   }
 }
+
 CloudinaryContext.propTypes = CloudinaryComponent.propTypes;
 CloudinaryContext.defaultProps = {};
 CloudinaryContext.childContextTypes = CloudinaryComponent.contextTypes;

src/components/Image/Image.js

@@ -3,8 +3,13 @@ import cloudinary, {Util} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
 import {debounce, firstDefined, closestAbove} from '../../Util';
 
+
 export default class Image extends CloudinaryComponent {
   constructor(props, context) {
+    function defaultBreakpoints(width, steps = 100) {
+      return steps * Math.ceil(width / steps);
+    }
+
     super(props, context);
     let options = CloudinaryComponent.normalizeOptions(context, props);
     this.handleResize = this.handleResize.bind(this);
@@ -211,7 +216,3 @@ Image.defaultProps = {};
 Image.contextTypes = CloudinaryComponent.contextTypes;
 Image.propTypes = CloudinaryComponent.propTypes;
 
-function defaultBreakpoints(width, steps = 100) {
-  return steps * Math.ceil(width / steps);
-}
-

test/ContextTest.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow, mount, render } 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 cloudName="demo">
+        <Image publicId="sample"  />
+      </CloudinaryContext>
+    );
+
+    expect(tag.html().startsWith("<div")).to.equal(true);
+    let img = tag.childAt(0);
+    expect(img.node.state["url"]).to.equal("http://res.cloudinary.com/demo/image/upload/sample");
+  });
+
+  it("should allow chained Contexts", function() {
+    let tag = mount(
+      <CloudinaryContext cloudName="demo">
+        <CloudinaryContext width="100" crop="scale">
+          <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);
+  });
+});

test/TransformationTest.js

@@ -21,10 +21,12 @@ describe('Transformation', () => {
     let tag = shallow(
       <Image publicId="sample" cloudName="demo" >
         <Transformation width="100" crop="scale"/>
-        <Transformation width="200" crop="crop"/>
+        <Transformation width="200" crop="pad">
+          <Transformation angle="30"/>
+        </Transformation>
       </Image>
     );
     expect(tag.type()).to.equal("img");
-    expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_100/c_crop,w_200/sample");
+    expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_100/a_30/c_pad,w_200/sample");
   });
 });