Testing ngOnChanges lifecycle hook in Angular 2

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?

Continue reading...