データバインディングとパイプを持つ要素に対して、Angular2でジャスミン単位テストを書く方法

Question

私は決してジャスミンで単体テストを書いてHTML要素をテストしたわけではありません。あなたは、私が 'H1' と2 'H3' を持って見ることができるように

<div class="ui-g-4 patientName"> 
    <h1><b [innerText]="header.patient.name || na"></b>,</h1> 
    <div class="patientInfo"> 
     <h3><b [innerText]="header.patient.sex || na"></b></h3> 
     <h3><b [innerText]="(header.patient.dateOfBirth | date) || na"></b></h3> 
    </div> 
</div> 

：ここ

コードです。 patient.dateOfBirthでは、私はまた、日付のフィルタにパイプを使用します。

私が前に言ったように、私はこの種のテストを書いたことは一度もなく、どこから始めるべきか分からない。あなたがリソースを知っているなら、リンクや例は自由に投稿できるので、私はそれについてもっと読むことができます。あなたが説明を「説明」と「それ（はず...」の書き込みのように感じる場合は、私は同様にそれをいただければと思います。

おかげで、割り当てる、プログラムでコンポーネントを作成する必要があり、あなたのユニットの仕様で

Answer 1

をあなたの患者オブジェクトのプロパティに値、および結合がでキックされますので、検出の変更を開始する。

TestBed.createComponent()は、コンポーネントとネイティブのHTML要素の両方を参照しているオブジェクトComponentFixtureを返します。

経由あなたはコンポーネントのプロパティにアクセスし、特定のHTML eleコンポーネントテンプレート内のdetectChanges()バインディングを起動した後

it('should display patient data ',() => {
  

    let fixture = TestBed.createComponent(PatientComponent);
 
    
   
    let element = fixture.nativeElement;   // DOM element
   
    let component = fixture.componentInstance; // Angular component
  
 

    component.header.patient = {name: "Mary", ...}; // assign values to the patient obj 

    fixture.detectChanges(); // trigger change detection to update the DOM element
 
 
  

    expect(element.querySelector('h1').innerHTML).toBe('Mary');
  
    ... 
    }); 

が適用され、パイプはその変換を行います。ここでコンポーネントテストに関するドキュメントを読む：https://angular.io/docs/ts/latest/guide/testing.html