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?

Answer 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