Testing ngOnChanges lifecycle hook in Angular 2

Question

Given the following code I try to test the ngOnChanges lifecycle hook of 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));
    });
});

Unfortunately the test fails with the message Expected spy ngOnChanges to have been called. I know that I could just check the contents of the HTML Element in this example, but I have some code that needs to be tested inside of the ngOnChanes lifecycle hook, so thats not a solution for me. I also don't want to call testComponent.ngOnChanges({someMockData}); in the test directly.

How can I set the TestComponent.value from a test so that ngOnChanges is called?

Katakana

I don't think you should do test to angular, its on angular team. you just need find any why to test your business codes other than the framework itself. – Reciprocal

I want to test my business code which is inside the ngOnChanges function – Katakana

if you need do e2e testing, maybe http://www.protractortest.org helps – Reciprocal

This is completely valid scenario. There is an issue about it on Github – Virgilio

Being as Angular ignored that github issue for 4 years then a bot automatically closed it without an option to re-open, this isn't getting fixed. – Knitwear

Answer 1

Guess I'm a little late to the party, However this may be useful to some one in the future.

There have been a few changes to testing since RC 5 of angular has been released. However the main issue over here is ngOnChanges is not called when inputs are set programmatically. See this for more info . Basically the OnChanges hook is triggered when inputs are passed via the view only.

The solution to this would be to have host component which would be the parent of the test component and pass inputs to through the host component's template.

Here is the complete working code :

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();
    })


});

Schiffman

Is there another solution available today? I don't want to write a TestComponent for all my Components... :( – Martinmas

Well I coudn't find one so far :( . Infact there was an issue raised on this very topic : github.com/angular/angular/issues/6235. Read pkozlowski-opensource's comments on this – Schiffman

if you want specific change : component.ngOnChanges({ 'key': new SimpleChange(false, true) }) – Frizzell

Excellent info, you saved me a bunch of time debugging. thanks – Umbilicate

@YoavSchniederman I wish I could upvote this multiple times. For my testing purposes this is much cleaner than using TestHostComponent – Sava

I have some functions in my component along with ngOnChanges(), how do I test the functions??? with test host component I'm only able to access variables not functions – Aurum

I had to call fixture.detectChanges(); before const component = hostComponent.testComponent – Inhibitor

Answer 2

You also have an option to call ngOnChanges hook manually and pass desired changes object there. But this doesn't set the component properties, only call change logic.

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);

Be aware that this approach will work fine to test the logic inside ngOnChanges, but it will not test that the @Input decorators are properly set.

Quench

Works as a workaround. You should not forget to set the components value by hand (like component.prop1 = currentvalue) – Martinmas

you put your expectations after ngOnChanges call – Quench

Answer 3

In Angular 4, to manually trigger ngOnChanges() when testing, you'll have to manually make the call (as pointed out above), only you need to match the new call signature of 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),
});

Tosha

Nice answer for specifically watching an input – Conney

Answer 4

We are using this utility function:

import {OnChanges, SimpleChange, SimpleChanges} from '@angular/core';

export function updateComponentInputs<T extends OnChanges>(
    component: T,
    changes: Partial<T>
) {
    const simpleChanges: SimpleChanges = {};

    Object.keys(changes).forEach(changeKey => {
        component[changeKey] = changes[changeKey];
        simpleChanges[changeKey] = new SimpleChange(
            null,
            changes[changeKey],
            false
        );
    });
    component.ngOnChanges(simpleChanges);
}

You would use it like this:

testComponent.updateComponentInputs({value: 'test'});

This sets testComponent.value to 'test', and also calls ngOnChanges with the appropriate change event.

Training