Skip to content

Commit fabe5c3

Browse files
niknivnikniv
authored
Merge pull request #28 from imagekit-developer/feature/e2e
E2E framework and IKImage bugfix
2 parents 5165eba + 694998e commit fabe5c3

File tree

15 files changed

+1845
-1106
lines changed

15 files changed

+1845
-1106
lines changed

‎.github/workflows/nodejs.yml

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ jobs:
99

1010
strategy:
1111
matrix:
12-
node-version: [8.x, 10.x, 12.x]
12+
node-version: [10.x, 12.x]
1313

1414
steps:
1515
- uses: actions/checkout@v1
@@ -25,4 +25,38 @@ jobs:
2525
CI: true
2626
VUE_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
2727
VUE_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
28-
VUE_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}
28+
VUE_APP_URL_ENDPOINT: ${{ secrets.ik_url_endpoint }}
29+
30+
e2e:
31+
runs-on: ubuntu-latest
32+
33+
strategy:
34+
matrix:
35+
node-version: [12.x]
36+
37+
steps:
38+
- uses: actions/checkout@v1
39+
40+
- name: Use Node.js ${{ matrix.node-version }}
41+
uses: actions/setup-node@v1
42+
with:
43+
node-version: ${{ matrix.node-version }}
44+
45+
- name: Setup module and build sample-app
46+
run: |
47+
npm install
48+
cd samples/sample-app
49+
echo VUE_APP_URL_ENDPOINT = ${{ secrets.ik_url_endpoint }} > .env;
50+
npm install
51+
npm run build
52+
53+
- name: Run E2E tests
54+
uses: cypress-io/github-action@v2
55+
with:
56+
start: npm run start:sample
57+
wait-on: http://localhost:3000
58+
env:
59+
CI: true
60+
VUE_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
61+
VUE_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
62+
VUE_APP_URL_ENDPOINT: ${{ secrets.ik_url_endpoint }}

‎.github/workflows/npmpublish.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ jobs:
1010

1111
strategy:
1212
matrix:
13-
node-version: [8.x, 10.x, 12.x]
13+
node-version: [10.x, 12.x]
1414

1515
steps:
1616
- uses: actions/checkout@v1
@@ -27,7 +27,7 @@ jobs:
2727
CI: true
2828
VUE_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
2929
VUE_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
30-
VUE_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}
30+
VUE_APP_URL_ENDPOINT: ${{ secrets.ik_url_endpoint }}
3131

3232
publish:
3333
needs: build

‎cypress.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"env": {
3+
"APP_HOST": "http://localhost:3000/"
4+
}
5+
}

‎cypress/fixtures/example.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎cypress/integration/.eslintrc.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"root": true,
3+
"extends": [
4+
"plugin:cypress/recommended"
5+
],
6+
"env": {
7+
"cypress/globals": true
8+
}
9+
}

‎cypress/integration/IKImage.spec.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
describe('ImageKit React SDK', () => {
2+
const APP_HOST = Cypress.env().APP_HOST;
3+
describe('Lazyload', () => {
4+
it('should have empty src before reaching lazyload threshold', () => {
5+
cy.visit(APP_HOST);
6+
7+
cy.get('.lazyload').should('have.attr', 'src').and('equal', '');
8+
});
9+
10+
it('should have actual src after reaching lazyload threshold', () => {
11+
cy.visit(APP_HOST);
12+
13+
cy.get('.lazyload').scrollIntoView();
14+
15+
cy.wait(500);
16+
17+
cy.get('.lazyload')
18+
.should('have.attr', 'src')
19+
.and('include', 'tr:h-200,w-200/default-image.jpg');
20+
});
21+
});
22+
23+
describe('Lazyload with LQIP', () => {
24+
it('should have lqip src before reaching threshold', () => {
25+
cy.visit(APP_HOST);
26+
27+
cy.get('.lazyload-lqip')
28+
.should('have.attr', 'src')
29+
.and('include', 'tr:h-200,w-200:q-20,bl-30/default-image.jpg');
30+
});
31+
32+
it('should have actual src after reaching element', () => {
33+
cy.visit(APP_HOST);
34+
35+
cy.get('.lazyload-lqip').scrollIntoView();
36+
37+
cy.wait(1000);
38+
39+
cy.get('.lazyload-lqip')
40+
.should('have.attr', 'src')
41+
.and('include', 'tr:h-200,w-200/default-image.jpg');
42+
});
43+
});
44+
45+
describe('LQIP', () => {
46+
// unable to test this because actual image load always finishes too quickly
47+
it.skip('should have lqip src before image is loaded', () => {
48+
cy.visit(APP_HOST);
49+
50+
cy.get('.lqip')
51+
.should('have.attr', 'src')
52+
.and('include', 'tr:h-200,w-200:q-20,bl-30/default-image.jpg');
53+
});
54+
55+
it('should have actual src after image is loaded', () => {
56+
cy.visit(APP_HOST);
57+
58+
cy.get('.lqip').scrollIntoView();
59+
60+
cy.wait(500);
61+
62+
cy.get('.lqip')
63+
.should('have.attr', 'src')
64+
.and('include', 'tr:h-200,w-200/default-image.jpg');
65+
});
66+
});
67+
});

‎cypress/plugins/index.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference types="cypress" />
2+
// ***********************************************************
3+
// This example plugins/index.js can be used to load plugins
4+
//
5+
// You can change the location of this file or turn off loading
6+
// the plugins file with the 'pluginsFile' configuration option.
7+
//
8+
// You can read more here:
9+
// https://on.cypress.io/plugins-guide
10+
// ***********************************************************
11+
12+
// This function is called when a project is opened or re-opened (e.g. due to
13+
// the project's config changing)
14+
15+
/**
16+
* @type {Cypress.PluginConfig}
17+
*/
18+
module.exports = (on, config) => {
19+
// `on` is used to hook into various events Cypress emits
20+
// `config` is the resolved Cypress config
21+
}

‎cypress/support/commands.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add("login", (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This will overwrite an existing command --
25+
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

‎cypress/support/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
{
22
"name": "imagekitio-vue",
3-
"version": "1.0.8",
3+
"version": "1.0.9",
44
"scripts": {
55
"build:lib": "./node_modules/.bin/vue-cli-service build --target lib src/index.js",
66
"build": "./node_modules/.bin/vue-cli-service lint --fix; npm run build:lib",
77
"serve": "./node_modules/.bin/vue-cli-service serve",
88
"lint": "./node_modules/.bin/vue-cli-service lint",
9+
"test:e2e": "cypress open",
10+
"start:sample": "npx serve -s samples/sample-app/dist -p 3000",
911
"test:unit": "export VUE_APP_PUBLIC_KEY=your_public_key;export VUE_APP_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id;export VUE_APP_AUTHENTICATION_ENDPOINT=https://www.example.com/auth;./node_modules/.bin/vue-cli-service test:unit --watchAll=false;unset VUE_APP_PUBLIC_KEY;unset VUE_APP_URL_ENDPOINT;unset VUE_APP_AUTHENTICATION_ENDPOINT",
1012
"test:dev": "export VUE_APP_PUBLIC_KEY=your_public_key;export VUE_APP_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id;export VUE_APP_AUTHENTICATION_ENDPOINT=https://www.example.com/auth;./node_modules/.bin/vue-cli-service test:unit --watchAll=true;unset VUE_APP_PUBLIC_KEY;unset VUE_APP_URL_ENDPOINT;unset VUE_APP_AUTHENTICATION_ENDPOINT",
1113
"storybook": "start-storybook -p 6006",
@@ -38,6 +40,7 @@
3840
"babel-eslint": "^10.0.3",
3941
"babel-loader": "^8.0.6",
4042
"babel-preset-vue": "^2.0.2",
43+
"cypress": "^6.0.1",
4144
"eslint": "^5.16.0",
4245
"eslint-plugin-vue": "^5.0.0",
4346
"html-webpack-plugin": "^3.2.0",

‎samples/sample-app/src/App.vue

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,26 @@
2020

2121
<p>Lazy loading image</p>
2222
<ik-image
23+
class="lazyload"
2324
path="/default-image.jpg"
24-
:transformation="[{height:300,width:400},{rotation:90}]"
25+
:transformation="[{height:200,width:200}]"
2526
loading="lazy"
2627
/>
2728

2829
<p>Progressive image loading wihtout lazy loading</p>
2930
<ik-image
31+
class="lqip"
3032
path="/default-image.jpg"
31-
:transformation="[{height:300,width:400},{rotation:90}]"
33+
:transformation="[{height:200,width:200}]"
3234
:lqip="{active:true,threshold:20}"
3335
/>
3436

3537
<p>Progressive image loading with lazy loading</p>
3638
<ik-image
39+
class="lazyload-lqip"
3740
path="/default-image.jpg"
38-
:transformation="[{height:300,width:400},{rotation:90}]"
39-
:lqip="{active:true,threshold:20}"
41+
:transformation="[{height:200,width:200}]"
42+
:lqip="{active:true,threshold:20,quality:20,blur:30}"
4043
loading="lazy"
4144
/>
4245

‎src/components/IKImage.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,9 @@ export default {
8080
}
8181
},
8282
destroyed() {
83-
this.observer.disconnect();
83+
if(this.observer) {
84+
this.observer.disconnect();
85+
}
8486
},
8587
computed: {
8688
srcImage: function() {

‎src/plugin.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import IKContext from "./components/IKContext.vue";
22
import IKImage from "./components/IKImage.vue";
33
import IKUpload from "./components/IKUpload.vue";
44
import ImageKit from 'imagekit-javascript';
5-
export const VERSION = "1.0.8";
5+
export const VERSION = "1.0.9";
66

77
const componentMapping = {
88
"ik-context": IKContext,

0 commit comments

Comments
 (0)