diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 2c0e5bf..0000000 --- a/.npmignore +++ /dev/null @@ -1,58 +0,0 @@ -.idea/ - - -# Logs -logs -*.log -npm-debug.log* - -# Runtime data -pids -*.pid -*.seed - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ -bower_components/ - -# Optional npm cache directory -.npm - -# Optional REPL history -.node_repl_history - -*-compiled.js* -stories/ -.storybook/ -tools/ -docs/ -samples/ -test/ -storybook-static/ - -babel.config.js -.babelrc -package-lock.json -yarn.lock -.nvmrc -.travis.yml -webpack.config.js diff --git a/.npmrc b/.npmrc index deba745..43c97e7 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1 @@ - - package-lock=false +package-lock=false diff --git a/.travis.yml b/.travis.yml index 505b583..b701890 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,7 +5,12 @@ node_js: - "lts/*" before_script: - npm run build -env: - - TEST_SUBJECT=src - - TEST_SUBJECT=lib - - TEST_SUBJECT=dist +jobs: + - name: "src" + env: TEST_SUBJECT=src + - name: "lib" + env: TEST_SUBJECT=lib + - name: "dist" + env: TEST_SUBJECT=dist + - name: "e2e" + script: yarn run test:e2e \ No newline at end of file diff --git a/e2e-test/.env b/e2e-test/.env new file mode 100644 index 0000000..7d910f1 --- /dev/null +++ b/e2e-test/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/e2e-test/.gitignore b/e2e-test/.gitignore new file mode 100644 index 0000000..4d29575 --- /dev/null +++ b/e2e-test/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/e2e-test/.npmrc b/e2e-test/.npmrc new file mode 100644 index 0000000..9cf9495 --- /dev/null +++ b/e2e-test/.npmrc @@ -0,0 +1 @@ +package-lock=false \ No newline at end of file diff --git a/e2e-test/cypress.json b/e2e-test/cypress.json new file mode 100644 index 0000000..ba9bc7b --- /dev/null +++ b/e2e-test/cypress.json @@ -0,0 +1,4 @@ +{ + "baseUrl": "http://localhost:3000", + "video": false +} diff --git a/e2e-test/cypress/integration/init.spec.js b/e2e-test/cypress/integration/init.spec.js new file mode 100644 index 0000000..f3d0957 --- /dev/null +++ b/e2e-test/cypress/integration/init.spec.js @@ -0,0 +1,9 @@ +describe('Cypress', () => { + it('is working', () => { + expect(true).to.equal(true) + }) +}) + +it('visits the app', () => { + cy.visit('/') +}) \ No newline at end of file diff --git a/e2e-test/cypress/integration/responsive.spec.js b/e2e-test/cypress/integration/responsive.spec.js new file mode 100644 index 0000000..df25631 --- /dev/null +++ b/e2e-test/cypress/integration/responsive.spec.js @@ -0,0 +1,29 @@ +describe('Responsive Image', () => { + it('Responsive Image', () => { + cy.visit('/'); + + cy.get('#responsive') + .should('have.attr', 'data-src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_auto/sample') + cy.get('#responsive') + .should('have.attr', 'src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_400/sample') + }); + it('Disabled Breakpoints', () => { + cy.visit('/'); + + cy.get('#responsive') + .should('have.attr', 'data-src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_auto/sample') + cy.get('#disable-breakpoints') + .should('have.attr', 'src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_330/sample') + }); + it('Enabled Breakpoints', () => { + cy.visit('/'); + + cy.get('#responsive') + .should('have.attr', 'data-src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_auto/sample') + cy.get('#breakpoints') + .should('have.attr', 'src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_450/sample') + }); + + + +}); \ No newline at end of file diff --git a/e2e-test/package.json b/e2e-test/package.json new file mode 100644 index 0000000..0d10764 --- /dev/null +++ b/e2e-test/package.json @@ -0,0 +1,41 @@ +{ + "name": "e2e-test", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.3.2", + "@testing-library/user-event": "^7.1.2", + "cloudinary-react": "file:cloudinary-react.tgz", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-scripts": "3.4.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "cypress": "./node_modules/.bin/cypress run", + "pretest": "npm install", + "test": "start-server-and-test start http://localhost:3000 cypress", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "cypress": "^4.9.0", + "start-server-and-test": "^1.11.0" + } +} diff --git a/e2e-test/public/favicon.ico b/e2e-test/public/favicon.ico new file mode 100644 index 0000000..bcd5dfd Binary files /dev/null and b/e2e-test/public/favicon.ico differ diff --git a/e2e-test/public/index.html b/e2e-test/public/index.html new file mode 100644 index 0000000..aa069f2 --- /dev/null +++ b/e2e-test/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/e2e-test/public/logo192.png b/e2e-test/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/e2e-test/public/logo192.png differ diff --git a/e2e-test/public/logo512.png b/e2e-test/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/e2e-test/public/logo512.png differ diff --git a/e2e-test/public/manifest.json b/e2e-test/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/e2e-test/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/e2e-test/public/robots.txt b/e2e-test/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/e2e-test/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/e2e-test/src/App.css b/e2e-test/src/App.css new file mode 100644 index 0000000..4968d20 --- /dev/null +++ b/e2e-test/src/App.css @@ -0,0 +1,71 @@ +html, body { + position: relative; + width: 100%; + height: 100%; +} + +body { + color: #333; + margin: 0; + padding: 8px; + box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +a { + color: rgb(0,100,200); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +a:visited { + color: rgb(0,80,160); +} + +label { + display: block; +} + +input, button, select, textarea { + font-family: inherit; + font-size: inherit; + padding: 0.4em; + margin: 0 0 0.5em 0; + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 2px; +} + +input:disabled { + color: #ccc; +} + +input[type="range"] { + height: 0; +} + +button { + color: #333; + background-color: #f4f4f4; + outline: none; +} + +button:disabled { + color: #999; +} + +button:not(:disabled):active { + background-color: #ddd; +} + +button:focus { + border-color: #666; +} + +.cld-responsive{ + max-width:100%; + max-height: 100%; +} diff --git a/e2e-test/src/App.js b/e2e-test/src/App.js new file mode 100644 index 0000000..9b58684 --- /dev/null +++ b/e2e-test/src/App.js @@ -0,0 +1,22 @@ +import React from 'react'; +import {Image} from 'cloudinary-react'; +import './App.css'; + +function App() { + return ( +
+

Responsive Image

+
+ +
+
+ +
+
+ 450}/> +
+
+ ); +} + +export default App; diff --git a/e2e-test/src/App.test.js b/e2e-test/src/App.test.js new file mode 100644 index 0000000..4db7ebc --- /dev/null +++ b/e2e-test/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/e2e-test/src/index.css b/e2e-test/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/e2e-test/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/e2e-test/src/index.js b/e2e-test/src/index.js new file mode 100644 index 0000000..f5185c1 --- /dev/null +++ b/e2e-test/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import * as serviceWorker from './serviceWorker'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/e2e-test/src/serviceWorker.js b/e2e-test/src/serviceWorker.js new file mode 100644 index 0000000..b04b771 --- /dev/null +++ b/e2e-test/src/serviceWorker.js @@ -0,0 +1,141 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl, { + headers: { 'Service-Worker': 'script' }, + }) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready + .then(registration => { + registration.unregister(); + }) + .catch(error => { + console.error(error.message); + }); + } +} diff --git a/e2e-test/src/setupTests.js b/e2e-test/src/setupTests.js new file mode 100644 index 0000000..74b1a27 --- /dev/null +++ b/e2e-test/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; diff --git a/package.json b/package.json index 3d33c78..7187fd5 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,13 @@ "main": "lib/index.js", "scripts": { "test": "node_modules/.bin/mocha --require @babel/register test/.setup.js --recursive test", - "test:all": "run-s build test test-dist test-lib", + "test:all": "run-s build test test-dist test-lib test:e2e", "test-dist": "TEST_SUBJECT=dist node_modules/.bin/mocha --require @babel/register test/.setup.js --recursive test", "test-lib": "TEST_SUBJECT=lib node_modules/.bin/mocha --require @babel/register test/.setup.js --recursive test", + "pretest:e2e": "npm run build && npm pack && cpy cloudinary-react-*.tgz e2e-test --rename=cloudinary-react.tgz", + "test:e2e": "cd ./e2e-test && npm run test", "prebuild": "node_modules/.bin/babel src --out-dir lib --copy-files ", - "build": "node_modules/.bin/webpack && npm run build-storybook && npm run bundlewatch", + "build": "node_modules/.bin/webpack && npm run bundlewatch", "bundlewatch": "bundlewatch --config ./bundlewatch.config.js", "storybook": "start-storybook -p 6006", "build-storybook": "del-cli docs && build-storybook -c .storybook -o docs" @@ -43,6 +45,7 @@ "bundlewatch": "^0.2.6", "chai": "^4.1.2", "chai-string": "^1.4.0", + "cpy-cli": "^3.1.1", "del-cli": "^3.0.0", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", @@ -59,5 +62,10 @@ }, "peerDependencies": { "react": "^16.3.3" - } + }, + "files": [ + "src", + "lib", + "dist" + ] } diff --git a/src/Util/Util.js b/src/Util/Util.js index 3c752c4..6ffd822 100644 --- a/src/Util/Util.js +++ b/src/Util/Util.js @@ -1,6 +1,2 @@ -export debounce from './debounce'; -export firstDefined from './firstDefined'; -export closestAbove from './closestAbove'; -export {requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame'; -export isElement from './isElement'; export extractCloudinaryProps from './extractCloudinaryProps'; +export * from './cloudinaryCoreUtils'; diff --git a/src/Util/closestAbove.js b/src/Util/closestAbove.js deleted file mode 100644 index 2b90439..0000000 --- a/src/Util/closestAbove.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Returns the first item in list that is greater or equal to the given value. - * @param {Array} list a sorted array of items - * @param {*} value - * @returns {*} - * @protected - */ -export default function closestAbove(list, value) { - return list.reduce((last, next) => value <= last ? last : next, undefined); -} diff --git a/src/Util/cloudinaryCoreUtils.js b/src/Util/cloudinaryCoreUtils.js new file mode 100644 index 0000000..3d19fe3 --- /dev/null +++ b/src/Util/cloudinaryCoreUtils.js @@ -0,0 +1,55 @@ +import {Cloudinary, Util} from "cloudinary-core"; + +/** + * Return object without null/undefined entries + * @param {*} obj + */ +const nonEmpty = (obj) => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : { ...a, [k]: v }), {}); + +/** + * Generated a configured Cloudinary object. + * @param extendedProps React props combined with custom Cloudinary configuration options + * @return {Cloudinary} configured using extendedProps + */ +const getConfiguredCloudinary = (extendedProps) => { + const { public_id, ...ops } = nonEmpty(extendedProps); // Remove null/undefined props + const options = Util.withSnakeCaseKeys(ops); + return Cloudinary.new(options); +}; + +const getTag = (props, tagType) => { + const { publicId, ...ops} = props; // Remove null/undefined props + const cld = getConfiguredCloudinary(ops); + return cld[`${tagType}Tag`](publicId, Util.withSnakeCaseKeys(ops)); +}; + +/** + * Get a new tag initialized with given props + * @param {*} props + */ +const getImageTag = (props) => getTag(props, "image"); + +/** + * Get a new