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

Question

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

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 方法，所以我们需要在这两种情况下监视此方法。