Unit Testing/mocking Window properties in Angular2 (TypeScript)

Question

I'm building some unit tests for a service in Angular2.

Within my Service I have the following code:

var hash: string; hash = this.window.location.hash;

However when I run a test which contains this code, it will fail.

It'd be great to utilise all the features of Window, but as I'm using PhantomJs, I don't think this is possible (I have also tried Chrome which yields the same results).

In AngularJs, I would have resorted to mocking $Window (or at least the properties in question), but as there is not a lot of documentation for Angular2 unit testing I'm not sure how to do this.

Can anyone help?

Solution 1

In Angular 2 you can use the @Inject() function to inject the window object by naming it using a string token, like this

  constructor( @Inject('Window') private window: Window) { }

In the @NgModule you must then provide it using the same string:

@NgModule({
    declarations: [ ... ],
    imports: [ ... ],
    providers: [ { provide: 'Window', useValue: window } ],
})
export class AppModule {
}

Then you can also mock it using the token string

beforeEach(() => {
  let windowMock: Window = <any>{ };
  TestBed.configureTestingModule({
    providers: [
      ApiUriService,
      { provide: 'Window', useFactory: (() => { return windowMock; }) }
    ]
  });

This worked in Angular 2.1.1, the latest as of 2016-10-28.

Does not work with Angular 4.0.0 AOT. https://github.com/angular/angular/issues/15640

Solution 2

As @estus mentioned in the comment, you'd be better getting the hash from the Router. But to answer your question directly, you need to inject window into the place you're using it, so that during testing you can mock it.

First, register window with the angular2 provider - probably somewhere global if you use this all over the place:

import { provide } from '@angular/core';
provide(Window, { useValue: window });

This tells angular when the dependency injection asks for the type Window, it should return the global window.

Now, in the place you're using it, you inject this into your class instead of using the global directly:

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

@Component({ ... })
export default class MyCoolComponent {
    constructor (
        window: Window
    ) {}

    public myCoolFunction () {
        let hash: string;
        hash = this.window.location.hash;
    }
}

Now you're ready to mock that value in your test.

import {
    beforeEach,
    beforeEachProviders,
    describe,
    expect,
    it,
    inject,
    injectAsync
} from 'angular2/testing';

let myMockWindow: Window;
beforeEachProviders(() => [
    //Probably mock your thing a bit better than this..
    myMockWindow = <any> { location: <any> { hash: 'WAOW-MOCK-HASH' }};
    provide(Window, {useValue: myMockWindow})
]);

it('should do the things', () => {
    let mockHash = myMockWindow.location.hash;
    //...
});

Solution 3

After RC4 method provide() its depracated, so the way to handle this after RC4 is:

  let myMockWindow: Window;

  beforeEach(() => {
    myMockWindow = <any> { location: <any> {hash: 'WAOW-MOCK-HASH'}};
    addProviders([SomeService, {provide: Window, useValue: myMockWindow}]);
  });

It take me a while to figure it out, how it works.

Comments

[Estus Flask]

It seems to be quite straghtforward. Probably an XY problem, because the router already has the hash abstracted, the abstraction goes up to DOM location.

[Günter Zöchbauer]

You can also just inject constructor(window:Window) and provide it like provide(Window, {useValue: window}) or provide(Window, {useClass: MyWindowMock}). No need to use a string key if there is a type available.

[Klas Mellbourn]

That syntax is deprecated in the release version of Angular2

[Dunos]

This works for testing but not in AoT compilation (compiles but with a warning and the app crashes in the browser)

[Anand Rockzz]

provide removed in RC6 from core, change it to providers: [ {provide: Window, useValue: window}, ]

[Timespace]

Tried this with an AoT build (along with typing window as any inside the constructor to work around a different bug), but my production build crashed when I tried to access a custom property on window that I'm setting in another file. I followed the solution here instead, and it worked: stackoverflow.com/a/37176929/1683187

[EugenSunic]

This is the correct answer for changing the windowMock object dynamically in each test when needed

[Cuga]

This is a lifesaver. Enabled me to mock the tests I needed without the page redirecting. Worked in Angular 11

[Joand]

it works for me: Angular 10

[java-addict301]

TypeError: Cannot set properties of undefined (setting 'href') - when trying this.window.location.href = 'abc'