diff --git a/src/portal/src/app/account/account-settings/account-settings-modal.component.html b/src/portal/src/app/account/account-settings/account-settings-modal.component.html
index 1b6a3d9fd..51f17be5a 100644
--- a/src/portal/src/app/account/account-settings/account-settings-modal.component.html
+++ b/src/portal/src/app/account/account-settings/account-settings-modal.component.html
@@ -10,7 +10,7 @@
                     <input class="clr-input" type="text" name="account_settings_username" [(ngModel)]="account.username"
                         disabled id="account_settings_username" size="30">
                     <div *ngIf="canRename" class="rename-tool">
-                        <button [disabled]="RenameOnGoing" (click)="onRename()" class="btn btn-outline btn-sm">
+                        <button id="rename-btn" [disabled]="RenameOnGoing" (click)="onRename()" class="btn btn-outline btn-sm">
                             {{'PROFILE.ADMIN_RENAME_BUTTON' | translate}}
                         </button>
                         <clr-tooltip>
@@ -68,7 +68,7 @@
                         </clr-tooltip-content>
                     </clr-tooltip>
                 </label>
-                <input class="clr-input input-cli" type="password" name="cli_password" disabled
+                <input id="cli_password" class="clr-input input-cli" type="password" name="cli_password" disabled
                     [ngModel]="'account.oidc_user_meta.secret'" size="33">
 
                 <button (click)="generateCli(account.user_id)" id="generate-cli-btn"
@@ -91,9 +91,9 @@
     </div>
     <div class="modal-footer">
         <span class="spinner spinner-inline loading-top" [hidden]="showProgress === false"></span>
-        <button type="button" class="btn btn-outline" (click)="close()">{{'BUTTON.CANCEL' | translate}}</button>
+        <button type="button" id="cancel-btn" class="btn btn-outline" (click)="close()">{{'BUTTON.CANCEL' | translate}}</button>
 
-        <button type="button" class="btn btn-primary" [disabled]="!isValid || showProgress"
+        <button type="button" id="submit-btn" class="btn btn-primary" [disabled]="!isValid || showProgress"
             (click)="submit()">{{'BUTTON.OK' | translate}}</button>
     </div>
 </clr-modal>
diff --git a/src/portal/src/app/account/account-settings/account-settings-modal.component.spec.ts b/src/portal/src/app/account/account-settings/account-settings-modal.component.spec.ts
index 5fc223efe..662c46c50 100644
--- a/src/portal/src/app/account/account-settings/account-settings-modal.component.spec.ts
+++ b/src/portal/src/app/account/account-settings/account-settings-modal.component.spec.ts
@@ -9,27 +9,71 @@ import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef } from '@angular/core';
 import { ClarityModule } from "@clr/angular";
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
+import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { Router } from '@angular/router';
+import { clone } from '../../../lib/utils/utils';
+import { ConfirmationDialogComponent } from '../../shared/confirmation-dialog/confirmation-dialog.component';
+import { ConfirmationDialogService } from '../../shared/confirmation-dialog/confirmation-dialog.service';
+import { ConfirmationMessage } from '../../shared/confirmation-dialog/confirmation-message';
 
 describe('AccountSettingsModalComponent', () => {
     let component: AccountSettingsModalComponent;
     let fixture: ComponentFixture<AccountSettingsModalComponent>;
+    let userExisting = false;
+    let oidcUserMeta: any = true;
+    let oidcUserMeta1 = {
+        id: 1,
+        user_id: 1,
+        secret: "Asdf12345",
+        subiss: "string",
+    };
     let fakeSessionService = {
         getCurrentUser: function () {
-            return { has_admin_role: true };
-        }
+            return {
+                has_admin_role: true,
+                user_id: 1,
+                username: 'admin',
+                email: "",
+                realname: "admin",
+                role_name: "admin",
+                role_id: 1,
+                comment: "string",
+                oidc_user_meta: oidcUserMeta
+            };
+        },
+        checkUserExisting: () => of(userExisting),
+        updateAccountSettings: () => of(null),
+        renameAdmin: () => of(null),
+    };
+    let fakeMessageHandlerService = {
+        showSuccess: () => { }
+    };
+    let fakeSearchTriggerService = {
+        closeSearch: () => { }
+    };
+    let fakeAccountSettingsModalService = {
+        saveNewCli: () => of(null)
+    };
+    let fakeConfirmationDialogService = {
+        cancel: () => of(null),
+        confirm: () => of(null),
+        confirmationAnnouced$: of(new ConfirmationMessage("null", "null", "null", "null", null, null))
+    };
+    let fakeRouter = {
+        navigate: () => { }
     };
-    let fakeMessageHandlerService = null;
-    let fakeSearchTriggerService = null;
-    let fakeAccountSettingsModalService = null;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [AccountSettingsModalComponent],
+            declarations: [AccountSettingsModalComponent, InlineAlertComponent, ConfirmationDialogComponent],
             imports: [
                 RouterTestingModule,
                 ClarityModule,
                 TranslateModule.forRoot(),
-                FormsModule
+                FormsModule,
+                BrowserAnimationsModule
             ],
             providers: [
                 ChangeDetectorRef,
@@ -37,21 +81,141 @@ describe('AccountSettingsModalComponent', () => {
                 { provide: SessionService, useValue: fakeSessionService },
                 { provide: MessageHandlerService, useValue: fakeMessageHandlerService },
                 { provide: SearchTriggerService, useValue: fakeSearchTriggerService },
-                { provide: AccountSettingsModalService, useValue: fakeAccountSettingsModalService }
+                { provide: AccountSettingsModalService, useValue: fakeAccountSettingsModalService },
+                { provide: Router, useValue: fakeRouter },
+                { provide: ConfirmationDialogService, useValue: fakeConfirmationDialogService }
             ],
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA
             ],
-        }).compileComponents();
+        });
     }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(AccountSettingsModalComponent);
         component = fixture.componentInstance;
-        fixture.detectChanges();
+        component.inlineAlert =
+            TestBed.createComponent(InlineAlertComponent).componentInstance;
+        component.error = true;
+        component.open();
+        // // component.confirmationDialogComponent.ope;
+        oidcUserMeta = true;
+        fixture.autoDetectChanges();
     });
 
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+    it('should input right email', async(async () => {
+        await fixture.whenStable();
+        // Update the title input
+        userExisting = true;
+        let emailInput: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_email');
+        emailInput.value = 'email@qq.com';
+        emailInput.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        expect(emailInput.value).toEqual('email@qq.com');
+        expect(component.emailTooltip).toEqual('TOOLTIP.EMAIL');
+        emailInput.dispatchEvent(new Event('blur'));
+        expect(component.emailTooltip).toEqual('TOOLTIP.EMAIL_EXISTING');
+        emailInput.dispatchEvent(new Event('blur'));
+        expect(component.emailTooltip).toEqual('TOOLTIP.EMAIL_EXISTING');
+        userExisting = false;
+        emailInput.value = '123@qq.com';
+        emailInput.dispatchEvent(new Event('blur'));
+        expect(emailInput.value).toEqual('123@qq.com');
+    }));
+
+    it('should update settings', async () => {
+        await fixture.whenStable();
+        let emailInput: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_email');
+        emailInput.value = 'email@qq.com';
+        emailInput.dispatchEvent(new Event('input'));
+        let fullNameInput: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_full_name');
+        fullNameInput.value = 'system guest';
+        fullNameInput.dispatchEvent(new Event('input'));
+        let submitBtn: HTMLButtonElement = fixture.nativeElement.querySelector('#submit-btn');
+        submitBtn.dispatchEvent(new Event('click'));
+        const emailInput1: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_email');
+        expect(emailInput1).toEqual(null);
+    });
+    it('admin should rename', async () => {
+        await fixture.whenStable();
+        let renameBtn: HTMLButtonElement = fixture.nativeElement.querySelector('#rename-btn');
+        renameBtn.dispatchEvent(new Event('click'));
+        await fixture.whenStable();
+        const userNameInput: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_username');
+        expect(userNameInput.value).toEqual('admin@harbor.local');
+        expect(component.RenameOnGoing).toEqual(true);
+    });
+    it('admin should save when it click save button 2 times after rename', async () => {
+        await fixture.whenStable();
+        let renameBtn: HTMLButtonElement = fixture.nativeElement.querySelector('#rename-btn');
+        renameBtn.dispatchEvent(new Event('click'));
+        await fixture.whenStable();
+        let emailInput: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_email');
+        emailInput.value = 'email@qq.com';
+        emailInput.dispatchEvent(new Event('input'));
+        let submitBtn: HTMLButtonElement = fixture.nativeElement.querySelector('#submit-btn');
+        submitBtn.dispatchEvent(new Event('click'));
+        const alertTextElement: HTMLSpanElement = fixture.nativeElement.querySelector('.alert-text');
+        expect(alertTextElement.innerText).toEqual(' PROFILE.RENAME_CONFIRM_INFO ');
+
+        submitBtn.dispatchEvent(new Event('click'));
+        await fixture.whenStable();
+        const emailInput1: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_email');
+        // rename success
+        expect(emailInput1).toEqual(null);
+    });
+    it('should click cancel and close when has data change and no rename', async () => {
+        await fixture.whenStable();
+        let emailInput: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_email');
+        emailInput.value = 'email@qq.com';
+        emailInput.dispatchEvent(new Event('input'));
+        let cancelBtn: HTMLButtonElement = fixture.nativeElement.querySelector('#cancel-btn');
+        cancelBtn.dispatchEvent(new Event('click'));
+        const alertTextElement: HTMLSpanElement = fixture.nativeElement.querySelector('.alert-text');
+        expect(alertTextElement.innerText).toEqual(' ALERT.FORM_CHANGE_CONFIRMATION ');
+
+    });
+    it('should click cancel and close when has data change and has rename', async () => {
+        await fixture.whenStable();
+        let renameBtn: HTMLButtonElement = fixture.nativeElement.querySelector('#rename-btn');
+        renameBtn.dispatchEvent(new Event('click'));
+        let cancelBtn: HTMLButtonElement = fixture.nativeElement.querySelector('#cancel-btn');
+        cancelBtn.dispatchEvent(new Event('click'));
+        await fixture.whenStable();
+        expect(component.RenameOnGoing).toEqual(false);
+        const emailInput1: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_email');
+        expect(emailInput1).toEqual(null);
+
+    });
+    it('should click cancel and close when has no data change', async () => {
+        await fixture.whenStable();
+        let cancelBtn: HTMLButtonElement = fixture.nativeElement.querySelector('#cancel-btn');
+        cancelBtn.dispatchEvent(new Event('click'));
+        await fixture.whenStable();
+        const emailInput1: HTMLInputElement = fixture.nativeElement.querySelector('#account_settings_email');
+        expect(emailInput1).toEqual(null);
+
+    });
+    it('should generate cli secret when oidc mode', async () => {
+        await fixture.whenStable();
+        component.account.oidc_user_meta = clone(oidcUserMeta1);
+        await fixture.whenStable();
+        const hiddenGenerateCliButton: HTMLButtonElement = fixture.nativeElement.querySelector('#hidden-generate-cli');
+        expect(hiddenGenerateCliButton).toBeTruthy();
+        hiddenGenerateCliButton.dispatchEvent(new Event('click'));
+        await fixture.whenStable();
+        const hiddenGenerateCliButton1: HTMLButtonElement = fixture.nativeElement.querySelector('#hidden-generate-cli');
+        expect(hiddenGenerateCliButton1).toBeNull();
+        const generateCliButton: HTMLButtonElement = fixture.nativeElement.querySelector('#generate-cli-btn');
+        expect(generateCliButton).toBeTruthy();
+        component.confirmationDialogComponent = TestBed.createComponent(ConfirmationDialogComponent).componentInstance;
+        generateCliButton.dispatchEvent(new Event('click'));
+        component.confirmGenerate(null);
+        await fixture.whenStable();
+        expect(component.showGenerateCli).toEqual(false);
+
+    });
 });