diff --git a/src/portal/src/app/project/create-project/create-project.component.html b/src/portal/src/app/project/create-project/create-project.component.html
index 71d59c73e..2ec099597 100644
--- a/src/portal/src/app/project/create-project/create-project.component.html
+++ b/src/portal/src/app/project/create-project/create-project.component.html
@@ -13,7 +13,7 @@
- {{ nameTooltipText | translate }}
+ {{ nameTooltipText | translate }}
@@ -61,7 +61,7 @@
diff --git a/src/portal/src/app/project/create-project/create-project.component.spec.ts b/src/portal/src/app/project/create-project/create-project.component.spec.ts
index c35d5fc93..63340be91 100644
--- a/src/portal/src/app/project/create-project/create-project.component.spec.ts
+++ b/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;
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();
+ });
});