角度2のテスト

Question

私はコンポーネントを持っています。ヘッスの主な役割はラッパーです。

どのようなトラブルがありますか？

compileComponentsのコンポーネントを実行しているときには、プロパティがありませんタイトルです。私が思うようザッツはなぜ、コンソールに私が見誤り

質問です：私は、最初のプロパティをバインドし、compileComponentsメソッドを実行するにはどうすればよいですか？

コンポーネントテンプレート：

<div class="card"> 
    <div *ngIf="title" class="card-header clearfix"> 
     <h3 class="card-title">{{ title }}</h3> 
    </div> 
    <div class="card-body"> 
     <ng-content></ng-content> 
    </div> 
</div> 

は、セクションについて説明します。

describe('CardComponent',() => { 

    let comp: CardComponent; 
    let fixture: ComponentFixture<CardComponent>; 
    let titleEl: DebugElement; // the DebugElement with the welcome message 

    // async beforeEach 
    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ CardComponent ], 
     }).compileComponents(); // compile template and css 
    })); 

    // synchronous beforeEach 
    beforeEach(() => { 
     fixture = TestBed.createComponent(CardComponent); 
     comp = fixture.componentInstance; 
     titleEl = fixture.debugElement.query(By.css('.card-title')); 

     comp.title = "Greatest title"; 
     fixture.detectChanges(); // trigger initial data binding 
    }); 

    it('Card check title',() => { 
     expect(titleEl.nativeElement.textContent).toContain("Greatest title"); 
    }); 
}); 

Answer 1

あなたはそれも存在する前に、要素を取得しようとしているためです。 titleは、*ngIfの要素が表示されていると判断します。変更を検出した後に要素を取得しようとすると移動するだけです

beforeEach(() => { 
    fixture = TestBed.createComponent(CardComponent); 
    comp = fixture.componentInstance; 
    // titleEl = fixture.debugElement.query(By.css('.card-title')); 

    comp.title = 'Greatest title'; 
    fixture.detectChanges(); // trigger initial data binding 
    titleEl = fixture.debugElement.query(By.css('.card-title')); 
});