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,8 +12,11 @@ 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";
+
+describe('EditTask Component', () => {
 
   @Component({
     template: '<router-outlet></router-outlet>'
@@ -21,8 +24,6 @@ import {MockTaskService} from '../../mocks/mock-task-service';
   class TestComponent {
   }
 
-describe('EditTask Component', () => {
-
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [FormsModule, RouterTestingModule.withRoutes([
@@ -38,7 +39,98 @@ describe('EditTask Component', () => {
     });
   });
 
+
+  describe('Template Driven Form API-based Test', ()=>{
+
+    let fixture;
+
+    let form;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(EditTaskComponent);
+      fixture.autoDetectChanges(true);
+    });
+
+    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();
+
+        titleControl.setValue('Test');
+        expect(titleControl.errors['required']).toBeUndefined();
+        expect(titleControl.errors['minlength']).toEqual({requiredLength: 5, actualLength: 4});
+
+        titleControl.setValue('Full Title');
+        expect(titleControl.errors).toBeNull();
+
+        titleControl.setValue(generateRandomString(101));
+        expect(titleControl.errors['maxlength']).toEqual({requiredLength: 100, actualLength: 101});
+        done();
+      });
+    });
+
+    it('should show error in description gt 2000 signs', (done) => {
+      fixture.whenStable().then(() => {
+        form = fixture.componentInstance.form.form;
+
+        const titleControl = form.get('description');
+        expect(titleControl.errors).toBeNull();
+
+        titleControl.setValue(generateRandomString(2001));
+        expect(titleControl.errors['maxlength']).toEqual({requiredLength: 2000, actualLength: 2001});
+
+        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;
     }));
@@ -95,6 +187,7 @@ describe('EditTask Component', () => {
         expect(titleInput.value).toBe('');
       });
     }));
+  });
 
 
 });