Angular Jasmine Karmaで、html部分のテストカバレッジも集計できる？
解決したいこと
Angular + Jasmine + Karmaを使ってテストを書こうとしています。
ng test --code-coverageでTypeScriptコンポーネントのカバレッジは測定できると思うのですが、
HTMLテンプレートでもngIf等でロジックが発生している箇所のテストを実施しカバレッジを測定したいと思いっています。
そのようなことは可能でしょうか？
該当するソースコード
html
<div>
<div *ngIf="isShow" id="hoge">
hoge
</div>
</div>
テストコード
it('isShow == trueの場合、hogeが表示されること', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.componentInstance.isShow = true;
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
const target = compiled.querySelector('#hoge');
expect(target).not.toBeNull();
});
it('isShow == falseの場合、hogeが表示されないこと', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.componentInstance.isShow = false;
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
const target = compiled.querySelector('#hoge');
expect(target).toBeNull();
});
上記のテストを実行した場合と実行しない場合でカバレッジレポートの結果が変わってほしいです。
自分で試したこと
軽く検索やChatGPTに質問等してみましたが、参考になりそうなものは出てきませんでした。
Angularは初心者なので、使える検索ワードなどを見落としているかもしれません。
0