Я не могу показать значения таблицы и круговой диаграммы в модульном тесте в отладчике кармы

Question

Я написал модульный тест, и он прошел, я не могу отобразить его как пользовательский интерфейс в Chrome. Когда я запускаю тест npm, он запускает Chrome, как показано на рисунке. Я передаю фиктивные данныеотображать таблицу, но она не отображается.Я также передаю данные, необходимые для отображения круговой диаграммы.Это также не показано.

test

 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>

На рисунке выше, я хочу видеть круговую диаграмму и данные таблицы