Unit testing - onGridReady - Ag-grid event in Angular

Question

I am having a function like below in my component file like below

onGridReady(params) {
  this.gridApi = params.api;
  this.columnApi = params.columnApi;
  this.gridApi.setDomLayout('autoHeight');
  this.gridApi.sizeColumnsToFit();
  params.api.setRowData(this.deviceConfigurations);
}

For the above function I am writing the spec like the below one

describe('#onGridReady()', () => {
    const params = {
      api: new MockGridApi(),
      ColumnApi: new MockColumnApi(),
    };

    it('call the function', () => {
      spyOn(component, 'onGridReady').and.callThrough();
      component.onGridReady(params);

      expect(component.onGridReady).toHaveBeenCalled();
    });
  });

The spec passes as well as the coverage is done for the above function. But I would like to know whether is it the correct way or writing the spec or do I need to write more specs like to sizeColumnsToFit() has been called etc., Could anyone can give your view about it.

There is a more better way to test that ag-grid event, it should be called automatically by grid API when you feed your component ... — HDJEMAI, Sep 29 '20 at 14:44
Initialize your component, and you have to verify that what is done by `onGridReady()` is set. it will not be easy to verify all, but you should verify things related to your app business, not Ag-grid specific behavior. — HDJEMAI, Sep 29 '20 at 15:51

score 2 · Answer 1 · edited Jul 05 '21 at 17:46

onGridReady() should be called automatically after ngOnInit(), so my preference would be to test what onGridReady() is doing.

This is how I am doing it:

    import {waitForAsync} from '@angular/core/testing';

    // 1) Add waitForAsync() to my test
    it('should do things onGridReady() is supposed to do', waitForAsync(() => {

        const expectedRowData = [{id: 1, dataPoint: 'someDataPoint'}];

        // call ngOnInit directly
        component.ngOnInit();
        fixture.detectChanges();

        // wait for the fixture to stabilize
        fixture.whenStable().then(() => {
            console.log(' ==> stable!');
            expect(component.gridOptions.rowData).toEqual(expectedRowData);
            // whatever other tests...
        });

    }));

My ts file looks something like this:

    onGridReady(params: any): void {
        console.log('the grid is ready!');
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
        this.gridApi.setDomLayout('autoHeight');
        this.gridApi.sizeColumnsToFit();
        this.gridOptions.rowData = this.deviceConfigurations;
    }

PS~ I think you might end up with an endless loop if you call setRowData in the onGridReady() method.

Unit testing - onGridReady - Ag-grid event in Angular

1 Answers1