Angular2单元测试 - 在MdCheckbox中的更改事件不会触发

Question

我有一个复选框，其中有一个（更改）函数，它将变量'isSelected'设置为更改函数的event.checked值。现在我试图在this question on 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(); 
    }) 

（所以测试RN的结果是，它失败，因为intentChecked是不按预期调用）。

谢谢！

Answer 1

我可以为您提供两种选择：内部label元素

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 Example

2）触发click事件

Plunker Example

当我们想检查intentChecked方法被调用，我们需要窥探在这两种情况下这种方法。