ag-Grid: How can I access the gridApi from a Unit Test?

Question

I am trying to unit test a function that includes calls to the gridApi, like this.gridApi.getSelectedRows();. When the unit test gets to this line, it gives this error: Failed: Cannot read property 'getSelectedRows' of undefined, because gridApi hasn't been defined yet.

How can I define the gridApi from a unit test? It is normally defined in the onGridReady function like this:

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

Is it possible to trigger onGridReady from a unit test? I don't know what params could be sent to it. Is there some other way to define this.gridApi instead?

Guerrero

did you followed the steps ag-grid.com/javascript-grid-testing-angular – Thies

It would be helpful if you could post your test or otherwise show a non-working example of your test using something like stackblitz.com/edit/angular-testing-with-jasmine – Pueblo

@GoodSamaritan Yes, and I'm still seeing the same error. – Guerrero

@Guerrero Did you found a solution for it – Pass

@Nidhinkumar No, I unfortunately couldn't figure it out. – Guerrero

I am still getting the same error. Is there any solution for it. The solution given below is not working – Karrah

Answer 1

this.gridApi and this.gridColumnApi are automatically initialzed in test cases. For that need to import AgGridModule from 'ag-grid-angular'. And Initialize component same as below code:

let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [MyComponent],
        imports: [
            AgGridModule.withComponents([])
        ]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
}));

To test onGridReady Import on top of file.

import { GridOptions } from "ag-grid-community";

And declare a variable

gridOptions: GridOptions = <GridOptions>{};

write test case

it('onGridReady called', () => {
const data = {
    api: component.gridOptions.api,
    columnApi: component.gridOptions.columnApi
}
component.onGridReady(params);
expect(component.gridApi).not.toBeNull();
expect(component.gridColumnApi).not.toBeNull();
});

Brigade

Any code snippet for React? – Geniagenial

This solution is not working for me.Am I missing something? What is the use of declaring gridOptions in test file if we will be using component.gridOptions and secondly what are params that have been passed. Shouldnt it be data? Despite those changes I am getting the same error. Any alternative appoprach that can be taken?Thanks – Karrah

@IshanArora any update on this ? – Handlebar

This solution only works for legacy angular applications according to ag grid . "If you are using our legacy packages and Angular <= v8 or if Ivy has been disabled you additionally need to provide your components to the grid via AgGridModule.withComponents([RendererComponent, EditorComponent])." – Dinesh