ngModelChange not triggered for checkbox input when clicked in unit test

[oferh]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] 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
Using a component that has a checkbox input element:

@Component({
  selector: 'test-component',
  template: `<form>
  <input name="my-checkbox" type="checkbox" [ngModel]="isChecked" (ngModelChange)="onCheckboxChange($event)">
  </form>`,
})
export class TestComponent {
  public isChecked = false;
  
  public onCheckboxChange(isChecked: boolean) {
    console.log("isChecked", isChecked);
    this.isChecked = isChecked;
  }
}

In my unit test I'm calling click on the input:

     let inputEl = fixture.debugElement.query(By.css("input")).nativeElement;
     inputEl.click();

but ngModelChange is not triggered.
When running the app and clicking the checkbox the event is triggered the event is also triggered if the input is not inside a form.

Expected behavior
ngModelChange should be triggered during test and runtime.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/F3KdX82dSIL6wI9fF8Fd?p=preview

What is the motivation / use case for changing the behavior?
The behavior for test and runtime should be identical

Please tell us about your environment:

OS: OSX 10.12.5

• Angular version: 2.0.X

• Browser: all, tested chrome 58 and Safari 10.1.1

• Language: TypeScript 2.*

• Node (for AoT issues): node --version =

[alexzuza]

Your test could look like

  it('should be checked when clicked', fakeAsync(() => {
    let fixture = TestBed.createComponent(TestComponent);
    let component = fixture.componentInstance;
    fixture.detectChanges(); // initialize controls
    tick(); // wait registration controls

    let inputEl = fixture.debugElement.query(By.css("input")).nativeElement;
    inputEl.click();
    fixture.detectChanges();
    expect(component.isChecked).toBe(true);
  }));

http://plnkr.co/edit/gik3X33OMBZyJbhvvmb1?p=preview

Without it when you are calling click event the onChange method is not registered yet within CheckboxControlValueAccessor

[oferh]

@alexzuza thanks!

[kwa]

@alexzuza could you explain or link to an explanation of what

fixture.detectChanges(); // initialize controls
tick(); // wait registration controls

does?
What is happening behind the scenes?
(I spent considerable time by not having both of them in that particular order and I cannot find much of documentation)

Perhaps a good answer:
https://stackoverflow.com/questions/46342594/fakeasync-tick-async-whenstable-vs-detectchanges

Not read this but seems to have details
https://blog.angularindepth.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}