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

Question

我有一个复选框,它有一个(更改)函数,它将变量'isSelected'设置为change函数的event.checked值.现在我尝试在stackoverflow上的这个问题的帮助下测试它.但是,我觉得(更改)事件没有被触发,因为'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();
  })

(因此测试的结果是它失败了,因为没有按预期调用intentChecked).

谢谢!

Answer 1

我可以为您提供两种选择:

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

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示例

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

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示例

由于我们想检查intentChecked方法是否被调用,我们需要在这两种情况下监视此方法.