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

Question

我不确定为什么更改事件不会触发，因此不会触发我为更改事件注册的功能。

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

以下是我正在谈论的内容的演示......正如您从日志中看到的那样，???永远不会被调用： https://stackblitz.com/edit/angular-material-slide-toggle-test-utmbmy?file=app%2Fhello.component.spec.ts

粗略地说，这是我的代码......

component.html：

toggle

component.ts：

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

在我的规格中：

...
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，然后将＆＃39;放在＆＃39;之后。代码分为tick和fixture.whenStable()。

我在fixture.whenRenderingDone() NoopAnimationsModule中有一个TestBed。

Answer 1

您的component.html

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

您可以在组件中检查

    event.checked = true || false;

Answer 2

使用第三方组件时，您应该信任它们来处理事件。但是，您可以在triggereventhandler期间使用spyOn来触发事件。{/ p>

组件

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

Answer 3

通过css memmove进行选择完成了user1902183所提到的技巧