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

View File

@ -7,14 +7,23 @@ import { ClarityModule } from '@clr/angular';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
import { ProjectService } from "../../../lib/services"; import { ProjectService } from "../../../lib/services";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
describe('CreateProjectComponent', () => { describe('CreateProjectComponent', () => {
let component: CreateProjectComponent; let component: CreateProjectComponent;
let fixture: ComponentFixture<CreateProjectComponent>; let fixture: ComponentFixture<CreateProjectComponent>;
const mockProjectService = { 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 () { createProject: function () {
return of(true);
} }
}; };
const mockMessageHandlerService = { const mockMessageHandlerService = {
@ -25,6 +34,7 @@ describe('CreateProjectComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [ imports: [
BrowserAnimationsModule,
FormsModule, FormsModule,
ClarityModule, ClarityModule,
TranslateModule.forRoot() TranslateModule.forRoot()
@ -50,4 +60,53 @@ describe('CreateProjectComponent', () => {
it('should create', () => { it('should create', () => {
expect(component).toBeTruthy(); 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();
});
}); });