IKImage bugfix: added e2e test for chained transform and without IKContext

Author: niveditn

tests/cypress/integration/IKImage.spec.js

@@ -67,24 +67,42 @@ describe('ImageKit React SDK', () => {
   });
 
   describe('State update check', () => {
-	it('should update image src when click on button', () => {
-		cy.visit(APP_HOST);
-
-		cy.get('.img-transformation').scrollIntoView();
-  
-		cy.wait(500);
-  
-		cy.get('.img-transformation')
-		  .should('have.attr', 'src')
-		  .and('include', 'tr:h-200,w-200/default-image.jpg');
-
-		cy.get('.btn-to-change-tr').click();
-		cy.wait(500);
-
-		cy.get('.img-transformation')
-		.should('have.attr', 'src')
-		.and('include', 'tr:h-200,w-200,r-max/default-image.jpg');
-	})
-  })
-  
+    it('should update image src with chained transformation outside IKContext dynamically', () => {
+      cy.visit(APP_HOST);
+
+      cy.get('.img-transformation-direct').scrollIntoView();
+
+      cy.wait(500);
+
+      cy.get('.img-transformation-direct')
+        .should('have.attr', 'src')
+        .and('include', 'tr:h-300,w-300/default-image.jpg');
+
+      cy.get('.btn-to-change-tr-direct').click();
+      cy.wait(500);
+
+      cy.get('.img-transformation-direct')
+        .should('have.attr', 'src')
+        .and('include', 'tr:h-200,w-600,r-max:h-200,w-200,rt-180:ot-TEST,oy-50,ox-100,otc-10C0F0/default-image.jpg');
+    });
+    it('should update image src within IKContext when button is clicked', () => {
+      cy.visit(APP_HOST);
+
+      cy.get('.img-transformation').scrollIntoView();
+
+      cy.wait(500);
+
+      cy.get('.img-transformation')
+        .should('have.attr', 'src')
+        .and('include', 'tr:h-200,w-200/default-image.jpg');
+
+      cy.get('.btn-to-change-tr').click();
+      cy.wait(500);
+
+      cy.get('.img-transformation')
+        .should('have.attr', 'src')
+        .and('include', 'tr:h-200,w-200,r-max/default-image.jpg');
+    });
+  });
+
 });

tests/test-app/src/App.js

@@ -18,13 +18,17 @@ function App() {
   const onSuccess = res => {
     console.log("Success");
     console.log(res);
-	setUploadedImageSource(res.url);
+    setUploadedImageSource(res.url);
   };
 
   const [uploadedImageSource, setUploadedImageSource] = useState();
   const [imageTr, setImageTr] = useState([{
-	"height": "200",
-	"width": "200"
+    "height": "200",
+    "width": "200"
+  }]);
+  const [imageTrSansIKContext, setImageTrSansIKContext] = useState([{
+    "height": "300",
+    "width": "300"
   }]);
 
   return (
@@ -34,25 +38,56 @@ function App() {
       <p>Directly using <code>IkImage</code></p>
       <IKImage urlEndpoint={urlEndpoint} src={src} />
 
+      <p>Dynamic transformation update directly using IKImage</p>
+      <IKImage
+        publicKey={publicKey}
+        urlEndpoint={urlEndpoint}
+        authenticationEndpoint={authenticationEndpoint}
+        className={'img-transformation-direct'}
+        path={path}
+        transformation={imageTrSansIKContext}
+      />
+      <div>
+        <p>Click here to apply transformations on the above image</p>
+        <button
+          className={'btn-to-change-tr-direct'}
+          onClick={() => setImageTrSansIKContext([{
+            "height": "200",
+            "width": "600",
+            "radius": "max",
+          }, {
+            "height": "200",
+            "width": "200",
+            "rotate": 180,
+          }, {
+            "ot": "TEST",
+            "oy": 50,
+            "ox": 100,
+            "otc": "10C0F0"
+          }])}
+        >Click to apply transformations</button>
+      </div>
+      <br />
+
       <p>Using context <code>IKContext</code></p>
       <IKContext publicKey={publicKey} urlEndpoint={urlEndpoint} authenticationEndpoint={authenticationEndpoint} >
         <p>Let's add an Image</p>
         <IKImage src={src} />
 
         <p>Transformation - height and width manipulation</p>
         <IKImage className={'img-transformation'} path={path} transformation={imageTr} />
-		<div>
-			<p>Click here to apply max radius on above image </p>
-			<button
-				className={'btn-to-change-tr'}
-				onClick={() => setImageTr([{
-					"height": "200",
-					"width": "200",
-					"radius" : "max"
-				}])}
-			>Click to apply radius</button>
-		</div>
-		<br />
+        <div>
+          <p>Click here to apply max radius on above image </p>
+          <button
+            className={'btn-to-change-tr'}
+            onClick={() => setImageTr([{
+              "height": "200",
+              "width": "200",
+              "radius": "max"
+            }])}
+          >Click to apply radius</button>
+        </div>
+        <br />
         <p>Chained transformation</p>
         <IKImage path={path} transformation={[{
           "height": "200",
@@ -75,7 +110,7 @@ function App() {
 
         <p>Progressive image loading wihtout lazy loading</p>
         <IKImage
-        className={'lqip'}
+          className={'lqip'}
           path={path}
           transformation={[{
             "height": "200",
@@ -88,7 +123,7 @@ function App() {
 
         <p>Progressive image loading with lazy loading</p>
         <IKImage
-        className={'lazyload-lqip'}
+          className={'lazyload-lqip'}
           path={path}
           transformation={[{
             "height": "200",
@@ -98,13 +133,6 @@ function App() {
           lqip={{ active: true, quality: 20, blur: 30 }}
         />
 
-
-        <p>File upload - To use this funtionality please remember to setup the server</p>
-        <IKUpload
-          onError={onError}
-          onSuccess={onSuccess}
-        />
-
         <p>File upload along with upload API options - To use this funtionality please remember to setup the server</p>
         <IKUpload
           fileName="test.jpg"
@@ -117,8 +145,8 @@ function App() {
           onError={onError} onSuccess={onSuccess}
         />
 
-		<p>Your above uploaded file will appear here </p>
-		<IKImage urlEndpoint={urlEndpoint} src={uploadedImageSource} />
+        <p>Your above uploaded file will appear here </p>
+        <IKImage urlEndpoint={urlEndpoint} src={uploadedImageSource} />
       </IKContext>
     </div>
   );