Как проверить привязку циновки-флажка в Angular?

Question

У меня есть приложение Angular 6, и я хотел бы проверить, работает ли привязка mat-checkbox. У меня есть этот шаблон:

<div style="text-align:center">
  <mat-checkbox id="singleCheckBox" [(ngModel)]="isChecked">Check me!</mat-checkbox>
</div>

и этот код:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isChecked: boolean;
}

Я проверяю это с помощью этого кода:

import { TestBed, async, tick, fakeAsync } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material';
import { By } from '@angular/platform-browser';

describe('AppComponent', () => {
beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [
        AppComponent
    ],
    imports: [
        FormsModule,
        MatCheckboxModule,
    ],
    }).compileComponents();
}));

it('should update the property if the checkbox is clicked (using whenStable)', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    const checkBoxElement: HTMLElement = fixture.debugElement.query(By.css('#singleCheckBox')).nativeElement;
    checkBoxElement.click();
    fixture.detectChanges();

    fixture.whenStable().then(() => {
        expect(compiled.isChecked).toBe(true);
    });
}));

it('should update the property if the checkbox is clicked (using fakeAsync)', fakeAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    const checkBoxElement: HTMLElement = fixture.debugElement.query(By.css('#singleCheckBox')).nativeElement;
    checkBoxElement.click();
    tick();
    fixture.detectChanges();
    expect(compiled.isChecked).toBe(true);
}));
});

Я ожидаю, что тесты пройдут, но оба не пройдут с сообщением «Ожидается, что неопределенное значение будет истинным».

Что я не так делаю?

Заранее спасибо!

Answer 1

Кажется, ручка находится в ярлыке флажка:

const checkBoxElement: HTMLElement = fixture.debugElement.query(By.css('#singleCheckBox label')).nativeElement;

Источник: Угловой материал 2 - событие изменения триггера в md-флажке в модульном тесте