question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug(testing) ngOnChanges not called for component initialized via TestComponentBuilder

See original GitHub issue

I’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:closed
  • Created 7 years ago
  • Reactions:35
  • Comments:23 (4 by maintainers)

github_iconTop GitHub Comments

21reactions
seanharr11commented, Aug 21, 2017

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 the ngOnChanges() hook?

19reactions
mmmichlcommented, Feb 17, 2017

I would actually expect that fixture.detectChanges(); will trigger the ngOnChange 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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found