web-dev-qa-db-ja.com

AngularでJasmineを使用して* ngIfディレクティブが使用されているときに要素が表示されるかどうかを単体テストする方法

Angular 6アプリを使用し、*ngIfディレクティブのブール結果のみに基づいて要素が表示されるかどうかを判断しようとするいくつかの単体テストを作成しています。

マークアップ：

<div class="header" *ngIf="show">
    <div>...</div>
</div>

スペックファイル：

it('should hide contents if show is false', () => {
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    expect(debugElement.query(By.css('.header')).nativeElement.style.hidden).toBe(true);
});

Divからhidden属性を取得できないようです。 angularは、*ngIfディレクティブを使用してDOMから要素を非表示にする別のアプローチを使用しますか？ nativeElementから別のプロパティを取得する必要がありますか？

ありがとう！

javascriptangularjasminekarma-jasmineangular-test
12
J-man

要素が非表示の場合、dom内にレンダリングされません。

確認してもいい

_expect(fixture.debugElement.query(By.css('.header'))).toBeUndefined();
_

[〜＃〜] edit [〜＃〜]：toBeNull()は上記の場合により良く機能します

_expect(fixture.debugElement.query(By.css('.header'))).toBeNull();
_

また、ボタン要素の取得中に構文エラーが発生します。 nativeElementは関数ではありません。

このように変更します：

_const button = fixture.debugElement.query(By.css('button')).nativeElement;
_
18
Amit Chigadani

コンポーネントが表示されているか、ngIfを使用していないかをテストするとき、要素（この場合はdebugElement.query(By.css('.header')).nativeElementを使用）を取得しようとします。真実であること、そうでなければ偽りであること。

このようなもの：

it('should hide contents if show is false', () => {
    // should be rendered initially
    expect(debugElement.query(By.css('.header')).nativeElement).toBeTruthy();
    //trigger change
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    // should not be rendered
    expect(debugElement.query(By.css('.header')).nativeElement).toBeFalsy();
});

また、 ComponentFixture#whenStable フィクスチャが次のように安定したことを検出します。

  it('should hide contents if show is false', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.whenStable().then(() => {
      // same test code here
    });
  });

こちらをご覧ください作業テストコンポーネント which このシナリオに似ています 。

[GitHubリポジトリ]を参照してください

5
lealceldeiro

*ngIf条件のテストケースを作成するには、toBeNull条件を使用します。

以下のコードで試してください、それは私のために機能します。

expect(fixture.debugElement.query(By.css('.header'))).toBeNull();
1
Dharma Raju

NgIfを使用する場合、angularはノードをマークアップから完全に削除します。この要素が存在しないことを確認する必要があります。

ドキュメントによると：

ngIfは式を評価し、式がそれぞれ真実または偽である場合、thenまたはelseテンプレートをその場所にレンダリングします。

より正確には、レンダリングされないだけです

1
Drag13