Angular - 使用 PrimeNg 表进行 Jasmine 测试 - 无法验证单元测试中的行数

Question

我正在尝试为使用 PrimeNG 表的 Angular 组件创建单元测试。它按预期在浏览器内使用 ng serve 工作，但在 Jasmine 测试中我无法获取表格的渲染 HTML。 当我检查标记时，它只包含以下行:

<p-table class="testtable"><!--container--><!--container--></p-table>

我创建了一个仅包含静态数据的新组件来重现该问题:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
  <p-table class="testtable" [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</p-table>
  `
})
export class TestComponent implements OnInit {

  cars = [
    {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
    {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
    {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
    {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
    {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
    {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
    {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
    {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
    {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
    {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
];

  constructor() { }

  ngOnInit(): void {
  }
}

这是测试(“应该渲染表格”):

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from './test.component';
import { By } from '@angular/platform-browser';

describe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should render table", () => {
    debugger;
    const result = fixture.debugElement.queryAll(By.css(".testtable"));
    const markup = result[0].nativeNode.outerHTML;
    console.log(markup);

    //const tableEl = fixture.debugElement.query(By.css('div'));
    //const bodyRows = tableEl.query(By.css('.ui-table-tbody')).queryAll(By.css('tr'));
    //expect(bodyRows.length).toEqual(10);
  });
});

目前我正在使用 Angular 9.0.6 和 PrimeNG 9.0.0。

我已经尝试过其他不同的方法，例如在 createComponent 之后使用 compileComponent 或使用异步辅助函数进行测试，但一点运气都没有。此外，我在 PrimeFaces 论坛中提出了同样的问题，但一周后仍未得到回复。

非常感谢任何帮助!

Answer 1

您的规范缺少从 primeng 导入表模块。我认为这可能是问题所在。

请按如下方式更新规范

import {TableModule} from 'primeng/table';

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent
      ],
      imports:[TableModule]
    }).compileComponents();
  }));

如果不能用请告诉我