Angular Testing - Workshop


What is Automated Testing

  • Unit Test- tests a specific "unit" of code, isolated from other units of code
    • Fast & reliable, easy to maintain
  • Integration Test- tests multiple units of code
    • Fast & reliable, less common generally
  • End to End Test
    • Tests a live, working system. Allows a level of verification not possible with the other levels at the expense of speed & reliability

Benefits of Testing

  • Documented Intentions - tests say what you want the code to do. They are GUARANTEED to be up to date. Other docs aren’t
  • Improved Design - more time is spent working with the code. Encourages small, decoupled designs, since they are easier to test.
  • Fewer bugs - obviously, the more you test, the fewer bugs you have
  • No regressions - after a bug is found, if a test is written, the bug can’t reappear
  • Safer refactoring - changing code is safer because tests don’t allow you to break functionality


Angular CLI

This project was generated with Angular CLI version 6.0.8.

Tools Needed

Configure Project

  • fork this repo to your GitHub account
  • clone your fork locally
  • inside angular-testing-workshop, install dependencies: npm install


  • npm start: should open your browser and display the app.
  • npm test: should yield output of test runner (no errors).

Unit Testing With Jasmine

Jasmine - I - Suites

  • A unit testing framework for JavaScript
  • Standalone, no DOM required
  • Clean syntax: describe, it, expect
  • Others: Mocha, QUnit, Jest.
                                        const SuperAwesomeModule = {
                                            featureA: () => {
                                            featureB: () => {
                                        describe('SuperAwesomeModule', () => {
                                            describe('featureA', () => {
                                            describe('featureB', () => {

Jasmine - II - Specs

  • call global Jasmine function it (string, fn)
  • a spec contains one or more expectations
  • expectation: an assertion that is either true or false.
  • spec with all true expectations: pass
  • spec with one or more false expectations: fail
                                describe('SuperAwesomeModule', () => {
                                    describe('featureA', () => {
                                      it('should calculate some super awesome calculation', () => {
                                          expect(SuperAwesomeModule.featureA([1, 2, 4]).toEqual(7);
                                      it('should also do this correctly', () => {

Jasmine - III - Included Matchers

                                                expect(foo).toBe(true); // uses JS strict equality
                                                expect(foo).toEqual(482); // uses deep equality
                                                expect(foo).toBeTruthy(); // boolean cast testing
                                                expect(foo).toContain('student'); // find item in array
                                                expect(a).toBeCloseTo(b, 2); // a to be close to b by 2 decimal points
                                                expect(() => {
                                                    foo(1, '2')
                                                  expect(() => {
                                                    foo(1, '2')
                                                  }).toThrow(new Error('Invalid parameter type.')

Jasmine - IV - Setup and Teardown

                                                    describe('ApiService', function() {
                                                        const serviceInTest;
                                                        beforeEach(function() {
                                                          serviceInTest = new ApiService();
                                                        afterEach(function() {
                                                        it('retrieves data', function() {
                                                        it('updates data', function() {

Jasmine - V - Test Doubles

Use Test Doubles to isolate dependencies
  • Mocks: objects pre-configured with details of the calls they expect
  • Spies: record information about calls
  • Stubs: provide canned answers to calls made during the test
  • Dummies: objects that are passed around but never actually used.
                                                        describe('SuperAwesomeModule', function() {
                                                            beforeEach(function() {
                                                              // track all calls to SuperAwesomeModule.asyncHelperFunction()
                                                              // and return a mock response
                                                              spyOn(SuperAwesomeModule, 'asyncHelperFunction').and.returnValue(Promise.resolve(mockData))
                                                            describe('featureA', function() {
                                                              it('should ...', function() {
                                                                // matchers for spies

Jasmine - VI - Async

  • Adding a done parameter to an it clause makes a spec async
  • spec will not complete until its done is called.
  • Default timeout is 5 seconds, can override: jasmine.DEFAULT_TIMEOUT_INTERVAL
                                                            it('should do something async', done => {
                                                                let value;
                                                                setTimeout(() => value = 42, 100);
                                                                setTimeout(() => {
                                                                }, 200);

Jasmine - VII - Exercise

We will test drive the implementation of a scoreCalculator function (sums up scores) that satisfies the following:
  • should work with one number
  • should work with more than one score
  • should treat negative scores as 0
  • should return zero with empty input

Basic Components Test

Basic Components Test - I

There are 3 standard methods of testing Angular components
  • Isolated tests: we treat the component class as vanilla JS. Don't render the component.
  • Shallow tests: use the Angular testing utilities to render the component, but don't render children components.
  • Integration tests: not end-to-end tests here. In this method we render children components also.

Basic Components Test - II - Setup

We first need to import a few of the testing utilities from @angular:
                                    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
                                    import { MenuComponent } from './menu.component';                                                                                                 
We want to configure the testing module
                                            let component: MenuComponent;
                                            let fixture: ComponentFixture< MenuComponent >;
                                            beforeEach(async(() => {
                                                declarations: [ MenuComponent ]
  • compileComponents() will ensure that external templates and styles are inlined. This is an async operation.
                                                    beforeEach(() => {
                                                        fixture = TestBed.createComponent(MenuComponent);
                                                        component = fixture.componentInstance;
  • fixture: A fixture for debugging and testing a component. Provides access to the component instance and also the DebugElement, a handle on the component's DOM element.
  • component : The component instance fixture.detectChanges() initializes the component (calling ngOnInit()) and runs the change detection cycle.

Basic Components Test - III - First Test

                                    it('should render two menu items', () => {
                                        const menuItems = fixture.debugElement.queryAll(By.css('a'));
Running this, you will get an error: Can't bind to 'routerLink' since it isn't a known property of 'a'. Since we aren't importing the module for routing , Angular doesn't recognize this directive.

Shallow test

                                    import { NO_ERRORS_SCHEMA } from '@angular/core';
                                                schemas: [NO_ERRORS_SCHEMA]

Another test

                    it('should render a different Dashboard link title', () => {
                        component.dashboard = 'Spies';
                        const dashboardLink = fixture.debugElement.queryAll(By.css('a'))[0];

Angular Testing Utilities

Angular Testing Utilities - I

Angular Testing Utilities

  • async() & fakeAsync() - async Zone control
  • TestBed - a harness for compiling modules
  • inject() & TestBed.get - provides access to injectables

Component Fixture

  • componentInstance - the instance of the component created by TestBed
  • debugElement - provides insight into the component and its DOM element
  • nativeElement - the native DOM element at the root of the component
  • detectChanges() - trigger a change detection cycle for the component
  • whenStable()- returns a promise that resolves when the fixture is stable

Debug Elements

  • parent / children - the immediate parent or children of this DebugElement
  • query(predicate) - search for one descendant that matches
  • queryAll(predicate) - search for many descendants that match
  • injector - this component's injector
  • listeners- this callback handlers for this component's events and @Outputs triggerEventHandler(listener)

Testing Components with (Async) Services Dependencies

Testing Components with (Async) Services Dependencies - I

We must specify the injected services in the providers property when configuring the testing module:
                                                                declarations: [HeroesComponent],
                                                                schemas: [NO_ERRORS_SCHEMA],
                                                                providers: [
                                                                    provide: HeroService,
                                                                    useValue: mockHeroService,
                                                                        const mockHeroService = {
                                                                            getHeroes: () => of([]),
                                                                            addHero: () => {},
                                                                            delete: () => {},
                                                        let component: HeroesComponent;
                                                        let fixture: ComponentFixture< HeroesComponent >;
                                                        let heroService: HeroService;                             
                                                                    beforeEach(() => {
                                                                        fixture = TestBed.createComponent(HeroesComponent);
                                                                        heroService = fixture.debugElement.injector.get(HeroService);
                                                                        component = fixture.componentInstance;

Testing Components with (Async) Services Dependencies - II

Suppose one of your components method performs async work:
                                    ngOnInit() {
                                      getHeroes(): void {
                                        this.heroService.getHeroes().subscribe(heroes => (this.heroes = heroes));
You should first spy on the service mock and return a response:
                                    spyOn(heroService, 'getHeroes').and.returnValue(of(mockHeroes));                              
Then, there are two methods of testing this:
  • use async and fixture.whenStable
  • use fakeAsync and tick

Testing Components with (Async) Services Dependencies - III - async()

  • Use the async testing utility which becomes the second argument to the it call.
  • You must then uses the fixture's whenStable method which returns a promise when all async work within this test is complete.
                    it("should assign the heroes' list to the variable (using async) ", async (() => {
                        spyOn(heroService, 'getHeroes').and.returnValue(of(mockHeroes));
                        fixture.whenStable().then(() => {

Testing Components with (Async) Services Dependencies - IV - fakeAsync

It allows you to write a test in a more linear fashion:
                    it('...', fakeAsync(() => {
                      spyOn(heroService, 'getHeroes').and.returnValue(of(mockHeroes));
                      flush(); // "flushes" asynchronous tasks
If you need fine time control, the tick function simulates the passage of time, and it can take in an optional argument of milliseconds.


Services - I

  • When it comes to testing services in Angular, you could write isolated tests (no Angular testing utilities).
  • Shallow tests using Angular utilities like the TestBed and the inject function.
                                                                  it('should be created', inject([HeroService], (service: HeroService) => {
                                            [HeroService, HttpClient, MessageService],
                                            (_heroService: HeroService, 
                                            _httpService: HttpClient, 
                                            _messageService: MessageService) => {
                                              heroService = _heroService;
                                              httpService = _httpService;
                                              messageService = _messageService;

Services - II

Spies and Observables
                                                                    describe('#getHeroes',() => {
                                                                        it('should return heroes from backend getHeroes', () => {
                                                                          const heroesUrl = 'api/heroes';
                                                                          const message = 'HeroService: fetched heroes';
                                                                          spyOn(httpService, 'get').and.returnValue(of(true));
                                                                          spyOn(messageService, 'add');
                                                                        it('should catchError when an error is provoked', () => {
                                                                          const heroesUrl = 'api/heroes';
                                                                          const message = 'HeroService: getHeroes failed: undefined';
                                                                          spyOn(httpService, 'get').and.returnValue(_throw(3));
                                                                          spyOn(messageService, 'add');
                    getHeroes(): Observable< Hero[] > {
                        return this.http.get< Hero[] >(this.heroesUrl).pipe(
                            tap(heroes => this.log('fetched heroes')),
                            catchError(this.handleError('getHeroes', [])),
                    private log(message: string) {
                        this.messageService.add(`HeroService: ${message}`);
                    private handleError< T >(operation = 'operation', result?: T){
                        return (error: any): Observable< T > => {
                            // TODO: send the error to remote logging infrastructure
                            console.error(error); // log to console instead
                            // TODO: better job of transforming error for user consumption
                            this.log(`${operation} failed: ${error.message}`);
                            // Let the app keep running by returning an empty result.
                            return of(result as T);

Testing Directives (hackathon)

MyDirective: Hackathon

  • An attribute directive is used to modify behavior of an existing element or component.
  • Suppose we have a directive that can be added to an input element to prevent numeric input.
  • We can easily achieve this using a @HostListener and listening for the keydown event.
                                        import { Directive, HostListener, ElementRef } from '@angular/core';

                                          selector: '[myDirective]',
                                        export class myDirective {
                                          constructor(private element: ElementRef) {}
                                          @HostListener('keydown', ['$event'])
                                          onKeydown(event) {
                                            const numberRegex = /[0-9]/;
                                            if (numberRegex.test(event.key)) {
< input myDirective type="text" placeholder="Search..." >

MyDirective: Hackathon

A test host component can look like this:
                          template: `< input myDirective type="text"/>
                                     < textarea myDirective>`
                        class TestHostComponent {
When testing this, we can use the debugElement and By to query for the input. DebugElements have a useful triggerEventHandler that you can call. In this case, we would trigger the keydown event.


  • should allow regular text input: You should query for the input element, and trigger the keydown event handler.
    • Create a mock event, and call input.triggerEventHandler('keydown', event).
  • should not allow numeric text input for input elements: Similar setup to the first one, except the event's key property should be a string containing a number
  • should allow regular text input for textarea elements
  • should not allow numeric text input for textarea elements

Testing Pipes (hackathon)

Testing Pipes (hackathon)

  • There is really no set up as we are writing vanilla jasmine tests.
  • You should write these kind of isolated tests for both services and pipes.
import { Pipe, PipeTransform } from '@angular/core';

    name: 'uppercase'
export class UppercasePipe implements PipeTransform {

    transform(input: string): any {
    return input.toUpperCase();


import { UppercasePipe } from './uppercase.pipe';

describe('UppercasePipe', () => {
  let pipe: UppercasePipe;

  beforeEach(() => {
    pipe = new UppercasePipe();

  it('creates an instance', () => {

  it('transforms input string to uppercase', () => {
    expect(pipe.transform('angular rocks!')).toBe('ANGULAR ROCKS!');

Testing Pipes (hackathon)


  • Transform an input ISO date string and return a "short date" format.
  • '1960-06-01T11:01:12.720Z' ----> '06/01/1960, 11:01am'
  • Complete the following tests:
    • creates an instance
    • should not throw error
    • returned value should contain date format dd/mm/yyyy
    • returned value should contain time hh:mm[am|pm]
    • should convert ISO string to correct date format (am)
    • should convert ISO string to correct date format (pm)
  • Examples
    • '1972-08-23T15:22:34.694Z' ----> '06/01/1960, 11:01am'
    • '1980-10-04T21:35:51.869Z' ----> '10/04/1980, 09:35pm'

More more more more ...

  • Testing Components With I/O and Change Detection
  • Routed Components (hackathon)
  • Test e2e
  • Test Ngrx:
    • Actions
    • Reducers
    • Selectors
    • Effects

Thank You