Cypress: delete an account 000000

cypress/e2e/accountAdmin/deleteAccount.cy.js

@@ -0,0 +1,57 @@
+describe('Delete an Account', ()=>{
+    beforeEach(() => {
+      cy.visit('https://REDACTED-HOST/account/account-admin');  
+      const username = 'cindy';
+      const password = 'REDACTED-PWD';
+    
+      cy.visit('https://REDACTED-HOST/account/account-admin');
+    
+      cy.get('input[id="account"]').type(username);
+      cy.get('input[id="password"]').type(password);
+      cy.get('button[type="submit"]').click();
+    });
+
+    it('Delete an account just created, which is named 000000.', () => {
+        cy.contains('button', 'Create New').should('be.visible');
+        cy.contains('button', 'Create New').click();
+        
+        // 在 id 為 input_account_field 的 input 元素內填入值
+        cy.get('#input_account_field').type('000000');
+        cy.get('#input_name_field').type('000000');
+        cy.get('#input_first_pwd').type('aaaaaa');
+        cy.get('#input_second_pwd').type('aaaaaa');
+        cy.get('.checkbox-and-text').first().find('div').first().click();
+        // 確保 Confirm 按鈕存在並可點擊
+        cy.contains('button', 'Confirm')
+        .should('be.visible')
+        .and('be.enabled')
+        .click();
+        cy.contains('Account added').should('be.visible'); //表示帳號創建成功
+
+        cy.contains('span', 'Account').should('be.visible'); // 表示畫面轉導向成功，出現清單列表
+        // 接著，點選排序按鈕，排序將會造成生升冪排序，我們希望 000000 帳號排在第一個
+        // 找到包含 'Account' 的 span 元素
+        cy.get('span:contains("Account")')
+            .closest('th')
+            .find('span')
+            .not(':contains("Account")')
+            .first()
+            .click(); // 點選下一个兄弟 span 元素
+        
+        // 等待，以確保頁面已完全渲染
+        cy.wait(1000);
+
+        // 確認 000000 帳號是否出現在第一列
+        cy.get('tr').filter((index, tr) => {
+            // 遍歷所有的 tr 元素
+            const td = Cypress.$(tr).find('td').eq(0); // 找到第一個 td 元素
+            return td.text().trim() === '000000'; // 檢查其文本內容是否為 000000
+          }).first().should('exist'); // 確認至少有一個符合條件的 tr 存在
+
+        cy.get('img.delete-account').first().click();
+        cy.contains('h1', 'ARE YOU SURE TO DELETE ?').should('be.visible');
+        cy.contains('button', 'Yes').click();
+
+        cy.contains('Account deleted').should('be.visible'); //表示帳號刪除成功
+    });
+});

src/views/AccountManagement/AccountAdmin/AccountAdmin.vue

@@ -91,7 +91,7 @@
                             <div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)">
                                 <img :src="slotProps.data.isDeleteHovered ? iconDeleteRed : iconDeleteGray"
                                     :alt="slotProps.data.isDeleteHovered ? 'hovered' : 'not-hovered'"
-                                    class="cursor-pointer flex"
+                                    class="delete-account cursor-pointer flex"
                                     @mouseover="handleDeleteMouseOver(slotProps.data.username)"
                                     @mouseout="handleDeleteMouseOut(slotProps.data.username)"
                                     @click="onDeleteBtnClick(slotProps.data.username)"