From 4d3d3ea842ea212096a6d9fd36cf795a8d5aea12 Mon Sep 17 00:00:00 2001
From: maoznir <nir.maoz@cloudinary.com>
Date: Fri, 26 Jun 2020 15:21:46 +0300
Subject: [PATCH 1/8] Refactor responsive image

---
 package.json                                  |   2 +-
 src/Util/Util.js                              |   6 +-
 src/Util/closestAbove.js                      |  10 -
 src/Util/cloudinaryCoreUtils.js               |  54 +++++
 src/Util/debounce.js                          |  36 ---
 src/Util/firstDefined.js                      |  12 -
 src/Util/isElement.js                         |  28 ---
 src/Util/requestAnimationFrame.js             |  37 ---
 .../CloudinaryComponent.js                    |  87 ++++---
 src/components/Image/Image.js                 | 212 ++----------------
 .../Transformation/Transformation.js          |   1 +
 test/ContextTest.js                           |  12 +-
 test/ImageTest.js                             | 105 +++------
 test/TransformationTest.js                    |  33 +--
 test/Util.js                                  |  31 ---
 15 files changed, 186 insertions(+), 480 deletions(-)
 delete mode 100644 src/Util/closestAbove.js
 create mode 100644 src/Util/cloudinaryCoreUtils.js
 delete mode 100644 src/Util/debounce.js
 delete mode 100644 src/Util/firstDefined.js
 delete mode 100644 src/Util/isElement.js
 delete mode 100644 src/Util/requestAnimationFrame.js
 delete mode 100644 test/Util.js

diff --git a/package.json b/package.json
index 3d33c78..c6547a0 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "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",
     "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"
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..5ac8e1b
--- /dev/null
+++ b/src/Util/cloudinaryCoreUtils.js
@@ -0,0 +1,54 @@
+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.extractUrlParams(Util.withSnakeCaseKeys(ops));
+  return Cloudinary.new(options);
+};
+
+const getTag = (props, tagType) => {
+  const { publicId, ...ops} = props; // Remove null/undefined props
+  const cld = getConfiguredCloudinary(props);
+  return cld[`${tagType}Tag`](publicId, ops);
+};
+
+/**
+ * Get a new <img> tag initialized with given props
+ * @param {*} props
+ */
+const getImageTag = (props) => getTag(props, "image");
+
+/**
+ * Get a new <video> tag initialized with given props
+ * @param {*} props
+ */
+const getVideoTag = (props) => getTag(props, "video");
+
+/**
+ * Cloudinary underlying JS library will handle responsive behavior
+ * @param {HTMLImageElement} img
+ * @param {object} options
+ */
+const responsive = (img, options) =>{
+  const cld = Cloudinary.new(options); // Initialize cloudinary with new props
+  cld.cloudinary_update(img, options);
+  cld.responsive(options, false);
+};
+
+export {
+  nonEmpty,
+  getImageTag,
+  getVideoTag,
+  responsive
+};
diff --git a/src/Util/debounce.js b/src/Util/debounce.js
deleted file mode 100644
index ec75a63..0000000
--- a/src/Util/debounce.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Delay execution of func until wait milliseconds have passed since the last invocation of the returned debounced function.
- * @param {function} func the function to execute
- * @param {number} wait waiting time in milliseconds
- * @param {boolean=false} immediate if true execute func at the beginning of the wait period
- * @returns {function()} debounced function
- * @protected
- */
-export default function debounce(func, wait, immediate) {
-  let timeout = null;
-  let debounced = () => {
-    const context = this;
-    const args = arguments;
-    const callNow = immediate && !timeout;
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-    const later = () => {
-      timeout = null;
-      if (!immediate) {
-        func.apply(context, args);
-      }
-    };
-
-    timeout = setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
-    }
-  };
-
-  debounced.cancel = ()=> {
-    clearTimeout(timeout);
-    timeout = null;
-  };
-  return debounced;
-}
\ No newline at end of file
diff --git a/src/Util/firstDefined.js b/src/Util/firstDefined.js
deleted file mode 100644
index 3cfb24a..0000000
--- a/src/Util/firstDefined.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Returns the first argument that is not undefined
- * @param {...*} values a list of arguments of any type
- * @returns {*}
- * @protected
- */
-export default function firstDefined(...values){
-  for(let i = 0; i < values.length; i++) {
-    if(values[i] !== undefined) return values[i];
-  }
-  return undefined;
-}
diff --git a/src/Util/isElement.js b/src/Util/isElement.js
deleted file mode 100644
index f14e2c4..0000000
--- a/src/Util/isElement.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// Originally from lodash
-
-/**
- * Checks if `value` is a DOM element.
- *
- * @static
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.
- * @protected
- * @example
- *
- * _.isElement(document.body);
- * // => true
- *
- * _.isElement('<body>');
- * // => false
- */
-export default function isElement(value) {
-  return value != null && value.nodeType === 1 && isObjectLike(value);
-}
-
-function isObjectLike(value) {
-  return value != null && typeof value == 'object';
-}
-
-
diff --git a/src/Util/requestAnimationFrame.js b/src/Util/requestAnimationFrame.js
deleted file mode 100644
index d2b3989..0000000
--- a/src/Util/requestAnimationFrame.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
-// https://gist.github.com/paulirish/1579671
-// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
-
-// MIT license
-
-var lastTime = 0;
-var vendors = ['ms', 'moz', 'webkit', 'o'];
-var requestAnimationFrame;
-var cancelAnimationFrame;
-
-if(typeof window != "undefined"){
-  requestAnimationFrame = window.requestAnimationFrame;
-  cancelAnimationFrame = window.cancelAnimationFrame;
-  for (var x = 0; x < vendors.length && !requestAnimationFrame; ++x) {
-    requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
-    cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
-      || window[vendors[x] + 'CancelRequestAnimationFrame'];
-  }
-}
-if (!requestAnimationFrame)
-  requestAnimationFrame = function (callback, element) {
-    var currTime = new Date().getTime();
-    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-    var id = setTimeout(function () { callback(currTime + timeToCall); },
-      timeToCall);
-    lastTime = currTime + timeToCall;
-    return id;
-  };
-
-if (!cancelAnimationFrame)
-  cancelAnimationFrame = function (id) {
-    clearTimeout(id);
-  };
-
-export {requestAnimationFrame, cancelAnimationFrame};
\ No newline at end of file
diff --git a/src/components/CloudinaryComponent/CloudinaryComponent.js b/src/components/CloudinaryComponent/CloudinaryComponent.js
index 832907a..2486bb3 100644
--- a/src/components/CloudinaryComponent/CloudinaryComponent.js
+++ b/src/components/CloudinaryComponent/CloudinaryComponent.js
@@ -1,9 +1,21 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Cloudinary, Transformation, Util} from 'cloudinary-core';
+import {Transformation, Util} from 'cloudinary-core';
 import {CloudinaryContextType} from '../CloudinaryContext/CloudinaryContextType';
 
-const camelCase = Util.camelCase;
+const {camelCase} = Util;
+
+/**
+ * Check if given component is a Cloudinary Component with given displayName
+ * @param component the component to check
+ * @param displayName of wanted component
+ * @return {boolean}
+ */
+const isCloudinaryComponent = (component, displayName) => {
+  return !!(React.isValidElement(component)
+    && component.type
+    && component.type.displayName === displayName);
+};
 
 /**
  * Return a new object containing keys and values where keys are in the keys list
@@ -12,7 +24,7 @@ const camelCase = Util.camelCase;
  * @returns {object} an object with copied values
  */
 function only(source, keys = []) {
-  if(!source){
+  if (!source) {
     return source;
   }
 
@@ -32,36 +44,37 @@ class CloudinaryComponent extends PureComponent {
   constructor(props, context) {
     super(props, context);
     this.getContext = this.getContext.bind(this);
+    this.onIntersect = this.onIntersect.bind(this);
   }
 
   render() {
     return null;
   }
 
-  getContext(){
+  getContext() {
     return this.context || {};
   }
 
+  /**
+   * React function: Called when this element is in view
+   */
+  onIntersect() {
+    this.setState({isInView: true})
+  }
+
   getChildTransformations(children) {
-    if(children === undefined || children === null) return null;
-    let mapped = React.Children.map(children, child =>{
-      if (!React.isValidElement(child)) {
-        // child is not an element (e.g. simple text)
-        return;
-      }
-      let options = {};
-      if (child.type && child.type.exposesProps){
-        options = CloudinaryComponent.normalizeOptions(child.props, child.context);
-      }
-      let childOptions = this.getChildTransformations(child.props.children);
-      if(childOptions !== undefined && childOptions !== null){
-        options.transformation = childOptions;
-      }
-      return options;
-    });
-    if(mapped != null){
-      return mapped.filter(o=>!Util.isEmpty(o));
-    } else return null;
+    let result = children ? React.Children.toArray(children)
+      .filter(child => isCloudinaryComponent(child, "CloudinaryTransformation"))
+      .map(child => {
+        const options = CloudinaryComponent.normalizeOptions(child.props, child.context);
+        const childOptions = this.getChildTransformations(child.props.children);
+        if (childOptions) {
+          options.transformation = childOptions;
+        }
+        return options;
+      }) : [];
+
+    return result.length ? result : null;
   }
 
   /**
@@ -78,6 +91,7 @@ class CloudinaryComponent extends PureComponent {
     if (!Util.isEmpty(childrenOptions)) {
       ownTransformation.transformation = childrenOptions;
     }
+
     return ownTransformation;
   }
 
@@ -89,13 +103,13 @@ class CloudinaryComponent extends PureComponent {
    * @param options one or more options objects
    */
   static normalizeOptions(...options) {
-    return options.reduce((left, right)=> {
-        for (let key in right) {
+    return options.reduce((left, right) => {
+        Object.keys(right || {}).forEach(key => {
           let value = right[key];
           if (value !== null && value !== undefined) {
             left[key] = value;
           }
-        }
+        });
         return left;
       }
       , {});
@@ -108,18 +122,29 @@ class CloudinaryComponent extends PureComponent {
    * @protected
    */
   getUrl(extendedProps) {
-    let transformation = this.getTransformation(extendedProps);
-    let options = Util.extractUrlParams(Util.withSnakeCaseKeys(extendedProps));
-    let cl = Cloudinary.new(options);
-    return cl.url(extendedProps.publicId, transformation);
+
+    const {publicId} = extendedProps;
+    const cl = getConfiguredCloudinary(extendedProps);
+    return cl.url(publicId, this.getTransformation(extendedProps));
   }
 
+  /**
+   * Merges context & props
+   * @param props of this component
+   * @param context of this component
+   * @return {Object}
+   */
+  getExtendedProps = (props = this.props, context = this.getContext()) => {
+    return CloudinaryComponent.normalizeOptions(context, props);
+  };
+
   static contextType = CloudinaryContextType;
 }
 
 CloudinaryComponent.propTypes = typesFrom(Transformation.PARAM_NAMES.map(camelCase));
 CloudinaryComponent.propTypes.publicId = PropTypes.string;
 CloudinaryComponent.propTypes.responsive = PropTypes.bool;
+CloudinaryComponent.propTypes.loading = PropTypes.string;
 
 /**
  * Create a React type definition object. All items are PropTypes.string or [string] or object or [object].
@@ -130,7 +155,7 @@ CloudinaryComponent.propTypes.responsive = PropTypes.bool;
 function typesFrom(configParams) {
   configParams = configParams || [];
   const types = {};
-  for (let i =0; i < configParams.length; i++) {
+  for (let i = 0; i < configParams.length; i++) {
     const key = configParams[i];
     types[camelCase(key)] = PropTypes.any;
   }
diff --git a/src/components/Image/Image.js b/src/components/Image/Image.js
index fab6eb0..ea7414b 100644
--- a/src/components/Image/Image.js
+++ b/src/components/Image/Image.js
@@ -1,11 +1,6 @@
 import React from 'react';
-import cloudinary, {Util} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
-import {debounce, firstDefined, closestAbove, requestAnimationFrame, isElement} from '../../Util';
-
-const defaultBreakpoints = (width, steps = 100) => {
-  return steps * Math.ceil(width / steps);
-};
+import {getImageTag, responsive} from "../../Util";
 
 /**
  * A component representing a Cloudinary served image
@@ -13,53 +8,15 @@ const defaultBreakpoints = (width, steps = 100) => {
 class Image extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
-    this.handleResize = this.handleResize.bind(this);
-    this.attachRef = this.attachRef.bind(this);
-
-    let state = {responsive: false, url: undefined, breakpoints: defaultBreakpoints};
-    this.state = {...state, ...this.prepareState(props, context)};
+    this.state = {isResponsive: false};
+    this.imgElement = null;
   }
 
   /**
-   * Retrieve the window or default view of the current element
-   * @returns {DocumentView|*}
-   * @private
+   * Attach props.innerRef as ref to the given element
+   * @param element - the element to attach a ref to
    */
-  get window() {
-    let windowRef = null;
-    if (typeof window !== "undefined") {
-      windowRef = window
-    }
-    return (this.element && this.element.ownerDocument) ? (this.element.ownerDocument.defaultView || windowRef) : windowRef;
-  }
-
-  prepareState(props = this.props, context = this.getContext()) {
-    let extendedProps = CloudinaryComponent.normalizeOptions(context, props);
-    let url = this.getUrl(extendedProps);
-    let state = {};
-    let updatedOptions = {};
-
-    if (extendedProps.breakpoints !== undefined) {
-      state.breakpoints = extendedProps.breakpoints;
-    }
-    if (extendedProps.responsive) {
-      state.responsive = true;
-      updatedOptions = this.cloudinaryUpdate(url, state);
-      url = updatedOptions.url;
-    }
-
-    let currentState = this.state || {};
-
-    state.width = updatedOptions.width;
-
-    if (!Util.isEmpty(url) && url !== currentState.url) {
-      state.url = url;
-    }
-
-    return state;
-  }
-
-  attachRef(element) {
+  attachRef = (element) => {
     this.element = element;
     const {innerRef} = this.props;
 
@@ -70,152 +27,31 @@ class Image extends CloudinaryComponent {
         innerRef.current = element;
       }
     }
-  }
-
-  handleResize() {
-    if (!this.props.responsive || this.rqf) return;
-    this.rqf = requestAnimationFrame(() => {
-      this.rqf = null;
-      let newState = this.prepareState();
-      if (!Util.isEmpty(newState.url)) {
-        this.setState(newState);
-      }
-    });
-  }
+  };
 
-  componentDidMount() {
-    // now that we have a this.element, we need to calculate the URL
-    this.handleResize();
-  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const {isResponsive} = prevState;
+    const {imgElement} = this;
 
-  componentWillUnmount() {
-    this.element = undefined;
-    if (this.listener) {
-      this.listener.cancel();
-      this.window && this.window.removeEventListener('resize', this.listener);
-    }
-    this.listener = undefined;
-  }
+    this.setState({
+      isResponsive: this.props.responsive && imgElement && !isResponsive
+    });
 
-  componentDidUpdate(prevProps) {
-    this.setState(this.prepareState());
-    if (this.state.responsive) {
-      const wait = firstDefined(this.props.responsiveDebounce, this.getContext().responsiveDebounce, 100);
-      if (this.listener) {
-        this.window && this.window.removeEventListener('resize', this.listener);
-      }
-      this.listener = debounce(this.handleResize, wait);
-      this.window && this.window.addEventListener('resize', this.listener);
+    // Run responsive() only when props.responsive is updated to truthy value
+    if (isResponsive) {
+      responsive(imgElement, $$props);
     }
   }
 
   render() {
-    const {publicId, responsive, responsiveDebounce, children, innerRef, ...options} =
-      CloudinaryComponent.normalizeOptions(this.props, this.getContext());
-    const attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
-    const {url} = this.state;
-    return (
-      <img {...attributes} src={url} ref={this.attachRef}/>
-    );
-  }
-
-  // Methods from cloudinary_js
-
-  findContainerWidth() {
-    var containerWidth, style;
-    containerWidth = 0;
-    let element = this.element;
-    while (isElement((element = element != null ? element.parentNode : void 0)) && !containerWidth) {
-      style = this.window ? this.window.getComputedStyle(element) : '';
-      if (!/^inline/.test(style.display)) {
-        containerWidth = Util.width(element);
-      }
-    }
-    return Math.round(containerWidth);
-  };
-
-  applyBreakpoints(width, steps, options) {
-    options = CloudinaryComponent.normalizeOptions(this.getContext(), this.props, options);
-    let responsiveUseBreakpoints = options.responsiveUseBreakpoints;
-    if ((!responsiveUseBreakpoints) || (responsiveUseBreakpoints === 'resize' && !options.resizing)) {
-      return width;
-    } else {
-      return this.calc_breakpoint(width, steps);
-    }
-  };
-
-  calc_breakpoint(width, steps) {
-    var breakpoints, point;
-    breakpoints = (this.state && this.state.breakpoints) || defaultBreakpoints;
-    if (Util.isFunction(breakpoints)) {
-      return breakpoints(width, steps);
-    } else {
-      if (Util.isString(breakpoints)) {
-        breakpoints = ((function () {
-          var j, len, ref, results;
-          ref = breakpoints.split(',');
-          results = [];
-          for (j = 0, len = ref.length; j < len; j++) {
-            point = ref[j];
-            results.push(parseInt(point));
-          }
-          return results;
-        })()).sort(function (a, b) {
-          return a - b;
-        });
-      }
-      return closestAbove(breakpoints, width);
-    }
-  };
-
-  device_pixel_ratio(roundDpr = true) {
-    var dpr, dprString;
-    dpr = (typeof this.window !== "undefined" && this.window !== null ? this.window.devicePixelRatio : void 0) || 1;
-    if (roundDpr) {
-      dpr = Math.ceil(dpr);
-    }
-    if (dpr <= 0 || isNaN(dpr)) {
-      dpr = 1;
-    }
-    dprString = dpr.toString();
-    if (dprString.match(/^\d+$/)) {
-      dprString += '.0';
-    }
-    return dprString;
-  };
-
-  updateDpr(dataSrc, roundDpr) {
-    return dataSrc.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + this.device_pixel_ratio(roundDpr));
-  };
-
-  maxWidth(requiredWidth) {
-    return Math.max((this.state && this.state.width) || 0, requiredWidth);
-  };
-
-  cloudinaryUpdate(url, options = {}) {
-    var requiredWidth;
-    var match;
-    let resultUrl = this.updateDpr(url, options.roundDpr);
-    if (options.responsive || this.state && this.state.responsive) {
-      let containerWidth = this.findContainerWidth();
-      if (containerWidth !== 0) {
-        if (/w_auto:breakpoints/.test(resultUrl)) {
-          requiredWidth = this.maxWidth(containerWidth, this.element);
-          resultUrl = resultUrl.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/,
-            "w_auto:breakpoints$1:" + requiredWidth);
-        } else {
-          match = /w_auto(:(\d+))?/.exec(resultUrl);
-          if (match) {
-            requiredWidth = this.applyBreakpoints(containerWidth, match[2], options);
-            requiredWidth = this.maxWidth(requiredWidth, this.element);
-            resultUrl = resultUrl.replace(/w_auto[^,\/]*/g, "w_" + requiredWidth);
-          }
-        }
-      } else {
-        resultUrl = "";
-      }
-    }
-    return {url: resultUrl, width: requiredWidth};
+    const {attachRef} = this;
+    let options = this.getExtendedProps();
+    options = {...options, ...this.getTransformation(options)};
+    delete options.children;
+    delete options.innerRef;
+    const attributes = getImageTag(options).attributes();
+
+    return <img ref={attachRef} {...attributes}/>
   }
 }
 
diff --git a/src/components/Transformation/Transformation.js b/src/components/Transformation/Transformation.js
index 75a9e05..9ad88b6 100644
--- a/src/components/Transformation/Transformation.js
+++ b/src/components/Transformation/Transformation.js
@@ -17,5 +17,6 @@ class Transformation extends CloudinaryComponent {
 Transformation.propTypes = CloudinaryComponent.propTypes;
 Transformation.defaultProps = {};
 Transformation.exposesProps = true;
+Transformation.displayName = "CloudinaryTransformation";
 
 export default Transformation;
diff --git a/test/ContextTest.js b/test/ContextTest.js
index b205d20..05ec075 100644
--- a/test/ContextTest.js
+++ b/test/ContextTest.js
@@ -16,8 +16,8 @@ describe('CloudinaryContext', () => {
     expect(tag.html().startsWith("<div")).to.equal(true);
     expect(tag.find("div").hasClass("root")).to.equal(true);
     expect(tag.children()).to.have.length(1);
-    let img = tag.find("div").childAt(0);
-    expect(img.instance().state.url).to.equal("http://res.cloudinary.com/demo/image/upload/sample");
+    const img = tag.find("div").childAt(0);
+    expect(img.html()).to.equal(`<img src="http://res.cloudinary.com/demo/image/upload/sample">`);
   });
 
   it("should render without div", function () {
@@ -40,14 +40,14 @@ describe('CloudinaryContext', () => {
   });
 
   it("should pass properties to children with snake case", function () {
-    let tag = mount(
+    const 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");
+    const img = tag.find("div").childAt(0);
+    expect(img.html()).to.equal(`<img src="http://res.cloudinary.com/demo/image/upload/f_auto/sample">`);
   });
 
   it("should pass properties to children with kebab case", function () {
@@ -58,7 +58,7 @@ describe('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");
+    expect(img.html()).to.equal(`<img src="http://res.cloudinary.com/demo/image/upload/f_auto/sample">`);
   });
 
   it("should remove Cloudinary custom properties from CloudinaryContext component", function () {
diff --git a/test/ImageTest.js b/test/ImageTest.js
index da0cde4..ff4f950 100644
--- a/test/ImageTest.js
+++ b/test/ImageTest.js
@@ -1,39 +1,35 @@
 import React from 'react';
-import { expect } from 'chai';
-import { shallow, mount} from 'enzyme';
-
+import {expect} from 'chai';
+import {shallow, mount} from 'enzyme';
 import cloudinary from './cloudinary-proxy';
-const {Image, Transformation, CloudinaryContext} = cloudinary;
+const {Image, Transformation} = cloudinary;
 
 describe('Image', () => {
   beforeEach(() => {
   });
-  it("should create an img tag", function() {
+  it("should create an img tag", function () {
     let tag = shallow(<Image publicId="sample" cloudName="demo"/>);
-    expect(tag.type()).to.equal("img");
-    expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/sample");
+    expect(tag.html()).to.equal(`<img src="http://res.cloudinary.com/demo/image/upload/sample"/>`);
   });
-  it("should allow transformation params as attributes", function() {
+  it("should allow transformation params as attributes", function () {
     let width = 300;
     let tag = shallow(<Image publicId="sample" cloudName="demo" width={width} crop="scale"/>);
-    expect(tag.type()).to.equal("img");
-    expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample");
+    expect(tag.html()).to.equal(`<img width="300" src="http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample"/>`);
   });
-  it("should set event handlers", function() {
+  it("should set event handlers", function () {
     let width = 300;
-    let tag = shallow(<Image publicId="sample" cloudName="demo" width={width} crop="scale" onLoad={()=> "foo"}/>);
-    expect(tag.type()).to.equal("img");
-    expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample");
-    expect(tag.props().onLoad()).to.equal("foo")
-
+    let tag = shallow(<Image publicId="sample" cloudName="demo" width={width} crop="scale" onLoad={() => "foo"}/>);
+    expect(tag.html()).to.equal(`<img width="300" src="http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample"/>`);
+    expect(tag.props().onLoad()).to.equal("foo");
   });
-  it("should not pass-through Cloudinary attributes", function() {
+  it("should not pass-through Cloudinary attributes", function () {
     let width = 300;
-    let tag = shallow(<Image publicId="sample" cloudName="demo" width="auto" crop="scale" privateCdn="private" defaultImage="foobar" responsive responsiveUseBreakpoints />);
+    let tag = shallow(<Image publicId="sample" cloudName="demo" width="auto" crop="scale" privateCdn="private"
+                             defaultImage="foobar" responsive responsiveUseBreakpoints/>);
 
     expect(tag.type()).to.equal("img");
     expect(tag.state("url")).to.equal(undefined);
-    expect(tag.props()).to.have.property('src');
+    expect(tag.props()).to.have.property('data-src');
 
     // We are checking for both snake_case and camelCase keys
     expect(tag.props()).not.to.have.property('privateCdn');
@@ -42,9 +38,10 @@ describe('Image', () => {
     expect(tag.props()).not.to.have.property('default_image');
     expect(tag.props()).not.to.have.property('responsiveUseBreakpoints');
     expect(tag.props()).not.to.have.property('responsive_use_breakpoints');
-    tag = shallow(<Image publicId="sample" cloudName="demo" width={width} crop="scale" private_cdn="private" default_image="foobar"/>);
+    tag = shallow(<Image publicId="sample" cloudName="demo" width={width} crop="scale" private_cdn="private"
+                         default_image="foobar"/>);
     expect(tag.type()).to.equal("img");
-    expect(tag.state("url")).to.equal("http://demo-res.cloudinary.com/image/upload/c_scale,d_foobar,w_300/sample");
+    expect(tag.prop('src')).to.equal("http://demo-res.cloudinary.com/image/upload/c_scale,d_foobar,w_300/sample");
     expect(tag.props()).to.have.property('src');
     expect(tag.props()).not.to.have.property('privateCdn');
     expect(tag.props()).not.to.have.property('private_cdn');
@@ -52,53 +49,23 @@ describe('Image', () => {
     expect(tag.props()).not.to.have.property('default_image');
 
   });
-  it("should not fail to update cyclic property on an image element with transformation", function() {
-      // makes sure Issue #31 - Error: Maximum call call stack size exceeded does not reoccur
-      let obj1 = {}, obj2 = {};
-      obj1.me = obj1;
-      obj2.me = obj2;
-
-      let tag = shallow(<Image publicId="sample" cloudName="demo"><Transformation effect='art:hokusai'/></Image>);
-      tag.setProps({cyclicProp: obj1});
-      tag.setProps({cyclicProp: obj2});
-
-      tag.setState({cyclicProp: obj1});
-      tag.setState({cyclicProp: obj2});
+  it("should not fail to update cyclic property on an image element with transformation", function () {
+    // makes sure Issue #31 - Error: Maximum call call stack size exceeded does not reoccur
+    let obj1 = {}, obj2 = {};
+    obj1.me = obj1;
+    obj2.me = obj2;
+
+    let tag = shallow(<Image publicId="sample" cloudName="demo"><Transformation effect='art:hokusai'/></Image>);
+    tag.setProps({cyclicProp: obj1});
+    tag.setProps({cyclicProp: obj2});
+
+    tag.setState({cyclicProp: obj1});
+    tag.setState({cyclicProp: obj2});
   });
-  it("should render a src property with an undefined value if a src is not defined", function() {
-    let tag = mount(<Image cloudName="demo" />);
+  it("should render a src property with an undefined value if a src is not defined", function () {
+    let tag = mount(<Image cloudName="demo"/>);
     expect(tag.find('img').prop('src')).to.equal(undefined);
   });
-  it('should use breakpoints to calculate image width', function () {
-    const expectedSizing = [
-      {containerWidth: 225, imageWidth: 700},
-      {containerWidth: 275, imageWidth: 300},
-      {containerWidth: 350, imageWidth: 400}
-    ];
-
-    const context = {
-      cloudName: "demo",
-      responsive: true,
-      responsiveUseBreakpoints: true
-    };
-
-    expectedSizing.forEach(({containerWidth}) => {
-      Image.prototype.findContainerWidth = () => containerWidth;
-
-      const tag = mount(
-        <CloudinaryContext {...context}>
-        <Image
-          publicId="sample"
-          width="auto"
-          crop="scale"
-        />
-        </CloudinaryContext>
-      );
-
-      expect(tag.exists('img')).to.equal(true);
-      expect(tag.find('img').prop("src")).to.equal(`http://res.cloudinary.com/demo/image/upload/c_scale,w_${Math.ceil(containerWidth / 100) * 100}/sample`);
-    });
-  });
   it('should support custom function remote', () => {
     const customFunction = {
       function_type: "remote",
@@ -106,7 +73,9 @@ describe('Image', () => {
     };
 
     let tag = mount(
-      <Image publicId="sample" cloudName="demo"><Transformation customFunction={customFunction}/></Image>
+      <Image publicId="sample" cloudName="demo">
+        <Transformation customFunction={customFunction}/>
+      </Image>
     );
 
     expect(tag.find('img').prop('src')).to.match(
@@ -127,8 +96,8 @@ describe('Image', () => {
   });
   it('should support responsive prop', () => {
     let tag = mount(<Image publicId="sample" cloudName="demo"/>);
-    tag.setProps({responsive:true});
-    expect(tag.find('img').prop('src')).to.equal('http://res.cloudinary.com/demo/image/upload/sample');
+    tag.setProps({responsive: true});
+    expect(tag.find('img').prop('data-src')).to.equal('http://res.cloudinary.com/demo/image/upload/sample');
   });
   it('Should support forwarding innerRef to underlying image element', function () {
     const expected = 'http://res.cloudinary.com/demo/image/upload/sample';
diff --git a/test/TransformationTest.js b/test/TransformationTest.js
index b8363c8..9ce5a16 100644
--- a/test/TransformationTest.js
+++ b/test/TransformationTest.js
@@ -5,20 +5,17 @@ import cloudinary from './cloudinary-proxy';
 const {Image, Transformation} = cloudinary;
 
 describe("Transformation", () => {
-  beforeEach(() => {});
+  //beforeEach(() => {});
   it("should create an img tag", function() {
-    let tag = shallow(
+    const tag = shallow(
       <Image publicId="sample" cloudName="demo">
         <Transformation width="100" crop="scale" angle="10" />
       </Image>
     );
-    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.html()).to.equal(`<img src="http://res.cloudinary.com/demo/image/upload/a_10,c_scale,w_100/sample"/>`);
   });
   it("should allow chained transformations", function() {
-    let tag = shallow(
+    const tag = shallow(
       <Image publicId="sample" cloudName="demo">
         <Transformation width="100" crop="scale" />
         <Transformation width="200" crop="pad">
@@ -26,10 +23,7 @@ describe("Transformation", () => {
         </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/a_30/c_pad,w_200/sample"
-    );
+    expect(tag.html()).to.equal(`<img src="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(
@@ -39,10 +33,7 @@ describe("Transformation", () => {
         variables={[["$z", 5], ["$foo", "$z * 2"]]}
       />
     );
-    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"
-    );
+    expect(tag.html()).to.equal(`<img src="http://res.cloudinary.com/demo/image/upload/$z_5,$foo_$z_mul_2/sample"/>`);
   });
   it("updates transformations dynamically", function() {
     let image = shallow(
@@ -85,16 +76,4 @@ describe("Transformation", () => {
       "http://res.cloudinary.com/demo/image/upload/l_text:arial_20_antialias_best_hinting_medium:Cloudinary%20features/sample"
     );
   });
-  it("should not change variable names even if they are keywords", function () {
-    let tag = shallow(
-      <Image publicId="sample" cloudName="demo">
-        <Transformation variables={[["$width", 10]]}/>
-        <Transformation width="$width + 10 + width" crop="scale"/>
-      </Image>
-    );
-    expect(tag.name()).to.equal("img");
-    expect(tag.state("url")).to.equal(
-      "http://res.cloudinary.com/demo/image/upload/$width_10/c_scale,w_$width_add_10_add_w/sample"
-    );
-  });
 });
diff --git a/test/Util.js b/test/Util.js
deleted file mode 100644
index 52861a2..0000000
--- a/test/Util.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import {expect} from 'chai';
-import {firstDefined, closestAbove} from '../src/Util';
-
-describe('Util', () => {
-  describe('firstDefined', () => {
-    it("should return the first argument that is defined", function () {
-
-      expect(firstDefined(1,2)).to.equal(1);
-      expect(firstDefined(0,1,2)).to.equal(0);
-      expect(firstDefined(undefined,1,2)).to.equal(1);
-      expect(firstDefined(undefined,undefined,2)).to.equal(2);
-      expect(firstDefined(undefined,undefined,undefined)).to.equal(undefined);
-      expect(firstDefined(undefined,undefined,null)).to.equal(null);
-      expect(firstDefined('1','2')).to.equal('1');
-      expect(firstDefined('0','1','2')).to.equal('0');
-      expect(firstDefined(undefined,'1','2')).to.equal('1');
-      expect(firstDefined(undefined,undefined,'2')).to.equal('2');
-      expect(firstDefined(undefined,'undefined',undefined)).to.equal('undefined');
-      expect(firstDefined(undefined,undefined,'null')).to.equal('null');
-    });
-  });
-  describe('closestAbove()', () => {
-    it('should return the first item in list that is greater or equal to the given value', () => {
-      expect(closestAbove([1,10,100], 5)).to.equal(10);
-      expect(closestAbove([1,10,100], undefined)).to.equal(100);
-      expect(closestAbove([1,10,100], 500)).to.equal(100);
-      expect(closestAbove([100,10,1], 5)).to.equal(100);
-      expect(closestAbove([], 5)).to.equal(undefined);
-    })
-  });
-});
\ No newline at end of file

From 1df593f430ee23e8c24c0a763a1ad22debdd966a Mon Sep 17 00:00:00 2001
From: maoznir <nir.maoz@cloudinary.com>
Date: Sun, 28 Jun 2020 15:17:21 +0300
Subject: [PATCH 2/8] Add e2e tests

---
 .npmignore                                    | 58 ------------
 .npmrc                                        |  3 +-
 e2e-test/.env                                 |  1 +
 e2e-test/.gitignore                           | 23 +++++
 e2e-test/.npmrc                               |  1 +
 e2e-test/cypress.json                         |  4 +
 e2e-test/cypress/integration/init.spec.js     |  9 ++
 .../cypress/integration/responsive.spec.js    | 23 +++++
 e2e-test/package.json                         | 39 ++++++++
 package.json                                  | 12 ++-
 src/Util/cloudinaryCoreUtils.js               | 17 ++--
 src/Util/extractCloudinaryProps.js            |  2 +-
 src/components/Image/Image.js                 | 89 +++++++++++++------
 13 files changed, 182 insertions(+), 99 deletions(-)
 delete mode 100644 .npmignore
 create mode 100644 e2e-test/.env
 create mode 100644 e2e-test/.gitignore
 create mode 100644 e2e-test/.npmrc
 create mode 100644 e2e-test/cypress.json
 create mode 100644 e2e-test/cypress/integration/init.spec.js
 create mode 100644 e2e-test/cypress/integration/responsive.spec.js
 create mode 100644 e2e-test/package.json

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/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..b502f0f
--- /dev/null
+++ b/e2e-test/cypress/integration/responsive.spec.js
@@ -0,0 +1,23 @@
+describe('Responsive Image', () => {
+  it('Responsive Image', () => {
+    cy.visit('/');
+
+    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('#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('#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..f43a978
--- /dev/null
+++ b/e2e-test/package.json
@@ -0,0 +1,39 @@
+{
+  "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",
+    "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",
+    "test": "yarn install && 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/package.json b/package.json
index c6547a0..18148aa 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,11 @@
   "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 && cd ./e2e-test && npm i 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 bundlewatch",
     "bundlewatch": "bundlewatch --config ./bundlewatch.config.js",
@@ -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/cloudinaryCoreUtils.js b/src/Util/cloudinaryCoreUtils.js
index 5ac8e1b..3d19fe3 100644
--- a/src/Util/cloudinaryCoreUtils.js
+++ b/src/Util/cloudinaryCoreUtils.js
@@ -13,14 +13,14 @@ const nonEmpty = (obj) => Object.entries(obj).reduce((a, [k, v]) => (v == null ?
  */
 const getConfiguredCloudinary = (extendedProps) => {
   const { public_id, ...ops } = nonEmpty(extendedProps); // Remove null/undefined props
-  const options = Util.extractUrlParams(Util.withSnakeCaseKeys(ops));
+  const options = Util.withSnakeCaseKeys(ops);
   return Cloudinary.new(options);
 };
 
 const getTag = (props, tagType) => {
   const { publicId, ...ops} = props; // Remove null/undefined props
-  const cld = getConfiguredCloudinary(props);
-  return cld[`${tagType}Tag`](publicId, ops);
+  const cld = getConfiguredCloudinary(ops);
+  return cld[`${tagType}Tag`](publicId, Util.withSnakeCaseKeys(ops));
 };
 
 /**
@@ -40,15 +40,16 @@ const getVideoTag = (props) => getTag(props, "video");
  * @param {HTMLImageElement} img
  * @param {object} options
  */
-const responsive = (img, options) =>{
-  const cld = Cloudinary.new(options); // Initialize cloudinary with new props
-  cld.cloudinary_update(img, options);
-  cld.responsive(options, false);
+const makeElementResponsive = (img, options) =>{
+  const snakeCaseOptions = Util.withSnakeCaseKeys(options);
+  const cld = getConfiguredCloudinary(snakeCaseOptions); // Initialize cloudinary with new props
+  cld.cloudinary_update(img, snakeCaseOptions);
+  cld.responsive(snakeCaseOptions, false);
 };
 
 export {
   nonEmpty,
   getImageTag,
   getVideoTag,
-  responsive
+  makeElementResponsive
 };
diff --git a/src/Util/extractCloudinaryProps.js b/src/Util/extractCloudinaryProps.js
index 7b08eaf..1432b84 100644
--- a/src/Util/extractCloudinaryProps.js
+++ b/src/Util/extractCloudinaryProps.js
@@ -3,7 +3,7 @@ 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(
+const CLOUDINARY_PROPS = Transformation.PARAM_NAMES.map(Util.camelCase).concat(['publicId', 'breakpoints']).reduce(
   (accumulator, cloudinaryPropName) => {
     accumulator[cloudinaryPropName] = true;
     return accumulator;
diff --git a/src/components/Image/Image.js b/src/components/Image/Image.js
index ea7414b..d705e67 100644
--- a/src/components/Image/Image.js
+++ b/src/components/Image/Image.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, {createRef} from 'react';
 import CloudinaryComponent from '../CloudinaryComponent';
-import {getImageTag, responsive} from "../../Util";
+import {extractCloudinaryProps, getImageTag, makeElementResponsive} from "../../Util";
 
 /**
  * A component representing a Cloudinary served image
@@ -8,50 +8,83 @@ import {getImageTag, responsive} from "../../Util";
 class Image extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
-    this.state = {isResponsive: false};
-    this.imgElement = null;
+    this.state = {attributes: {}, imgElement: null};
+    this.imgElement = createRef();
   }
 
   /**
-   * Attach props.innerRef as ref to the given element
-   * @param element - the element to attach a ref to
+   * @return true when this image element should be made responsive, false otherwise.
    */
-  attachRef = (element) => {
-    this.element = element;
+  isResponsive = () => {
+    return this.props.responsive && this.imgElement && this.imgElement.current;
+  }
+
+  /**
+   * @return merged props & context with aggregated transformation, excluding children and innerRef.
+   */
+  getOptions = () => {
+    const extendedProps = this.getExtendedProps();
+    const {children, innerRef, ...options} = {...extendedProps, ...this.getTransformation(extendedProps)};
+
+    return options;
+  }
+
+  /**
+   * @return attributes for the underlying <img> element.
+   */
+  getAttributes = () => {
+    const options = this.getOptions();
+    const {nonCloudinaryProps} = extractCloudinaryProps(options);
+    const attributes = getImageTag(options).attributes();
+    const {breakpoints, ...result} = {...attributes, ...nonCloudinaryProps};
+
+    return result;
+  }
+
+  /**
+   * Update this image using cloudinary-core
+   */
+  update = () => {
+    if (this.isResponsive()){
+      makeElementResponsive(this.imgElement.current, this.getOptions());
+    }
+  }
+
+  /**
+   * Attach both this.imgElement and props.innerRef as ref to the given element
+   * @param imgElement - the element to attach a ref to
+   */
+  attachRef = (imgElement) => {
     const {innerRef} = this.props;
+    this.imgElement.current = imgElement;
 
     if (innerRef) {
       if (innerRef instanceof Function) {
-        innerRef(element);
+        innerRef(imgElement);
       } else {
-        innerRef.current = element;
+        innerRef.current = imgElement;
       }
     }
   };
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const {isResponsive} = prevState;
-    const {imgElement} = this;
-
-    this.setState({
-      isResponsive: this.props.responsive && imgElement && !isResponsive
-    });
+  /**
+   * Invoked immediately after a component is mounted (inserted into the tree)
+   */
+  componentDidMount() {
+    this.update();
+  }
 
-    // Run responsive() only when props.responsive is updated to truthy value
-    if (isResponsive) {
-      responsive(imgElement, $$props);
-    }
+  /**
+   * Invoked immediately after updating occurs. This method is not called for the initial render.
+   */
+  componentDidUpdate() {
+    this.update();
   }
 
   render() {
-    const {attachRef} = this;
-    let options = this.getExtendedProps();
-    options = {...options, ...this.getTransformation(options)};
-    delete options.children;
-    delete options.innerRef;
-    const attributes = getImageTag(options).attributes();
+    const {attachRef, getAttributes} = this;
 
-    return <img ref={attachRef} {...attributes}/>
+    return <img ref={attachRef} {...getAttributes()}/>
   }
 }
 

From 079e11bbe7a4c632176be6f9355b7761ec7ae2e6 Mon Sep 17 00:00:00 2001
From: maoznir <nir.maoz@cloudinary.com>
Date: Sun, 28 Jun 2020 15:27:52 +0300
Subject: [PATCH 3/8] Remove unneeded code

---
 .../CloudinaryComponent/CloudinaryComponent.js        | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/CloudinaryComponent/CloudinaryComponent.js b/src/components/CloudinaryComponent/CloudinaryComponent.js
index 2486bb3..ac1b444 100644
--- a/src/components/CloudinaryComponent/CloudinaryComponent.js
+++ b/src/components/CloudinaryComponent/CloudinaryComponent.js
@@ -43,25 +43,16 @@ function only(source, keys = []) {
 class CloudinaryComponent extends PureComponent {
   constructor(props, context) {
     super(props, context);
-    this.getContext = this.getContext.bind(this);
-    this.onIntersect = this.onIntersect.bind(this);
   }
 
   render() {
     return null;
   }
 
-  getContext() {
+  getContext = () => {
     return this.context || {};
   }
 
-  /**
-   * React function: Called when this element is in view
-   */
-  onIntersect() {
-    this.setState({isInView: true})
-  }
-
   getChildTransformations(children) {
     let result = children ? React.Children.toArray(children)
       .filter(child => isCloudinaryComponent(child, "CloudinaryTransformation"))

From faf3d7227659180446a23ff6e83200906a584643 Mon Sep 17 00:00:00 2001
From: maoznir <nir.maoz@cloudinary.com>
Date: Mon, 29 Jun 2020 09:29:50 +0300
Subject: [PATCH 4/8] Add missing e2e test files

---
 e2e-test/public/favicon.ico   | Bin 0 -> 3150 bytes
 e2e-test/public/index.html    |  43 +++++++++++
 e2e-test/public/logo192.png   | Bin 0 -> 5347 bytes
 e2e-test/public/logo512.png   | Bin 0 -> 9664 bytes
 e2e-test/public/manifest.json |  25 ++++++
 e2e-test/public/robots.txt    |   3 +
 e2e-test/src/App.css          |  71 +++++++++++++++++
 e2e-test/src/App.js           |  22 ++++++
 e2e-test/src/App.test.js      |   9 +++
 e2e-test/src/index.css        |  13 ++++
 e2e-test/src/index.js         |  17 ++++
 e2e-test/src/serviceWorker.js | 141 ++++++++++++++++++++++++++++++++++
 e2e-test/src/setupTests.js    |   5 ++
 13 files changed, 349 insertions(+)
 create mode 100644 e2e-test/public/favicon.ico
 create mode 100644 e2e-test/public/index.html
 create mode 100644 e2e-test/public/logo192.png
 create mode 100644 e2e-test/public/logo512.png
 create mode 100644 e2e-test/public/manifest.json
 create mode 100644 e2e-test/public/robots.txt
 create mode 100644 e2e-test/src/App.css
 create mode 100644 e2e-test/src/App.js
 create mode 100644 e2e-test/src/App.test.js
 create mode 100644 e2e-test/src/index.css
 create mode 100644 e2e-test/src/index.js
 create mode 100644 e2e-test/src/serviceWorker.js
 create mode 100644 e2e-test/src/setupTests.js

diff --git a/e2e-test/public/favicon.ico b/e2e-test/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..bcd5dfd67cd0361b78123e95c2dd96031f27f743
GIT binary patch
literal 3150
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
MDeX2GIKR{Qf5okjU;qFB

literal 0
HcmV?d00001

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 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/e2e-test/public/logo192.png b/e2e-test/public/logo192.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc44b0a3796c0e0a64c3d858ca038bd4570465d9
GIT binary patch
literal 5347
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
X@eDJUQo;Ye2mwlRs<JiGX2Jghdw)}T

literal 0
HcmV?d00001

diff --git a/e2e-test/public/logo512.png b/e2e-test/public/logo512.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4e47a6545bc15971f8f63fba70e4013df88a664
GIT binary patch
literal 9664
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
b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN

literal 0
HcmV?d00001

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 (
+    <div>
+      <h1>Responsive Image</h1>
+      <div style={{width: "330px"}}>
+        <Image id="responsive" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive/>
+      </div>
+      <div style={{width: "330px"}}>
+        <Image id="disable-breakpoints" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive responsiveUseBreakpoints={false}/>
+      </div>
+      <div style={{width: "330px"}}>
+        <Image id="breakpoints" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive responsiveUseBreakpoints={true} breakpoints={()=>450}/>
+      </div>
+    </div>
+  );
+}
+
+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(<App />);
+  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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  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';

From 30c93cacfec295c96846671f60deed28072d6f58 Mon Sep 17 00:00:00 2001
From: maoznir <nir.maoz@cloudinary.com>
Date: Mon, 29 Jun 2020 09:52:42 +0300
Subject: [PATCH 5/8] Add e2e test to travis

---
 .travis.yml | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

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

From e0f34e28aac8210973b66e8e47b2a38b454b5511 Mon Sep 17 00:00:00 2001
From: maoznir <nir.maoz@cloudinary.com>
Date: Mon, 29 Jun 2020 10:20:43 +0300
Subject: [PATCH 6/8] Update e2e test script

---
 e2e-test/package.json | 4 +++-
 package.json          | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/e2e-test/package.json b/e2e-test/package.json
index f43a978..0d10764 100644
--- a/e2e-test/package.json
+++ b/e2e-test/package.json
@@ -6,6 +6,7 @@
     "@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"
@@ -14,7 +15,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "cypress": "./node_modules/.bin/cypress run",
-    "test": "yarn install && start-server-and-test start http://localhost:3000 cypress",
+    "pretest": "npm install",
+    "test": "start-server-and-test start http://localhost:3000 cypress",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
diff --git a/package.json b/package.json
index 18148aa..7187fd5 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "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 && cd ./e2e-test && npm i cloudinary-react.tgz",
+    "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 bundlewatch",

From 6e0ba15be7500fd977dd4b463fe5e381acf88dab Mon Sep 17 00:00:00 2001
From: maoznir <nir.maoz@cloudinary.com>
Date: Mon, 29 Jun 2020 11:54:41 +0300
Subject: [PATCH 7/8] Remove image state

---
 e2e-test/cypress/integration/responsive.spec.js | 6 ++++++
 src/components/Image/Image.js                   | 5 +----
 test/ImageTest.js                               | 1 -
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/e2e-test/cypress/integration/responsive.spec.js b/e2e-test/cypress/integration/responsive.spec.js
index b502f0f..df25631 100644
--- a/e2e-test/cypress/integration/responsive.spec.js
+++ b/e2e-test/cypress/integration/responsive.spec.js
@@ -2,18 +2,24 @@ 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')
   });
diff --git a/src/components/Image/Image.js b/src/components/Image/Image.js
index d705e67..fa39e6b 100644
--- a/src/components/Image/Image.js
+++ b/src/components/Image/Image.js
@@ -8,7 +8,6 @@ import {extractCloudinaryProps, getImageTag, makeElementResponsive} from "../../
 class Image extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
-    this.state = {attributes: {}, imgElement: null};
     this.imgElement = createRef();
   }
 
@@ -36,9 +35,7 @@ class Image extends CloudinaryComponent {
     const options = this.getOptions();
     const {nonCloudinaryProps} = extractCloudinaryProps(options);
     const attributes = getImageTag(options).attributes();
-    const {breakpoints, ...result} = {...attributes, ...nonCloudinaryProps};
-
-    return result;
+    return {...attributes, ...nonCloudinaryProps};
   }
 
   /**
diff --git a/test/ImageTest.js b/test/ImageTest.js
index ff4f950..d37c2f1 100644
--- a/test/ImageTest.js
+++ b/test/ImageTest.js
@@ -28,7 +28,6 @@ describe('Image', () => {
                              defaultImage="foobar" responsive responsiveUseBreakpoints/>);
 
     expect(tag.type()).to.equal("img");
-    expect(tag.state("url")).to.equal(undefined);
     expect(tag.props()).to.have.property('data-src');
 
     // We are checking for both snake_case and camelCase keys

From 3c220357d519d78411073e2b36f9b22f6b181641 Mon Sep 17 00:00:00 2001
From: maoznir <nir.maoz@cloudinary.com>
Date: Mon, 29 Jun 2020 12:46:51 +0300
Subject: [PATCH 8/8] Add variable normalization test from master

---
 test/TransformationTest.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/test/TransformationTest.js b/test/TransformationTest.js
index 9ce5a16..ae8210f 100644
--- a/test/TransformationTest.js
+++ b/test/TransformationTest.js
@@ -76,4 +76,16 @@ describe("Transformation", () => {
       "http://res.cloudinary.com/demo/image/upload/l_text:arial_20_antialias_best_hinting_medium:Cloudinary%20features/sample"
     );
   });
+  it("should not change variable names even if they are keywords", function () {
+    const image = shallow(
+      <Image publicId="sample" cloudName="demo">
+        <Transformation variables={[["$width", 10]]}/>
+        <Transformation width="$width + 10 + width" crop="scale"/>
+      </Image>
+    );
+    expect(image.name()).to.equal("img");
+    expect(image.props().src).to.equal(
+      "http://res.cloudinary.com/demo/image/upload/$width_10/c_scale,w_$width_add_10_add_w/sample"
+    );
+  });
 });