Question

我有一个复选框，它有一个（更改）功能，用于设置变量＆＃39; isSelected＆＃39;到change.checked变更函数的值。现在我尝试在this question on stackoverflow.的帮助下测试它。但是，我觉得（更改）事件没有被触发，因为＆＃39; isSelected＆＃39;不会改变。我还尝试在（更改）之后触发的函数上使用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）在conversation: { id: <id> }元素

上触发change事件

md-checkbox

<强> Plunker Example

2）在内部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(); })元素上触发click事件

label

<强> Plunker Example

由于我们想检查是否调用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(); })方法，我们需要在这两种情况下监视此方法。

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

1 个答案: