Why checkbox checked property doesn't change after detectChanges()

Question

I try to change checkbox checked property by changing model but it doesn't work. I cannot understand this behavior.

Template:

<input type="checkbox" [(ngModel)]="model"/>

Testing Code:

    it('should be checked after click on unchecked checkbox', () => {
        const checkbox: HTMLInputElement = fixture.nativeElement.querySelector('input');

        component.model = true;
        fixture.detectChanges();
        expect(checkbox.checked).toBeTruthy();
    });

Full code: https://stackblitz.com/edit/angular-testing-checkbox?file=app/app.component.spec.ts

Ethan Vu · Accepted Answer · 2021-07-27 02:10:38Z

3

Because angular change detection is asynchronous. Your expect() statement is executed before detectChanges(). Use angular testing async() function for this case:

   it('should be checked after click on unchecked checkbox', async( () => {
        const checkbox: HTMLInputElement = fixture.nativeElement.querySelector('input');    
        component.model = true;
        fixture.detectChanges();    
        fixture.whenStable().then(()=> {
          expect(checkbox.checked).toBeTruthy();
        })   
    }));

edited Jul 27, 2021 at 2:10

answered Nov 12, 2019 at 12:37

Ethan Vu

2,9971 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

uminder · Accepted Answer · 2019-11-12 12:57:13Z

1

You could use fixture.whenStable together with the done function to synchronize the asynchronous change detection cycle with the expect.

it('should be checked after click on unchecked checkbox', (done) => {
    const checkbox: HTMLInputElement = fixture.nativeElement.querySelector('input');

    component.model = true;
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(checkbox.checked).toBe(true);
      done();
    });
});

edited Nov 12, 2019 at 12:57

answered Nov 12, 2019 at 12:43

uminder

26.4k6 gold badges45 silver badges91 bronze badges

Collectives™ on Stack Overflow

Why checkbox checked property doesn't change after detectChanges()

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related