test: E2E-conformance save log and filter done.

cypress/e2e/conformanceSave.cy.js

@@ -0,0 +1,165 @@
+// 每一 describe 就是一個測試套件
+// 每一 it 就是一個測試命令
+describe('Conformance Save', ()=>{
+  beforeEach(() => {
+    cy.visit('https://REDACTED-HOST/files');
+    cy.login();
+    cy.visit('https://REDACTED-HOST/files');
+  });
+
+  // it('save conformance log', () => {
+  //   // enter Map
+  //   cy.url().should('include', 'files');
+  //   cy.contains('.fileName', 'random').dblclick(); // 選取 'random' log 檔
+  //   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');
+
+  //   // 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-log-E2Etesting');
+  //   cy.contains('button', 'OK').click();
+  //   cy.contains('#swal2-html-container', 'random-conformance-log-E2Etesting');
+
+  //   // 回到 Files 檢查是否有新增 Filter 'random-conformance-log-E2Etesting'.
+  //   cy.visit('https://REDACTED-HOST/files');
+  //   cy.url().should('include', 'files');
+  //   cy.contains('.fileName', 'random-conformance-log-E2Etesting');
+  // });
+
+  it('save conformance filter', () => {
+    // 先做一個 filter，再做一個 conformance filter。
+    // enter log
+    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);
+
+    // select radio
+    cy.get('#iconFilter').click();
+    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)
+
+    // select table item
+    cy.get('.allCheckboxAct') // 選取 all select
+      .find('input')
+      .should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取
+
+    // click Alpay and click Alppy All
+    cy.contains('button', 'Apply').click();
+    cy.get('#tabFunnel').click();
+    cy.contains('.p-timeline', 'Sequence');
+    cy.contains('button', 'Apply All').click();
+
+    // save log
+    cy.contains('button', 'Save').click();
+    cy.contains('.swal2-title', 'SAVE NEW FILTER');
+    cy.get('.swal2-input').clear().type('random-to-conformance-filter-E2Etesting');
+    cy.contains('button', 'OK').click();
+    cy.contains('#swal2-html-container', 'random-to-conformance-filter-E2Etesting');
+
+    // 回到 Files 檢查是否有新增 Filter 'random-to-conformance-filter-E2Etesting'
+    // enter Map
+    cy.visit('https://REDACTED-HOST/files');
+    cy.url().should('include', 'files');
+    cy.get('table tr')
+      .filter(':contains("Filter")') // 選擇 type Filter
+      .filter(':contains("random-to-conformance-filter-E2Etesting")') // 選擇 random-to-conformance-filter-E2Etesting filter 檔
+      .dblclick(); // 對選中的 tr 執行雙擊
+    cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁
+    cy.url().should('include', 'discover/map/filter'); // 斷言在 discover/map/filter/:id 路徑
+    cy.wait(2000)
+
+    // enter Conformance
+    cy.contains('li', 'CONFORMANCE').click(); // 點擊 Conformance 頁
+    cy.wait(2000);
+    cy.url().should('include', '/discover/conformance/filter'); // 斷言在 discover/conformance/filter/: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').eq(1).click({ force: true }).should('be.checked');
+
+    // click apply
+    cy.contains('button', 'Apply').click();
+    cy.contains('.v-toast', 'Rule applied');
+
+    // 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-filter-E2Etesting');
+    cy.contains('button', 'OK').click();
+    cy.contains('#swal2-html-container', 'random-conformance-filter-E2Etesting');
+
+    // 回到 Files 檢查是否有新增 Filter 'random-conformance-log-E2Etesting'.
+    cy.visit('https://REDACTED-HOST/files');
+    cy.url().should('include', 'files');
+    cy.contains('.fileName', 'random-conformance-filter-E2Etesting');
+  });
+
+  // it('no save log', () => {
+  //   // enter log
+  //   cy.url().should('include', 'files');
+  //   cy.contains('.fileName', 'random').dblclick(); // 選取 'random' log 檔
+  //   cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁
+  //   cy.url().should('include', 'discover/map/log'); // 斷言在 discover/map/log/:id 路徑
+  //   cy.wait(3000)
+
+  //   // select radio
+  //   cy.get('#iconFilter').click(); // 選取 Filter sidebar
+  //   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)
+
+  //   // select table item
+  //   cy.get('.allCheckboxAct') // 選取 all select
+  //     .find('input')
+  //     .should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取
+
+  //   // click Alpay and click Alppy All
+  //   cy.contains('button', 'Apply').click();
+  //   cy.get('#tabFunnel').click();
+  //   cy.contains('.p-timeline', 'Sequence');
+  //   cy.contains('button', 'Apply All').click();
+  //   cy.wait(3000)
+
+  //   cy.get('#backPage').click();
+  //   cy.contains('.swal2-title', 'LEAVE MAP');
+  //   cy.contains('button', 'OK').click();
+  //   cy.url().should('include', 'files');
+  // })
+});

cypress/e2e/jsconfig.json

@@ -8,5 +8,6 @@
     "./**/*",
     "../support/**/*",
     "/node_modules/cypress",
-    "cypress/**/*.js"]
+    "cypress/**/*.js",],
+    "experimentalShadowDomSupport": true
 }

cypress/support/commands.js

@@ -18,7 +18,8 @@ Cypress.Commands.add('login', () => {
     form: true,
     body: {
       username: Cypress.env('user').username,
-      password: Cypress.env('user').password
+      password: Cypress.env('user').password,
+      grant_type: 'password',
     }
   }).then(response => {
     const token = response.body.access_token;

package.json

@@ -48,7 +48,7 @@
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.6",
     "autoprefixer": "^10.4.13",
-    "cypress": "^4.2.0",
+    "cypress": "^12.0.2",
     "cypress-xpath": "^2.0.1",
     "eslint": "^8.22.0",
     "eslint-plugin-cypress": "^2.12.1",

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

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
     <p class="h2 pl-2 border-b mb-3">Activity list</p>
-    <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]">
+    <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]" id="cyp-conformance-list-checkbox">
       <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index">
         <Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" @change="actListData"/>
         <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>

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

@@ -3,7 +3,7 @@
     <!-- Rule Type -->
     <div>
       <p class="h2">Rule Type</p>
-      <div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
+      <div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2" id="cyp-conformance-type-radio">
         <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>

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

@@ -1,5 +1,5 @@
 <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">
         check_circle

src/components/Navbar.vue

@@ -51,7 +51,7 @@ import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
-import { saveFilter, savedSuccessfully } from '@/module/alertModal.js';
+import { saveFilter, savedSuccessfully, saveConformance } from '@/module/alertModal.js';
 
 export default {
   setup() {
@@ -190,7 +190,7 @@ export default {
             await this.conformanceStore.updataConformance();
             if(this.isUpdataConformance) await savedSuccessfully(this.conformanceFileName);
           } else {
-            await saveFilter(this.conformanceStore.addConformanceCreateCheckId);
+            await saveConformance(this.conformanceStore.addConformanceCreateCheckId);
             // 存檔後為 checkID，換網址不跳頁，使用 push 記錄歷史路由
             if(this.conformanceLogId) await this.$router.push(`/rule/log/${this.conformanceLogCreateCheckId}/conformance/${this.conformanceLogId}`);
             else if(this.conformanceFilterId) await this.$router.push(`/rule/filter/${this.conformanceFilterCreateCheckId}/conformance/${this.conformanceFilterId}`);