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', () => {

src/views/Compare/Dashboard/index.vue

@@ -83,7 +83,7 @@
         <!-- Sidebar: State -->
         <div class="bg-transparent z-10">
           <ul class="flex flex-col justify-center items-center">
-            <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
+            <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="compareState">
               <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
                 info
               </span>

src/views/Files/index.vue

@@ -116,7 +116,7 @@
           </ul>
         </div>
         <!-- All Files type of grid -->
-        <draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar">
+        <draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar" id="compareGridCards">
           <template #item="{ element, index }">
             <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" :id="'compareFile' + index">
               <div>