IKImage bugfix: changes and cleanup

.github/workflows/nodejs.yml

@@ -55,8 +55,8 @@ jobs:
     - name: Run E2E tests
       uses: cypress-io/github-action@v2
       with:
-        start: npm run start:test-app
-        wait-on: http://localhost:3001
+        start: npm run serve:test-app
+        wait-on: http://localhost:4000
       env:
         CI: true
         REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}

CONTRIBUTING.md

@@ -12,17 +12,17 @@ npm run build
 
 ## Running test cases
 
-The designated directory for tests is `/test/jest` folder. All tests will be run against the assertion present in the `/test/jest/__snapshot__` folder. To create this file you need to just run below command just once. Any update in the tests can be updated to by pressing `u` while the test environment is running.
+The designated directory for tests is `/tests/jest` folder. All tests will be run against the assertion present in the `/tests/jest/__snapshot__` folder. To create this file you need to run the following command once. To rerun tests after making changes press`u` while the test environment is running.
 
 Execute following command from the root folder to start testing.
 ```sh
 npm run test
 ```
 
-## Running sample frontend react app
+## Running the test frontend React app
 
-Please refer to the sample app `Readme.md` for details.
+Please refer to the the test app `README.md` for details.
 
-## Running sample backend server
+## Running the test backend server
 
-Please refer to the sample app `Readme.md` for details.
+Please refer to the the test app `README.md` for details.

cypress.json

@@ -6,6 +6,6 @@
 	"videosFolder": "tests/cypress/videos",
 	"supportFile": "tests/cypress/support/index.js",
 	"env": {
-		"APP_HOST": "http://localhost:3001/"
+		"APP_HOST": "http://localhost:4000/"
 	}
 }

package.json

@@ -1,16 +1,15 @@
 {
   "name": "imagekitio-react",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "React SDK for ImageKit.io which implements client-side upload and URL generation for use inside a react application.",
   "scripts": {
     "build": "rm -rf dist*;rollup -c",
     "test": "jest",
     "test:ci": "jest --coverage && codecov",
     "test:cov": "jest --coverage",
-    "test:e2e": "cypress open --project ./tests",
+    "test:e2e": "cypress open",
     "test:watch": "jest --watch",
-    "start:sample": "export SKIP_PREFLIGHT_CHECK=true;npx serve -s samples/sample-app/build -p 3000",
-    "start:test-app": "export SKIP_PREFLIGHT_CHECK=true;npx serve -s tests/test-app/build -p 3001"
+    "serve:test-app": "export SKIP_PREFLIGHT_CHECK=true;npx serve -s tests/test-app/build -p 4000"
   },
   "repository": {
     "type": "git",

samples/sample-app/README.md

@@ -1,6 +1,6 @@
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-We will assume you are in the directory `samples\sample-app` while following the further instructions 
+We will assume you are in the directory `samples/sample-app` while executing the following instructions. 
 
 ## Installation
 

samples/sample-app/package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "imagekitio-react": "^1.0.7",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "imagekitio-react": "^1.0.10",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.4.0"

samples/sample-app/server/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "server": "nodemon server"
   },
-  "author": "Utkarsh Maharana",
+  "author": "ImageKit",
   "license": "ISC",
   "devDependencies": {
     "cors": "^2.8.5",

samples/sample-app/src/App.js

@@ -18,14 +18,10 @@ 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"
-  }]);
 
   return (
     <div className="App">
@@ -40,19 +36,11 @@ function App() {
         <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 />
+        <IKImage className={'img-transformation'} path={path} transformation={[{
+          "height": "200",
+          "width": "200"
+        }]} />
+        <br />
         <p>Chained transformation</p>
         <IKImage path={path} transformation={[{
           "height": "200",
@@ -75,7 +63,7 @@ function App() {
 
         <p>Progressive image loading wihtout lazy loading</p>
         <IKImage
-        className={'lqip'}
+          className={'lqip'}
           path={path}
           transformation={[{
             "height": "200",
@@ -88,7 +76,7 @@ function App() {
 
         <p>Progressive image loading with lazy loading</p>
         <IKImage
-        className={'lazyload-lqip'}
+          className={'lazyload-lqip'}
           path={path}
           transformation={[{
             "height": "200",
@@ -99,12 +87,6 @@ function App() {
         />
 
 
-        <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"
@@ -114,11 +96,12 @@ function App() {
           useUniqueFileName={true}
           responseFields={["tags"]}
           folder={"/sample-folder"}
-          onError={onError} onSuccess={onSuccess}
+          onError={onError}
+          onSuccess={onSuccess}
         />
 
-		<p>Your above uploaded file will appear here </p>
-		<IKImage urlEndpoint={urlEndpoint} src={uploadedImageSource} />
+        <p>Your uploaded file will appear here </p>
+        <IKImage urlEndpoint={urlEndpoint} src={uploadedImageSource} />
       </IKContext>
     </div>
   );

src/components/IKImage/index.js

@@ -20,7 +20,7 @@ class IKImage extends ImageKitComponent {
       lqipSrc: lqipSrc,
       originalSrcLoaded: false,
       intersected: false,
-	  contextOptions : {}
+	    contextOptions : {}
     };
   }
 
@@ -128,7 +128,7 @@ class IKImage extends ImageKitComponent {
 
   componentDidMount() {
     this.updateImageUrl();
-	this.setState({ contextOptions : this.getContext() });
+	  this.setState({ contextOptions : this.getContext() });
 
     const image = this.imageRef.current;
     const { lqip, loading } = this.props;
@@ -169,26 +169,28 @@ class IKImage extends ImageKitComponent {
   }
 
   areObjectsDifferent(prevProps, newProps) {
-	for(var index=0; index<propsAffectingURL.length; index++){
-		if(prevProps[propsAffectingURL[index]] != newProps[propsAffectingURL[index]]) return true;
-	}
-	return false;
+    for (let index = 0; index < propsAffectingURL.length; index++) {
+      if (prevProps[propsAffectingURL[index]] != newProps[propsAffectingURL[index]]) {
+        return true;
+      };
+    }
+    return false;
   }
 
-	componentDidUpdate(prevProps, prevState) {
-		var contextOptions = this.getContext();
-
-		if (
-			this.areObjectsDifferent(prevProps, this.props) || 
-			this.areObjectsDifferent(prevState.contextOptions, contextOptions)
-		) {
-			const { originalSrc, lqipSrc } = this.getSrc();
-			this.setState({originalSrc, lqipSrc }, () => {
-				this.updateImageUrl();
-				this.setState({ contextOptions : this.getContext() });
-			});
-		}
-	}
+  componentDidUpdate(prevProps, prevState) {
+    let contextOptions = this.getContext();
+
+    if (
+      this.areObjectsDifferent(prevProps, this.props) ||
+      this.areObjectsDifferent(prevState.contextOptions, contextOptions)
+    ) {
+      const { originalSrc, lqipSrc } = this.getSrc();
+      this.setState({ originalSrc, lqipSrc }, () => {
+        this.updateImageUrl();
+        this.setState({ contextOptions: this.getContext() });
+      });
+    }
+  }
 
   render() {
     let { currentUrl } = this.state;

tests/cypress.json

@@ -0,0 +1 @@
+{}

tests/jest/IKContext.test.js

@@ -27,7 +27,7 @@ describe('IKContext', () => {
           }]} />
         </IKContext>
       );
-      // <img alt="" src="http://ik.imagekit.io/test_imagekit_id/tr:h-300,w-400/default-image.jpg?ik-sdk-version=react-1.0.7">
+      // <img alt="" src="http://ik.imagekit.io/test_imagekit_id/tr:h-300,w-400/default-image.jpg?ik-sdk-version=react-1.x.x">
 
       const transformURL = `${urlEndpoint}/tr:h-300,w-400/${relativePath}?${global.SDK_VERSION}`;
       expect(ikContext.find('img').prop('src')).toEqual(transformURL);
@@ -42,7 +42,7 @@ describe('IKContext', () => {
           }]} />
         </IKContext>
       );
-      // <img alt="" src="http://ik.imagekit.io/test_imagekit_id/tr:h-300,w-400/default-image.jpg?ik-sdk-version=react-1.0.7">
+      // <img alt="" src="http://ik.imagekit.io/test_imagekit_id/tr:h-300,w-400/default-image.jpg?ik-sdk-version=react-1.x.x">
 
       const transformURL = `${urlEndpoint}/tr:h-300,w-400/${relativePath}?${global.SDK_VERSION}`;
       expect(ikContext.find('img').prop('src')).toEqual(transformURL);
@@ -74,7 +74,7 @@ describe('IKContext', () => {
           }]} />
         </IKContext>
       );
-      // <img alt="" src="https://www.custom-domain.com/tr:h-300,w-400/default-image.jpg?ik-sdk-version=react-1.0.7">
+      // <img alt="" src="https://www.custom-domain.com/tr:h-300,w-400/default-image.jpg?ik-sdk-version=react-1.x.x">
 
       const transformURL = 'https://www.custom-domain.com/tr:h-300,w-400/default-image.jpg';
       expect(ikContext.find('img').prop('src')).toEqual(`${transformURL}?${global.SDK_VERSION}`);

tests/test-app/package.json

@@ -3,16 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "imagekitio-react": "../../",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "imagekitio-react": "../../",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.4.0"
   },
   "scripts": {
-    "start": "export SKIP_PREFLIGHT_CHECK=true;PORT=3001 react-scripts start",
+    "start": "export SKIP_PREFLIGHT_CHECK=true;PORT=4000 react-scripts start",
     "build": "export SKIP_PREFLIGHT_CHECK=true;react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

tests/test-app/sample.env

@@ -1,3 +1,3 @@
 REACT_APP_PUBLIC_KEY = 
 REACT_APP_URL_ENDPOINT =
-REACT_APP_AUTHENTICATION_ENDPOINT = http://localhost:3002/auth
+REACT_APP_AUTHENTICATION_ENDPOINT = http://localhost:4001/auth

tests/test-app/server/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "server": "nodemon server"
   },
-  "author": "Utkarsh Maharana",
+  "author": "ImageKit",
   "license": "ISC",
   "devDependencies": {
     "cors": "^2.8.5",

tests/test-app/server/server.js

@@ -27,6 +27,6 @@ router.get("/auth", function(req, res) {
 
 app.use("/",router);
 
-app.listen(3002,function(){
-  console.log("Live at Port 3002");
+app.listen(4001,function(){
+  console.log("Live at Port 4001");
 });