Angular 2+: тестирование формы с мат-слайд-тумблером - событие изменения не сработает

Question

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

Я знаю, что это работает, когда я его запускаю, но не могу получитьэто в спецификации.

Вот демонстрация того, о чем я говорю ... Как вы можете видеть из журналов, toggle никогда не вызывается: https://stackblitz.com/edit/angular-material-slide-toggle-test-utmbmy?file=app%2Fhello.component.spec.ts

Примерновот мой код ...

component.html:

<mat-slide-toggle [checked]="useDefault" (change)="toggle($event)"></mat-slide-toggle>

component.ts:

...
toggle(event: MatSlideToggleChange) {
  console.log('Toggle fired');
  this.useDefault = event.checked;
}

В моих спецификациях:

it('should trigger toggle...', () => {
  const componentDebug = fixture.debugElement;
  const slider: MatSlideToggle = 
     componentDebug.query(By.css('form mat-slide-toggle')).componentInstance;

  console.log('before ' + slider.checked);
  slider.toggle();

  fixture.detectChanges();

  console.log('after ' + slider.checked);
  console.log('useDefault ' + component.useDefault);
});

В логе after выводится slider.checked, противоположное значению before.Тем не менее, component.useDefault остается прежним, и оператор ведения журнала в функции toggle никогда не вызывается, что означает, что он никогда не вызывал его.

Почему это происходит и как я могу это исправить?

Я попытался поместить все это в fakeAsync, используя tick, поместив код 'after' в fixture.whenStable() и fixture.whenRenderingDone().

У меня есть NoopAnimationsModule вTestBed х import.

Answer 1

При использовании сторонних компонентов вы должны доверять им для обработки события.Однако вы можете вызвать событие, используя triggereventhandler , а spyOn метод, который вы хотите вызвать.

Компонент

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

@Component({
    selector: 'hello',
    template: `
        <mat-slide-toggle
            [checked]="useDefault" (change)="toggle($event)"
        ></mat-slide-toggle>`
})
export class HelloComponent  {
    public useDefault = false;

    public toggle(event: MatSlideToggleChange) {
        console.log('toggle', event.checked);
        this.useDefault = event.checked;
    }
}

Test

it('should call change method on slide change', () => {
    const componentDebug = fixture.debugElement;
    const slider = componentDebug.query(By.directive(MatSlideToggle));
    spyOn(component, 'toggle'); // set your spy

    slider.triggerEventHandler('change', null); // triggerEventHandler

    expect(component.toggle).toHaveBeenCalled(); // event has been called
});

См. Прохождение теста на stackblitz: https://stackblitz.com/edit/angular-material-slide-toggle-test-spy-trigger-event?file=app/hello.component.spec.ts