Angular 单元测试中未定义 ag-grid API [英] ag-grid API Undefined in Angular unit testing

问题描述

我正在用 angular 编写 Ag-grid 的单元测试用例.

I am writing the unit test case for Ag-grid in angular.

test.component.ts:

public gridApi: GridApi; 
public gridColumnApi;

constructor(private service: Service) {
 this.initializeAgGrid(); // this method just initializing the grid
}

ngOnInit(): void {
 this.setHraDashboardData();
}

onGridReady(params) {
 this.gridApi = params.api;
 this.gridColumnApi = params.columnApi;
 this.gridApi.sizeColumnsToFit();
}

setHraDashboardData() {
 this.service.getData(1).then((data) => {
   this.uiData = data;
   this.rowData = this.generateRowData(this.data); // this method writing some logic for UI
   this.gridApi.setRowData(this.rowData);
 });
}

test.component.spec.ts

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

it('grid API is available after `detectChanges`', async() => {
  await fixture.whenStable().then(()=>{
    fixture.detectChanges();
    const elm = fixture.debugElement.nativeElement;
    const grid = elm.querySelector('#Grid');
    const firstRowCells = grid.querySelectorAll('div[row-id="0"] div.ag-cell-value');
    const values = Array.from(firstRowCells).map((cell: any) => cell.textContent.trim());

    // assert
    expect(component.rowData[0].title).toEqual(values[0]);
  });
});

现在上面的测试用例由于component.gridApi是undefined而失败，所以它无法为网格this.gridApi赋值.setRowData(this.rowData).

Now above test case is getting failed to due to component.gridApi is undefined, so it's not able to assign value for the grid this.gridApi.setRowData(this.rowData).

推荐答案

在编写涉及 ag-grid api 可用性的单元测试时，在这种情况下，有两件事可以帮助您:

When writing unit tests that involves the availability of the ag-grid api, two things can help you in this case:

您可以尝试使用 this.gridOptions.api (this.gridOptions.api.setRowData ...)，而不是等待 gridReady 事件，因为大多数有时，它会更快地初始化(在 onGridReady 触发之前)

Instead of waiting for the gridReady event, you can try to use the this.gridOptions.api (this.gridOptions.api.setRowData ...) because most of the time, it is initialized sooner (before onGridReady firing)

您可以结合使用 settimeout 功能也是如此，当我过去遇到与您类似的问题时，我多次使用它:

You can do that in combination of using a settimeout function as well, I used that multiple times when I got a similar issue as yours in the past:

代替:

this.gridApi.setRowData(this.rowData);

试试:

setTimeout(() => { this.gridApi.setRowData(this.rowData);}, 100);

您可以增加 settimeout 到 200、300、500 或更多，对我来说，大部分时间只使用 settimeout 和一个非常小的数字(10 毫秒)工作.

You can increase the time for the settimeout to 200, 300, 500 or more, for me, most of the time just using the settimeout with a very small number (10 milliseconds) worked.

settimeout 不是理想的解决方案但这在很多情况下都有效.第一个选项应该更干净，您甚至可以添加超时以使其工作.

The settimeout is not an ideal solution but that works in many cases. The first options should be more clean, and you can even add a timeout as well to get it to work.

使用 fakeAsync 区域而不是 async一个也会有所帮助.

Use a fakeAsync zone instead of the async one will help as well.

这篇关于Angular 单元测试中未定义 ag-grid API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！