条件を持つhtml divの単体テストを書いてい*ngIf
ます。
<div *ngIf="clientSearchResults$ | async as searchResults" class = 'fgf' #datalist id="mydata" >
<app-client-list id="clientDataTable1" class="clientDataTable dataTable" [clients]='searchResults'></app-client-list>
</div>
この条件は、 ngrxストアngIf
からデータを受信したときに true になります。以下は、このデータを入力したコンポーネント コードです。
searchData(client: Client) {
//// some conditions
this._clientService.getClientList()
.subscribe(data => {
const filteredData = this.filterData(data, client);
this.isDataFound = filteredData !== null && filteredData.length > 0;
this.testbool = true;
/// In this line, my div got the data and using async condition, we
/// fill the div element.
this.store.dispatch(new SetClientSearchResultsAction(filteredData));
});
}
さて、これの単体テストケースを書くとき。
it('should search the data with valid client passed from UI', async(() => {
let debugFixture: DebugElement = fixture.debugElement;
let htmlElement: HTMLElement = debugFixture.nativeElement;
let clientListGrid = htmlElement.getElementsByClassName('fgf');
let testbool= htmlElement.getElementsByClassName('testbool');
spyOn(component, 'searchData').and.callThrough();
spyOn(component, 'filterData').and.returnValue(CLIENT_OBJECT);
spyOn(clientService, 'getClientList').and.callThrough();
console.log("=========before======="+ clientListGrid.length);
component.searchData(validClient);
component.clientSearchResults$ = store.select('searchResults');
fixture.detectChanges();
debugFixture = fixture.debugElement;
htmlElement = debugFixture.nativeElement;
clientListGrid = htmlElement.getElementsByClassName('fgf');
console.log("=========after ======="+ clientListGrid.length);
expect(component.searchData).toHaveBeenCalled();
}));
問題は、コンソールで、関数を呼び出す前に長さを 0 として取得し、関数を呼び出した後も長さを 0 として取得していることです。ストアからデータを受信したときは 1 である必要があります。そして、この *ngif 状態のせいで、*ngIf="clientSearchResults$ | async as searchResults"
データは DIV にロードされていますが、単体テストではこのことをテストできませんか?