Angular2 单元测试 - 未触发 MdCheckbox 中的更改事件

Question

我有一个复选框，它有一个（更改）函数，它将变量 'isSelected' 设置为更改函数的 event.checked 值。现在我尝试在的帮助下对其进行测试，但是，我觉得 (change) 事件没有被触发，因为 'isSelected' 没有改变。我还尝试在（更改）之后触发的函数上使用 spyOn，但这仍然 returns 该函数未被调用（当前测试）。也许有人知道如何检测变化以及我做错了什么。这是我的代码：

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

@Component({
  selector: 'app-intents-checkbox',
  templateUrl: 'intents-checkbox.component.html',
  styleUrls: ['intents-checkbox.component.scss']
})
export class IntentsCheckboxComponent implements OnChanges {

  @Input() intentId;

  constructor() { }

  public isSelected = false;


  intentChecked(event, intentId): void {
    this.isSelected = event.checked;
  }
}

html:

<md-checkbox [checked]="isSelected"
             (change)="intentChecked($event, intentId)"
             class="project-checkbox">
</md-checkbox>

到目前为止我的测试：

it('should call intentChecked on change checkbox', () => {
    let de = fixture.debugElement.query(By.css('.project-checkbox'));
    de.triggerEventHandler('click', {});
    fixture.detectChanges();
    expect(component.intentChecked).toHaveBeenCalled();
  })

（因此测试rn的结果是失败，因为未按预期调用intentChecked）。

谢谢！

Answer 1

我可以给你两个选择：

1) 在 md-checkbox 元素上触发 change 事件

it('should call intentChecked on change checkbox', () => {
  let de = fixture.debugElement.query(By.css('.project-checkbox'));
  spyOn(component, 'intentChecked');
  de.triggerEventHandler('change', {});

  expect(component.intentChecked).toHaveBeenCalled();
})

Plunker Example

2) 在内部 label 元素上触发 click 事件

it('should call intentChecked on change checkbox', () => {
  let de = fixture.debugElement.query(By.css('.project-checkbox label'));
  let el = de.nativeElement;

  spyOn(component, 'intentChecked');

  el.click();

  expect(component.intentChecked).toHaveBeenCalled();
})

Plunker Example

因为我们要检查是否调用了 intentChecked 方法，所以我们需要在这两种情况下监视此方法。

Angular2 单元测试 - 未触发 MdCheckbox 中的更改事件

Angular2 Unit Test - Change event in MdCheckbox is not triggered

unit-testing

typescript

angular-material2

angular