Тестовый пример для выдачи события при смене флажка

Question

Html:

<checkbox (change)="onChange()" [(ngModel)]="ngModel"> Checkbox </checkbox>

ц

ngModel: boolean;

@Output() checkboxEvent = new EventEmitter<any>();

onChange() {
this.checkboxEvent.emit(this.ngModel);
}

контрольный пример:

it('TC 3: should emit an event on change of checkbox', async(() => {
    spyOn(component.checkboxEvent, 'emit');
    component.onChange();
    const edlCheckbox = fixture.debugElement.query(By.css('checkbox ')).nativeElement;
    edlCheckbox.dispatchEvent(new Event('change'));
    fixture.detectChanges();
    expect(component.checkboxEvent ).toHaveBeenCalled();
    expect(component.checkboxEvent .emit).toHaveBeenCalledWith(true);
  }));

Ошибка:

Failed: <toHaveBeenCalled> : Expected a spy, but got EventEmitter(
{ _isScalar: false, observers: [  ], closed: false, 
isStopped: false, hasError: false, thrownError: null,
 __isAsync: false, emit: spy on emit }).
Usage: expect(<spyObj>).toHaveBeenCalled()

Answer 1

Вы можете сделать это проще с помощью функции обратного вызова:

                                                     // vvvv
it('TC 3: should emit an event on change of checkbox', (done) => {
                                         // vvvv
    component.checkboxEvent.subscribe(() => done());
    fixture.debugElement.query(By.css('checkbox ')).nativeElement.click()
}

При использовании функции done тест не пройден, если функция done не вызывается в течение 5 с (настраивается).

Примечание : для этого теста не требуется expect(), но Карма будет жаловаться, если вы выполните тест без вызова expect(). Тест пройдёт успешно, но вызовет предупреждение.

Answer 2

Вы должны попробовать это:

it('TC 3: should emit an event on change of checkbox', async(() => {
    spyOn(component.checkboxEvent, 'emit');
    spyOn(component, 'onChange');
    const edlCheckbox = fixture.debugElement.query(By.css('checkbox ')).nativeElement;
    edlCheckbox.click();
    fixture.detectChanges();

    expect(component.onChange).toHaveBeenCalled(); 
    expect(component.checkboxEvent.emit).toHaveBeenCalledWith(true);

  }));