test: E2E-conformance rule Activity sequence done.

cypress/e2e/conformanceRule.cy.js

@@ -7,49 +7,156 @@ describe('Conformance Save', ()=>{
     cy.visit('https://REDACTED-HOST/files');
   });
 
-  it('Have activity', () => {
+  // it('Have activity', () => {
+  //   // enter Map
+  //   cy.url().should('include', 'files');
+  //   cy.get('table tr')
+  //     .filter(':contains("Log")') // 選擇 type Log
+  //     .filter(':contains("random")') // 選擇 random log 檔
+  //     .dblclick(); // 對選中的 tr 執行雙擊
+  //   cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁
+  //   cy.url().should('include', 'discover/map/log'); // 斷言在 discover/map/log/:id 路徑
+  //   cy.wait(2000)
+
+  //   // enter Conformance
+  //   cy.contains('li', 'CONFORMANCE').click(); // 點擊 Conformance 頁
+  //   cy.wait(2000);
+  //   cy.url().should('include', '/discover/conformance/log'); // 斷言在 discover/conformance/log/:id 路徑
+  //   cy.get('.active').should('have.text', 'CONFORMANCE');
+
+  //   // select radio
+  //   cy.get('#cyp-conformance-type-radio').find('input').first().click({ force: true }).should('be.checked');
+
+  //   // select list checkbox
+  //   cy.get('#cyp-conformance-list-checkbox').find('input').first().click({ force: true }).should('be.checked');
+
+  //   // click apply
+  //   cy.contains('button', 'Apply').click();
+  //   cy.contains('.v-toast', 'Rule applied');
+
+  //   // 是否有顯示選擇項目
+  //   cy.get('#cyp-conformance-result-check').should('exist'); // 不僅僅檢查元素是否存在於 DOM 中，還檢查元素是否可見，並等待一定時間（預設為 4 秒）以確保元素在這段時間內出現在畫面上。
+
+  //   // save conformance log
+  //   cy.contains('button', 'Save').click();
+  //   cy.contains('.swal2-title', 'SAVE NEW RULE');
+  //   cy.contains('button', 'OK').click();
+  //   cy.contains('#swal2-validation-message', 'You need to write something!'); // 不輸入要跳驗證
+  //   cy.get('.swal2-input').clear().type('random-conformance-rule-E2Etesting');
+  //   cy.contains('button', 'OK').click();
+  //   cy.contains('#swal2-html-container', 'random-conformance-rule-E2Etesting');
+
+  //   // 回到 Files 檢查是否有新增 Filter 'random-conformance-log-E2Etesting'.
+  //   cy.visit('https://REDACTED-HOST/files');
+  //   cy.url().should('include', 'files');
+  //   cy.contains('.fileName', 'random-conformance-rule-E2Etesting');
+  // });
+
+  // it('Activity sequence', () => {
+  //   // enter Map
+  //   cy.url().should('include', 'files');
+  //   cy.get('table tr')
+  //     .filter(':contains("Rule")') // 選擇 type Log
+  //     .filter(':contains("random-conformance-rule-E2Etesting")') // 選擇 random log 檔
+  //     .dblclick({ force: true }); // 對選中的 tr 執行雙擊
+  //   cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁
+  //   cy.url().should('include', 'rule/log'); // 斷言在 discover/map/log/:id 路徑
+  //   cy.wait(2000)
+
+  //   // select radio Rule Type
+  //   cy.get('#cyp-conformance-type-radio')
+  //     .find('input[value="Activity sequence"]')
+  //     .check({ force: true })
+  //     .should('be.checked');
+
+  //   // select radio Activity Sequence
+  //   cy.get('#cyp-conformance-sequence-radio')
+  //     .find('input[value="Start & End"]')
+  //     .check({ force: true })
+  //     .should('be.checked');
+
+  //   // open showbar
+  //   cy.get('#cyp-showbaricon').click();
+
+  //   // select radio Start
+  //   cy.contains('p', 'Start')
+  //     .next('div')
+  //     .find('input')
+  //     .check({ force: true })
+  //     .should('be.checked');
+  //   // select radio End
+  //   cy.contains('p', 'End')
+  //     .next('div')
+  //     .find('input')
+  //     .check({ force: true })
+  //     .should('be.checked');
+
+  //   // click apply
+  //   cy.contains('button', 'Apply').click();
+  //   cy.contains('.v-toast', 'Rule applied');
+
+  //   // 是否有顯示選擇項目
+  //   cy.get('#cyp-conformance-result-dot')
+  //     .find('li') // 在 ul 中找到所有的 li 元素
+  //     .should('have.length', 2); // 斷言 li 的數量為 2
+
+  //   // save log
+  //   cy.contains('button', 'Save').click();
+  //   cy.contains('.swal2-title', 'SAVE COMPLETE');
+  //   cy.contains('#swal2-html-container', 'random-conformance-rule-E2Etesting');
+  // });
+
+  it('Activity sequence, Sequence, Directly follows', () => {
     // enter Map
     cy.url().should('include', 'files');
     cy.get('table tr')
-      .filter(':contains("Log")') // 選擇 type Log
+      .filter(':contains("Rule")') // 選擇 type Log
-      .filter(':contains("random")') // 選擇 random log 檔
+      .filter(':contains("random-conformance-rule-E2Etesting")') // 選擇 random log 檔
-      .dblclick(); // 對選中的 tr 執行雙擊
+      .dblclick({ force: true }); // 對選中的 tr 執行雙擊
     cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁
-    cy.url().should('include', 'discover/map/log'); // 斷言在 discover/map/log/:id 路徑
+    cy.url().should('include', 'rule/log'); // 斷言在 discover/map/log/:id 路徑
     cy.wait(2000)
 
-    // enter Conformance
+    // select radio Rule Type
-    cy.contains('li', 'CONFORMANCE').click(); // 點擊 Conformance 頁
+    cy.get('#cyp-conformance-type-radio')
-    cy.wait(2000);
+      .find('input[value="Activity sequence"]')
-    cy.url().should('include', '/discover/conformance/log'); // 斷言在 discover/conformance/log/:id 路徑
+      .check({ force: true })
-    cy.get('.active').should('have.text', 'CONFORMANCE');
+      .should('be.checked');
 
-    // select radio
+    // select radio Activity Sequence
-    cy.get('#cyp-conformance-type-radio').find('input').first().click({ force: true }).should('be.checked');
+    cy.get('#cyp-conformance-sequence-radio')
+      .find('input[value="Sequence"]')
+      .check({ force: true })
+      .should('be.checked');
 
-    // select list checkbox
+    // select radio Mode
-    cy.get('#cyp-conformance-list-checkbox').find('input').first().click({ force: true }).should('be.checked');
+    cy.get('#cyp-conformance-Mode-radio')
+      .find('input[value="Directly follows"]')
+      .check({ force: true })
+      .should('be.checked');
+
+    // open showbar
+    cy.get('#cyp-showbaricon').click();
+
+    // select radio Start
+    cy.get('div[data-draggable="true"]').eq(0).dblclick(); // 第 1 個 div
+    cy.get('div[data-draggable="true"]').eq(1).dblclick(); // 第 2 個 div
+    cy.get('div[data-draggable="true"]').eq(2).dblclick(); // 第 3 個 div
+    cy.contains('button', 'Apply').click();
 
     // click apply
     cy.contains('button', 'Apply').click();
     cy.contains('.v-toast', 'Rule applied');
 
     // 是否有顯示選擇項目
-    cy.get('#cyp-conformance-result-check')
+    cy.get('#cyp-conformance-result-arrow')
+      .find('li') // 在 ul 中找到所有的 li 元素
+      .should('have.length', 3); // 斷言 li 的數量為 2
 
-    // save conformance log
+    // save log
     cy.contains('button', 'Save').click();
-    cy.contains('.swal2-title', 'SAVE NEW RULE');
+    cy.contains('.swal2-title', 'SAVE COMPLETE');
-    cy.contains('button', 'OK').click();
-    cy.contains('#swal2-validation-message', 'You need to write something!'); // 不輸入要跳驗證
-    cy.get('.swal2-input').clear().type('random-conformance-rule-E2Etesting');
-    cy.contains('button', 'OK').click();
     cy.contains('#swal2-html-container', 'random-conformance-rule-E2Etesting');
-
-    // 回到 Files 檢查是否有新增 Filter 'random-conformance-log-E2Etesting'.
-    cy.visit('https://REDACTED-HOST/files');
-    cy.url().should('include', 'files');
-    cy.contains('.fileName', 'random-conformance-rule-E2Etesting');
   });
 
 

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -14,7 +14,7 @@
         <!-- show and hidden button -->
         <div v-if="!notShowActList" class="flex items-center justify-between mr-1" :class="isShowBar ? 'text-primary' : ''">
           <p class="h2">Activity Selector</p>
-          <span class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded" @click="isShowBar = !isShowBar">{{ isShowBar ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</span>
+          <span class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded" @click="isShowBar = !isShowBar" id="cyp-showbaricon">{{ isShowBar ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</span>
         </div>
         <!-- select result -->
         <ConformanceSelectResult

src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue

@@ -1,15 +1,15 @@
 <template>
   <section class="space-y-2  text-sm">
     <!-- Rule Type -->
-    <div>
+    <div id="cyp-conformance-type-radio">
       <p class="h2">Rule Type</p>
-      <div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2" id="cyp-conformance-type-radio">
+      <div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
         <RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" @change="changeRadio"/>
         <label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
       </div>
     </div>
     <!-- Activity Sequence (2 item) -->
-    <div v-show="selectedRuleType === 'Activity sequence'">
+    <div v-show="selectedRuleType === 'Activity sequence'" id="cyp-conformance-sequence-radio">
       <p class="h2">Activity Sequence</p>
       <div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
         <RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeRadioSeq"/>
@@ -17,7 +17,7 @@
       </div>
     </div>
     <!-- Mode -->
-    <div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'">
+    <div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" id="cyp-conformance-Mode-radio">
       <p class="h2">Mode</p>
       <div v-for="mode in mode" :key="mode.id" class="ml-4 mb-2">
         <RadioButton v-model="selectedMode" :inputId="mode.id + mode.name" name="mode" :value="mode.name" />

src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="space-y-2">
+  <ul class="space-y-2" id="cyp-conformance-result-arrow">
-    <div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
+    <li class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
       <span class="material-symbols-outlined text-primary mr-2">
         arrow_circle_down
       </span>
       <p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
-    </div>
+    </li>
-  </div>
+  </ul>
 </template>
 <script>
 export default {

src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="space-y-2">
+  <div class="space-y-2" id="cyp-conformance-result-check">
     <div class="flex justify-start items-center pr-4" v-for="(act, index) in datadata" :key="index">
-      <span class="material-symbols-outlined text-primary mr-2" id="cyp-conformance-result-check">
+      <span class="material-symbols-outlined text-primary mr-2">
         check_circle
       </span>
       <p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>

src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul>
+  <ul id="cyp-conformance-result-dot">
     <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in data" :key="index + act">
       <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>
       <span class="mr-2 block w-12">{{ act.category }}</span>