I am having trouble testing grouped cells in ag-grid react with React-testing-library.
My Grid:
const MyGrid = props => {
const rowData = [
{
model: 'samsung',
name: 'My TV',
room: 'living room',
connectedDevices: [
{
type: 'receiver',
deviceName: 'My Receiver',
}
]
}
];
const detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{field: 'type'},
{field: 'deviceName'},
],
// suppressColumnVirtualisation: true,
},
getDetailRowData: params => params.successCallback(params.node.data.connectedDevices),
};
return (
<AgGridReact
colDefs={[
{field: model},
{field: name, cellRenderer: 'agGroupCellRenderer'},
{field: room},
]}
rowData={rowData}
masterDetail={true}
detailCellRendererParams={detailCellRendererParams}
suppressColumnVirtualisation={true}
/>
);
}
Then in my test
describe('Test MyGrid', () => {
it('Should display the connected device in the detail grid', async () => {
const groupCell = await screen.findByText('My TV');
user.dblClick(groupCell);
// user.click(document.getElementsByClass('ag-icon-tree-closed')[0]);
const connectedDevices = [
{
type: 'receiver',
deviceName: 'My Receiver',
}
];
for (const d of connectedDevices) {
expect(screen.getByText(d.name)).toBeInTheDocument();
}
});
});
However the test doesn't even make it past the await screen.findByText('My TV')
. When I view the html in the testing playground using screen.logTestingPlaygroundUrl()
. The column header is present but none of the actual gridcell elements for the name column can be found. I experimented with suppressing the column virtualization of the detail grid after viewing this thread, but that didn't work. Has anyone out there found success testing grouped grid in ag-grid?