test: Compare dropdown sort done.

cypress/e2e/compare.cy.js

@@ -7,9 +7,102 @@ describe('Performance', ()=>{
     cy.contains('li', 'COMPARE').click();
   });
 
-  it('Enter Compare', () => {
-    const dataTransfer = new DataTransfer();
+  it('Compare dropdown sorting Test', () => {
+    const expectedOptions =
+    ['By File Name (A to Z)', 'By File Name (Z to A)', 'By Dependency (A to Z)', 'By Dependency (Z to A)', 'By File Type (A to Z)', 'By File Type (Z to A)', 'By Last Update (A to Z)', 'By Last Update (Z to A)'];
 
+    cy.url().should('include', 'files');
+    cy.get('.p-dropdown').click();
+    cy.get('.p-dropdown-items')
+    .find('.p-dropdown-item')
+    .then($options => {
+      const actualOptions = $options.map((index, elem) => Cypress.$(elem).find('.p-dropdown-item-label').text()).get()
+      expect(actualOptions).to.deep.equal(expectedOptions)
+    })
+  })
+
+  it('Grid Card Sorting Test', () => {
+    let originalData = [];
+    let sortedData = [];
+
+    cy.url().should('include', 'files');
+    cy.get('#compareGridCards').find('li').each($card => {
+      originalData.push($card.find('div h3').text().trim());
+    });
+    // Sort: By File Name (A to Z)
+    cy.get('.p-dropdown').click();
+    cy.contains('.p-dropdown-item', 'By File Name (A to Z)').click();
+    cy.wait(2000);
+    cy.get('#compareGridCards').find('li').each($card => {
+      sortedData.push($card.find('div h3').text().trim());
+    });
+    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())));
+    // Sort: By File Name (Z to A)
+    sortedData = [];
+    cy.get('.p-dropdown').click();
+    cy.contains('.p-dropdown-item', 'By File Name (Z to A)').click();
+    cy.wait(2000);
+    cy.get('#compareGridCards').find('li').each($card => {
+      sortedData.push($card.find('div h3').text().trim());
+    });
+    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse());
+    // Sort: By Dependency (A to Z)
+    cy.get('.p-dropdown').click();
+    sortedData = [];
+    cy.contains('.p-dropdown-item', 'By Dependency (A to Z)').click();
+    cy.wait(2000);
+    cy.get('#compareGridCards').find('li').each($card => {
+      sortedData.push($card.find('div h3').text().trim());
+    });
+    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())));
+    // Sort: By Dependency (Z to A)
+    cy.get('.p-dropdown').click();
+    sortedData = [];
+    cy.contains('.p-dropdown-item', 'By Dependency (Z to A)').click();
+    cy.wait(2000);
+    cy.get('#compareGridCards').find('li').each($card => {
+      sortedData.push($card.find('div h3').text().trim());
+    });
+    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse());
+    // Sort: By File Type (A to Z)
+    cy.get('.p-dropdown').click();
+    sortedData = [];
+    cy.contains('.p-dropdown-item', 'By File Type (A to Z)').click();
+    cy.wait(2000);
+    cy.get('#compareGridCards').find('li').each($card => {
+      sortedData.push($card.find('div h3').text().trim());
+    });
+    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())));
+    // Sort: By File Type (Z to A)
+    cy.get('.p-dropdown').click();
+    sortedData = [];
+    cy.contains('.p-dropdown-item', 'By File Type (Z to A)').click();
+    cy.wait(2000);
+    cy.get('#compareGridCards').find('li').each($card => {
+      sortedData.push($card.find('div h3').text().trim());
+    });
+    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse());
+    // Sort: By Last Update (A to Z)
+    cy.get('.p-dropdown').click();
+    sortedData = [];
+    cy.contains('.p-dropdown-item', 'By Last Update (A to Z)').click();
+    cy.wait(2000);
+    cy.get('#compareGridCards').find('li').each($card => {
+      sortedData.push($card.find('div h3').text().trim());
+    });
+    expect(sortedData).to.deep.equal(originalData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)));
+    // Sort: By Last Update (Z to A)
+    cy.get('.p-dropdown').click();
+    sortedData = [];
+    cy.contains('.p-dropdown-item', 'By Last Update (Z to A)').click();
+    cy.wait(2000);
+    cy.get('#compareGridCards').find('li').each($card => {
+      sortedData.push($card.find('div h3').text().trim());
+    });
+    expect(sortedData).to.deep.equal(originalData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse());
+  })
+
+  it('Enter Compare', () => {
     cy.url().should('include', 'files');
     cy.contains('button', 'Compare').should('be.disabled'); // 斷言按鈕為禁用狀態
     // 安裝套件: cypress-drag-drop
@@ -20,10 +113,16 @@ describe('Performance', ()=>{
     cy.contains('h2', 'COMPARE');
     cy.url().should('include', 'compare');
     cy.wait(2000);
-    // // 斷言排序
-    // // 斷言狀態欄
-    // // 斷言頁面中有 7 個 canvas 元素
+    // 斷言排序
+    // 斷言頁面中有 7 個 canvas 元素
     cy.get('canvas').should('have.length', 7);
+    // 斷言狀態欄
+    cy.get('#compareState').click();
+    cy.wait(3000); // 等待渲染
+    cy.get('.p-sidebar-content li').first().then($li => {
+      const percentage = $li.find('span').eq(1).text();
+      expect(percentage).to.match(/^\d+(\.\d+)?%$/); // 使用正則表達式來確認文字內容是否符合數字 + % 符號的組合
+    });
   });
 
   it('Anchor', () => {