Merge pull request #10134 from jwangyangls/add-ui-ut-app

Test: add more ut in front end
This commit is contained in:
jwangyangls 2019-12-05 10:21:32 +08:00 committed by GitHub
commit ff02d80382
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 178 additions and 14 deletions

View File

@ -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>

View File

@ -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);
});
});