Merge pull request #40 from vaibhavbansal23/state-fix-and-cypress-tests into multiple/e2e-ikimage-bugfix

Fix for issue #36 and cypress e2e tests for lazy loading and lqip

Author: niveditn

.github/workflows/nodejs.yml

@@ -4,7 +4,6 @@ on: [push]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -13,11 +12,13 @@ jobs:
 
     steps:
     - uses: actions/checkout@v1
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - name: npm install, build, and test
+
+    - name: Setup module and run unit tests
       run: |
         npm install
         npm run test:ci
@@ -26,3 +27,38 @@ jobs:
         REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
         REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
         REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}
+
+  e2e:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+    - uses: actions/checkout@v1
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Setup module and build test-app
+      run: |
+        npm install
+        npm run build
+        cd tests/test-app
+        echo REACT_APP_URL_ENDPOINT = ${{ secrets.ik_url_endopint }} > .env;
+        npm install
+        npm run build
+
+    - name: Run E2E tests
+      uses: cypress-io/github-action@v2
+      with:
+        start: npm run start:test-app
+        wait-on: http://localhost:3001
+      env:
+        CI: true
+        REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
+        REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
+        REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}

.gitignore

@@ -4,3 +4,5 @@ node_modules
 lib
 dist
 coverage
+*/.DS_Store
+*/*/.DS_Store

CONTRIBUTING.md

@@ -12,7 +12,7 @@ npm run build
 
 ## Running test cases
 
-The designated directory for tests is `/src/test` folder. All tests will be run against the assertion present in the `/src/test/__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 `/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.
 
 Execute following command from the root folder to start testing.
 ```sh

README.md

@@ -177,8 +177,8 @@ The `IKImage` component renders an `img` tag. It is used for rendering and manip
 | transformation   | Array of objects |Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. See list of [different tranformations](#list-of-supported-transformations). Different steps of a [chained transformation](https://docs.imagekit.io/features/image-transformations/chained-transformations) can be specified as the Array's different objects. The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it is applied in the URL as it is. |
 | transformationPosition | String |Optional. The default value is `path` that places the transformation string as a URL path parameter. It can also be specified as `query`, which adds the transformation string as the URL's query parameter i.e.`tr`. If you use `src` parameter to create the URL, then the transformation string is always added as a query parameter. |
 | queryParameters  | Object |Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and not necessarily related to ImageKit. Especially useful if you want to add some versioning parameter to your URLs. |
-| loading  | String |Optional. Pass `lazy` to lazy load images |
-| lqip  | Object |Optional. You can use this to show a low-quality blurred placeholder while the original image is being loaded e.g. `{active:true, quality: 20, blur: 6`}. The default value of `quality` is `20` and `blur` is `6`.|
+| loading  | String |Optional. Pass `lazy` to lazy load images. Note: Component does not accept change in this value after it has mounted. |
+| lqip  | Object |Optional. You can use this to show a low-quality blurred placeholder while the original image is being loaded e.g. `{active:true, quality: 20, blur: 6`}. The default value of `quality` is `20` and `blur` is `6`. <br /> Note: Component does not accept change in this value after it has mounted.|
 
 ### Basic resizing examples
 

cypress.json

@@ -0,0 +1,11 @@
+{
+	"fixturesFolder": "tests/cypress/fixtures",
+	"integrationFolder": "tests/cypress/integration",
+	"pluginsFile": "tests/cypress/plugins/index.js",
+	"screenshotsFolder": "tests/cypress/screenshots",
+	"videosFolder": "tests/cypress/videos",
+	"supportFile": "tests/cypress/support/index.js",
+	"env": {
+		"APP_HOST": "http://localhost:3001/"
+	}
+}