2016-03-23 16 views
2

ブール値を切り替えるとドロップダウンを確認しようとしています。 ブール値は、コンポーネントAngular2テスト - 変更を検出しない

@Component({ 
    selector: 'dropdown', 
    directives: [NgClass], 
    template: ` 
     <div [ngClass]="{open: open}"> 
     </div> 
    `, 
}) 

export class DropdownComponent { 
    @Input('open') open: boolean = false; 
} 

とテスト

it('should open', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { 
    return tcb.createAsync(DropdownComponent) 
    .then(fixture => { 
     let el = fixture.nativeElement; 
     let comp: DropdownComponent = fixture.componentInstance; 

     expect(el.className).toEqual(''); 

     comp.open = true; 
     fixture.detectChanges(); 
     expect(el.className).toEqual('open') 
    }); 
})); 

に入力されて、私は別の何かを推測していますブールは@Inputときに行う必要がありますか?

答えて

4

<div [ngClass]="{open: open}">にはクラスopenを設定していますが、DropdownComponentにチェックを入れています。それは同じではありません。このような

何かがあなたが、たとえばもHow do I trigger a ngModel model update in an Angular 2 unit test?

var div = fixture.nativeElement.querySelector('div'); 
expect(div.className).toEqual('open'); 

または

var div = fixture.debugElement.query(By.css('div')); 
expect(div.className).toEqual('open'); 

を参照してくださいやりたいはずです。

+0

私はconsole.logに "el"とそれはdivだった。最初からnativeElementは何ですか?コンポーネントの上にあるコンテナですか? – Cuel

+1

コンポーネントのセレクタである 'dropdown'にする必要があります。要素の子は 'div'でなければなりません。おそらく 'TestComponentBuilder'はあなたのコンポーネントのための適切なタグを作成しません。それを詳しく調べなかった。 –

関連する問題