Angular Unit Testing from the Trenches

1.
http://digitaldrummerj.me Justin James Web Developer ProfessionalSpeaker digitaldrummerj.me @digitaldrummerj

2.
http://digitaldrummerj.me unit tests areproof that my code does what I think it does

3.
http://digitaldrummerj.me Document FunctionalityPinpoint Bugs CheckRegressionConfirm Functionality Unit Test Will Make You Faster

4.
http://digitaldrummerj.me Checks Single Assumption Single Unit OfWork Automated Code Tenents

5.
http://digitaldrummerj.me We only getthese advantages when we are comfortable writing good tests Disclaimer

6.
http://digitaldrummerj.me RunnableDependableMaintainable Good Unit Tests

7.
http://digitaldrummerj.me Well-namedEasy To Write EasyTo ReadNot Tricky Maintainable

8.
http://digitaldrummerj.me Tests Right ThingsContinuedRelevance IsolatedConsistent Results Dependable

9.
http://digitaldrummerj.me Failures Point To TheProblem Repeatable Fast Runnable Single Click

10.
http://digitaldrummerj.me Unit testing will notfix bad practices Don't do the right thing for the wrong reason Know the Goals

11.
http://digitaldrummerj.me "Don't let thefear that testing can't catch all bugs stop you from writing the tests that will catch most bugs" Martin Fowler Refactoring

12.
http://digitaldrummerj.me You need astrong grasp of the basic patterns in order to test an Angular application

13.
http://digitaldrummerj.me ServicesRouting ComponentsModules Angular Main BuildingBlocks 13

14.
http://digitaldrummerj.me http://nodejs.org Node JS (6.9+) npminstall -g @angular/cli NPM Global Packages Angular CLI Setup 14

15.
http://digitaldrummerj.me ng new AppName--style scss --routing Create New Project ng generate [TYPE] [NAME] Generate npm start Start Application npm test Unit Test Creating Applications 15

16.
http://digitaldrummerj.me Test Runner TestFramework Testing Utilities Karma Tools and Technology Jasmine Angular

17.
http://digitaldrummerj.me

18.

19.
http://digitaldrummerj.me Debugging with Karma Usethe Chrome Developer Console to debug tests Use console.log to observe data and events

20.
describe('First spec', ()=> { it('should pass', () => { expect(true).toBeTruthy(); }); }); Simple Passing Test

21.

22.

23.
describe(Second spec', ()=> { it('should fail', () => { expect(false).toBeTruthy(); }); }); Simple Failing Test

24.

25.
@Component({ selector: 'app-service', templateUrl: './simple.component.html', styleUrls:['./simple.component.scss'] }) export class SimpleComponent implements OnInit { subject: string; constructor() { } ngOnInit() { } } Component

26.
@Component({ selector: 'app-service', templateUrl: './simple.component.html', styleUrls:['./simple.component.scss'] }) export class SimpleComponent implements OnInit { subject: string = "World"; constructor() { } ngOnInit() { } } Component

27.
@Component({ selector: 'app-service', templateUrl: './simple.component.html', styleUrls:['./simple.component.scss'] }) export class SimpleComponent implements OnInit { subject: string = "World"; constructor() { } ngOnInit() { } } Component

28.
http://digitaldrummerj.me 1. Configure Module

29.
http://digitaldrummerj.me TestBed Creates an Angulartesting module Configure with TestBed.configureTestingModule Use BeforeEach to reset test module before each spec

30.
fixture import { async,TestBed } from '@angular/core/testing'; import { SimpleComponent } from './simple.component'; describe('SimpleComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [SimpleComponent] }) .compileComponents() .then(() => { }); })); }

31.

32.

33.

34.
http://digitaldrummerj.me 1. Configure Module 2.Create Fixture

35.
http://digitaldrummerj.me TestBed.createComponent Creates an instanceof the component under test Returns a component test fixture Closes the TestBed from further configuration

36.
import { async,ComponentFixture, TestBed } from '@angular/core/testing'; import { SimpleComponent } from './simple.component'; describe('SimpleComponent', () => { let fixture: ComponentFixture<SimpleComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [SimpleComponent ] }) .compileComponents() .then(() => { fixture = TestBed.createComponent(SimpleComponent); }); })); } The Fixture

37.
http://digitaldrummerj.me 1. Configure Module 2.Create Fixture 3. Get Component Instance

38.
http://digitaldrummerj.me ComponentFixture Handle to thetest environment fixture.componentInstance to access to component

39.
The Component Instance import{ async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SimpleComponent } from './simple.component'; describe('SimpleComponent', () => { let component: SimpleComponent; let fixture: ComponentFixture<SimpleComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TemplateComponent ] }) .compileComponents() .then(() => { fixture = TestBed.createComponent(TemplateComponent); component = fixture.componentInstance; }); })); }

40.
The Component Instance it('setsthe `subject` class member', () => { expect(component.subject).toBe('world'); });

41.
http://digitaldrummerj.me ComponentFixture.detectChanges Triggers change detection Nottriggered by TestBed.createComponent

42.
import { async,ComponentFixture, TestBed } from '@angular/core/testing'; import { SimpleComponent } from './simple.component'; describe('SimpleComponent', () => { let component: SimpleComponent; let fixture: ComponentFixture<SimpleComponent>; beforeEach(() => { fixture = TestBed.configureTestingModule({ declarations: [ SimpleComponent ] }) .createComponent(SimpleComponent) .then(() => { component = fixture.componentInstance; return fixture.whenStable().then(() => { fixture.detectChanges(); }); }); })); } The Debug Element

43.
http://digitaldrummerj.me DebugElement DebugElement to accessthe component's DOM DebugElement.query to query the DOM By.css to query DOM using CSS selectors

44.
import { async,ComponentFixture, TestBed } from '@angular/core/testing'; import { SimpleComponent } from './simple.component'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; describe('SimpleComponent', () => { let component: SimpleComponent; let fixture: ComponentFixture<SimpleComponent>; let element: DebugElement; beforeEach(() => { fixture = TestBed.configureTestingModule({ declarations: [ SimpleComponent ] }) .createComponent(SimpleComponent) .then(() => { component = fixture.componentInstance; element = fixture.debugElement; return fixture.whenStable().then(() => { fixture.detectChanges(); }); }); })); } The Debug Element

45.
it('greets the subject',() => { const h1 = element.query(By.css('h1')); expect(h1.nativeElement.innerText).toBe('Hello world!'); }); The Debug Element

46.

47.

48.

49.
Service export class GreetingService{ subject: string = 'world'; }

50.
import { GreetingService} from '@./services/greeting.service'; @Component({ selector: 'app-service', templateUrl: './simple.component.html', styleUrls: ['./simple.component.scss'] }) export class SimpleComponent implements OnInit { subject: string = this.service.subject; constructor(private service: GreetingService) { } ngOnInit() { } } Component

51.

52.

53.
http://digitaldrummerj.me Don't Use RealServices

54.
http://digitaldrummerj.me Don't Use RealServices Use Test Double

55.
http://digitaldrummerj.me Don't Use RealServices Use Test Double Use A Stub

56.
http://digitaldrummerj.me Don't Use RealServices Use Test Double Use A Stub Use A Spy

57.
http://digitaldrummerj.me Override Provider With useValueor useClass

58.
Local Members describe('Simple Componentwith Service', () => { let component: SimpleComponent; let fixture: ComponentFixture<SimpleComponent>; let element: DebugElement; let greetingServiceStub: GreetingServiceStub let greetingService: GreetingService; });

59.
Local Members describe('Simple Componentwith Service', () => { let component: SimpleComponent; let fixture: ComponentFixture<SimpleComponent>; let element: DebugElement; let greetingServiceStub: GreetingServiceStub let greetingService: GreetingService; });

60.
export class GreetingServiceStub{ service = "Test World!" } fixture = TestBed.configureTestingModule({ declarations: [SimpleComponent ], providers: [{ provide: GreetingService, useClass: GreetingServiceStub }] }) .createComponent(SimpleComponent) .then(() => { fixture = TestBed.createComponent(SimpleComponent); component = fixture.componentInstance; element = fixture.debugElement; greetingService = de.injector.get(GreetingService); return fixture.whenStable().then(() => { fixture.detectChanges(); }); }); Test Double

61.
export class GreetingServiceStub{ service = "Test World!" } fixture = TestBed.configureTestingModule({ declarations: [SimpleComponent ], providers: [{ provide: GreetingService, useClass: GreetingServiceStub }] }) .createComponent(SimpleComponent) .then(() => { fixture = TestBed.createComponent(SimpleComponent); component = fixture.componentInstance; element = fixture.debugElement; greetingService = de.injector.get(GreetingService); return fixture.whenStable().then(() => { fixture.detectChanges(); }); }); Test Double

62.
http://digitaldrummerj.me Get Service ReferenceWith debugElement.injector

63.
export class GreetingServiceStub{ service = "Test World!" } fixture = TestBed.configureTestingModule({ declarations: [SimpleComponent ], providers: [{ provide: GreetingService, useValue: greetingServiceStub }] }) .createComponent(SimpleComponent) .then(() => { fixture = TestBed.createComponent(SimpleComponent); component = fixture.componentInstance; element = fixture.debugElement; greetingService = de.injector.get(GreetingService); return fixture.whenStable().then(() => { fixture.detectChanges(); }); }); }); Test Double

64.
Actual Test it('updates componentsubject when service subject is changed', () => { greetingService.subject.name = 'cosmos'; fixture.detectChanges(); expect(component.subject.name).toBe('cosmos'); const h1 = de.query(By.css('h1')).nativeElement; expect(h1.innerText).toBe('Hello cosmos!'); });

65.

66.

67.

68.

69.

70.
Service @Injectable() export class GreetingService{ subject: string = 'world' ; getGreeting() { return Promise.resolve('Hello'); } getSubject() { return Promise.resolve(this.subject.name); } getPunctuation() { return Promise.resolve('!'); } }

71.
Service @Injectable() export class GreetingService{ subject: string = 'world' ; getGreeting() { return Promise.resolve('Hello'); } getSubject() { return Promise.resolve(this.subject.name); } getPunctuation() { return Promise.resolve('!'); } }

72.
Component export class SimpleComponentimplements OnInit { subject: string; greeting: string; punctuation: string; constructor(private service: GreetingService) { } ngOnInit() { this.service.getGreeting() .then(res => this.greeting = res); this.service.getSubject() .then(res => this.subject = res); this.service.getPunctuation() .then(res => this.punctuation = res); } }

73.
Component export class SimpleComponentimplements OnInit { subject: string; greeting: string; punctuation: string; constructor(private service: GreetingService) { } ngOnInit() { this.service.getGreeting() .then(res => this.greeting = res); this.service.getSubject() .then(res => this.subject = res); this.service.getPunctuation() .then(res => this.punctuation = res); } }

74.
Setup beforeEach(async(() => { fixture= TestBed.configureTestingModule({ declarations: [SimpleComponent ], providers: [ GreetingService ] }) .createComponent(SimpleComponent) .then(() => { component = fixture.componentInstance; element = fixture.debugElement; greetingService = de.injector.get(GreetingService); return fixture.whenStable().then(() => { fixture.detectChanges(); }); }); }));

75.
Setup beforeEach(async(() => { fixture= TestBed.configureTestingModule({ declarations: [SimpleComponent ], providers: [ GreetingService ] }) .createComponent(SimpleComponent) .then(() => { component = fixture.componentInstance; element = fixture.debugElement; greetingService = de.injector.get(GreetingService); return fixture.whenStable().then(() => { fixture.detectChanges(); }); }); }));

76.
Spy with fixture.whenStable it('gets`greeting` after promise (async)', async(() => { spyOn(greetingService, 'getGreeting') .and.returnValue(Promise.resolve('Greetings')); expect(component.greeting).toBe('Greetings'); }); }));

77.

78.

79.

80.

81.
Spy with tick it('gets`subject` after promise (fakeAsync)', fakeAsync(() => { spyOn(greetingService, 'getSubject') .and.returnValue(Promise.resolve('universe')); fixture.detectChanges(); tick(); fixture.detectChanges(); expect(component.subject).toBe('universe'); }));

82.

83.

84.

85.

86.

87.

88.

89.
http://digitaldrummerj.me Component with Inputsand Outputs The goal is to ensure that binding works as expected Test input: simply update value and ensure it renders Test output: trigger triggerEventHandler and subscribe to the EventEmitter

90.
@Component({ selector: 'app-input-output', template: ` <h1>Hello{{subject}}!</h1> <button (click)="depart()">We Out</button> ` }) export class InputOutputComponent { @Input('subject') subject: string; @Output('leave') leave: EventEmitter<string> = new EventEmitter(); depart() { this.leave.emit(`Later ${this.subject}!`); } } Component

91.
@Component({ selector: 'app-input-output', template: ` <h1>Hello{{subject}}!</h1> <button (click)="depart()">We Out</button> ` }) export class InputOutputComponent { @Input('subject') subject: string; @Output('leave') leave: EventEmitter<string> = new EventEmitter(); depart() { this.leave.emit(`Later ${this.subject}!`); } } Component

92.
beforeEach(() => { fixture= TestBed.configureTestingModule({ declarations: [ InputOutputComponent ] }) .createComponent(InputOutputComponent); component = fixture.componentInstance; de = fixture.debugElement; button = de.query(By.css('button')); component.subject = 'galaxy'; fixture.detectChanges(); }); Setup

93.

94.

95.
it('has `subject` asan @Input', () => { expect(component.subject).toBe('galaxy'); }); Input

96.
it('says goodbye tothe `subject`', () => { let farewell; component.leave.subscribe(event => farewell = event); button.triggerEventHandler('click', { button: 0 }); expect(farewell).toBe('Later galaxy!'); }); Output

97.

98.

99.

100.
http://digitaldrummerj.me Routed Component Avoid routercomplexity. Use RouterTestingModule Test that component navigates to proper route

101.
beforeEach(() => { fixture= TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([ {path: '', redirectTo: '/items', pathMatch: 'full' }, {path: 'items', component: ItemsComponent}, {path: 'routed/:subject', component: RoutedComponent}, {path: 'widgets', component: WidgetsComponent}, {path: '**', redirectTo: '/items', pathMatch: 'full'} ]); ], declarations: [ RoutedComponent ] }) .createComponent(RoutedComponent); component = fixture.componentInstance; de = fixture.debugElement; fixture.detectChanges(); }); Routes

102.
import { RouterTestingModule} from '@angular/router/testing'; beforeEach(() => { fixture = TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([ {path: '', redirectTo: '/items', pathMatch: 'full' }, {path: 'items', component: ItemsComponent}, {path: 'routed/:subject', component: RoutedComponent}, {path: 'widgets', component: WidgetsComponent}, {path: '**', redirectTo: '/items', pathMatch: 'full'} ]); ], declarations: [ RoutedComponent ] }) .createComponent(RoutedComponent); component = fixture.componentInstance; de = fixture.debugElement; fixture.detectChanges(); }); Routes

103.
import { RouterTestingModule} from '@angular/router/testing'; beforeEach(() => { fixture = TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([ {path: '', redirectTo: '/items', pathMatch: 'full' }, {path: 'items', component: ItemsComponent}, {path: 'routed/:subject', component: RoutedComponent}, {path: 'widgets', component: WidgetsComponent}, {path: '**', redirectTo: '/items', pathMatch: 'full'} ]); ], declarations: [ RoutedComponent ] }) .createComponent(RoutedComponent); component = fixture.componentInstance; de = fixture.debugElement; fixture.detectChanges(); }); Routes

104.
RouterLink import { RouterLinkWithHref} from '@angular/router'; import { fakeAsync } from '@angular/core/testing'; it('should have 1 routerLink in template', fakeAsync(() => { allLinks = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref)); expect(allLinks.length).toBe(1, 'should have 1 link'); }));

105.

106.

107.

108.

109.
Location Check import {fakeAsync } from '@angular/core/testing'; it('all items takes me home', fakeAsync(() => { const allLinks = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref)); const linkDes = allLinkDes[0]; expect(location.path()).toBe('', 'link should not have navigated yet'); linkDes.triggerEventHandler('click', { button: 0 }); tick(); expect(location.path()).toBe('/items'); }));

110.

111.

112.

113.

114.
http://digitaldrummerj.me Document FunctionalityPinpoint Bugs CheckRegressionConfirm Functionality Unit Test Will Make You Faster

115.
http://digitaldrummerj.me Checks Single Assumption Single Unit OfWork Automated Code Tenents

116.
http://digitaldrummerj.me RunnableDependableMaintainable Good Unit Tests

117.
http://digitaldrummerj.me Resources Angular Unit TestingGuide: angular.io/guide/testing Code Repository: github.com/digitaldrummerj/angular-tutorial-code/tree/chapter- unit-test Slides: slideshare.net/digitaldrummerj/angular-unit-testing-from-the- trenches

118.
http://digitaldrummerj.me digitaldrummerj.me @digitaldrummerj

119.

Angular Unit Testing from the Trenches

More Related Content

What's hot

Similar to Angular Unit Testing from the Trenches

More from Justin James

Recently uploaded

Angular Unit Testing from the Trenches

Editor's Notes