From 67def504ef0387fc606a16bf9033a18430b900dc Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Wed, 5 Apr 2017 23:33:48 +0200 Subject: [PATCH] Add Model Driven Form Test Structure --- project-manager/package.json | 1 + .../model-driven-form.component.spec.ts | 59 ++---------- .../model-driven-form.component.ts | 6 +- .../task-service/task-model-form.service.ts | 94 +++++++++++++++++++ 4 files changed, 104 insertions(+), 56 deletions(-) create mode 100644 project-manager/src/app/services/task-service/task-model-form.service.ts diff --git a/project-manager/package.json b/project-manager/package.json index 55518b1..b27e03a 100644 --- a/project-manager/package.json +++ b/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" diff --git a/project-manager/src/app/model-driven-form/model-driven-form.component.spec.ts b/project-manager/src/app/model-driven-form/model-driven-form.component.spec.ts index ec741d1..cbc9c1e 100644 --- a/project-manager/src/app/model-driven-form/model-driven-form.component.spec.ts +++ b/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], - declarations: [ModelDrivenFormComponent] + providers: [TaskServiceModelForm, UserService], + 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(); - })); -*/ - ); +}); diff --git a/project-manager/src/app/model-driven-form/model-driven-form.component.ts b/project-manager/src/app/model-driven-form/model-driven-form.component.ts index 21d704b..88ea84d 100644 --- a/project-manager/src/app/model-driven-form/model-driven-form.component.ts +++ b/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); diff --git a/project-manager/src/app/services/task-service/task-model-form.service.ts b/project-manager/src/app/services/task-service/task-model-form.service.ts new file mode 100644 index 0000000..bde255c --- /dev/null +++ b/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 { + return Observable.of(this.findTasks(query)); + } + + + getTask(id: number | string): Task { + const task = this.tasks.filter(_task => _task.id == id)[0]; + return (Object.assign({}, task)); + } + + getTaskAsync(id: number | string): Observable { + 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 = 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' + } + }]; + } + } + +}