From 6b3251e9ebd966a97a8df5bb713cb9e8e95dfba1 Mon Sep 17 00:00:00 2001 From: chiayin Date: Thu, 8 Jun 2023 16:38:57 +0800 Subject: [PATCH] Cypress: filterFunnel - Ttmeframes testing done. --- cypress.config.js | 2 + cypress/e2e/filterFunnel.cy.js | 119 ++++++++++++------ src/components/Discover/Filter/Timeframes.vue | 4 +- 3 files changed, 86 insertions(+), 39 deletions(-) diff --git a/cypress.config.js b/cypress.config.js index 67b4296..41e007a 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -3,6 +3,8 @@ const { defineConfig } = require("cypress"); module.exports = defineConfig({ defaultCommandTimeout: 6000, + viewportWidth: 1280, + viewportHeight:720, e2e: { specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}", }, diff --git a/cypress/e2e/filterFunnel.cy.js b/cypress/e2e/filterFunnel.cy.js index ce784e6..f924190 100644 --- a/cypress/e2e/filterFunnel.cy.js +++ b/cypress/e2e/filterFunnel.cy.js @@ -191,6 +191,63 @@ describe('Save Log and Filter', ()=>{ // }); // }); + it('Sequence, Start & End', () => { + // select radio + cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence' + cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)' + .prev(2) + .find('input') + .should('have.attr', 'type', 'radio') // select the previous element + .check({ force: true }) + .should('be.checked'); // confirm it's type radio (optional) + cy.get('input[id="Start & End2"]').check({ force: true }); + + // No selected. + cy.contains('button', 'Apply').click(); + cy.get('.v-toast__text').should('contain', 'Both Start and End must be selected'); + cy.wait(3000); + + // 選取 "start" 的 + cy.contains('p', 'Start activity') + .parents('div') // 回到 p 的父層 div + .eq(1) // 同階層的第二個 div + .find('table') // 向下找 table + .as('startTable'); // 將選取的元素命名，使用 @startTable 來操作 + // 選取 "end" 的
+ cy.contains('p', 'End activity') + .parents('div') + .eq(1) + .find('table') + .as('endTable'); // 使用 @endTable 來操作 + + // Clear selected item. + cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true }); + cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true }); + cy.contains('button', 'Clear').click(); + cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked'); + cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked'); + cy.wait(3000); + + // selected item + cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true }); + cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true }); + cy.contains('button', 'Apply').click(); + cy.get('#tabFunnel').click(); + cy.contains('p', 'Sequence'); + cy.contains('span', 'Start') + .parent() + .contains('span', 'End'); // 斷言 text 是否包含 Start 和 End. + 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() 獲取
  • 元素的內容 + const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span + expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化 + }); + }); + // it('Trace', () => { // // select radio // cy.get('input#Trace2').check({ force: true }); // 選取 Radio 'Trace' @@ -224,7 +281,6 @@ describe('Save Log and Filter', ()=>{ // .click() // .trigger('mouseup'); // cy.contains('button', 'Apply').click(); - // cy.contains('button', 'Apply').click(); // cy.get('#tabFunnel').click(); // cy.contains('p', 'Trace'); // cy.contains('button', 'Apply All').click(); @@ -238,44 +294,33 @@ describe('Save Log and Filter', ()=>{ // }); // }); - it('Timeframes', () => { - // select radio - cy.get('input#Timeframes3').check({ force: true }); // 選取 Radio 'Trace' - cy.wait(3000); + // it('Timeframes', () => { + // // select radio + // cy.get('input#Timeframes3').check({ force: true }); // 選取 Radio 'Trace' + // cy.wait(3000); - // Clear selected item - cy.get('.p-slider-handle:nth-child(2)') - .click() - .trigger('mousedown', { which: 1 }) - .trigger('mousemove', { clientX: 250 }) - .xpath('//span[contains(@class, "p-slider-handle")][2]') - .click() - .trigger('mouseup'); - cy.contains('button', 'Clear').click(); - cy.get('.v-toast__text').should('contain', 'Reset Success'); - cy.wait(3000); + // // Clear selected item + // cy.get('#startCalendar').click(); + // cy.get('.p-datepicker td[aria-label="28"]').click({ multiple: true }); + // cy.contains('button', 'Clear').click(); + // cy.get('.v-toast__text').should('contain', 'Reset Success'); + // cy.wait(3000); - // selected item - cy.get('.p-slider-handle:nth-child(2)') - .click() - .trigger('mousedown', { which: 1 }) - .trigger('mousemove', { clientX: 250 }) - .xpath('//span[contains(@class, "p-slider-handle")][2]') - .click() - .trigger('mouseup'); - cy.contains('button', 'Apply').click(); - cy.contains('button', 'Apply').click(); - cy.get('#tabFunnel').click(); - cy.contains('p', 'Trace'); - cy.contains('button', 'Apply All').click(); + // // selected item + // cy.get('#startCalendar').click(); + // cy.get('.p-datepicker td[aria-label="28"]').click({ multiple: true }); + // cy.contains('button', 'Apply').click(); + // cy.get('#tabFunnel').click(); + // cy.contains('p', 'Timeframe'); + // 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() 獲取
  • 元素的內容 - const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span - expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化 - }); - }); + // // make sure create map again. + // cy.get('header').click(); + // cy.get('#iconState').click(); + // cy.get('li').first().then($li => { // then() 獲取
  • 元素的內容 + // const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span + // expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化 + // }); + // }); }); diff --git a/src/components/Discover/Filter/Timeframes.vue b/src/components/Discover/Filter/Timeframes.vue index 637a385..d8a5251 100644 --- a/src/components/Discover/Filter/Timeframes.vue +++ b/src/components/Discover/Filter/Timeframes.vue @@ -18,12 +18,12 @@
    Start time - +
    ~
    End time - +