Angular 2 unit testing overview

Angular 2 Unit testing
Overview
2016/03/30 ng-sake @mitsuruog

Today’s motivation and goal.
Tip
Today’s sample code here.
https://github.
com/mitsuruog/_angular2-unit-
test-sample
- Not enough contents about unit testing :(
- Let’s look at actual tests !!
- Provide to quick reference in unit testing on
Angular 1 to 2 :)

Table contents
1. Tools and setup
2. Testing Angular 2 Class
3. Testing Service
4. Testing DOM
5. Quick reference
6. Summary

Tools and setup.
- Typescript
- Karma
- Jasmine
Tip
If you want use mocha and power-assert.
Check it!!
https://github.com/laco0416/angular2-
testing-micro

Target
SayHelloPipe
Usage
{{ 'world' | sayHello }} // => Hello world
Key factor
- Import
- Class
- Expect
Testing Angular 2 Class
Tip
https://github.
test-sample

import { describe, it, expect, beforeEach } from 'angular2/testing';
import { SayHelloPipe } from './say-hello.pipe';
1.
Import the test target and
testing API

describe('Test: SayHelloPipe', () => {
let testee;
beforeEach(() => {
testee = new SayHelloPipe();
});
});
2.
Get instance

describe('Test: SayHelloPipe', () => {
let testee;
beforeEach(() => {
testee = new SayHelloPipe();
});
it('Should say hello', () => {
expect(testee.transform('world')).toEqual('Hello world');
});
});
finish
To verify the results

Testing Service
Target
SayHelloService
Usage
SayHelloService.say() // => Hello
Key factor
- beforeEachProviders
- inject
Tip
https://github.
test-sample

Testing Service
import { describe, it, inject, expect, beforeEachProviders } from 'angular2/testing';
import { SayHelloService } from "./say-hello.service";
1
testing API

Testing Service
describe('Test: SayHelloService', () => {
beforeEachProviders(() => [ SayHelloService ]);
});
2
Define DI provider

Testing Service
it('Should service exist', inject([SayHelloService], (testee: SayHelloService) => {
}));
});
3
Inject to test target provider
into test context

Testing Service
it('Should service exist', inject([SayHelloService], (testee: SayHelloService) => {
expect(testee).toBeDefined();
}));
it('Should say Hello', inject([SayHelloService], (testee: SayHelloService) => {
expect(testee.say()).toEqual('Hello');
}));
});
finish

Testing Service
import { provide } from "angular2/core";
import { SayHelloServiceMock } from "./say-hello.service.mock";
beforeEachProviders(() => [
provide(SayHelloService, { useClass: SayHelloServiceMock })
]);
});
bonus!!
Provider can be replaced
instantiate method

Testing DOM
Target
SayHelloComponent
Usage
<say-hello></say-hello> → <say-hello>
<div>Hello</div>
</say-hello>
Key factor
- Create TestComponet
- TestComponentBuilder
- Debugging fixture component
Tip
https://github.
test-sample

Testing DOM
import { describe, it, injectAsync, expect, beforeEachProviders, TestComponentBuilder } from 'angular2/testing';
import { Component } from 'angular2/core';
import { SayHelloComponent } from './say-hello.component';
1
testing API

Testing DOM
@Component({ selector: 'test-container', template: '<say-hello></say-hello>', directives: [ SayHelloComponent ] })
class TestComponent { }
2
Create a fixture component

Testing DOM
describe('Test: SayHelloComponent', () => {
beforeEachProviders(() => [ TestComponentBuilder ]);
it('Should display Hello', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
}));
});
3
Define DI provider and
inject to provider into test
context

Testing DOM
return tcb.createAsync(TestComponent)
.then((fixture) => {
});
}));
});
4
Build fixture component

Testing DOM
return tcb.createAsync(TestComponent)
let div = fixture.nativeElement.querySelector('div');
expect(div).toHaveText('Hello');
});
}));
});
finish

Testing DOM
let template = '<say-hello word=”world”></say-hello>';
return tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
});
}));
});
bonus!!
Fixture can be replaced to
another template

Where is Quick Reference ?
Here
https://gist.github.com/mitsuruog/9e3e5c2c5d17a15a4c2a

Summry
In my opinion...
Angular 2 test concept is similar to 1.
Angular 2 testing API are organized.
became even easier to use.
Angular 2 architecture be able to more
easy testing than 1.
Enjoy testing :)

Thanks !!
Who am I
Mitsuru Ogawa
front-end developer with a
passion for making the
maintainable web.
working for the improvement
of old Web experience.
mitsuruog mitsuruog

Appendix
- AngularConnect - Testing (Public) - Google Slides
- https://goo.gl/szI8Q5
- Angular 2 — Unit Testing recipes — Google Developer Experts —
Medium
- https://goo.gl/MY9xyj
- Angular 2.0 Unit Testing
- http://www.syntaxsuccess.com/viewarticle/angular-2.0-
unit-testing
- Testing Angular 2 apps - Part 1: The beginning - LiveChat
Developers
- https://developers.livechatinc.com/blog/testing-angular-
2-apps-part-1-beginning
- Testing Angular 2 apps - Part 2: Dependency Injection and
Components - LiveChat Developers
2-apps-dependency-injection-and-components/
- Testing Angular 2 apps - Part 3: RouterOutlet and API - LiveChat
Developers
2-apps-routeroutlet-and-http/
Tip
If you want to read Japanese contents.
Check my blog :)
http://blog.mitsuruog.info/tags/unit-test/

Angular 2 unit testing overview

More Related Content

Viewers also liked

More from Mitsuru Ogawa

Recently uploaded

Angular 2 unit testing overview