Add API-based tests for EditTask Template-Driven-Form

project-manager/src/app/tasks/edit-task/edit-task.component.html

@@ -15,12 +15,12 @@
 
   <div class="form-group">
     <label for="description">Beschreibung</label>
-    <textarea id="description" class="form-control" name="description" [(ngModel)]="task.description">
+    <textarea id="description" class="form-control" name="description" [(ngModel)]="task.description" maxlength="2000">
             </textarea>
     <show-error text="Beschreibung" path="description"></show-error>
   </div>
 
-  <div>
+  <div ngModelGroup="tags">
     <div *ngFor="let tag of task.tags; let i = index">
       <div class="form-inline form-group">
         <input class="form-control"

project-manager/src/app/tasks/edit-task/edit-task.component.spec.ts

@@ -12,17 +12,18 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {fakeAsync, tick} from '@angular/core/testing';
 import {Title} from '@angular/platform-browser';
 import {Component} from '@angular/core';
-import {ReactiveFormsModule, FormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MockTaskService} from '../../mocks/mock-task-service';
-
+import {generateRandomString} from "../../test/test.helper";
-@Component({
-  template: '<router-outlet></router-outlet>'
-})
-class TestComponent {
-}
 
 describe('EditTask Component', () => {
 
+  @Component({
+    template: '<router-outlet></router-outlet>'
+  })
+  class TestComponent {
+  }
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [FormsModule, RouterTestingModule.withRoutes([
@@ -38,63 +39,155 @@ describe('EditTask Component', () => {
     });
   });
 
-  let taskService: TaskService;
-  beforeEach(inject([TaskService], (_taskService) => {
-    taskService = _taskService;
-  }));
 
-  it('should load the correct task in Edit-Mode', fakeAsync(() => {
+  describe('Template Driven Form API-based Test', ()=>{
-    const fixture = TestBed.createComponent(EditTaskComponent);
-    const route = TestBed.get(ActivatedRoute);
-    (<any>route.params).next({id: '42'});
 
-    const element = fixture.nativeElement;
+    let fixture;
 
-    const spy = spyOn(taskService, 'getTask');
+    let form;
-    const fakeTask = {title: 'Task1', assignee: {name: 'John'}};
-    spy.and.returnValue(new BehaviorSubject(fakeTask));
 
-    fixture.autoDetectChanges(true);
+    beforeEach(() => {
-    fixture.whenStable().then(() => {
+      fixture = TestBed.createComponent(EditTaskComponent);
-      tick();
+      fixture.autoDetectChanges(true);
-      expect(spy).toHaveBeenCalledWith('42');
-      const titleInput = element.querySelector('#title');
-      expect(titleInput.value).toBe(fakeTask.title);
-
-      const assigneeInput = element.querySelector('#assignee_name');
-      expect(assigneeInput.value).toBe(fakeTask.assignee.name);
     });
-  }));
 
+    it('should validate the title correctly', (done)=> {
+      fixture.whenStable().then(() => {
+        form = fixture.componentInstance.form.form;
+        const titleControl = form.get('title');
+        expect(titleControl.errors['required']).toBeTruthy();
 
-  it('should load the correct task (with router)', fakeAsync(() => {
+        titleControl.setValue('Test');
-    const fixture = TestBed.createComponent(TestComponent);
+        expect(titleControl.errors['required']).toBeUndefined();
-    const router = TestBed.get(Router);
+        expect(titleControl.errors['minlength']).toEqual({requiredLength: 5, actualLength: 4});
-    router.navigateByUrl('edit/42');
 
-    const spy = spyOn(taskService, 'getTask');
+        titleControl.setValue('Full Title');
-    const fakeTask = {title: 'Task1', assignee: {name: 'John'}};
+        expect(titleControl.errors).toBeNull();
-    spy.and.returnValue(new BehaviorSubject(fakeTask));
+
-    fixture.whenStable().then(() => {
+        titleControl.setValue(generateRandomString(101));
-      tick();
+        expect(titleControl.errors['maxlength']).toEqual({requiredLength: 100, actualLength: 101});
-      expect(spy).toHaveBeenCalledWith('42');
+        done();
-      const titleInput = fixture.nativeElement.querySelector('#title');
+      });
-      expect(titleInput.value).toBe(fakeTask.title);
     });
-  }));
 
-  it('should work without passing URL-Parameter', fakeAsync(() => {
+    it('should show error in description gt 2000 signs', (done) => {
-    const fixture = TestBed.createComponent(TestComponent);
+      fixture.whenStable().then(() => {
-    const router = TestBed.get(Router);
+        form = fixture.componentInstance.form.form;
-    router.navigateByUrl('new');
+
-    const spy = spyOn(taskService, 'getTask');
+        const titleControl = form.get('description');
-    fixture.whenStable().then(() => {
+        expect(titleControl.errors).toBeNull();
-      tick();
+
-      expect(spy).not.toHaveBeenCalled();
+        titleControl.setValue(generateRandomString(2001));
-      const titleInput = fixture.nativeElement.querySelector('#title');
+        expect(titleControl.errors['maxlength']).toEqual({requiredLength: 2000, actualLength: 2001});
-      expect(titleInput.value).toBe('');
+
+        titleControl.setValue(generateRandomString(2000));
+        expect(titleControl.errors).toBeNull();
+        done();
+      });
     });
-  }));
+
+    it('should show error on tag name provided with gt 0 and lt 3', (done) => {
+      fixture.componentInstance.addTag();
+      fixture.whenStable().then(() => {
+        form = fixture.componentInstance.form.form;
+        const tagControlGroup = form.get('tags');
+        const tagControl = tagControlGroup.get('tag0');
+        expect(tagControl.errors).toBeNull();
+
+        tagControl.setValue('ab');
+        expect(tagControl.errors['minlength']).toEqual({requiredLength: 3, actualLength: 2});
+
+        tagControl.setValue('abc');
+        expect(tagControl.errors).toBeNull();
+        done();
+      });
+    });
+
+    it('should show error on tag name provided with gt 0 and lt 3', (done) => {
+      fixture.whenStable().then(() => {
+        form = fixture.componentInstance.form.form;
+        const invalidEmailObject = {invalidEMail: true};
+        const assigneeEmail = form.get('assignee_email');
+        expect(assigneeEmail.errors).toBeNull();
+
+        assigneeEmail.setValue('test');
+        expect(assigneeEmail.errors).toEqual(invalidEmailObject);
+
+        assigneeEmail.setValue('test@web');
+        expect(assigneeEmail.errors).toEqual(invalidEmailObject);
+
+        assigneeEmail.setValue('test@web.d');
+        expect(assigneeEmail.errors).toEqual(invalidEmailObject);
+
+        assigneeEmail.setValue('test@web.de');
+        expect(assigneeEmail.errors).toBeNull();
+        done();
+      })
+    });
+
+  });
+
+  describe('Routing', ()=>{
+
+    let taskService: TaskService;
+
+    beforeEach(inject([TaskService], (_taskService) => {
+      taskService = _taskService;
+    }));
+
+    it('should load the correct task in Edit-Mode', fakeAsync(() => {
+      const fixture = TestBed.createComponent(EditTaskComponent);
+      const route = TestBed.get(ActivatedRoute);
+      (<any>route.params).next({id: '42'});
+
+      const element = fixture.nativeElement;
+
+      const spy = spyOn(taskService, 'getTask');
+      const fakeTask = {title: 'Task1', assignee: {name: 'John'}};
+      spy.and.returnValue(new BehaviorSubject(fakeTask));
+
+      fixture.autoDetectChanges(true);
+      fixture.whenStable().then(() => {
+        tick();
+        expect(spy).toHaveBeenCalledWith('42');
+        const titleInput = element.querySelector('#title');
+        expect(titleInput.value).toBe(fakeTask.title);
+
+        const assigneeInput = element.querySelector('#assignee_name');
+        expect(assigneeInput.value).toBe(fakeTask.assignee.name);
+      });
+    }));
+
+
+    it('should load the correct task (with router)', fakeAsync(() => {
+      const fixture = TestBed.createComponent(TestComponent);
+      const router = TestBed.get(Router);
+      router.navigateByUrl('edit/42');
+
+      const spy = spyOn(taskService, 'getTask');
+      const fakeTask = {title: 'Task1', assignee: {name: 'John'}};
+      spy.and.returnValue(new BehaviorSubject(fakeTask));
+      fixture.whenStable().then(() => {
+        tick();
+        expect(spy).toHaveBeenCalledWith('42');
+        const titleInput = fixture.nativeElement.querySelector('#title');
+        expect(titleInput.value).toBe(fakeTask.title);
+      });
+    }));
+
+    it('should work without passing URL-Parameter', fakeAsync(() => {
+      const fixture = TestBed.createComponent(TestComponent);
+      const router = TestBed.get(Router);
+      router.navigateByUrl('new');
+      const spy = spyOn(taskService, 'getTask');
+      fixture.whenStable().then(() => {
+        tick();
+        expect(spy).not.toHaveBeenCalled();
+        const titleInput = fixture.nativeElement.querySelector('#title');
+        expect(titleInput.value).toBe('');
+      });
+    }));
+  });
 
 
 });