test: Upload Page, rename, reset, back to page. Done.

cypress.config.js

@@ -8,4 +8,5 @@ module.exports = defineConfig({
   e2e: {
     specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
   },
+  includeShadowDom: true
 });

cypress/e2e/fileUploadEtc.cy.js

@@ -0,0 +1,93 @@
+// Testing File Page: upload, download, delete, rename
+// upload: 第一階段上傳錯誤、第二階段上傳錯誤、改名、改名前後空格、回上一頁、清空
+// delete: 第一階段刪除錯誤訊息
+// rename: 五種改名介面是否有出現
+describe('File Upload etc', () => {
+  beforeEach(() => {
+    cy.visit('https://REDACTED-HOST/');
+    cy.login();
+    cy.visit('https://REDACTED-HOST/files');
+  });
+
+  // it('Phase one worng file upload.', () => {
+  //   cy.contains('div', 'Upload').click();
+  //   // 不是 UTF-8
+  //   cy.get('input[type="file"]').selectFile('cypress/fixtures/csv/big5.csv');
+  //   cy.contains('.swal2-html-container', 'UFT-8');
+  //   cy.wait(1000);
+  //   cy.closePopup();
+  //   // 沒有資料
+  //   cy.get('input[type="file"]').selectFile('cypress/fixtures/csv/empty.csv');
+  //   cy.contains('.swal2-html-container', 'Need at least one record of data.');
+  //   cy.wait(1000);
+  //   cy.closePopup();
+  //   // 欄位不滿 5 欄
+  //   cy.get('input[type="file"]').selectFile('cypress/fixtures/csv/insufficient-columns.csv');
+  //   cy.contains('.swal2-html-container', 'Need at least five columns of data.');
+  //   cy.wait(1000);
+  //   cy.closePopup();
+  //   // 不是 csv
+  //   cy.get('input[type="file"]').selectFile('cypress/fixtures/csv/favicon.ico');
+  //   cy.contains('.swal2-html-container', 'CSV');
+  //   cy.wait(1000);
+  //   cy.closePopup();
+  // });
+
+  // it('Upload Page, rename, reset, back to page', () => {
+  //   cy.contains('div', 'Upload').click();
+  //   cy.get('input[type="file"]').selectFile('cypress/fixtures/csv/worngFile.csv');
+  //   // rename
+  //   cy.get('#fileNameInput').type('  is space  ').blur();
+  //   cy.get('#fileNameInput').should('have.value', 'worngFile  is space');
+  //   cy.get('#fileNameInput').clear().type('  is space  ').blur();
+  //   cy.get('#fileNameInput').should('have.value', 'is space');
+  //   // reset
+  //   cy.get('div[data-type="timestamp"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Timestamp*"]').click(); // 使用 filter 選擇包含特定屬性的元素
+  //   cy.get('div[data-type="timestamp"] span').contains('Timestamp*');
+  //   cy.get('div[data-type="case id"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Case ID*"]').click();
+  //   cy.get('div[data-type="case id"] span').contains('Case ID*');
+  //   cy.get('div[data-type="name"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Activity*"]').click();
+  //   cy.get('div[data-type="name"] span').contains('Activity*');
+  //   cy.get('div[data-type="instance"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Activity Instance ID*"]').click();
+  //   cy.get('div[data-type="instance"] span').contains('Activity Instance ID*');
+  //   cy.get('div[data-type="status"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Status*"]').click();
+  //   cy.get('div[data-type="status"] span').contains('Status*');
+  //   cy.contains('.btn', 'Reset').click();
+  //   cy.get('div[data-type="timestamp"] span').contains('Not Assigned');
+  //   cy.get('div[data-type="case id"] span').contains('Not Assigned');
+  //   cy.get('div[data-type="name"] span').contains('Not Assigned');
+  //   cy.get('div[data-type="instance"] span').contains('Not Assigned');
+  //   cy.get('div[data-type="status"] span').contains('Not Assigned');
+  //   // back to page
+  //   cy.contains('.btn', 'Cancel').click();
+  //   cy.url().should('include', 'files');
+  // });
+
+  // it('Phase two worng file upload.', () => {
+  //   cy.contains('div', 'Upload').click();
+  //   cy.get('input[type="file"]').selectFile('cypress/fixtures/csv/worngFile.csv');
+  //   // select
+  //   cy.get('div[data-type="timestamp"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Timestamp*"]').click();
+  //   cy.get('div[data-type="timestamp"] span').contains('Timestamp*');
+  //   cy.get('div[data-type="case id"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Case ID*"]').click();
+  //   cy.get('div[data-type="case id"] span').contains('Case ID*');
+  //   cy.get('div[data-type="name"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Activity*"]').click();
+  //   cy.get('div[data-type="name"] span').contains('Activity*');
+  //   cy.get('div[data-type="instance"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Activity Instance ID*"]').click();
+  //   cy.get('div[data-type="instance"] span').contains('Activity Instance ID*');
+  //   cy.get('div[data-type="status"]').click();
+  //   cy.get('.p-dropdown-item').filter('[aria-label="Status*"]').click();
+  //   cy.get('div[data-type="status"] span').contains('Status*');
+  //   // send
+  //   cy.contains('.btn', 'Upload').click();
+  // })
+});

cypress/fixtures/csv/big5.csv

@@ -0,0 +1,5 @@
+ 時間,案號,居住區域,學區,事件名稱,事件序號,狀態 ,時段,溫度,數量,未知,完成,預期時間
+ 2022/05/13 09:25:21,案一,63,富山,事件甲,事件一,Start,早上,95,27,,TRUE,2022/5/14 09:25:21
+ 2022/05/13 09:25:21,案一,,,事件甲,事件一,Complete,中午,135,442,,false,2022/5/14 09:25:21
+ 2022/05/13 09:30:01,案一,,仁德,事件乙,事件四,Start,中午,110.6,-6, ,,2022/5/14 09:30:01
+ 2022/05/13 09:30:01,案一,,,事件乙,事件四,Complete,晚上,-65,4,,true ,2022/5/14 09:30:01

cypress/fixtures/csv/empty.csv

@@ -0,0 +1 @@
+timestamp,case id,name,instance,status

cypress/fixtures/csv/insufficient-columns.csv

@@ -0,0 +1,9 @@
+timestamp,case id,name,status
+2022/05/13 09:25:21,c1,a,1,start
+2022/05/13 09:25:21,c1,a,1,complete
+2022/05/13 09:30:01,c1,b,2,start
+2022/05/13 09:30:01,c1,b,2,complete
+2022/05/13 09:48:33,c2,a,6,start
+2022/05/13 09:48:33,c2,a,6,complete
+2022/05/13 09:54:27,c2,c,7,start
+2022/05/13 09:54:27,c2,c,7,complete

cypress/fixtures/csv/rightFile.csv

@@ -0,0 +1,30 @@
+CaseID,Activity,Timestamp,Status,Activity_Instance
+CID_1,檢傷,2023-01-12 15:32:31,start,1
+CID_1,檢傷,2023-01-12 15:32:31,complete,1
+CID_1,第一次醫囑,2023-01-12 15:49:01,start,2
+CID_1,第一次醫囑,2023-01-12 15:49:01,complete,2
+CID_1,出院,2023-01-13 03:32:00,start,3
+CID_1,出院,2023-01-13 03:32:00,complete,3
+CID_2,檢傷,2023-07-26 08:44:17,start,4
+CID_2,檢傷,2023-07-26 08:44:17,complete,4
+CID_2,第一次醫囑,2023-07-26 08:48:05,start,5
+CID_2,第一次醫囑,2023-07-26 08:48:05,complete,5
+CID_2,出院,2023-07-26 17:00:49,start,6
+CID_2,出院,2023-07-26 17:00:49,complete,6
+CID_3,檢傷,2023-11-27 06:20:48,start,7
+CID_3,檢傷,2023-11-27 06:20:48,complete,7
+CID_3,第一次醫囑,2023-11-27 06:40:30,start,8
+CID_3,第一次醫囑,2023-11-27 06:40:30,complete,8
+CID_3,出院,2023-11-27 07:21:53,start,9
+CID_3,出院,2023-11-27 07:21:53,complete,9
+CID_4,檢傷,2023-11-01 01:20:19,start,10
+CID_4,檢傷,2023-11-01 01:20:19,complete,10
+CID_4,第一次醫囑,2023-11-01 01:34:54,start,11
+CID_4,第一次醫囑,2023-11-01 01:34:54,complete,11
+CID_4,住院,2023-11-02 06:36:36,start,12
+CID_4,住院,2023-11-10 02:35:39,complete,12
+CID_4,出院,2023-11-10 02:35:39,start,13
+CID_4,出院,2023-11-10 02:35:39,complete,13
+CID_5,檢傷,2023-07-13 02:49:36,start,14
+CID_5,檢傷,2023-07-13 02:49:36,complete,14
+CID_5,第一次醫囑,2023-07-13 03:07:01,start,15

cypress/fixtures/csv/worngFile.csv

@@ -0,0 +1,9 @@
+timestamp,case id,name,instance,status
+2022/05/13 09:25:21,c1,a,1,start
+2022/05/13 09:25:21,c1,a,1,
+2022/05/13 09:30:01,c1,b,2,begin
+2022/05/13 09:30:01,c1,b,,complete
+2022/05/13 09:48:33,,,6,start
+2022;05;13 09;48;33,c2,a,6,complete
+2022/05/13 09:54:27,c2,c,7,start
+,c2,c,7,complete

cypress/support/commands.js

@@ -7,8 +7,6 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
-//
-//
 // -- This is a parent command --
 const loginApiUrl = Cypress.env('loginApiUrl');
 Cypress.Commands.add('login', () => {
@@ -27,15 +25,10 @@ Cypress.Commands.add('login', () => {
   })
 });
 // 呼叫方式: cy.login()
-//
-//
 // -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// 點擊空白區關閉 Modal，cy.closePopup()
+Cypress.Commands.add('closePopup', () => {
+  // 點擊 body 以外的區域，使用 force: true 強制觸發點擊
+  cy.get('body').click({ position: 'topLeft'});
+  cy.wait(1000);
+})

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest run --coverage",
+    "cy:run": "cypress run",
     "test:unit": "vitest --environment jsdom --root src/",
     "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",

src/module/alertModal.js

@@ -198,7 +198,7 @@ export async function uploadFailedFirst(failureType, failureMsg, failureLoc) {
   await Swal.fire({
     title: 'UPLOAD FAILED',
     html: value,
-    timer: 5000, // 停留5秒後自動關閉
+    // timer: 5000, // 停留5秒後自動關閉
     showConfirmButton: false,
     icon: 'error',
     iconColor: '#FF3366',