我编写了单元测试,并且通过了测试,我无法在chrome中将其显示为UI。当我运行npm test时,它将启动chrome,如图所示。我将模拟数据传递给显示表,但是不显示。我还传递了显示饼图所需的数据。也未显示。
测试
it(`should display the last pie chart`,()=>{
let spyOnOpenCloseMethod =
spyOn(component,'openCloseAll').and.callThrough();
let mockPie={
data:
{
products:[
{
"product": "xyx",
"total": "360"
}
],
Records:
[
{
"ActivationId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"LineItemQuantity": "500,000",
"StartDate": "2019-04-08 17:00:00",
"EndDate" : "2019-06-08 17:00:00",
"TotalUsed": "145.6",
"Used": "60",
"Products":[]
}
]
}
};
component.customerid = "XXX";
component.customername = "NAME";
component.reportdate = "2019-01-01";
component.startdate = "2019-01-01";
component.enddate = "2019-01-01";
component.products = mockPie['data']['products'];
component.records = mockPie['data']['Records'];
component.serverUsed = true;
fixture.detectChanges();
spyOn(component,"onDateRange");
let mainTab = fixture.debugElement.query(By.css('#tab_1'));
let mainTabToggle = mainTab.query(By.css('#th_1'));
let xx = mainTabToggle.query(By.css('.list-icon'));
let pieChart = fixture.debugElement.query(By.css('#chart2-svg_common'));
pieChart.nativeElement;//I see this to be empty no inner content
})
**HTML**
<tbody *ngIf="bOpenAll">
<ng-container *ngFor="let record of records; let i = index">
<tr>
<td id='tdProduct_{{0+1}}' style="width:10px">
<mat-icon (click)="openClose(i)" style="cursor: pointer;"
class="list-icon">{{openCloseIcon[i]}}</mat-icon>
</td>
<ng-container *ngFor="let header of headers">
<ng-container *ngIf="header[1] == 'LineItemQuantity' || header[1] ==
'TotalUsed' || header[1] == 'Used'; else second">
<td class="entriesRight">{{record[header[1]]}}</td>
</ng-container>
在上面的图片中,我想查看饼图和表格数据