Модульное тестирование/издевательство над свойствами окна в Angular2 (TypeScript)

В Angular 2 вы можете использовать функцию @Inject() для внедрения объекта окна, назвав его с помощью токена строки, например

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

Затем в @NgModule вы должны предоставить его, используя ту же строку:

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

Затем вы также можете издеваться над ним, используя строку токена

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

Это работало в Angular 2.1.1, последней версии от 28.10.2016.

Не работает с Angular 4.0.0 AOT. https://github.com/angular/angular/issues/15640

Как упомянул @estus в комментарии, вам лучше получить хэш от маршрутизатора. Но чтобы ответить на ваш вопрос напрямую, вам нужно внедрить окно в то место, где вы его используете, чтобы во время тестирования вы могли его издеваться.

Во-первых, зарегистрируйте окно у поставщика angular2 - возможно, где-то в глобальном масштабе, если вы используете это повсюду:

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

Это сообщает angular, когда внедрение зависимостей запрашивает тип Window, он должен возвращать глобальный window.

Теперь, в том месте, где вы его используете, вы вводите это в свой класс вместо того, чтобы напрямую использовать глобальный:

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

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

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

Теперь вы готовы смоделировать это значение в своем тесте.

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;
    //...
});

После RC4 метод provide() устарел, поэтому способ справиться с этим после RC4:

  let myMockWindow: Window;

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

Мне нужно время, чтобы понять, как это работает.

Я действительно не понимаю, почему никто не предоставил самое простое решение, которое рекомендуется командой Angular для тестирования службы, как вы можете видеть здесь. В большинстве случаев вам даже не нужно иметь дело с материалами TestBed.

Кроме того, вы можете использовать этот подход для компонентов и директив. В этом случае вы создадите не экземпляр компонента, а экземпляр класса. Это означает, что вам также не нужно иметь дело с дочерними компонентами, используемыми в шаблоне компонентов.

Предполагая, что вы можете внедрить Window в свой конструктор

constructor(@Inject(WINDOW_TOKEN) private _window: Window) {}

Просто сделайте следующее в вашем файле .spec:

describe('YourService', () => {
  let service: YourService;
  
  beforeEach(() => {
    service = new YourService(
      {
        location: {hash: 'YourHash'} as any,
        ...
      } as any,
      ...
    );
  });
}

Меня не интересуют другие свойства, поэтому я обычно добавляю приведение типа к any. Не стесняйтесь включать все другие свойства и вводить их соответствующим образом.

Если вам нужны другие значения для фиктивных свойств, вы можете просто следить за ними и изменять значение, используя returnValue жасмина:

const spy: any = spyOn((service as any)._window, 'location').and.returnValue({hash: 'AnotherHash'});

or

const spy: any = spyOn((service as any)._window.location, 'hash').and.returnValue('AnotherHash');