Add more UT for create project component

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/project/create-project/create-project.component.html

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

src/portal/src/app/project/create-project/create-project.component.spec.ts

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