test: Enter Compare & Anchor done.

cypress/e2e/compare.cy.js

@@ -0,0 +1,48 @@
+describe('Performance', ()=>{
+  beforeEach(() => {
+    cy.visit('https://REDACTED-HOST/files');
+    cy.login();
+    cy.visit('https://REDACTED-HOST/files');
+    cy.url().should('include', 'files');
+    cy.contains('li', 'COMPARE').click();
+  });
+
+  it('Enter Compare', () => {
+    const dataTransfer = new DataTransfer();
+
+    cy.url().should('include', 'files');
+    cy.contains('button', 'Compare').should('be.disabled'); // 斷言按鈕為禁用狀態
+    // 安裝套件: cypress-drag-drop
+    cy.get('#compareFile0').drag('#primaryDragCard');
+    cy.get('#compareFile1').drag('#secondaryDragCard');
+    // Enter Compare
+    cy.contains('button', 'Compare').click();
+    cy.contains('h2', 'COMPARE');
+    cy.url().should('include', 'compare');
+    cy.wait(2000);
+    // // 斷言排序
+    // // 斷言狀態欄
+    // // 斷言頁面中有 7 個 canvas 元素
+    cy.get('canvas').should('have.length', 7);
+  });
+
+  it('Anchor', () => {
+    // enter Map
+    cy.url().should('include', 'files');
+    cy.get('#compareFile0').drag('#primaryDragCard');
+    cy.get('#compareFile1').drag('#secondaryDragCard');
+    cy.contains('button', 'Compare').click();
+    cy.contains('h2', 'COMPARE');
+    cy.url().should('include', 'compare');
+    cy.wait(2000);
+    // Anchor 網頁不會捲動到錨點位置是因為 Cypress 是模擬使用者行為而非準確瀏覽器行為
+    cy.get('aside li a[href="#cycleTime"]').click();
+    cy.url().should('include', '#cycleTime');
+    cy.get('aside li a[href="#processingTime"]').click();
+    cy.url().should('include', '#processingTime');
+    cy.get('aside li a[href="#waitingTime"]').click();
+    cy.url().should('include', '#waitingTime');
+    cy.get('aside li a[href="#cases"]').click();
+    cy.url().should('include', '#cases');
+  });
+})

cypress/support/commands.js

@@ -8,7 +8,10 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 // -- This is a parent command --
+import '@4tw/cypress-drag-drop'
+
 const loginApiUrl = Cypress.env('loginApiUrl');
+
 Cypress.Commands.add('login', () => {
   cy.request({
     method: 'POST',