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

Cypress: filterFunnel - Have activity & Start testing done.

Browse Source
This commit is contained in:
chiayin
2023-06-07 16:33:02 +08:00
parent 8912ce6e8b
commit 1c364fb15e
3 changed files with 63 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
cypress/e2e/filterFunnel.cy.js
View File

@@ -27,52 +27,72 @@ describe('Save Log and Filter', ()=>{
// No selected. // No selected.
cy.contains('button', 'Apply').click(); cy.contains('button', 'Apply').click();
cy.get('.v-toast__text').should('contain', 'Not selected'); cy.get('.v-toast__text').should('contain', 'Not selected');
cy.wait(3000);
// Clear selected item. // Clear selected item.
cy.get('.allCheckboxAct') // 選取 all select cy.get('.allCheckboxAct') // 選取 all select
.find('input') .find('input')
.should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取 .should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取
cy.contains('button', 'Clear').click(); cy.contains('button', 'Clear').click();
cy.get('.allCheckboxAct') // 選取 all select cy.get('.allCheckboxAct') // 選取 all select
.find('input') .find('input')
.should('not.be.visible') .should('not.be.visible')
.should('not.be.checked') .should('not.be.checked')
cy.wait(3000);
// selected item
cy.get('table tr:nth-child(2) input[type="checkbox"]').check({force: true});
cy.contains('button', 'Apply').click();
cy.get('#tabFunnel').click();
cy.contains('p', 'Sequence');
cy.contains('span', 'Include');
cy.contains('button', 'Apply All').click();
}) // make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
// it('save log', () => { it('Sequence, Start', () => {
// // select radio // select radio
// cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence' cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
// cy.contains('label', 'Have activity(s)') // 選取 Radio 'Have activity(s)' cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
// .prev(2) .prev(2)
// .find('input') .find('input')
// .should('have.attr', 'type', 'radio') // select the previous element .should('have.attr', 'type', 'radio') // select the previous element
// .should('be.checked'); // confirm it's type radio (optional) .check({ force: true })
.should('be.checked'); // confirm it's type radio (optional)
// select table item // No selected.
// cy.get('.allCheckboxAct') // 選取 all select cy.contains('button', 'Apply').click();
// .find('input') cy.get('.v-toast__text').should('contain', 'Not selected');
// .should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取 cy.wait(3000);
// // click Alpay and click Alppy All // Clear selected item.
// cy.contains('button', 'Apply').click(); cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true}); // 選取第二個
// cy.get('#tabFunnel').click(); cy.contains('button', 'Clear').click();
// cy.contains('.p-timeline', 'Sequence'); cy.get('table tr:nth-child(2) input[type="radio"]').should('not.be.checked')
// cy.contains('button', 'Apply All').click(); cy.wait(3000);
// // Save log // selected item
// cy.contains('button', 'Save').click(); cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
// cy.contains('.swal2-title', 'SAVE NEW FILTER'); cy.contains('button', 'Apply').click();
// cy.contains('button', 'OK').click(); cy.get('#tabFunnel').click();
// cy.contains('#swal2-validation-message', 'You need to write something!'); // 不輸入要跳驗證 cy.contains('p', 'Sequence');
// cy.get('.swal2-input').clear().type('random-E2Etesting'); cy.contains('span', 'Start');
// cy.contains('button', 'OK').click(); cy.contains('button', 'Apply All').click();
// cy.contains('#swal2-html-container', 'random-E2Etesting');
// // make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
// // 回到 Files 檢查是否有新增 Filter 'random-E2Etesting'.
// cy.visit('https://REDACTED-HOST/files');
// cy.url().should('include', 'files');
// cy.contains('.fileName', 'random-E2Etesting');
// });
}); });

12
src/components/Discover/SidebarFilter.vue
View File

@@ -24,7 +24,7 @@
<label :for="item + index" class="ml-2">{{ item }}</label> <label :for="item + index" class="ml-2">{{ item }}</label>
</div> </div>
</div> </div>
<div v-show="selectValue[1] === 'Start activity / end activity'"> <div v-show="selectValue[1] === 'Start activity / End activity'">
<p class="h2">Start & End</p> <p class="h2">Start & End</p>
<div v-for="(item, index) in selectFilter['Start & End']" :key="index" class="flex align-items-center"> <div v-for="(item, index) in selectFilter['Start & End']" :key="index" class="flex align-items-center">
<RadioButton v-model="selectValue[2]" :inputId="item + index" name="Start & End" :value="item" /> <RadioButton v-model="selectValue[2]" :inputId="item + index" name="Start & End" :value="item" />
@@ -71,11 +71,11 @@
<!-- Filter task Data--> <!-- Filter task Data-->
<ActOccCase v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Have activity(s)'" :tableTitle="'Activity List'" :tableData="filterAllTaskData" :tableSelect="selectFilterTask" :progressWidth ="progressWidth" @on-row-select="onRowAct"></ActOccCase> <ActOccCase v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Have activity(s)'" :tableTitle="'Activity List'" :tableData="filterAllTaskData" :tableSelect="selectFilterTask" :progressWidth ="progressWidth" @on-row-select="onRowAct"></ActOccCase>
<!-- Filter Start Data --> <!-- Filter Start Data -->
<ActOcc v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / end activity' && selectValue[2] === 'Start'" :tableTitle="'Start activity'" :tableData="filterStartData" :tableSelect="selectFilterStart" :progressWidth ="progressWidth" @on-row-select="onRowStart"></ActOcc> <ActOcc v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / End activity' && selectValue[2] === 'Start'" :tableTitle="'Start activity'" :tableData="filterStartData" :tableSelect="selectFilterStart" :progressWidth ="progressWidth" @on-row-select="onRowStart"></ActOcc>
<!-- Filter End Data --> <!-- Filter End Data -->
<ActOcc v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / end activity' && selectValue[2] === 'End'" :tableTitle="'End activity'" :tableData="filterEndData" :tableSelect="selectFilterEnd" :progressWidth ="progressWidth" @on-row-select="onRowEnd"></ActOcc> <ActOcc v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / End activity' && selectValue[2] === 'End'" :tableTitle="'End activity'" :tableData="filterEndData" :tableSelect="selectFilterEnd" :progressWidth ="progressWidth" @on-row-select="onRowEnd"></ActOcc>
<!-- Filter Start And End Data --> <!-- Filter Start And End Data -->
<div v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / end activity' && selectValue[2] === 'Start & End'" class="flex justify-between items-center w-full h-full space-x-4 "> <div v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / End activity' && selectValue[2] === 'Start & End'" class="flex justify-between items-center w-full h-full space-x-4 ">
<ActOcc :tableTitle="'Start activity'" :tableData="filterStartToEndData" :tableSelect="selectFilterStartToEnd" :progressWidth ="progressWidth" class="w-1/2" @on-row-select="startRow"></ActOcc> <ActOcc :tableTitle="'Start activity'" :tableData="filterStartToEndData" :tableSelect="selectFilterStartToEnd" :progressWidth ="progressWidth" class="w-1/2" @on-row-select="startRow"></ActOcc>
<ActOcc :tableTitle="'End activity'" :tableData="filterEndToStartData" :tableSelect="selectFilterEndToStart" :progressWidth ="progressWidth" class="w-1/2" @on-row-select="endRow"></ActOcc> <ActOcc :tableTitle="'End activity'" :tableData="filterEndToStartData" :tableSelect="selectFilterEndToStart" :progressWidth ="progressWidth" class="w-1/2" @on-row-select="endRow"></ActOcc>
</div> </div>
@@ -128,7 +128,7 @@ export default {
return { return {
selectFilter: { selectFilter: {
'Filter Type': ['Sequence', 'Attributes', 'Trace', 'Timeframes'], 'Filter Type': ['Sequence', 'Attributes', 'Trace', 'Timeframes'],
'Activity Sequence':['Have activity(s)', 'Start activity / end activity', 'Sequence'], 'Activity Sequence':['Have activity(s)', 'Start activity / End activity', 'Sequence'],
'Start & End': ['Start', 'End', 'Start & End'], 'Start & End': ['Start', 'End', 'Start & End'],
'Mode': ['Directly follows', 'Eventually follows'], 'Mode': ['Directly follows', 'Eventually follows'],
'ModeAtt': ['Case', 'Activity'], 'ModeAtt': ['Case', 'Activity'],
@@ -419,7 +419,7 @@ export default {
} }
}) })
}; };
}else if(sele[1] === 'Start activity / end activity') { // Activity Sequence 選 Start activity / end activity 的行為 }else if(sele[1] === 'Start activity / End activity') { // Activity Sequence 選 Start activity / End activity 的行為
if(sele[2] === 'Start') { if(sele[2] === 'Start') {
if(this.selectFilterStart === null || this.selectFilterStart.length === 0) return this.$toast.error('Not selected'); if(this.selectFilterStart === null || this.selectFilterStart.length === 0) return this.$toast.error('Not selected');
else { else {

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

@@ -36,7 +36,7 @@
<!-- Sidebar: State --> <!-- Sidebar: State -->
<div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute"> <div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
<ul class="flex flex-col justify-center items-center"> <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 = true" :class="{'border-primary': sidebarState}"> <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 = true" :class="{'border-primary': sidebarState}" id="iconState">
<span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']"> <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
info info
</span> </span>