Angular 2 Unit Testing

1. Angular 2 Unit Testing
October 25, 2016
Vikram Subramanian
Google

2. Introduction
● Angular 2.0 final!
● Changes in Test API from RC to final
○ Decrease number of concepts and boilerplate
○ Independent of test framework
○ NgModule

3. Introduction
Pragmatic Unit testing
● Decisions to make
● Testing Recipes

4. Decisions
Should I write unit tests?
○ Yes
○ Yes!!
Framework to use
○ Jasmine
○ Mocha
Test Runner
○ Karma

5. Decisions - Angular specific
● Testing Module Setup
○ How much to mock?
○ Isolation vs Being close to production
● Test Method Setup
○ () => { }
○ async() => { }
○ fakeAsync() => { }

6. Decisions - Angular specific (contd.)
● Locating elements
○ Using DOM API
○ Using DebugElement
● Dispatching events
○ Using DOM API
○ Using DebugElement

7. Recipes
Simple Component with templateUrl

8. Recipes - Simple Component with templateUrl
[app.component.ts]
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent {}
[app.component.html]
<h1>My First Angular App</h1>

9. Recipes - Simple Component with templateUrl
[app.component.spec.ts]
...
beforeEach(async(() => {
TestBed.configureTestingModule({imports: [AppModule]});
// Precompile components with templateUrl.
TestBed.compileComponents();
}));
...

10. Recipes - Simple Component with templateUrl
[app.component.spec.ts]
...
// Synchronous test method.
it('displays properly', () => {
let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toBe("My First Angular App");
});
...

11. Recipes
Component communicating with backend service

12. Component
Users Service
Backend
Angular App

13. Recipes - Component Communicating with Backend service
beforeEach(async(() => {
TestBed.configureTestingModule({imports: [AppModule]});
// Override providers for the UsersService in the App module.
TestBed.overrideModule(AppModule,
{set:
{providers: [{provide: UsersService, useClass: MockUsersService}]}
}
);
TestBed.compileComponents();
}));

14. Recipes - Component Communicating with Backend service
it('displays user details on click', async(() => {
...
// Locate the fetch button.
let debugFetchButton = fixture.debugElement.query(By.css('button'));
expect(debugFetchButton).not.toBe(null);
// Trigger the click event through the DOM.
debugFetchButton.nativeElement.click();
...
}

15. Recipes - Component Communicating with Backend service
it('displays users list on click', async(() => {
...
// Wait for the async getUsers to complete and Angular to become stable.
fixture.whenStable().then(() => {
// Trigger rendering component state to DOM.
fixture.detectChanges();
// Check that the user list is displayed.
...
}
}

16. Recipes - Component Communicating with Backend service
// fakeAsync() version.
it('displays user details on click(fakeAsync)', fakeAsync(() => {
...
// Trigger the click event through the DOM.
debugFetchButton.nativeElement.click();
// Wait for Promise resolution and Angular to stabilize.
tick();
fixture.detectChanges();
...
}

17. Recipes - Component Communicating with Backend service
import {XHRBackend} from '@angular/http';
import {MockBackend} from '@angular/http/testing';
...
// Setup for mocking the HTTP Backend.
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpModule],
providers: [
UsersService,
{ provide: XHRBackend, useClass: MockBackend }
]
...

18. Recipes - Component Communicating with Backend service
it('returns all users', async(() => {
let backend = TestBed.get(XHRBackend);
let http = TestBed.get(Http);
let service = new UsersService(http);
let fakeUsers = makeUsers();
let options = new ResponseOptions({status: 200, body: fakeUsers});
let response = new Response(options);
backend.connections.subscribe(
(c: MockConnection) => c.mockRespond(response));
service.getUsers().then(users => { ...

19. Recipes
Testing Application Routing

20. Recipes - Testing Application Routing
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes(ROUTES),
AppModule
]
});

21. Recipes - Testing Application Routing
// async version
router.navigateByUrl('/about');
fixture.whenStable().then(() => {
fixture.detectChanges();
// Verify we navigated to About page.
let desc = fixture.debugElement.query(By.css('.description'));
expect(desc).not.toBe(null);
expect(desc.nativeElement.textContent).toContain('All about this sample');
});

22. Recipes - Testing Application Routing
// fakeAsync Version
router.navigateByUrl('/about');
tick();
fixture.detectChanges();
// Verify we navigated to About page.
let desc = fixture.debugElement.query(By.css('.description'));
expect(desc).not.toBe(null);
expect(desc.nativeElement.textContent).toContain('All about this sample');

23. Recipes
Testing Nested Components

24. Recipes - Testing Nested Components
[app.component.html]
<app-banner></app-banner>
<app-welcome></app-welcome>
<user-details></user-details>

25. Testing nested components - Approach 1
Don’t mock out anything
beforeEach(async(() => {
TestBed.configureTestingModule({imports: [AppModule]});
TestBed.compileComponents();
}));

26. Testing nested components - Approach 2
Mock all dependencies
...
TestBed.configureTestingModule({
declarations: [AppComponent, MockBannerComponent,
MockWelcomeComponent, MockUserDetailsComponent],
});
...

27. Testing nested components - Approach 3
Shallow Testing - NO_ERRORS_SCHEMA
...
TestBed.configureTestingModule({
declarations: [AppComponent],
schemas: [NO_ERRORS_SCHEMA],
});
...

28. WRITE UNIT TESTS!!

29. Resources
● Angular.io Testing Guide
● Testing Angular 2 - Julie Ralph
● Three ways to test Angular 2 components

30. Acknowledgements
● Mashhood Rastgar, Gerard Sans - Ideas for the talk
● Jasmine Plunker template - Ken Rimple - @krimple
● Ward and the docs team for putting up the best docs

32. Backup
Properties of good unit tests
● Fast
● Isolated
● Repeatable
● Self-verifying
● Timely
Source: https://pragprog.com/magazines/2012-01/unit-tests-are-first