Cypress: filterFunnel - Ttmeframes testing done.

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}",
   },

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" 的 <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);
+
+    // 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% 來判斷數據是否有變化
+    });
+  });
+
   // 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', () => {
+  // it('Timeframes', () => {
-    // select radio
+  //   // select radio
-    cy.get('input#Timeframes3').check({ force: true }); // 選取 Radio 'Trace'
+  //   cy.get('input#Timeframes3').check({ force: true }); // 選取 Radio 'Trace'
-    cy.wait(3000);
+  //   cy.wait(3000);
 
-    // Clear selected item
+  //   // Clear selected item
-    cy.get('.p-slider-handle:nth-child(2)')
+  //   cy.get('#startCalendar').click();
-      .click()
+  //   cy.get('.p-datepicker td[aria-label="28"]').click({ multiple: true });
-      .trigger('mousedown', { which: 1 })
+  //   cy.contains('button', 'Clear').click();
-      .trigger('mousemove', { clientX: 250 })
+  //   cy.get('.v-toast__text').should('contain', 'Reset Success');
-      .xpath('//span[contains(@class, "p-slider-handle")][2]')
+  //   cy.wait(3000);
-      .click()
-      .trigger('mouseup');
-    cy.contains('button', 'Clear').click();
-    cy.get('.v-toast__text').should('contain', 'Reset Success');
-    cy.wait(3000);
 
-    // selected item
+  //   // selected item
-    cy.get('.p-slider-handle:nth-child(2)')
+  //   cy.get('#startCalendar').click();
-      .click()
+  //   cy.get('.p-datepicker td[aria-label="28"]').click({ multiple: true });
-      .trigger('mousedown', { which: 1 })
+  //   cy.contains('button', 'Apply').click();
-      .trigger('mousemove', { clientX: 250 })
+  //   cy.get('#tabFunnel').click();
-      .xpath('//span[contains(@class, "p-slider-handle")][2]')
+  //   cy.contains('p', 'Timeframe');
-      .click()
+  //   cy.contains('button', 'Apply All').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();
 
-    // make sure create map again.
+  //   // make sure create map again.
-    cy.get('header').click();
+  //   cy.get('header').click();
-    cy.get('#iconState').click();
+  //   cy.get('#iconState').click();
-    cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
+  //   cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
-      const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
+  //     const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
-      expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
+  //     expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
-    });
+  //   });
-  });
+  // });
 
 });

src/components/Discover/Filter/Timeframes.vue

@@ -18,12 +18,12 @@
       <div class="flex justify-center items-center space-x-2 w-full">
         <div>
             <span class="block mb-2">Start time</span>
-            <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')"/>
+            <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')" id="startCalendar"/>
         </div>
         <span class="block mt-4">~</span>
         <div>
           <span class="block mb-2">End time</span>
-          <Calendar v-model="endTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="endMinDate" :maxDate="endMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'end')"/>
+          <Calendar v-model="endTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="endMinDate" :maxDate="endMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'end')" id="endCalendar"/>
         </div>
       </div>
       <!-- End calendar group -->