From d29c16005e0f1078b6dc17f3f8bbf6b2c6847a3e Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Tue, 11 Apr 2017 05:09:51 +0200 Subject: [PATCH] Add API-based tests for EditTask Template-Driven-Form --- .../tasks/edit-task/edit-task.component.html | 4 +- .../edit-task/edit-task.component.spec.ts | 199 +++++++++++++----- 2 files changed, 148 insertions(+), 55 deletions(-) diff --git a/project-manager/src/app/tasks/edit-task/edit-task.component.html b/project-manager/src/app/tasks/edit-task/edit-task.component.html index f755740..413826f 100644 --- a/project-manager/src/app/tasks/edit-task/edit-task.component.html +++ b/project-manager/src/app/tasks/edit-task/edit-task.component.html @@ -15,12 +15,12 @@
-
-
+
' -}) -class TestComponent { -} +import {generateRandomString} from "../../test/test.helper"; describe('EditTask Component', () => { + @Component({ + template: '' + }) + 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); - (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); + (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(''); + }); + })); + }); });