diff --git a/.gitignore b/.gitignore index ee2dc1d..cef43d2 100644 --- a/.gitignore +++ b/.gitignore @@ -41,4 +41,6 @@ lib/ dist/ *-compiled.js* storybook-static/ -.storybook/ \ No newline at end of file +.storybook/ + +test-prod/ \ No newline at end of file diff --git a/package.json b/package.json index 0a89e1a..9697a3e 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "Present Cloudinary images and videos using React components", "main": "lib/index.js", "scripts": { + "pretest": "node_modules/.bin/webpack --config webpack.config.test.js -p", "test": "node_modules/.bin/mocha test/.setup.js --recursive test", "compile": "node_modules/.bin/babel src -d lib && cd src && find . -name package.json -exec cp --parents '{}' ../lib \\; -print", "dist": "node_modules/.bin/webpack", diff --git a/src/components/CloudinaryComponent/CloudinaryComponent.js b/src/components/CloudinaryComponent/CloudinaryComponent.js index e45d771..b4086ea 100644 --- a/src/components/CloudinaryComponent/CloudinaryComponent.js +++ b/src/components/CloudinaryComponent/CloudinaryComponent.js @@ -26,7 +26,7 @@ class CloudinaryComponent extends Component { if(children === undefined || children === null) return null; let mapped = React.Children.map(children, child =>{ let options = {}; - if (child.type && child.type.name === "Transformation"){ + if (child.type && child.type._displayName === "Transformation"){ options = CloudinaryComponent.normalizeOptions(child.props, child.context); } let childOptions = this.getChildTransformations(child.props.children); diff --git a/src/components/Transformation/Transformation.js b/src/components/Transformation/Transformation.js index 994b470..d39bcc2 100644 --- a/src/components/Transformation/Transformation.js +++ b/src/components/Transformation/Transformation.js @@ -5,6 +5,8 @@ import CloudinaryComponent from '../CloudinaryComponent'; * Define a transformation that is applied to the parent tag. */ class Transformation extends CloudinaryComponent { + static _displayName = "Transformation"; + constructor(props) { super(props); } diff --git a/test/ProdTest.js b/test/ProdTest.js new file mode 100644 index 0000000..36029ec --- /dev/null +++ b/test/ProdTest.js @@ -0,0 +1,32 @@ +import React from 'react'; +import ReactDOMServer from 'react-dom/server'; +import * as cloudinary from 'cloudinary-core'; +import * as cloudinaryReact from '../test-prod/cloudinary-react.js'; +import { expect } from 'chai'; + +describe('Image', () => { + beforeEach(() => { + + }); + it('Loads the production SDK', function() { + let Image = cloudinaryReact.Image; + expect(Image).to.be.ok; + }); + it('Renders an image', function() { + let Image = cloudinaryReact.Image; + const img = ReactDOMServer.renderToString( + + + ); + expect(img).to.contain('src="http://res.cloudinary.com/demo/image/upload/sample"'); + }); + it('Renders an image with a transformation', function() { + let Image = cloudinaryReact.Image; + const img = ReactDOMServer.renderToString( + + + + ); + expect(img).to.contain('src="http://res.cloudinary.com/demo/image/upload/c_scale,w_200/sample"'); + }); +}); \ No newline at end of file diff --git a/webpack.config.test.js b/webpack.config.test.js new file mode 100644 index 0000000..f43e937 --- /dev/null +++ b/webpack.config.test.js @@ -0,0 +1,7 @@ +// Override Webpack configurations for running tests over the production Webpack build +const config = require('./webpack.config'); +config.output.path = 'test-prod'; +config.externals['cloudinary-core'] = 'cloudinary-core'; +config.externals['react'] = 'react'; + +module.exports = config; \ No newline at end of file