Add more UT for create project component

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
AllForNothing 2020-05-19 17:36:24 +08:00
parent 23c438d5ac
commit 2d141a919d
2 changed files with 63 additions and 4 deletions

View File

@ -13,7 +13,7 @@
<span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
</div>
<clr-control-error *ngIf="!isNameValid" class="tooltip-content">
{{ nameTooltipText | translate }}
<span id="name-error">{{ nameTooltipText | translate }}</span>
</clr-control-error>
</div>
</div>
@ -61,7 +61,7 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
<button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
<button id="new-project-cancel" type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
<button id="new-project-ok" type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
</div>
</clr-modal>

View File

@ -7,14 +7,23 @@ import { ClarityModule } from '@clr/angular';
import { FormsModule } from '@angular/forms';
import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
import { ProjectService } from "../../../lib/services";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
describe('CreateProjectComponent', () => {
let component: CreateProjectComponent;
let fixture: ComponentFixture<CreateProjectComponent>;
const mockProjectService = {
checkProjectExists: function() {
checkProjectExists: function(name: string) {
if (name === 'test') {
return of({status: 200}).pipe(delay(10));
} else {
return of({status: 404}).pipe(delay(10));
}
},
createProject: function () {
return of(true);
}
};
const mockMessageHandlerService = {
@ -25,6 +34,7 @@ describe('CreateProjectComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
BrowserAnimationsModule,
FormsModule,
ClarityModule,
TranslateModule.forRoot()
@ -50,4 +60,53 @@ describe('CreateProjectComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
it('should open and close', async () => {
let modelBody: HTMLDivElement;
modelBody = fixture.nativeElement.querySelector(".modal-body");
expect(modelBody).toBeFalsy();
component.createProjectOpened = true;
fixture.detectChanges();
await fixture.whenStable();
modelBody = fixture.nativeElement.querySelector(".modal-body");
expect(modelBody).toBeTruthy();
const cancelButton: HTMLButtonElement = fixture.nativeElement.querySelector("#new-project-cancel");
cancelButton.click();
fixture.detectChanges();
await fixture.whenStable();
modelBody = fixture.nativeElement.querySelector(".modal-body");
expect(modelBody).toBeFalsy();
});
it('should check project name', async () => {
fixture.autoDetectChanges(true);
component.createProjectOpened = true;
await fixture.whenStable();
const nameInput: HTMLInputElement = fixture.nativeElement.querySelector("#create_project_name");
nameInput.blur();
nameInput.dispatchEvent(new Event('blur'));
await fixture.whenStable();
let el: HTMLSpanElement;
el = fixture.nativeElement.querySelector('#name-error');
expect(el).toBeTruthy();
nameInput.value = "test";
nameInput.dispatchEvent(new Event("input"));
nameInput.blur();
nameInput.dispatchEvent(new Event('blur'));
await fixture.whenStable();
el = fixture.nativeElement.querySelector('#name-error');
expect(el).toBeTruthy();
nameInput.value = "test1";
nameInput.dispatchEvent(new Event("input"));
nameInput.blur();
nameInput.dispatchEvent(new Event('blur'));
await fixture.whenStable();
el = fixture.nativeElement.querySelector('#name-error');
expect(el).toBeFalsy();
const okButton: HTMLButtonElement = fixture.nativeElement.querySelector("#new-project-ok");
okButton.click();
await fixture.whenStable();
const modelBody: HTMLDivElement = fixture.nativeElement.querySelector(".modal-body");
expect(modelBody).toBeFalsy();
});
});