ag-grid API Undefined in Angular unit testing

Question

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]);
  });
});

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).

The question makes sense, I myself was struggling to get angular ag-grid based tests to work, since the answer looks to have helped to resolve the issue, I recommend to not closing the question because it helps to write unit test for components that use the ag-grid library. I've asked a specific question about this in github, but the link got removed, so here you have the way to get around this from the experience I'd when writing unit tests for ag-grid. — HDJEMAI, Dec 27 '20 at 21:57

HDJEMAI · Accepted Answer · 2020-12-26T11:09:33.387

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

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)

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:

instead of:

this.gridApi.setRowData(this.rowData);

Try:

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

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.

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.

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

ag-grid API Undefined in Angular unit testing

1 Answers1

Linked