Les Tests unitaires/se moquant de la Fenêtre de propriétés dans Angular2 (Tapuscrit)

Je suis en train de construire quelques tests unitaires pour un service en Angular2.

Au sein de mon Service, j'ai le code suivant:

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

Cependant lorsque je lance un test qui contient ce code, il ne sera pas.

Ce serait super de pouvoir utiliser toutes les fonctionnalités de la Fenêtre, mais comme je suis en utilisant PhantomJs, je ne pense pas que ce soit possible (j'ai aussi essayé de Chrome qui donne les mêmes résultats).

Dans AngularJs, j'aurais eu recours à des moqueries $de la Fenêtre (ou au moins les propriétés en question), mais comme il n'y a pas beaucoup de documentation pour Angular2 tests unitaires, je ne suis pas sûr de la façon de le faire.

Peut aider quelqu'un?

Il semble être tout à fait straghtforward. Probablement un XY problème, parce que le routeur a la valeur de hachage abstraite, l'abstraction qui va jusqu'à la DOM.

OriginalL'auteur Rhys | 2016-04-12

  1. 17

    Angulaire 2 vous pouvez utiliser la @Inject() fonction d'injecter de la fenêtre de l'objet en le nommant à l'aide d'une chaîne de jeton, à l'instar de ce

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

    Dans le @NgModule vous devez ensuite fournir à l'aide de la même chaîne:

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

    Alors vous pouvez aussi simuler à l'aide de la chaîne de jeton

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

    Cette travaillé dans Angulaire 2.1.1, plus tard 2016-10-28.

    Ne fonctionne pas avec Angulaire 4.0.0 AOT.
    https://github.com/angular/angular/issues/15640

    Cela fonctionne pour les tests, mais pas dans AoT compilation (compile mais avec un avertissement et l'application se bloque dans le navigateur)
    A essayé avec un AoT construire (avec tapant window comme any à l'intérieur du constructeur de travail autour d'un bug), mais ma production de construire s'est écrasé quand j'ai essayé d'accéder à une propriété personnalisée sur window que je suis dans un autre fichier. J'ai suivi la solution ici au lieu de cela, et cela a fonctionné: stackoverflow.com/a/37176929/1683187

    OriginalL'auteur Klas Mellbourn

  2. 5

    @Estus mentionnées dans le commentaire, vous seriez mieux d'obtenir le hash à partir du Routeur. Mais pour répondre directement à votre question, vous avez besoin d'injecter de la fenêtre à l'endroit où vous l'utilisez, ainsi que pendant les tests, vous pouvez vous moquer.

    D'abord, le registre de fenêtre avec la angular2 fournisseur probablement quelque part globale si vous utilisez ce tout plus de l'endroit:

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

    Cela dit angulaire lors de l'injection de dépendance demande pour le type Window, il doit retourner le mondial window.

    Maintenant, dans l'endroit où vous l'utilisez, vous injectez dans votre classe au lieu d'utiliser le global directement:

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

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

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

    Vous êtes maintenant prêt à se moquer de cette valeur dans votre 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;
    //...
});
    Vous pouvez aussi injecter constructor(window:Window) et fournir comme provide(Window, {useValue: window}) ou provide(Window, {useClass: MyWindowMock}). Pas besoin d'utiliser une chaîne de clé si il y a un type disponible.
    fournir retiré dans RC6 de base, modifier les providers: [ {provide: Window, useValue: window}, ]

    OriginalL'auteur elwyn

  3. 3

    Après RC4 méthode provide() son depracated, de sorte que la façon de gérer cette après RC4 est:

      let myMockWindow: Window;

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

    Il me prendre un certain temps pour comprendre comment il fonctionne.

    Cette syntaxe est obsolète dans la version de Angular2

    OriginalL'auteur ulou