kendo-grid 不会在规范测试中创建行答案

【问题标题】：kendo-grid doesn't create rows in spec testkendo-grid 不会在规范测试中创建行
【发布时间】：2021-12-29 21:33:39
【问题描述】：

我正在编写一个角度规格测试来测试一个使用剑道网格的组件。我的组件获取数据列表作为输入，kendo-grid 的数据源是一个 get 函数，用于构建要在 kendo-grid 中使用的数据。在我的规范测试中，除非我为剑道网格定义静态数据源，否则它不会显示任何行。

这是我的 kendo-grid 元素的开始标签：

<kendo-grid
  #grid
  [data]=gridView
  scrollable="virtual"
  id="shipmentGrid"
  [sortable]="{allowUnsort: false, mode:'single'}"
  [sort]="sort"
  [resizable]=true
  style="width:100%;"
  (sortChange)="sortChange($event)"
  (pageChange)="pageChange($event)"
  [skip]="skip"
  [style]="gridHeightStyle"
  [rowHeight]="35"
  [pageSize]="pageSize"
>

这是我的 component.ts 中的 get gridView 函数，它返回 kendo-grid 的数据：

@Input() public shipments: Shipment[] = [];

get gridView(): GridDataResult {
    return {
      data: this.shipments.slice(this.skip, this.skip + this.pageSize),
      total: this.shipments.length
    };
  }

当我像上面那样设置我的 kendo-grid 数据时，规范测试不会创建任何行，而是显示 kendoGridNoRecordsTemplate 的行。

但是当我将 kendo-grid 数据源设置为某个恒定值时，它会起作用：

<kendo-grid
  #grid
  [data]=staticList
  scrollable="virtual"
  id="shipmentGrid"
  [sortable]="{allowUnsort: false, mode:'single'}"
  [sort]="sort"
  [resizable]=true
  style="width:100%;"
  (sortChange)="sortChange($event)"
  (pageChange)="pageChange($event)"
  [skip]="skip"
  [style]="gridHeightStyle"
  [rowHeight]="35"
  [pageSize]="pageSize"
>

staticList = {
   data: [{shipmentDate: new Date(), shipmentQuantity: 5}],
   total: 1
}

如何使用@input shipping 和 get gridView() 函数让我的规范测试正常工作？这几乎就像我在测试期间设置输入货件数组时已经创建了空网格，并且它永远不会使用我的新货件列表重新创建。我没有放置我的个人列，因为网格在现实生活中正确创建，只是当我测试组件时，kendo-grid 没有使用我在测试中创建的发货数组创建它的行。

【问题讨论】：

您是否在TestBed.createComponent(...) 之后的第一个fixture.detectChanges() 之前定义shipments。第一个fixture.detectChanges() 是在调用ngOnInit 时，我认为应该在此调用之前定义shipments。
我在每个测试中使用不同的值设置出货数组，所以是的，这就是问题所在。将其设置在“BeforeEach”部分可以正确构建网格。但现在我必须在每次测试中使用相同的出货数据。有什么方法可以在每个测试中使用不同的数据吗？
也许尝试更改出货数组，然后调用fixture.detectChanges()。我希望这会奏效。
@AliF50 似乎有一次我第一次调用 fixture.detectChanges() 是在 ngOnInit 运行时，然后再次调用它，然后再调用它就没有用了。因此，在设置每个单独的测试之前，我不会调用它。所以我在每个测试中运行一次，而不是在 beforeEach()
是的，第一个fixture.detectChanges() 调用ngOnInit。后续的fixture.detectChanges() 只是更新 HTML 但不会调用ngOnInit。要再次拨打ngOnInit，请拨打component.ngOnInit()。

标签： angular jasmine kendo-grid

【解决方案1】：

我的问题是我在每次测试中都设置了发货数据，但我已经调用了 fixture.detectChanges();在我的测试套件的 beforeEach() 部分中...移动 fixture.detectChanges();在设置我的数据后从 beforeEach() 设置调用并进入每个单独的测试解决了我的问题。

【讨论】：