Angular testing of mat-checkbox correctly

Question

I'm wondering what is the correct way to test about the box checked and binded value are changed?

This is my HTML

     <div>
      <mat-checkbox class="col-md-9 text-right" id="checkid" name="checkid"
                    [checked]="this.isChecked"
                    (change)="this.isChecked = !isChecked">
        CheckBoxLabel
      </mat-checkbox>
    </div>

Then I tested by

const checkboxElem = fixture.debugElement.query(By.css('mat-checkbox')).nativeElement;
expect(checkboxElem.checked).toBeFalsy(); //pass
expect(comp.isChecked).toBeFalsy(); //pass
checkboxElem.click();
fixture.detectChanges();
expect(checkboxElem.checked).toBeTruthy(); //fail
expect(comp.isChecked).toBeTruthy(); //fail

The second expect always fails because the checkboxElem.checked=false all the time. I searched around 5 posts about the issue and have tried the following ways but none of those works:

Made this test async and add whenStable(), same result
Use the query By id, same result
Put the text in label and defined element by fixture.debugElement.query(By.css('mat-checkbox label')).nativeElement, same result

In the debug mode, I cannot see the box of checkbox but only the label. I'm not sure how does jasmine click that element exactly.

AliF50 · Accepted Answer · 2021-06-04 03:12:46Z

2

Do you have MatCheckboxModule imported in your imports array of TestBed.configureTestingModule? I would import it to render the checkbox and that way you won't only see the label. Doing this a lone might fix it.

If that doesn't fix it, I would still have the import in the imports array and I would do triggerEventHandler.

const checkboxElem = fixture.debugElement.query(By.css('mat-checkbox'));
expect(checkboxElem.checked).toBeFalsy(); //pass
expect(comp.isChecked).toBeFalsy(); //pass
checkboxElem.triggerEventHandler('change', { }); // change this line
fixture.detectChanges();
// this bottom line will always fail because checkboxElem is now stale, 
// you need to grab a new reference
// expect(checkboxElem.checked).toBeTruthy(); //fail
const newCheckboxElem = fixture.debugElement.query(By.css('mat-checkbox')).nativeElement;
expect(newCheckboxElem.checked).toBeTruthy();
expect(comp.isChecked).toBeTruthy(); //fail

Learn more about triggerEventHandler here.

edited Jun 4, 2021 at 3:12

answered Apr 14, 2021 at 18:12

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

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

2 Comments

Y.Y Over a year ago

Thank you for the quick reply, and your link is very helpful! But I imports the MatCheckModule and tried to use triggerEventHandler, but got the error: TypeError: checkboxElem.triggerEventHandler is not a function.

AliF50 Over a year ago

Oops, I think it should have been fixture.debugElement.query(By.css('mat-checkbox')) (no nativeElement, first line changed). I have edited my answer.

Josef · Accepted Answer · 2021-06-05 08:38:51Z

2

In the end I tried this and it works. Using a dispatchEvent allows clicking the checkbox and the checked status became true. This is one of the suggestions in @AliF50 's triggerEventHandler link.

const checkboxElem = fixture.debugElement.query(By.css('mat-checkbox')).nativeElement;
expect(checkboxElem.checked).toBeFalsy();

checkboxElem.dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(checkboxElem.checked).toBeTruthy();

edited Jun 5, 2021 at 8:38

Josef

3,6622 gold badges26 silver badges27 bronze badges

answered Jun 4, 2021 at 2:36

Y.Y

611 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular testing of mat-checkbox correctly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related