diff --git a/src/components/CloudinaryComponent/CloudinaryComponent.js b/src/components/CloudinaryComponent/CloudinaryComponent.js index f521dd6..4080ea9 100644 --- a/src/components/CloudinaryComponent/CloudinaryComponent.js +++ b/src/components/CloudinaryComponent/CloudinaryComponent.js @@ -47,20 +47,20 @@ class CloudinaryComponent extends Component { /** * Returns an object with all the transformation parameters based on the context and properties of this element * and any children. - * @param options + * @param extendedProps * @returns {object} a hash of transformation and configuration parameters * @protected */ - getTransformation(options) { + getTransformation(extendedProps) { var transformation; - if (this.props.children !== undefined) { - let childrenOptions = this.getChildTransformations(this.props.children); + if (extendedProps.children !== undefined) { + let childrenOptions = this.getChildTransformations(extendedProps.children); if (!Util.isEmpty(childrenOptions)) { transformation = childrenOptions; - return {...options, transformation}; + return {...extendedProps, transformation}; } } - return {...options}; + return {...extendedProps}; } /** @@ -85,14 +85,14 @@ class CloudinaryComponent extends Component { /** * Generate a Cloudinary resource URL based on the options provided and child Transformation elements - * @param options + * @param extendedProps React props combined with custom Cloudinary configuration options * @returns {string} a cloudinary URL * @protected */ - getUrl(options) { - let transformation = this.getTransformation(options); - let cl = Cloudinary.new(Util.withSnakeCaseKeys(options)); - return cl.url(options.publicId, transformation); + getUrl(extendedProps) { + let transformation = this.getTransformation(extendedProps); + let cl = Cloudinary.new(Util.withSnakeCaseKeys(extendedProps)); + return cl.url(extendedProps.publicId, transformation); } } diff --git a/src/components/Image/Image.js b/src/components/Image/Image.js index 81b78e8..3522392 100644 --- a/src/components/Image/Image.js +++ b/src/components/Image/Image.js @@ -45,13 +45,13 @@ class Image extends CloudinaryComponent { * @private */ prepareState(props = this.props, context = this.context) { - let options = CloudinaryComponent.normalizeOptions(context, props); - let url = this.getUrl(options); + let extendedProps = CloudinaryComponent.normalizeOptions(context, props); + let url = this.getUrl(extendedProps); let state = {}; - if (options.breakpoints !== undefined) { - state.breakpoints = options.breakpoints; + if (extendedProps.breakpoints !== undefined) { + state.breakpoints = extendedProps.breakpoints; } - if (options.responsive) { + if (extendedProps.responsive) { state.responsive = true; url = this.cloudinary_update(url, state); } diff --git a/test/TransformationTest.js b/test/TransformationTest.js index f87072f..dfd5085 100644 --- a/test/TransformationTest.js +++ b/test/TransformationTest.js @@ -1,44 +1,58 @@ -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 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"; - -describe('Transformation', () => { - beforeEach(() => { - }); +describe("Transformation", () => { + beforeEach(() => {}); it("should create an img tag", function() { let tag = shallow( - - + + ); expect(tag.name()).to.equal("img"); - expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/a_10,c_scale,w_100/sample"); + expect(tag.state("url")).to.equal( + "http://res.cloudinary.com/demo/image/upload/a_10,c_scale,w_100/sample" + ); }); it("should allow chained transformations", function() { let tag = shallow( - - + + - + ); expect(tag.type()).to.equal("img"); - expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_100/a_30/c_pad,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" + ); + }); + it("array should define a set of variables", function() { + let tag = shallow( + + ); + expect(tag.type()).to.equal("img"); + expect(tag.state("url")).to.equal( + "http://res.cloudinary.com/demo/image/upload/$z_5,$foo_$z_mul_2/sample" + ); + }); + it("updates transformations dynamically", function() { + let image = mount( + + + + ); + expect(image.find('img').getElement().props.src).to.equal('http://res.cloudinary.com/demo/image/upload/c_scale,w_100/sample'); + let transformation = mount(); + image.setProps({children: [transformation]}); + expect(image.find('img').getElement().props.src).to.equal('http://res.cloudinary.com/demo/image/upload/c_scale,w_200/sample'); }); - it("array should define a set of variables", function () { - let tag = shallow( - - ); - expect(tag.type()).to.equal("img"); - expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/$z_5,$foo_$z_mul_2/sample"); - }); -}); \ No newline at end of file +});