2017-08-01 16 views
0

変更機能のevent.checked値に変数 'isSelected'を設定する(変更)機能を持つチェックボックスがあります。今、私はthis question on stackoverflow.の助けを借りてそれをテストしようとしましたが、 'isSelected'が変更されないので、(変更)イベントがトリガされないように感じます。私はまた、(変更)の後にトリガされる関数でspyOnを使用しようとしましたが、これはまだ関数が呼び出されていないことを返します(現在のテスト)。多分、誰かがその変化を検出する方法と私が間違っていることを知っています。ここに私のコードです:Angular2ユニットテスト - MdCheckboxの変更イベントがトリガーされない

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だったので、それが失敗したということです期待どおり呼び出されません)。

ありがとうございます!

答えて

2

私はあなたに二つの選択肢を提供することができます

1)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)内部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(); 
}) 
上のトリガ clickイベントでトリガ changeイベント

我々はintentChecked方法は、我々は両方のケースでは、この方法をスパイする必要があると呼ばれていたかどうかを確認したいと

Plunker Example

+0

ありがとうございました!私は私のエラーが表示されます:私はイベントハンドラをクリックして変更していないので、私は(変更)イベントがある場合は明らかに意味がありません!ありがとう! – threxx

関連する問題