子コンポーネントのテンプレートは、親コンポーネントメソッドが呼び出されたときに変更されません。角単位テスト

Question

これは私にとっては役に立ちません。以下のPlunkrを動作させてください。

describe("trying a test",() => { 
    beforeEach(() => { 
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); 
    TestBed.configureTestingModule({ 
     declarations: [myCmp, ChildCmp] 
    }); 
    }); 

    it("test should work",() => { 
    const fixture = TestBed.createComponent(myCmp); 
    const div = fixture.debugElement.children[0]; 
    const childCmp = div.queryAll(By.directive(ChildCmp)); 

    const divEl = div.queryAll(By.css('div')); 

    divEl[0].triggerEventHandler('click', <Event>{}); 
    fixture.detectChanges(); 

    expect(childCmp[0].nativeElement.textContent).toBe("updated value"); 

    }); 

}); 

https://plnkr.co/edit/wWJMDi3ZFC6RTSvCw4HH?p=preview

Answer 1

これは、もはや私にとって問題ではありません。ほとんどの場合（以下で概要を説明しますが）、Plunkrを更新していませんが、親コンポーネントと子コンポーネントの両方が実際のアプリケーションコードで更新されます。

テンプレートで何かがクリックされたときに呼び出される、親コンポーネントのスパイリングメソッドで.and.callThrough（）を使用するだけです。単純なスパイではなく。

レンダリングされた子コンポーネントが更新されないという問題があります。これは私の他の質問です：Angular 2 unit testing: Make ngFor rendered, child components' templates change?