Merge pull request #1 from imagekit-developer/IK-1482

IK-1482

.github/workflows/nodejs.yml

@@ -0,0 +1,83 @@
+name: Node CI
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.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
+      run: |
+        npm install
+      env:
+        CI: true
+
+  e2e:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.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
+      run: |
+        npm install
+        npm run build
+        npm pack
+    - name: build example/app-router
+      run: |
+        cd example/app-router
+        echo NEXT_PUBLIC_URL_ENDPOINT = ${{ secrets.IK_URL_ENDPOINT }} > .env;
+        echo NEXT_PUBLIC_PUBLIC_KEY = ${{ secrets.IK_PUBLIC_KEY }} >> .env;
+        echo NEXT_PUBLIC_AUTHENTICATION_ENDPOINT = 'http://localhost:3000/api/auth' >> .env;
+        echo PRIVATE_KEY = ${{ secrets.IK_PRIVATE_KEY }} >> .env;
+        npm install && npm run build
+      env:
+        CI: true
+        NEXT_PUBLIC_PUBLIC_KEY: ${{ secrets.IK_PUBLIC_KEY }}
+        PRIVATE_KEY: ${{ secrets.IK_PRIVATE_KEY }}
+        NEXT_PUBLIC_URL_ENDPOINT: ${{ secrets.IK_URL_ENDPOINT }}
+
+    - name: Run E2E tests
+      uses: cypress-io/github-action@v4
+      with:
+        start: npm run serve:app-router
+        wait-on: 'http://localhost:3000'
+      env:
+        DEBUG: 'cypress:server:browsers:electron'
+        CI: true
+        NEXT_PUBLIC_PUBLIC_KEY: ${{ secrets.IK_PUBLIC_KEY }}
+        PRIVATE_KEY: ${{ secrets.IK_PRIVATE_KEY }}
+        NEXT_PUBLIC_URL_ENDPOINT: ${{ secrets.IK_URL_ENDPOINT }}
+
+    - name: tar workspace
+      if: always()
+      run: |
+        tar -cf build.tar --exclude=./build.tar .
+    - name: Archive build details
+      if: always()
+      uses: actions/upload-artifact@v3
+      with:
+        name: e2e-archive
+        path: build.tar
+        retention-days: 1

.github/workflows/npmpublish.yml

@@ -0,0 +1,49 @@
+name: Publish
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.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: npm install, build, and test
+        run: |
+          npm i
+          npm run build
+        env:
+          CI: true
+          NEXT_PUBLIC_PUBLIC_KEY: ${{ secrets.IK_PUBLIC_KEY }}
+          PRIVATE_KEY: ${{ secrets.IK_PRIVATE_KEY }}
+          NEXT_PUBLIC_URL_ENDPOINT: ${{ secrets.IK_URL_ENDPOINT }}
+
+
+  publish:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+      - name: npm publish
+        run: |
+          npm i
+          npm run build
+          npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          CI: true

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.DS_Store
+.env
+.vscode
+lib
+dist
+coverage
+.DS_Store

cypress.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  fixturesFolder: 'cypress/fixtures',
+  screenshotsFolder: 'screenshots',
+  videosFolder: 'videos',
+  env: {
+    APP_HOST: 'http://localhost:3000/',
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/index.ts',
+  },
+});

cypress/e2e/IKImage.cy.ts

@@ -0,0 +1,112 @@
+describe("ImageKit Next SDK", () => {
+  const APP_HOST = Cypress.env().APP_HOST;
+
+  describe("Lazyload", () => {
+    it("should have empty src before reaching lazyload threshold", () => {
+      cy.visit(APP_HOST);
+
+      cy.get(".lazyload").should("have.attr", "src").and("equal", "");
+    });
+
+    it("should have actual src after reaching lazyload threshold", () => {
+      cy.visit(APP_HOST);
+
+      cy.get(".lazyload").scrollIntoView();
+
+      cy.wait(500);
+
+      cy.get(".lazyload").should("have.attr", "src").and("include", "tr:h-200,w-200/default-image.jpg");
+    });
+  });
+
+  describe("Lazyload with LQIP", () => {
+    it("should have lqip src before reaching threshold", () => {
+      cy.visit(APP_HOST);
+
+      cy.get(".lazyload-lqip").should("have.attr", "src").and("include", "");
+    });
+
+    it("should have actual src after reaching element", () => {
+      cy.visit(APP_HOST);
+
+      cy.get(".lazyload-lqip").scrollIntoView();
+
+      cy.wait(1000);
+
+      cy.get(".lazyload-lqip").should("have.attr", "src").and("include", "tr:h-200,w-200/default-image.jpg");
+    });
+  });
+
+  describe("LQIP", () => {
+    // unable to test this because actual image load always finishes too quickly
+    it.skip("should have lqip src before image is loaded", () => {
+      cy.visit(APP_HOST);
+
+      cy.get(".lqip").should("have.attr", "src").and("include", "tr:h-200,w-200:q-20,bl-10/default-image.jpg");
+    });
+
+    it("should have actual src after image is loaded", () => {
+      cy.visit(APP_HOST);
+
+      cy.get(".lqip").scrollIntoView();
+
+      cy.wait(500);
+
+      cy.get(".lqip").should("have.attr", "src").and("include", "tr:h-200,w-200/default-image.jpg");
+    });
+  });
+
+  describe("State update check", () => {
+    it("should update image src with chained transformation outside ImageKitProvider 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/default-image.jpg");
+    });
+    it("should update image src within ImageKitProvider 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");
+    });
+  });
+
+  describe("Height Width and Quality handling check", () => {
+    it("If height, width, or quality is specified only as a prop and not in the transformation, it is automatically applied in the transformation", () => {
+      cy.visit(APP_HOST);
+
+      cy.get(".applied-to-transformation").scrollIntoView();
+
+      cy.wait(500);
+
+      cy.get(".applied-to-transformation").should("have.attr", "src").and("include", "tr:h-200,w-200,q-10/default-image.jpg");
+    });
+    it("Height and width properties are ignored if they are included in the transformation", () => {
+      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(".img-transformation-direct").should("not.have.attr", "height");
+      cy.get(".img-transformation-direct").should("not.have.attr", "width");
+    });
+  });
+});

cypress/e2e/IKUpload.cy.ts

@@ -0,0 +1,51 @@
+describe('IKUpload Element', () => {
+    const APP_HOST = Cypress.env().APP_HOST;
+
+    describe('Image Upload', () => {
+        it('should upload image and render same image', () => {
+            //static file
+            const p = 'sample.jpeg'
+
+            // launch URL
+            cy.visit(APP_HOST);
+
+            //upload file with attachFile
+            cy.get('.file-upload-ik').attachFile(p)
+
+            // wait for 4 secs
+            cy.wait(5000);
+
+            //Verify uploaded file
+            cy.get('.uploaded-img-ik').should('have.attr', 'src');
+            cy.get('.uploaded-img-ik').invoke('attr', 'src').should('not.equal', '');
+
+
+            // wait for 4 secs
+            cy.wait(4000);
+
+            cy.get('.state-value').invoke('val').then((val:any) => {
+                const stateValue = JSON.parse(val);
+                cy.log(JSON.stringify(stateValue, null, 2));
+                expect(stateValue.overrideParametersValue.fileNameOnLocalSystem).to.be.eq("sample.jpeg"); // This asserts that the file object was passed to the onOverrideParameters callback
+                expect(stateValue.uploadedImageSource).contains("sample-folder/overridden-file-name"); // This asserts that onOverrideParameters changed fileName parameter before upload
+            });
+        });
+
+        it('should upload non-image file and try to get error element', () => {
+            //static file
+            const p = 'example.json'
+
+            // launch URL
+            cy.visit(APP_HOST);
+
+            //upload file with attachFile
+            cy.get('.file-upload-error').attachFile(p)
+
+            // wait for 2 secs
+            cy.wait(2000);
+
+            //Verify uploaded file
+            cy.get('.upload-error-ik').should('contain', 'File upload failed.')
+        });
+    });
+});

cypress/e2e/IKVideo.cy.ts

@@ -0,0 +1,31 @@
+describe('IKVideo Element', () => {
+    const APP_HOST = Cypress.env().APP_HOST;
+
+    describe('Video transformation', () => {
+      it('should have element with transformation', () => {
+        cy.visit(APP_HOST);
+
+        cy.get('.ikvideo-default').scrollIntoView();
+
+        cy.wait(1000);
+
+        cy.get('.ikvideo-default > source')
+          .should('have.attr', 'src')
+          .and('include', 'tr:h-200,w-200/sample-video.mp4');
+      });
+    });
+
+    describe('Advance transformation', () => {
+      it('should have element with advance transformation', () => {
+        cy.visit(APP_HOST);
+
+        cy.get('.ikvideo-with-tr').scrollIntoView();
+
+        cy.wait(500);
+
+        cy.get('.ikvideo-with-tr > source')
+          .should('have.attr', 'src')
+          .and('include', 'tr:h-200,w-600,b-5_red,q-95/sample-video.mp4');
+      });
+    });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}