Angular 2+：使用 mat-slide-toggle 测试表单 - 更改事件不会触发

Question

我不确定为什么 change 事件没有触发，因此没有触发我为 change 事件注册的函数。

我知道这在我运行时有效，但我无法在规范中得到它。

这是我正在谈论的内容的演示...正如您从日志中看到的那样，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;
}

在我的 spec.ts 中：

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，将“后”代码放入fixture.whenStable() 和fixture.whenRenderingDone()。

我在TestBed 的import 中有一个NoopAnimationsModule。

Answer 1

通过 css 'form mat-slide-toggle input' 选择实现了 user1902183 提到的技巧

Answer 2

你的组件.html

    <mat-slide-toggle (change)="onToggle($event)">Compare</mat-slide-toggle>

在你的组件中你可以检查

    event.checked = true || false;

Answer 3

使用第三方组件时，您应该信任它们来处理事件。但是，您可以使用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;
    }
}

测试

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