ag-Grid: What is the best way to retrieve the gridApi in a Unit Test scenario?

Question

ag-Grid: What is the best way to retrieve the gridApi in a Unit Test scenario?

In my testing, I need to unit test a function that relies on the gridApi, such as this.gridApi.getSelectedRows();. However, when the unit test encounters this line, it throws an error:

Failed: Cannot read property 'getSelectedRows' of undefined

, because gridApi has not been defined yet.

How can I properly define the gridApi within a unit test? Typically, the gridApi is initialized in the onGridReady function like so:

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

Is there a way to trigger the onGridReady function from a unit test? I'm unsure about what parameters should be passed to it. Alternatively, is there another method to define this.gridApi instead?

angular typescript unit-testing ag-grid ag-grid-angular

Answer 1

Answer №1

In test cases, the initialization of this.gridApi and this.gridColumnApi is done automatically. To achieve this, import AgGridModule from 'ag-grid-angular' is required. Also, initialize the component using the following 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, include the following import statement at the top of the file:

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

Declare a variable as follows:

gridOptions: GridOptions = <GridOptions>{};

Write the 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();
});

Answer 2

In test cases, the initialization of this.gridApi and this.gridColumnApi is done automatically. To achieve this, import AgGridModule from 'ag-grid-angular' is required. Also, initialize the component using the following 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, include the following import statement at the top of the file:

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

Declare a variable as follows:

gridOptions: GridOptions = <GridOptions>{};

Write the 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();
});

ag-Grid: What is the best way to retrieve the gridApi in a Unit Test scenario?

Answer №1

Similar questions

Tips for managing exceptions in Redux when handling HTTP requests

Testing a function in Angular using Karma and Jasmine

What steps should be taken to guarantee that the view is created only after receiving values from the route params subscription?

Can type safety be maintained while utilizing generics in code?

Fledgling angular freshly unboxed

Should ts-node be avoided in a production environment due to potential risks?

Determine whether a specific date falls within a specific time range

Unable to utilize substring within *ngFor directive in Angular

Define the data type of the array within hooks, then proceed with initialization

Utilizing React Router with the power of useCallback

What is the process for appending an attribute to a DOM element?

How to Navigate Between Pages and Push to Tab Pages with Ionic 3 and Angular 4

Tips for securely passing props based on conditions to a functional component in React

Transfer the view encapsulation id selector to a CSS class within an @Input directive passed down from the parent component

Issue with Angular polyfill in IE11: The core-js version 3.6.5 method es.string.split.js is having trouble parsing the regex /^|s+/ when used with

Different ways to fulfill the extends type interface requirement in TypeScript

Moving the sidebar from the app component to a separate component in Angular results in a situation where the sidebar does not maintain full height when the page is scrolled down

Switch between every other pair of table rows, then repeat with the following two pairs

Retrieve the file from the REST API without using the window.open method

Incorporate a background image into mat-dialog