bug(testing) ngOnChanges not called for component initialized via TestComponentBuilder
See original GitHub issueI’m submitting a … (check one with “x”)
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
When creating a component via TestComponentBuilder the ngOnChanges-Callback is not executed. Having a component like this:
export class TimePickerComponent {
@Input("time") private timeString = "";
ngOnInit() {
console.log("init")
}
ngOnChanges(changes) {
console.log("changes");
//do some transformation on the timeString- inputbinding
}
}
...
}
And creating the component in the test like this:
it('display passed time in input fields', (done) => {
tcb
.createAsync(TimePickerComponent)
.then(fixture => {
let timePicker: TimePickerComponent = fixture.componentInstance;
(<any>timePicker).timeString = "11:20:23";
// timePicker.ngOnChanges(null); ->> needs to be called manually
fixture.detectChanges();
let hourInput = fixture.debugElement.query(By.css('#hours > input'));
expect(hourInput.nativeElement.value).toBe("11");
done();
});
});
the ngOnChanges callback of the component gets never called. (ngOnInit gets called by the way). To fix the test it is currently needed to call ngOnChanges manually…
Expected/desired behavior
ngOnChanges should be called while initializing the component
What is the motivation / use case for changing the behavior?
Being able to test components that use ngOnChanges callback without having to call the method manually
Please tell us about your environment:
- Angular version: 2.0.0-rc.4
- Browser: [all ]
- Language: [all]
Issue Analytics
- State:
- Created 7 years ago
- Reactions:35
- Comments:23 (4 by maintainers)
Top Results From Across the Web
ngOnChanges not called in Angular 4 unit test detectChanges()
The short answer to this question is that ngOnChanges doesn't get fired automatically during unit tests so I had to call it manually....
Read more >How to test ngOnChanges lifecycle hook in Angular application
Covering an Angular ngOnChanges lifecycle hook with tests. ... The hook should have been called, but not via TestBed.createComponent.
Read more >angular/angular - Gitter
I'm having some problems with unit-testing components. When my component has templateURL and styleUrls defined, i only see the 'test3' console log.
Read more >Testing Ngonchanges Lifecycle Hook In Angular 2 - ADocLib
Understand the different phases an Angular component goes through from being created ... does not trigger Method in legacy renderer that called ngOnChanges...
Read more >号外:Angular 4 正式版发布!! - 掘金
用 ng2 的孩子可以无缝升级到 ng4,没有什么太奇葩的 bug 的丢弃的特性, ... upgrade: component injectors should not link the module injector ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It burdensome and arguably impractical to create a dummy parent component just to have it pass a value via Input() to trigger
ngOnChanges()
. This especially true when unit testing.Why is it that
detectChanges()
cannot trigger thengOnChanges()
hook?I would actually expect that
fixture.detectChanges();
will trigger thengOnChange
callback as it anyways synchronises the state between the component and the view…In any case, this needs to be clarified in the docs as suggested by @StdVectorBool.