We are looking to test a callback for editing cells.
Code:
const App = () => {
const useUpdateAndSave = useCallback((event) => {
console.log("Event - onEditComplete: ", event);
}, []);
return (
<div>
<ReactDataGrid
idProperty="id"
onEditComplete={useUpdateAndSave}
columns={columns}
dataSource={dataSource}
/>
</div>
);
};
We have tried using @testing-library/user-event
to double click the cell, but it does not seem to re-render the DOM with the <input ...>
element that we see in the browser.
it("edits the cell", async () => {
// We can confirm these elements are found
const quantityCell = await screen.findByText(999);
const parent = await quantityCell.parentElement;
// We have tried dblClick(parent) and dblClick(quantityCell)
userEvent.dblClick(parent);
// this does not show the same DOM modification we see in the browser
screen.debug(parent);
// This throws an exception - not found.
const input = await screen.findByDisplayValue(999);
});
Is there a preferred approach, or different testing tools for @inovua/reactdatagrid
?
We would love to see an example of a test of this kind.
Thank you in advance!