Les tests ngOnChanges cycle de vie du crochet Angulaire 2

Donné le code suivant j'essaie de tester l' ngOnChanges cycle de vie du crochet de Angular2:

import {
    it,
    inject,
    fdescribe,
    beforeEachProviders,
} from '@angular/core/testing';

import {TestComponentBuilder} from '@angular/compiler/testing';

import {Component, OnChanges, Input} from '@angular/core';

@Component({
    selector: 'test',
    template: `<p>{{value}}</p>`,
})
export class TestComponent implements OnChanges {
    @Input() value: string;

    ngOnChanges(changes: {}): any {
        //should be called
    }
}

fdescribe('TestComponent', () => {
    let tcb: TestComponentBuilder;

    beforeEachProviders(() => [
        TestComponentBuilder,
        TestComponent,
    ]);

    beforeEach(inject([TestComponentBuilder], _tcb => {
        tcb = _tcb;
    }));

    it('should call ngOnChanges', done => {
        tcb.createAsync(TestComponent).then(fixture => {
            let testComponent: TestComponent = fixture.componentInstance;

            spyOn(testComponent, 'ngOnChanges').and.callThrough();

            testComponent.value = 'Test';
            fixture.detectChanges();

            expect(testComponent.ngOnChanges).toHaveBeenCalled();
            done();
        }).catch(e => done.fail(e));
    });
});

Malheureusement, le test échoue avec le message d' Expected spy ngOnChanges to have been called. je sais que je pourrais juste vérifier le contenu de l'Élément HTML dans cet exemple, mais j'ai un code qui doit être testé à l'intérieur de la ngOnChanes cycle de vie du crochet, donc c'est pas une solution pour moi. Aussi, je ne veux pas l'appeler testComponent.ngOnChanges({someMockData}); dans le test directement.

Comment puis-je régler le TestComponent.value à partir d'un test de sorte que ngOnChanges est appelé?

  • Je ne pense pas que vous devriez le faire tester à anguleuses, ses angulaire de l'équipe. vous avez juste besoin de trouver pourquoi, pour tester votre entreprise des codes autres que le cadre lui-même.
  • Je veux tester mon code de commerce qui est à l'intérieur de la ngOnChanges fonction
  • si vous avez besoin de faire e2e tests, peut-être http://www.protractortest.org aide
  • C'est tout à fait valable scénario. Il y a un problème à ce sujet sur Github
InformationsquelleAutor user1448982 | 2016-05-24
  1. 49

    Suppose que je suis un peu en retard à la fête, mais cela peut être utile à quelqu'un dans le futur.

    Il y a eu quelques changements à l'essai depuis RC 5 angulaire a été libéré. Cependant, le principal problème ici est ngOnChanges n'est pas appelé lorsque les entrées sont définies par programmation. Voir ce pour plus d'info . Fondamentalement, la OnChanges crochet est déclenchée lorsque les entrées sont passées par l'intermédiaire de la vue seulement.

    La solution ce serait d'avoir du composant hôte qui serait le parent du composant de test et des pass entrées à travers le composant hôte du modèle.

    Voici la code de travail :

    import {Component, OnChanges, Input, ViewChild} from '@angular/core';
import { TestBed }      from '@angular/core/testing';

@Component({
    selector: 'test',
    template: `<p>{{value}}</p>`,
})
export class TestComponent implements OnChanges {
    @Input() value: string;

    ngOnChanges(changes: {}): any {
        //should be called
    }
}
/* In the host component's template we will pass the inputs to the actual
 * component to test, that is TestComponent in this case
 */
@Component({
    selector : `test-host-component`,
    template :
    `<div><test [value]="valueFromHost"></test></div>`
})
export class TestHostComponent {
    @ViewChild(TestComponent) /* using viewChild we get access to the TestComponent which is a child of TestHostComponent */
    public testComponent: any;
    public valueFromHost: string; /* this is the variable which is passed as input to the TestComponent */
}

describe('TestComponent', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({declarations: [TestComponent,TestHostComponent]}); /* We declare both the components as part of the testing module */
    });

    it('should call ngOnChanges', ()=> {
        const fixture = TestBed.createComponent(TestHostComponent);
        const hostComponent = fixture.componentInstance;
        hostComponent.valueFromHost = 'Test';
        const component = hostComponent.testComponent;
        spyOn(component, 'ngOnChanges').and.callThrough();
        fixture.detectChanges();
        expect(component.ngOnChanges).toHaveBeenCalled();
    })


});
    • Est-il une autre solution disponible aujourd'hui? Je ne veux pas écrire un TestComponent pour tous mes Composants... 🙁
    • Eh bien, je coudn't en trouver un si loin 🙁 . Enfait il y a un problème soulevé sur ce sujet : github.com/angular/angular/issues/6235. Lire pkozlowski-opensource, les commentaires de ce
    • si vous voulez des changements spécifiques : le composant.ngOnChanges ({"key": nouveau SimpleChange(false, true) })
    • Excellente info, vous m'avez sauvé beaucoup de temps de débogage. merci
    InformationsquelleAutor Kiran Yallabandi
  2. 12

    Vous avez également la possibilité d'appeler ngOnChanges crochet manuellement et réussir les changements souhaités objet. Mais ce n'est pas de définir les propriétés du composant, seulement appeler logique de changement. 

    const previousValue = moment('2016-03-01T01:00:00Z');
const currentValue = moment('2016-02-28T01:00:00Z');

const changesObj: SimpleChanges = {
  prop1: new SimpleChange(previousValue, currentValue)
};

component.ngOnChanges(changesObj);

    Être conscient que cette approche fonctionne bien pour tester la logique à l'intérieur de ngOnChanges, mais il ne sera pas le test de la @Input décorateurs sont correctement définis.

    • Fonctionne comme une solution de contournement. Vous ne devez pas oublier de définir les composantes de la valeur par part (comme composant.prop1 = currentvalue)
    • ok, maintenant, comment vous l'aide de l'attendre() ???
    • vous mettez vos attentes après ngOnChanges appel
    InformationsquelleAutor s-f
  3. 8

    Angulaire 4, pour déclencher manuellement ngOnChanges() lors de l'essai, vous aurez à effectuer manuellement à l'appel (comme l'a souligné ci-dessus), seulement vous avez besoin pour correspondre à la nouvel appel de la signature de SimpleChange():

    let prev_value = "old";
let new_value = "new";
let is_first_change: boolean = false;

component.ngOnChanges({prop1: new SimpleChange(prev_value, new_value, is_first_change});
    • Belle réponse spécifiquement pour regarder une entrée
    InformationsquelleAutor The Aelfinn