From 0b2104f41b1fbab964d097404c8fcf132dde8405 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 12 Jun 2023 09:59:02 +0800
Subject: [PATCH] Cypress: filterFunnel - testing done.

---
 cypress/e2e/filterFunnel.cy.js                | 448 +++++++++---------
 cypress/{fixtures => e2e}/loginToLogout.cy.js |   0
 .../{fixtures => e2e}/saveLogAndFilter.cy.js  |   0
 3 files changed, 224 insertions(+), 224 deletions(-)
 rename cypress/{fixtures => e2e}/loginToLogout.cy.js (100%)
 rename cypress/{fixtures => e2e}/saveLogAndFilter.cy.js (100%)

diff --git a/cypress/e2e/filterFunnel.cy.js b/cypress/e2e/filterFunnel.cy.js
index d7166c1..ce2aa4f 100644
--- a/cypress/e2e/filterFunnel.cy.js
+++ b/cypress/e2e/filterFunnel.cy.js
@@ -15,181 +15,181 @@ describe('Save Log and Filter', ()=>{
     cy.get('#iconFilter').click(); // 選取 Filter sidebar
   });
 
-  // it('Sequence, Have activity(s).', () => {
-  //   // select radio
-  //   cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
-  //   cy.contains('label', 'Have activity(s)') // 選取 Radio 'Have activity(s)'
-  //     .prev(2)
-  //     .find('input')
-  //     .should('have.attr', 'type', 'radio') // select the previous element
-  //     .should('be.checked'); // confirm it's type radio (optional)
+  it('Sequence, Have activity(s).', () => {
+    // select radio
+    cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
+    cy.contains('label', 'Have activity(s)') // 選取 Radio 'Have activity(s)'
+      .prev(2)
+      .find('input')
+      .should('have.attr', 'type', 'radio') // select the previous element
+      .should('be.checked'); // confirm it's type radio (optional)
 
-  //   // No selected.
-  //   cy.contains('button', 'Apply').click();
-  //   cy.get('.v-toast__text').should('contain', 'Not selected');
-  //   cy.wait(3000);
+    // No selected.
+    cy.contains('button', 'Apply').click();
+    cy.get('.v-toast__text').should('contain', 'Not selected');
+    cy.wait(3000);
 
-  //   // Clear selected item.
-  //   cy.get('.allCheckboxAct') // 選取 all select
-  //     .find('input')
-  //     .should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取
-  //   cy.contains('button', 'Clear').click();
-  //   cy.get('.allCheckboxAct') // 選取 all select
-  //     .find('input')
-  //     .should('not.be.visible')
-  //     .should('not.be.checked')
-  //   cy.wait(3000);
+    // Clear selected item.
+    cy.get('.allCheckboxAct') // 選取 all select
+      .find('input')
+      .should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取
+    cy.contains('button', 'Clear').click();
+    cy.get('.allCheckboxAct') // 選取 all select
+      .find('input')
+      .should('not.be.visible')
+      .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();
+    // 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% 來判斷數據是否有變化
-  //   });
-  // });
+    // 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('Sequence, Start', () => {
-  //   // 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)
+  it('Sequence, Start', () => {
+    // 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)
 
-  //   // No selected.
-  //   cy.contains('button', 'Apply').click();
-  //   cy.get('.v-toast__text').should('contain', 'Not selected');
-  //   cy.wait(3000);
+    // No selected.
+    cy.contains('button', 'Apply').click();
+    cy.get('.v-toast__text').should('contain', 'Not selected');
+    cy.wait(3000);
 
-  //   // Clear selected item.
-  //   cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true}); // 選取第二個
-  //   cy.contains('button', 'Clear').click();
-  //   cy.get('table tr:nth-child(2) input[type="radio"]').should('not.be.checked')
-  //   cy.wait(3000);
+    // Clear selected item.
+    cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true}); // 選取第二個
+    cy.contains('button', 'Clear').click();
+    cy.get('table tr:nth-child(2) input[type="radio"]').should('not.be.checked')
+    cy.wait(3000);
 
-  //   // selected item
-  //   cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
-  //   cy.contains('button', 'Apply').click();
-  //   cy.get('#tabFunnel').click();
-  //   cy.contains('p', 'Sequence');
-  //   cy.contains('span', 'Start');
-  //   cy.contains('button', 'Apply All').click();
+    // selected item
+    cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
+    cy.contains('button', 'Apply').click();
+    cy.get('#tabFunnel').click();
+    cy.contains('p', 'Sequence');
+    cy.contains('span', 'Start');
+    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% 來判斷數據是否有變化
-  //   });
-  // });
+    //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('Sequence, 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#End1').check({ force: true });
+  it('Sequence, 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#End1').check({ force: true });
 
-  //   // No selected.
-  //   cy.contains('button', 'Apply').click();
-  //   cy.get('.v-toast__text').should('contain', 'Not selected');
-  //   cy.wait(3000);
+    // No selected.
+    cy.contains('button', 'Apply').click();
+    cy.get('.v-toast__text').should('contain', 'Not selected');
+    cy.wait(3000);
 
-  //   // Clear selected item.
-  //   cy.get('table tr:nth-child(1) input[type="radio"]').check({force: true}); // 選取第一個
-  //   cy.contains('button', 'Clear').click();
-  //   cy.get('table tr:nth-child(1) input[type="radio"]').should('not.be.checked')
-  //   cy.wait(3000);
+    // Clear selected item.
+    cy.get('table tr:nth-child(1) input[type="radio"]').check({force: true}); // 選取第一個
+    cy.contains('button', 'Clear').click();
+    cy.get('table tr:nth-child(1) input[type="radio"]').should('not.be.checked')
+    cy.wait(3000);
 
-  //   // selected item
-  //   cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
-  //   cy.contains('button', 'Apply').click();
-  //   cy.get('#tabFunnel').click();
-  //   cy.contains('p', 'Sequence');
-  //   cy.contains('span', 'End');
-  //   cy.contains('button', 'Apply All').click();
+    // selected item
+    cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
+    cy.contains('button', 'Apply').click();
+    cy.get('#tabFunnel').click();
+    cy.contains('p', 'Sequence');
+    cy.contains('span', '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() 獲取 <li> 元素的內容
-  //     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() 獲取 <li> 元素的內容
+      const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
+      expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
+    });
+  });
 
-  // 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 });
+  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);
+    // 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" 的 <table>
-  //   cy.contains('p', 'Start activity')
-  //     .parents('div') // 回到 p 的父層 div
-  //     .eq(1) // 同階層的第二個 div
-  //     .find('table') // 向下找 table
-  //     .as('startTable'); // 將選取的元素命名，使用 @startTable 來操作
-  //   // 選取 "end" 的 <table>
-  //   cy.contains('p', 'End activity')
-  //     .parents('div')
-  //     .eq(1)
-  //     .find('table')
-  //     .as('endTable'); // 使用 @endTable 來操作
+    // 選取 "start" 的 <table>
+    cy.contains('p', 'Start activity')
+      .parents('div') // 回到 p 的父層 div
+      .eq(1) // 同階層的第二個 div
+      .find('table') // 向下找 table
+      .as('startTable'); // 將選取的元素命名，使用 @startTable 來操作
+    // 選取 "end" 的 <table>
+    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);
+    // 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();
+    // 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() 獲取 <li> 元素的內容
-  //     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() 獲取 <li> 元素的內容
+      const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
+      expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
+    });
+  });
 
   it('Sequence, Sequence', () => {
     // select radio
@@ -201,9 +201,9 @@ describe('Save Log and Filter', ()=>{
     .check({ force: true }); // 對該 <input> 元素進行勾選操作
 
     // No selected.
-    // cy.contains('button', 'Apply').click();
-    // cy.get('.v-toast__text').should('contain', 'Select two or more');
-    // cy.wait(3000);
+    cy.contains('button', 'Apply').click();
+    cy.get('.v-toast__text').should('contain', 'Select two or more');
+    cy.wait(3000);
 
     // 使用 dblclick 選擇要拖曳的元素
     cy.get('tbody tr[data-draggable="true"]').first().dblclick();
@@ -232,79 +232,79 @@ describe('Save Log and Filter', ()=>{
     });
   });
 
-  // it('Trace', () => {
-  //   // select radio
-  //   cy.get('input#Trace2').check({ force: true }); // 選取 Radio 'Trace'
-  //   cy.wait(3000);
+  it('Trace', () => {
+    // select radio
+    cy.get('input#Trace2').check({ force: true }); // 選取 Radio 'Trace'
+    cy.wait(3000);
 
-  //   // click on Trace Number to show a table
-  //   cy.contains('td', '#1').click();
-  //   cy.wait(1000);
-  //   cy.get('#cyTrace').scrollIntoView().should('be.visible'); // 視窗滾到右邊
-  //   cy.wait(1000);
-  //   cy.get('.p-chart').scrollIntoView(); // 視窗拉回來
+    // click on Trace Number to show a table
+    cy.contains('td', '#1').click();
+    cy.wait(1000);
+    cy.get('#cyTrace').scrollIntoView().should('be.visible'); // 視窗滾到右邊
+    cy.wait(1000);
+    cy.get('.p-chart').scrollIntoView(); // 視窗拉回來
 
-  //   // 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('.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);
 
-  //   // 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.get('#tabFunnel').click();
-  //   cy.contains('p', 'Trace');
-  //   cy.contains('button', 'Apply All').click();
+    // 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.get('#tabFunnel').click();
+    cy.contains('p', 'Trace');
+    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% 來判斷數據是否有變化
-  //   });
-  // });
+    // 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('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('#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);
+    // 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('#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();
+    // 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() 獲取 <li> 元素的內容
-  //     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() 獲取 <li> 元素的內容
+      const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
+      expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
+    });
+  });
 
 });
diff --git a/cypress/fixtures/loginToLogout.cy.js b/cypress/e2e/loginToLogout.cy.js
similarity index 100%
rename from cypress/fixtures/loginToLogout.cy.js
rename to cypress/e2e/loginToLogout.cy.js
diff --git a/cypress/fixtures/saveLogAndFilter.cy.js b/cypress/e2e/saveLogAndFilter.cy.js
similarity index 100%
rename from cypress/fixtures/saveLogAndFilter.cy.js
rename to cypress/e2e/saveLogAndFilter.cy.js