Add Model Driven Form Test Structure

project-manager/package.json

@@ -48,6 +48,7 @@
     "karma": "^1.5.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-jasmine": "^1.1.0",
+    "karma-spec-reporter": "0.0.30",
     "ts-node": "1.2.1",
     "tslint": "^4.3.0",
     "typescript": "~2.2.1"

project-manager/src/app/model-driven-form/model-driven-form.component.spec.ts

@@ -1,66 +1,19 @@
 import {ReactiveFormsModule} from '@angular/forms';
-import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 import {ModelDrivenFormComponent} from './model-driven-form.component';
-import {TaskService} from '../services/task-service/task.service';
 import {UserService} from '../services/user-service/user.service';
+import {ShowErrorComponentModelDriven} from "../show-error/show-error-model-driven.component";
+import {TaskServiceModelForm} from "../services/task-service/task-model-form.service";
 
 beforeEach(() => {
   TestBed.configureTestingModule({
     imports: [ReactiveFormsModule],
-    providers: [TaskService, UserService],
+    providers: [TaskServiceModelForm, UserService],
-    declarations: [ModelDrivenFormComponent]
+    declarations: [ModelDrivenFormComponent, ShowErrorComponentModelDriven]
   });
 });
 
 describe('Model Driven Form', () => {
-  it('should validate the title directly', () => {
 
-    const fixture = TestBed.createComponent(ModelDrivenFormComponent);
-    const form = fixture.componentInstance.taskForm;
 
-    const titleControl = form.get('title');
-    expect(titleControl.errors['required']).toBeTruthy(); // Cannot read property 'errors' of undefined
-
-    titleControl.setValue('Task');
-    expect(titleControl.errors['required']).toBeUndefined();
-    const minError = {requiredLength: 5, actualLength: 4};
-
-    expect(titleControl.errors['minlength']).toEqual(minError);
-    titleControl.setValue('Task 1');
-    expect(titleControl.errors).toBeNull();
 });
-}
-
-/*
-  it('should validate the whole form ', fakeAsync(() => {
-
-    const fixture = TestBed.createComponent(ModelDrivenFormComponent);
-
-    const form = fixture.componentInstance.taskForm;
-
-    console.log(form.patchValue({title: 'Task123'}));
-    fixture.detectChanges();
-    tick(5000);
-    fixture.detectChanges();
-    tick(50000);
-    console.log(form.valid)
-
-
-  }));
-
-  it('should be able to work with Observable.delay', fakeAsync(() => {
-    const actuallyDone=false;
-    const source = Observable.of(true).delay(10);
-    source.subscribe(
-      val => {
-        actuallyDone = true;
-      },
-      err => fail(err)
-    );
-    tick(100);
-    expect(actuallyDone).toBeTruthy(); // Expected false to be truthy.
-
-    discardPeriodicTasks();
-  }));
-*/
-  );

project-manager/src/app/model-driven-form/model-driven-form.component.ts

@@ -3,8 +3,8 @@ import {FormGroup, FormArray, FormControl, FormBuilder, Validators} from '@angul
 import {Task, createInitialTask} from '../models/model-interfaces';
 import * as model from '../models/model-interfaces';
 import {ifNotBacklogThanAssignee,  emailValidator, UserExistsValidatorDirective} from '../models/app-validators';
-import {TaskService} from '../services/task-service/task.service';
 import {UserService} from '../services/user-service/user.service';
+import {TaskServiceModelForm} from "../services/task-service/task-model-form.service";
 
 @Component({
   selector: 'pjm-model-driven-form',
@@ -18,7 +18,7 @@ export class ModelDrivenFormComponent {
   taskForm: FormGroup;
   tagsArray: FormArray;
 
-  constructor(private taskService: TaskService,
+  constructor(private taskService: TaskServiceModelForm,
               private userService: UserService,
               fb: FormBuilder) {
     this.taskForm = fb.group({
@@ -104,7 +104,7 @@ export class ModelDrivenFormComponent {
       .map(checkResult => {
         return (checkResult === false) ? {userNotFound: true} : null;
       });
-  }
+  };
 
   userExistsValidatorReused = (control) => {
     const validator = new UserExistsValidatorDirective(this.userService);

project-manager/src/app/services/task-service/task-model-form.service.ts

@@ -0,0 +1,94 @@
+import {Task} from '../../models/model-interfaces';
+import {Observable} from 'rxjs/Observable';
+const STORAGE_KEY = 'tasks_formulare';
+
+export class TaskServiceModelForm {
+
+  tasks: Task[] = [];
+
+  constructor() {
+    this._loadFromLocalStorage();
+  }
+
+  findTasks(query = ''): Task[] {
+    if (!query) {
+      return this.tasks;
+    }
+    return this.tasks.filter(task => {
+      return ((task.title && task.title.indexOf(query) !== -1) ||
+        (task.description && task.description.indexOf(query) !== -1) ||
+        (task.state && task.state.indexOf(query) !== -1)
+      );
+    });
+  }
+
+  findTasksAsync(query = ''): Observable<Task[]> {
+    return Observable.of(this.findTasks(query));
+  }
+
+
+  getTask(id: number | string): Task {
+    const task = this.tasks.filter(_task => _task.id == id)[0];
+    return <Task>(Object.assign({}, task));
+  }
+
+  getTaskAsync(id: number | string): Observable<Task> {
+    return Observable.of(this.getTask(id));
+  }
+
+  saveTask(task: Task) {
+    if (task.id) {
+      this.tasks = this.tasks.map(_task => {
+        return _task.id === task.id ? task : _task;
+      });
+    } else {
+      task.id = new Date().getTime(); // Pseudo Id
+      this.tasks = [...this.tasks, task];
+    }
+    this._saveToLocalStorage();
+    return task;
+  }
+
+  deleteTask(task: Task) {
+    this.tasks = this.tasks.filter(_task => _task.id !== task.id);
+    this._saveToLocalStorage();
+  }
+
+  _saveToLocalStorage() {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(this.tasks));
+  }
+
+  _loadFromLocalStorage() {
+    const tasksString = localStorage.getItem(STORAGE_KEY);
+    if (tasksString) {
+      this.tasks = <Task[]>JSON.parse(tasksString);
+    } else {
+      this.tasks = [
+        {
+          id: 1,
+          title: 'Neues Entwickler-Team zusammenstellen ',
+          description: 'Das ist wirklich sehr dringend. Bitte so schnell wie möglich darum kümmern...',
+          state: 'IN_PROGRESS',
+          assignee: {
+            name: 'John Doe',
+            email: 'john@doe.com'
+          }
+        }, {
+          id: 2,
+          title: 'Ersten Prototyp mit Angular 2.0 entwickeln',
+          description: 'Der Prototyp soll zeigen, wie Routing und HTTP-Anbindung umgesetzt werden können.',
+          state: 'BACKLOG',
+          tags: [{
+            label: 'wichtig'
+          }, {
+            label: 'dringend'
+          }],
+          assignee: {
+            name: 'John Doe',
+            email: 'john@doe.com'
+          }
+        }];
+    }
+  }
+
+}