38

次のコードを使用してngOnChanges、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));
    });
});

残念ながら、Expected spy ngOnChanges to have been called.この例では HTML 要素の内容を確認できることを知っているというメッセージでテストが失敗しますが、ngOnChanes ライフサイクル フック内でテストする必要があるコードがいくつかあるため、それは解決策ではありません。testComponent.ngOnChanges({someMockData});また、テストを直接呼び出したくありません。

TestComponent.value呼び出されるようにテストから設定するにはどうすればよいngOnChangesですか?

4

3 に答える 3