Angular: проверка события изменения флажка

Question

Я пытаюсь протестировать компонент с флажком, но не могу найти решение для проверки события смены флажка.

Вот мой компонент для тестирования:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-useparent-checkbox',
    template: `
        <input
            type="checkbox"
            (change)="changeChecked($event.currentTarget.checked)">`
})
export class UseparentCheckboxComponent {

    @Output() toggle = new EventEmitter<boolean>();

    changeChecked(isChecked: boolean) {
        this.toggle.emit(isChecked);
    }
}

и вот код теста:

let comp: UseparentCheckboxComponent;
let fixture: ComponentFixture<UseparentCheckboxComponent>;

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [ FormsModule ],
        declarations: [
            UseparentCheckboxComponent
        ],
    });
    fixture = TestBed.createComponent(UseparentCheckboxComponent);
    comp = fixture.componentInstance;
});

it ('should send true when selected', fakeAsync(() => {

    const inputDe = fixture.debugElement.query(By.css('input'));
    const inputEl = inputDe.nativeElement;

    expect(inputEl.checked).toBeFalsy();

    let result;
    comp.toggle.subscribe((res: boolean) => {
        console.log('result', res);
        result = res;
    });

    inputDe.triggerEventHandler('change', new Event('change'));

    tick();
    expect(result).toBe(true);
}));

И у меня есть эта ошибка: «Невозможно прочитать свойство« флажок »нулевого значения».Похоже, что проблема в "$ event.currentTarget.checked": у моего нового события ('change') нет значения target или currentTarget.

Если я изменил событие на click, у меня возникла та же проблема.Я мог бы изменить свой код компонента, чтобы получить значение флажка не из события, а с помощью viewChild или чего-то подобного, но я думаю, что текущий код лучше.

У кого-нибудь есть решение?спасибо!

Answer 1

Проверьте нижеприведенный код, это поможет ..

it ('should send true when selected', fakeAsync(() => {

const compiled = fixture.debugElement.nativeElement;
const elem = compiled.querySelector('#revert-project');

expect(elem.checked).toBeFalsy();
elem.change(); //or you can use click();
expect(elem.checked).toBe(true);
}));