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

test: Compare dropdown sort done.

Browse Source
This commit is contained in:
chiayin
2024-02-23 15:24:25 +08:00
parent cec820258b
commit 0f7945c6fe
4 changed files with 106 additions and 1633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
cypress/e2e/compare.cy.js
View File

@@ -7,9 +7,102 @@ describe('Performance', ()=>{
cy.contains('li', 'COMPARE').click();
});
it('Enter Compare', () => {
const dataTransfer = new DataTransfer();
it('Compare dropdown sorting Test', () => {
const expectedOptions =
['By File Name (A to Z)', 'By File Name (Z to A)', 'By Dependency (A to Z)', 'By Dependency (Z to A)', 'By File Type (A to Z)', 'By File Type (Z to A)', 'By Last Update (A to Z)', 'By Last Update (Z to A)'];
cy.url().should('include', 'files');
cy.get('.p-dropdown').click();
cy.get('.p-dropdown-items')
.find('.p-dropdown-item')
.then($options => {
const actualOptions = $options.map((index, elem) => Cypress.$(elem).find('.p-dropdown-item-label').text()).get()
expect(actualOptions).to.deep.equal(expectedOptions)
})
})
it('Grid Card Sorting Test', () => {
let originalData = [];
let sortedData = [];
cy.url().should('include', 'files');
cy.get('#compareGridCards').find('li').each($card => {
originalData.push($card.find('div h3').text().trim());
});
// Sort: By File Name (A to Z)
cy.get('.p-dropdown').click();
cy.contains('.p-dropdown-item', 'By File Name (A to Z)').click();
cy.wait(2000);
cy.get('#compareGridCards').find('li').each($card => {
sortedData.push($card.find('div h3').text().trim());
});
expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())));
// Sort: By File Name (Z to A)
sortedData = [];
cy.get('.p-dropdown').click();
cy.contains('.p-dropdown-item', 'By File Name (Z to A)').click();
cy.wait(2000);
cy.get('#compareGridCards').find('li').each($card => {
sortedData.push($card.find('div h3').text().trim());
});
expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse());
// Sort: By Dependency (A to Z)
cy.get('.p-dropdown').click();
sortedData = [];
cy.contains('.p-dropdown-item', 'By Dependency (A to Z)').click();
cy.wait(2000);
cy.get('#compareGridCards').find('li').each($card => {
sortedData.push($card.find('div h3').text().trim());
});
expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())));
// Sort: By Dependency (Z to A)
cy.get('.p-dropdown').click();
sortedData = [];
cy.contains('.p-dropdown-item', 'By Dependency (Z to A)').click();
cy.wait(2000);
cy.get('#compareGridCards').find('li').each($card => {
sortedData.push($card.find('div h3').text().trim());
});
expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse());
// Sort: By File Type (A to Z)
cy.get('.p-dropdown').click();
sortedData = [];
cy.contains('.p-dropdown-item', 'By File Type (A to Z)').click();
cy.wait(2000);
cy.get('#compareGridCards').find('li').each($card => {
sortedData.push($card.find('div h3').text().trim());
});
expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())));
// Sort: By File Type (Z to A)
cy.get('.p-dropdown').click();
sortedData = [];
cy.contains('.p-dropdown-item', 'By File Type (Z to A)').click();
cy.wait(2000);
cy.get('#compareGridCards').find('li').each($card => {
sortedData.push($card.find('div h3').text().trim());
});
expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse());
// Sort: By Last Update (A to Z)
cy.get('.p-dropdown').click();
sortedData = [];
cy.contains('.p-dropdown-item', 'By Last Update (A to Z)').click();
cy.wait(2000);
cy.get('#compareGridCards').find('li').each($card => {
sortedData.push($card.find('div h3').text().trim());
});
expect(sortedData).to.deep.equal(originalData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)));
// Sort: By Last Update (Z to A)
cy.get('.p-dropdown').click();
sortedData = [];
cy.contains('.p-dropdown-item', 'By Last Update (Z to A)').click();
cy.wait(2000);
cy.get('#compareGridCards').find('li').each($card => {
sortedData.push($card.find('div h3').text().trim());
});
expect(sortedData).to.deep.equal(originalData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse());
})
it('Enter Compare', () => {
cy.url().should('include', 'files');
cy.contains('button', 'Compare').should('be.disabled'); // 斷言按鈕為禁用狀態
// 安裝套件: cypress-drag-drop
@@ -20,10 +113,16 @@ describe('Performance', ()=>{
cy.contains('h2', 'COMPARE');
cy.url().should('include', 'compare');
cy.wait(2000);
// // 斷言排序
// // 斷言狀態欄
// // 斷言頁面中有 7 個 canvas 元素
// 斷言排序
// 斷言頁面中有 7 個 canvas 元素
cy.get('canvas').should('have.length', 7);
// 斷言狀態欄
cy.get('#compareState').click();
cy.wait(3000); // 等待渲染
cy.get('.p-sidebar-content li').first().then($li => {
const percentage = $li.find('span').eq(1).text();
expect(percentage).to.match(/^\d+(\.\d+)?%$/); // 使用正則表達式來確認文字內容是否符合數字 + % 符號的組合
});
});
it('Anchor', () => {

1626
src/views/Compare/Dashboard/data.js
View File

File diff suppressed because it is too large Load Diff

2
src/views/Compare/Dashboard/index.vue
View File

@@ -83,7 +83,7 @@
<!-- Sidebar: State -->
<div class="bg-transparent z-10">
<ul class="flex flex-col justify-center items-center">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="compareState">
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
info
</span>

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

@@ -116,7 +116,7 @@
</ul>
</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">
<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" id="compareGridCards">
<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>