hardi
/
angular4-testing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

merge-requests/1/head
Florian Hartwich 2017-04-11 05:09:51 +02:00
parent 42cf1c9aa4
commit d29c16005e
2 changed files with 148 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"

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

@ -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';
@Component({
template: '<router-outlet></router-outlet>'
})
class TestComponent {
}
import {generateRandomString} from "../../test/test.helper";
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(() => {
const fixture = TestBed.createComponent(EditTaskComponent);
const route = TestBed.get(ActivatedRoute);
(<any>route.params).next({id: '42'});
describe('Template Driven Form API-based Test', ()=>{
const element = fixture.nativeElement;
let fixture;
const spy = spyOn(taskService, 'getTask');
const fakeTask = {title: 'Task1', assignee: {name: 'John'}};
spy.and.returnValue(new BehaviorSubject(fakeTask));
let form;
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);
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();
it('should load the correct task (with router)', fakeAsync(() => {
const fixture = TestBed.createComponent(TestComponent);
const router = TestBed.get(Router);
router.navigateByUrl('edit/42');
titleControl.setValue('Test');
expect(titleControl.errors['required']).toBeUndefined();
expect(titleControl.errors['minlength']).toEqual({requiredLength: 5, actualLength: 4});
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);
titleControl.setValue('Full Title');
expect(titleControl.errors).toBeNull();
titleControl.setValue(generateRandomString(101));
expect(titleControl.errors['maxlength']).toEqual({requiredLength: 100, actualLength: 101});
done();
});
});
}));
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('');
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;
}));
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('');
});
}));
});
});