imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: Enter Compare & Anchor done.

Browse Source
This commit is contained in:
chiayin
2024-02-22 16:51:49 +08:00
parent f7c76fd1f7
commit b6bd1e878e
6 changed files with 103 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
cypress/e2e/compare.cy.js Normal file
View File

@@ -0,0 +1,48 @@
describe('Performance', ()=>{
beforeEach(() => {
cy.visit('https://REDACTED-HOST/files');
cy.login();
cy.visit('https://REDACTED-HOST/files');
cy.url().should('include', 'files');
cy.contains('li', 'COMPARE').click();
});
it('Enter Compare', () => {
const dataTransfer = new DataTransfer();
cy.url().should('include', 'files');
cy.contains('button', 'Compare').should('be.disabled'); // 斷言按鈕為禁用狀態
// 安裝套件: cypress-drag-drop
cy.get('#compareFile0').drag('#primaryDragCard');
cy.get('#compareFile1').drag('#secondaryDragCard');
// Enter Compare
cy.contains('button', 'Compare').click();
cy.contains('h2', 'COMPARE');
cy.url().should('include', 'compare');
cy.wait(2000);
// // 斷言排序
// // 斷言狀態欄
// // 斷言頁面中有 7 個 canvas 元素
cy.get('canvas').should('have.length', 7);
});
it('Anchor', () => {
// enter Map
cy.url().should('include', 'files');
cy.get('#compareFile0').drag('#primaryDragCard');
cy.get('#compareFile1').drag('#secondaryDragCard');
cy.contains('button', 'Compare').click();
cy.contains('h2', 'COMPARE');
cy.url().should('include', 'compare');
cy.wait(2000);
// Anchor 網頁不會捲動到錨點位置是因為 Cypress 是模擬使用者行為而非準確瀏覽器行為
cy.get('aside li a[href="#cycleTime"]').click();
cy.url().should('include', '#cycleTime');
cy.get('aside li a[href="#processingTime"]').click();
cy.url().should('include', '#processingTime');
cy.get('aside li a[href="#waitingTime"]').click();
cy.url().should('include', '#waitingTime');
cy.get('aside li a[href="#cases"]').click();
cy.url().should('include', '#cases');
});
})

0
cypress/e2e/performance.cy.js → cypress/fixtures/doneTesting/performance.cy.js
View File

3
cypress/support/commands.js
View File

@@ -8,7 +8,10 @@
// https://on.cypress.io/custom-commands
// ***********************************************
// -- This is a parent command --
import '@4tw/cypress-drag-drop'
const loginApiUrl = Cypress.env('loginApiUrl');
Cypress.Commands.add('login', () => {
cy.request({
method: 'POST',

63
package-lock.json generated
View File

@@ -37,12 +37,13 @@
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@4tw/cypress-drag-drop": "^2.2.5",
"@rushstack/eslint-patch": "^1.1.4",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/test-utils": "^2.2.6",
"autoprefixer": "^10.4.13",
"cypress": "^13.6.5",
"cypress": "^12.0.2",
"cypress-xpath": "^2.0.1",
"eslint": "^8.22.0",
"eslint-plugin-cypress": "^2.12.1",
@@ -58,6 +59,15 @@
"vitest": "^0.25.6"
}
},
"node_modules/@4tw/cypress-drag-drop": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.2.5.tgz",
"integrity": "sha512-3ghTmzhOmUqeN6U3QmUnKRUxI7OMLbJA4hHUY/eS/FhWJgxbiGgcaELbolWnBAOpajPXcsNQGYEj9brd59WH6A==",
"dev": true,
"peerDependencies": {
"cypress": "2 - 13"
}
},
"node_modules/@babel/parser": {
"version": "7.20.15",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
@@ -91,9 +101,9 @@
}
},
"node_modules/@cypress/request": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
"integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
"version": "2.88.12",
"resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz",
"integrity": "sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==",
"dev": true,
"dependencies": {
"aws-sign2": "~0.7.0",
@@ -109,7 +119,7 @@
"json-stringify-safe": "~5.0.1",
"mime-types": "~2.1.19",
"performance-now": "^2.1.0",
"qs": "6.10.4",
"qs": "~6.10.3",
"safe-buffer": "^5.1.2",
"tough-cookie": "^4.1.3",
"tunnel-agent": "^0.6.0",
@@ -2129,20 +2139,21 @@
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
},
"node_modules/cypress": {
"version": "13.6.5",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-13.6.5.tgz",
"integrity": "sha512-2NxSDcO2zHw5kTcosc6dzv2zppEqiXrFFhZw5cx/EWrSNZABTzpr/EyvYzGgrWm46o5173JUfuJfDQcaiZZPVQ==",
"version": "12.17.4",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.4.tgz",
"integrity": "sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
"@cypress/request": "^3.0.0",
"@cypress/request": "2.88.12",
"@cypress/xvfb": "^1.2.4",
"@types/node": "^16.18.39",
"@types/sinonjs__fake-timers": "8.1.1",
"@types/sizzle": "^2.3.2",
"arch": "^2.2.0",
"blob-util": "^2.0.2",
"bluebird": "^3.7.2",
"buffer": "^5.7.1",
"buffer": "^5.6.0",
"cachedir": "^2.3.0",
"chalk": "^4.1.0",
"check-more-types": "^2.24.0",
@@ -2160,7 +2171,7 @@
"figures": "^3.2.0",
"fs-extra": "^9.1.0",
"getos": "^3.2.1",
"is-ci": "^3.0.1",
"is-ci": "^3.0.0",
"is-installed-globally": "~0.4.0",
"lazy-ass": "^1.6.0",
"listr2": "^3.8.3",
@@ -2182,7 +2193,7 @@
"cypress": "bin/cypress"
},
"engines": {
"node": "^16.0.0 || ^18.0.0 || >=20.0.0"
"node": "^14.0.0 || ^16.0.0 || >=18.0.0"
}
},
"node_modules/cypress-xpath": {
@@ -6711,6 +6722,13 @@
}
},
"dependencies": {
"@4tw/cypress-drag-drop": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.2.5.tgz",
"integrity": "sha512-3ghTmzhOmUqeN6U3QmUnKRUxI7OMLbJA4hHUY/eS/FhWJgxbiGgcaELbolWnBAOpajPXcsNQGYEj9brd59WH6A==",
"dev": true,
"requires": {}
},
"@babel/parser": {
"version": "7.20.15",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
@@ -6732,9 +6750,9 @@
"optional": true
},
"@cypress/request": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
"integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
"version": "2.88.12",
"resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz",
"integrity": "sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==",
"dev": true,
"requires": {
"aws-sign2": "~0.7.0",
@@ -6750,7 +6768,7 @@
"json-stringify-safe": "~5.0.1",
"mime-types": "~2.1.19",
"performance-now": "^2.1.0",
"qs": "6.10.4",
"qs": "~6.10.3",
"safe-buffer": "^5.1.2",
"tough-cookie": "^4.1.3",
"tunnel-agent": "^0.6.0",
@@ -8236,19 +8254,20 @@
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
},
"cypress": {
"version": "13.6.5",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-13.6.5.tgz",
"integrity": "sha512-2NxSDcO2zHw5kTcosc6dzv2zppEqiXrFFhZw5cx/EWrSNZABTzpr/EyvYzGgrWm46o5173JUfuJfDQcaiZZPVQ==",
"version": "12.17.4",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.4.tgz",
"integrity": "sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==",
"dev": true,
"requires": {
"@cypress/request": "^3.0.0",
"@cypress/request": "2.88.12",
"@cypress/xvfb": "^1.2.4",
"@types/node": "^16.18.39",
"@types/sinonjs__fake-timers": "8.1.1",
"@types/sizzle": "^2.3.2",
"arch": "^2.2.0",
"blob-util": "^2.0.2",
"bluebird": "^3.7.2",
"buffer": "^5.7.1",
"buffer": "^5.6.0",
"cachedir": "^2.3.0",
"chalk": "^4.1.0",
"check-more-types": "^2.24.0",
@@ -8266,7 +8285,7 @@
"figures": "^3.2.0",
"fs-extra": "^9.1.0",
"getos": "^3.2.1",
"is-ci": "^3.0.1",
"is-ci": "^3.0.0",
"is-installed-globally": "~0.4.0",
"lazy-ass": "^1.6.0",
"listr2": "^3.8.3",

3
package.json
View File

@@ -44,12 +44,13 @@
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@4tw/cypress-drag-drop": "^2.2.5",
"@rushstack/eslint-patch": "^1.1.4",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/test-utils": "^2.2.6",
"autoprefixer": "^10.4.13",
"cypress": "^13.6.5",
"cypress": "^12.0.2",
"cypress-xpath": "^2.0.1",
"eslint": "^8.22.0",
"eslint-plugin-cypress": "^2.12.1",

14
src/views/Files/index.vue
View File

@@ -7,7 +7,7 @@
<h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Performance Comparison</h2>
<div class="flex justify-start items-center gap-4 w-full h-[184px] scrollbar pb-4">
<!-- primaryDrag -->
<div class="relative w-[216px] min-w-[216px] h-full">
<div class="relative w-[216px] min-w-[216px] h-full" id="primaryDragCard">
<div v-if="primaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
<div class="h-full flex flex-col justify-center items-center gap-4">
<p class="text-4xl font-black">1</p>
@@ -38,8 +38,8 @@
<!-- delete icon -->
<span v-show="primaryDragData.length > 0" class="material-symbols-outlined material-fill text-neutral-500 bg-neutral-10 block rounded-full absolute -top-[5%] -right-[5%] z-50 cursor-pointer hover:text-danger" @click="primaryDragDelete">do_not_disturb_on</span>
</div>
<!-- secondaryData -->
<div class="relative w-[216px] min-w-[216px] h-full">
<!-- secondaryDrag -->
<div class="relative w-[216px] min-w-[216px] h-full" id="secondaryDragCard">
<div v-show="secondaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
<div class="h-full flex flex-col justify-center items-center gap-4">
<p class="text-4xl font-black">2</p>
@@ -117,8 +117,8 @@
</div>
<!-- All Files type of grid -->
<draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar">
<template #item="{ element }">
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
<template #item="{ element, index }">
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" :id="'compareFile' + index">
<div>
<span class="material-symbols-outlined mb-2 !text-[32px] block">
{{ element.icon }}
@@ -556,6 +556,10 @@
if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
})
this.isLoading = false;
// document.onmousemove = (e) => {
// console.log('x:', e.pageX);
// console.log('y:', e.pageY);
// }
},
}
</script>