Cypress: edit account and see success message

cypress/e2e/accountAdmin/editAccount.cy.js

@@ -0,0 +1,43 @@
+const TEST_ACCOUNT = 'tester-user';
+const MODAL_TITLE_ACCOUNT_EDIT = 'Account Edit';
+const MSG_ACCOUNT_EDITED = 'Saved';
+
+describe('Edit 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('Edit an account; modify name and see saved message.', () => {
+        cy.contains('.account-cell', TEST_ACCOUNT, { timeout: 10000 }).should('be.visible');
+        // 找到包含 TEST_ACCOUNT 字串的 .account-cell 元素
+        cy.contains('.account-cell', TEST_ACCOUNT, { timeout: 10000 })
+          .parents('tr') // 找到 .account-cell 元素的祖先 tr 元素
+          .find('.btn-edit') // 在該 tr 元素內找到 .btn-edit 按鈕
+          .should('be.visible') // 驗證該按鈕可見
+          .click(); // 點擊該按鈕
+        
+        cy.contains('h1', MODAL_TITLE_ACCOUNT_EDIT).should('be.visible');
+        const randomNumber = Math.floor(Math.random() * 1001);
+        // 將整數轉換為四位數字串，並補零
+        const fourDigitString = randomNumber.toString().padStart(4, '0');
+        cy.get('#input_name_field').type( TEST_ACCOUNT + fourDigitString);
+        cy.get('#input_first_pwd').type('aaaaaa');
+        cy.get('#input_second_pwd').type('aaaaaa');
+    
+        cy.contains('button', 'Confirm')
+        .should('be.visible')
+        .and('be.enabled')
+        .click();
+
+        cy.contains(MSG_ACCOUNT_EDITED).should('be.visible'); //表示帳號創建成功
+    });
+});
+  

src/views/AccountManagement/AccountAdmin/AccountAdmin.vue

@@ -16,7 +16,7 @@
                         <template #body="slotProps">
                             <div class="row-container flex-w-full-hoverable w-full flex" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="cursor-pointer flex">
+                                <div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="account-cell cursor-pointer flex">
                                     {{ slotProps.data.username }}
                                 </div>
                                 <span id="just_create_badge" class="flex ml-4"
@@ -30,7 +30,7 @@
                         <template #body="slotProps">
                             <div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <div class="">
+                                <div class="fullname-cell">
                                     {{ slotProps.data.name }}
                                 </div>
                             </div>
@@ -41,10 +41,10 @@
                         <template #body="slotProps">
                             <div class="row-container flex-w-full-hoverable flex w-full justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <img v-if="slotProps.data.is_admin" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex justify-center"
+                                <img v-if="slotProps.data.is_admin" src="@/assets/radioOn.svg" alt="Radio On" class="btn-admin cursor-pointer flex justify-center"
                                     @click="onAdminInputClick(slotProps.data, false)"
                                 />
-                                <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex justify-center"
+                                <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-admin cursor-pointer flex justify-center"
                                     @click="onAdminInputClick(slotProps.data, true)"
                                 />
                             </div>   
@@ -56,9 +56,9 @@
                             <div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
                                 <div class="w-full flex justify-center">
-                                    <img v-if="slotProps.data.is_active" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex"
+                                    <img v-if="slotProps.data.is_active" src="@/assets/radioOn.svg" alt="Radio On" class="btn-activate cursor-pointer flex"
                                         @click="setIsActiveInput(slotProps.data, false)"/>
-                                    <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex"
+                                    <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-activate cursor-pointer flex"
                                         @click="setIsActiveInput(slotProps.data, true)"/>
                                 </div> 
                             </div>                                  
@@ -68,7 +68,7 @@
                         <template #body="slotProps">
                             <div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <img :src="slotProps.data.isDetailHovered ? iconDetailOn : iconDetailOff" alt="Detail" class="cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"
+                                <img :src="slotProps.data.isDetailHovered ? iconDetailOn : iconDetailOff" alt="Detail" class="btn-detail cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"
                                     @mouseover="handleDetailMouseOver(slotProps.data.username)"
                                     @mouseout="handleDetailMouseOut(slotProps.data.username)"
                                 />
@@ -78,7 +78,7 @@
                     <Column :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500" headerClass="header-center">
                         <template #body="slotProps">
                             <div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)">
-                                <img :src="slotProps.data.isEditHovered ? iconEditOn : iconEditOff" alt="Edit" class="cursor-pointer"
+                                <img :src="slotProps.data.isEditHovered ? iconEditOn : iconEditOff" alt="Edit" class="btn-edit cursor-pointer"
                                     @click="onEditBtnClick(slotProps.data.username)"
                                     @mouseover="handleEditMouseOver(slotProps.data.username)"
                                     @mouseout="handleEditMouseOut(slotProps.data.username)"