我无法在业力调试器的单元测试中显示表和饼图的值

时间:2019-07-04 18:32:00

标签: unit-testing karma-jasmine

我编写了单元测试,并且通过了测试,我无法在chrome中将其显示为UI。当我运行npm test时,它将启动chrome,如图所示。enter image description here我将模拟数据传递给显示表,但是不显示。我还传递了显示饼图所需的数据。也未显示。

测试

 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>

在上面的图片中,我想查看饼图和表格数据

0 个答案:

没有答案