如何测试网格 API 是否可用于 Angular 中的 ag-grid？答案

【问题标题】：How to test the grid API is available for ag-grid in Angular?如何测试网格 API 是否可用于 Angular 中的 ag-grid？
【发布时间】：2021-12-16 23:23:50
【问题描述】：

我正在尝试使用 jasmine 为 ag-grid 编写单元测试。

HTML

 <ag-grid-angular
 style="width: 500px; height: 400px;"
 class="ag-theme-alpine"
 [rowData]="rowData"
 [columnDefs]="columnDefs"
 rowSelection='single'
 (gridReady)="onGridReady($event)"
 >
 </ag-grid-angular>

.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { ColDef } from 'ag-grid-community';
 import { DataGrid } from 'src/app/shared/models/datagrid.model';
 @Component({
 selector: 'app-simple-view',
 templateUrl: './simple-view.component.html',
 styleUrls: ['./simple-view.component.scss']
 })
 export class SimpleViewComponent implements OnInit {
 @Input('data') data: any | undefined;

 columnDefs: ColDef[] = [
 { field: 'Geography', sortable: true },
 { field: 'Category', sortable: true },
 { field: 'DataType', sortable: true }
];

rowData: DataGrid[] | undefined;

public gridApi: any;

constructor() { }

ngOnInit(): void {
 this.rowData = this.data;
}

onGridReady(params: any) {
 this.gridApi = params.api;

}
}

spec.ts

 it('grid API is available after `detectChanges`', () => {
 fixture.detectChanges();
 expect(component.gridOptions.api).toBeTruthy();
 });

此测试方法失败并出现以下错误

SimpleViewComponent > 网格 API 在detectChanges 之后可用预期未定义是真实的。错误：预期未定义是真实的。在在用户上下文。 (http://localhost:9876/karma_webpack/webpack:/src/app/features/overview/components/simple-view/simple-view.component.spec.ts:45:31) 在 Generator.next () 在 asyncGeneratorStep (http://localhost:9876/karma_webpack/webpack:/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)

【问题讨论】：

imports 的 imports 数组中是否有 AgGrid 模块TestBed.configureTestingModule？
是的，我已经导入了

标签： angular jasmine ag-grid

【解决方案1】：

对于这类情况（不知道 AGGrid 什么时候会解决它会解决什么），我喜欢使用 waitUntil 实用函数。

// Put this in a utils section of the project with the name of waitUntil.ts
// This function will keep retrying and wait until the function is truthy
// before proceeding

import { interval } from 'rxjs';
.....
export const waitUntil = async (untilTruthy: Function): Promise<boolean> => {
  while (!untilTruthy()) {
    await interval(25).pipe(take(1)).toPromise();
  }
  return Promise.resolve(true);
};

// Use waitUntil with async await

it('grid API is available after `detectChanges`', async () => {
   fixture.detectChanges();
   // wait until gridOptions.api is truthy
   await waitUntil(() => !!component.gridOptions.api);
   expect(component.gridOptions.api).toBeTruthy();
 });

我记得当我在 Angular 单元测试中使用 AgGrid 时，我不得不经常使用 waitUntil。如果该测试超时（等待未解决），那么我认为测试设置有问题。

【讨论】：