AG Grid TypeScript in-line cell editing testing jest

Question

I'm trying to create jest tests in order to test the functionality of my ag-grid table.

I currently have tests for expecting the default data in the grid, and testing the functionality of a button which adds an extra row of data to the grid.

I'm trying to edit one of my cells using in-line editing by simulating a double click on the cell I want to be edited. Then followed by a userEvent.type. However the cell never seems to update. I'm not sure if this is because the data hasn't been updated yet due to the asynchronous behaviour or if the simulated typing/click isn't working.

This is my test which is failing:

test("tests the inline cell editing", async () => {
        const onClick = jest.fn();
        render();

        const row = screen
            .getAllByRole("row")
            .filter((item) => item.getAttribute("row-id") === "1");
        fireEvent.doubleClick(row[1]);

        userEvent.type(row[1], "GT{enter}");

        await waitFor(() => {
            expect(screen.getByText("GT")).toBeInTheDocument();
        });
    });

And the following is the DummyGrid ag-grid component:

import React, { useState } from "react";
import { AgGridReact } from "ag-grid-react/lib/agGridReact";
import { ColDef, ValueSetterParams } from "ag-grid-community";

import GridButton from "./GridButton";
import Car from "./car";
import { Button } from "react-bootstrap";

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine-dark.css";

const initialState: Array = [
    { id: "0", make: "Toyota", modelName: "Celica", price: 35000 },
    { id: "1", make: "Ford", modelName: "Mondeo", price: 32000 },
    { id: "2", make: "Porsche", modelName: "Boxter", price: 70000 },
];

const fieldName = (name: keyof Car) => name;

function getRowNodeId(data: Car) {
    return data.id;
}

function onGridReady(params: object) {
    // console.log(params);
}

function onRowDataChanged(data: object) {
    // console.log(data);
}

const columnDefs: ColDef[] = [
    {
        headerName: "Make",
        field: fieldName("make"),
        editable: true,
    },
    {
        headerName: "Model",
        field: fieldName("modelName"),
        editable: true,
        // valueSetter: (params: ValueSetterParams) => {
        //     onRowDataChanged(params);
        // },
    },
    {
        headerName: "Price",
        field: fieldName("price"),
        editable: true,
    },
    {
        field: "Button",
        cellRenderer: "gridButton",
        cellRendererParams: {
            onClicked: function (
                id: string,
                make: string,
                modelName: string,
                price: number
            ) {
                // console.log(id, make, modelName, price);
            },
        },
    },
];

const gridOptions = {
    immutableData: true,
    suppressScrollOnNewData: true,
    columnDefs: columnDefs,
    frameworkComponents: {
        gridButton: GridButton,
    },
};

interface Props {
    onClick: () => void;
}
const DummyGrid: React.FC = ({ onClick }) => {
    const [rowData, setRowData] = useState(initialState);

    function addData() {
        console.log("test");
        const newRow: Car = {
            id: "3",
            make: "Land Rover",
            modelName: "Defender",
            price: 40000,
        };
        // console.log(rowData);
        setRowData((oldData) => [...oldData, newRow]);
        onClick();
    }

    return (
        
            
            
                
            
        
    );
};

export default DummyGrid;

Any help or advice would be much appreciated. I have researched and found a very small amount of help on testing ag-grid with jest, and nothing on testing in-line ag-grid editing with jest, only the testing of separate buttons which update the grid content.

AG Grid TypeScript in-line cell editing testing jest

0 Answers