Angular Workshop

Testing

Contents

Why test
Testing tools
Running a first test
Testing components
Unit testing services

Why test?

Testing Tools

JS testing tools

Test frameworks - where you write your test
- Jasmine, Mocha, Tape, Jest
Test environment - where your tests are executed
- browsers - Chrome, Firefox...
- headless browsers - JSDom, PhantomJS
Test runners - where you run your tests
- Karma

Jasmine

A behavior-driven development framework for testing JavaScript code.
Create hierarchical suites of test (describe)
The tests are written as specifications (it)
Expectations and Matchers (built-in and custom)
Spies - a test double pattern
Asynchronous operations support

Jasmine

A simple jasmine test suite

describe("A resource",() => {
  const resource;

  beforeEach(() => {
    resource = new Resource();
    resource.allocateSpace();
  });

  afterEach(() => {
    resource.free();
  });

  it("should have allocated 100 units of space",() => {
    expect(resource.space).toEqual(100);
  });

  it("should be connected to at least one device",() => {
    expect(resource.isConnected).toEqual(true);
    expect(resource.connections.length).toBeGreaterThan(0);
  });
});

Jasmine

Jasmine Matchers

not
toBe
toEqual
toMatch
toBeDefined
toBeUndefined
toBeNull

toBeTruthy
toBeFalsy
toContain
toBeLessThan
toBeGreaterThan
toBeCloseTo
toThrow

Jasmine

A simple jasmine spy

describe('A Person', () => {
    let fakePerson;
    beforeEach( () => {fakePerson = new Person();})

    it('should call the sayHello() function', () => {
        spyOn(fakePerson, 'sayHello');
        fakePerson.helloSomeone('world');
        expect(fakePerson.sayHello).toHaveBeenCalled();
    });

    it('should greet the world', () => {
        spyOn(fakePerson, 'helloSomeone');
        fakePerson.helloSomeone('world');
        expect(fakePerson.helloSomeone).toHaveBeenCalledWith('world')
    });
});

class Person {
  helloSomeone(toGreet) {
    return `${this.sayHello()} ${toGreet}`;
  };
  sayHello() {
    return 'Hello';
  };
}

Jasmine

Advanced spy behaviour

// Actually calling the method
spyOn(fakePerson, 'sayHello').and.callThrough();

// Set a return value for a call
spyOn(fakePerson, 'sayHello').and.returnValue('Hello World');

// Set a return value for a call
spyOn(fakePerson, 'sayHello').and.returnValue('Hello World');

// Call a different function
spyOn(fakePerson, 'sayHello').and.callFake((arguments, can, be, received) => ...);

// Get number of calls
spyOn(fakePerson, 'sayHello')
expect(fakePerson.sayHello.calls.count()).toBe(3)
fakePerson.sayHello.calls.reset() // reset the counts

// Create a "bare" spy
spy = jasmine.createSpy('whatAmI');
expect(spy).toHaveBeenCalled();

// Create a spy object
tape = jasmine.createSpyObj('tape', ['play', 'pause', 'stop', 'rewind']);

Jasmine

Async support

describe("asynchronous specs",() => {
  it("should take a long time",(done) => {
    setTimeout(function() {
        done();
      }, 9000);
    });
})

Karma

JavaScript test runner that integrates with a browser environment
Created by the AngularJS team
Configuration file
- browser launchers
- test framework
- reporters
- preprocessors

Assignment

Setting up Karma with Jasmine and TypeScript

Testing Angular Components

Testing Components

import {Component} from '@angular/core';

@Component({
  selector: 'greet-message',
  template: '<h1>{{message}}</h1>'
})

export class GreetComponent {
  public message: string = '';

  constructor() {}

  setMessage(newMessage: string) {
      this.message = newMessage;
  }

  clearMessage() {
    this.message = '';
  }
}

Verifying Methods and Properties - isolated test

Testing Components

import {GreetComponent} from './greet.component';

describe('Testing message state in greet.component', () => {
  let greetComponent: GreetComponent;

  beforeEach(() => {
    greetComponent = new GreetComponent();
  });

  it('should set new message', () => {
    greetComponent.setMessage('Testing');
    expect(greetComponent.message).toBe('Testing');
  });

  it('should clear message', () => {
    greetComponent.clearMessage();
    expect(greetComponent.message).toBe('');
  });
});

Verifying Methods and Properties - isolated test

Testing Components

describe('Testing GreetComponent', () => {

  let component: GreetComponent;
  let fixture: ComponentFixture<GreetComponent>;
  let debugElement: DebugElement;
  let element: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ GreetComponent ],
      imports: [ /* HttpModule, etc. */ ],
      providers: [ /* { provide: ServiceA, useClass: TestServiceA } */ ]
    });

    fixture = TestBed.createComponent(GreetComponent);

    component = fixture.componentInstance; 
    debugElement = fixture.debugElement.query(By.css('h1'));
    element = debugElement.nativeElement;
  });
});

Testing with Angular testing utilities - setup

Testing Components

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';

import { GreetComponent } from './greet.component';

Testing with Angular testing utilities - setup

Testing Components

TestBed.configureTestingModule({
  declarations: [ GreetComponent ],
});

fixture = TestBed.createComponent(GreetComponent);

Testing with Angular testing utilities - setup

TestBed

Created in beforeEach() - called before every test
An Angular testing module—an @NgModule class
call configureTestingModule with a metadata object

Testing Components

TestBed.configureTestingModule({
  declarations: [ GreetComponent ],
});

fixture = TestBed.createComponent(GreetComponent);

Testing with Angular testing utilities - setup

TestBed

Supports optional override methods

TestBed.overrideComponent(SomeComponent, {
  set: {
    template: '<div>Overridden template here</div>'
    // ...
  }
});

Testing Components

TestBed.configureTestingModule({
  declarations: [ GreetComponent ],
});

fixture = TestBed.createComponent(GreetComponent);

component = fixture.componentInstance; 
debugElement = fixture.debugElement.query(By.css('h1'));
element = debugElement.nativeElement;

Testing with Angular testing utilities - setup

createComponent()

creates an instance of the component to test
returns a component fixture
- access to the component instance
- access to the debug element
closes current TestBed configurations

Testing Components

Testing with Angular testing utilities - the tests

import {Component} from '@angular/core';

@Component({
  selector: 'greet-message',
  template: '<h1>{{message}}</h1>'
})

export class GreetComponent {
  public message: string = 'Hello';

  constructor() {}

  setMessage(newMessage: string) {
      this.message = newMessage;
  }

  clearMessage() {
    this.message = '';
  }
}

Testing Components

it('should display original greet', () => {
  fixture.detectChanges();
  expect(element.textContent).toContain(component.message);
});

it('should display a different test greet', () => {
  component.setMessage('Test Greet');
  fixture.detectChanges();
  expect(element.textContent).toContain('Test Greet');
});

it('should clear the message', () => {
  fixture.detectChanges();
  component.clearMessage();
  fixture.detectChanges();
  expect(element.textContent).toBe('');
});

Testing with Angular testing utilities - the tests

Testing Components

import { ComponentFixtureAutoDetect } from '@angular/core/testing';

TestBed.configureTestingModule({
  declarations: [ GreetComponent ],
  providers: [
    { provide: ComponentFixtureAutoDetect, useValue: true }
  ]
})

Testing with Angular testing utilities - the tests

detectChanges()

tells Angular when to perform change detection
TestBed.createComponent() does not trigger change detection
It is possible to set up automatic change detection

Testing Components

import { async } from '@angular/core/testing';

// async beforeEach
beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ BannerComponent ], // declare the test component
  })
  .compileComponents();  // compile template and css
}));

Testing with Angular testing utilities - external templates

compileComponents() - asynchronously compiles all the components configured in the testing module
async() - arranges for the body of the beforeEach to run in a special async test zone that hides the mechanics of asynchronous execution

Testing Components

import { async } from '@angular/core/testing';

// async beforeEach
beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ GreetComponent ],
  })
  .compileComponents();
}));

// synchronous beforeEach
beforeEach(() => {
  fixture = TestBed.createComponent(GreetComponent);

  component = fixture.componentInstance;
  debugElement = fixture.debugElement.query(By.css('h1'));
  element = debugElement.nativeElement;
});

Testing with Angular testing utilities - external templates

Testing Components


import {Component} from '@angular/core';
import {UserService} from './user.service';

@Component({
  selector: 'greet-message',
  template: '<h1>{{message}}</h1>'
})

export class GreetComponent {
  public message: string = 'Hello';

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.message = this.userService.isLoggedIn ?
      'Welcome, ' + this.userService.user.name :
      'Please log in.';
  }
}

Testing Components with a dependency

Testing Components

userServiceStub = {
  isLoggedIn: true,
  user: { name: 'Test User'}
};

TestBed.configureTestingModule({
   declarations: [ WelcomeComponent ],
   // providers:    [ UserService ]  // Don't provide the real service!
   providers:    [ {provide: UserService, useValue: userServiceStub } ]
});

userService = TestBed.get(UserService);

Testing Components with a dependency - stubbing the service

always access service from injector, never directly - the injected service is a clone

Testing Components

// UserService actually injected into the component
userService = fixture.debugElement.injector.get(UserService);

Testing Components with a dependency - accessing the service

// UserService from the root injector
userService = TestBed.get(UserService);

The component injector

The TestBed injector

it('stub object and injected UserService should not be the same', () => {
  expect(userServiceStub === userService).toBe(false);

  userServiceStub.isLoggedIn = false;
  expect(userService.isLoggedIn).toBe(true);
});

Testing Components

it('should welcome the user', () => {
  fixture.detectChanges();
  const content = element.textContent;
  expect(content).toContain('Welcome', '"Welcome ..."');
  expect(content).toContain('Test User', 'expected name');
});

it('should welcome "Bubba"', () => {
  userService.user.name = 'Bubba';
  fixture.detectChanges();
  expect(element.textContent).toContain('Bubba');
});

it('should request login if not logged in', () => {
  userService.isLoggedIn = false;
  fixture.detectChanges();
  const content = element.textContent;
  expect(content).not.toContain('Welcome', 'not welcomed');
  expect(content).toMatch(/log in/i, '"log in"');
});

Testing Components with a dependency -testing the service

The component injector

Testing Components


import {Component} from '@angular/core';
import {GreetingsService} from './geetings.service';

@Component({
  selector: 'greet-message',
  template: '<h1>{{message}}</h1>'
})

export class GreetComponent {
  public message: string = 'Hello';

  constructor(private greetingsService: GreetingsService) { }

  ngOnInit(): void {
      this.greetingsService.getGreets()
        .then(greets => this.message = greets[0]);
  }
}