Using @testing-library/react": "^16.0.1"
, I would like to know the correct approach to handle my current scenario.
Here is my filter pane [using from Material UI filter slot similar to https://codesandbox.io/embed/sm8xtp?module=/src/Demo.tsx&fontsize=12 ]
Here is my exact filter pane:
In this, I have no control to add "test-id(s)" to test my filters. But I am doing the way by selecting the option and getting parent from the child to select the necessary values.
Here is my code:
it("should available the filter pane, once the user clicks on Filter button", async () => {
const { user } = await mount();
const filterButtons = screen.getAllByTestId("FilterAltIcon");
await user.click(filterButtons[0]);
expect(screen.queryByText("Add filter")).toBeInTheDocument();
await user.click(screen.getByText("Add filter"));
const selectColumn = await screen.getByRole("option", {
name: "Auto update",
}).parentElement;//parent of first row 1st option
const selectOperator = await screen.getAllByRole("option", {
name: "is",
})[0].parentElement; //parent of first row 2nd option
const selectValue = await screen.getAllByRole("option", {
name: "Please select",
})[0].parentElement;// //parent of first row 3rd option
selectColumn && (await user.selectOptions(selectColumn, "flagAuto"));
selectOperator && (await user.selectOptions(selectOperator, "is"));
selectValue && (await user.selectOptions(selectValue, "A"));
});
But my worry is, how can I insure all I doing with same row
because when I query for example screen.getAllByRole("option", {name: "is"})
I am getting bunch of other values too..
How to ensure that I am selecting from appropriate row based operators only?
I changed the logic to select the first option, then selecting others like this:
const { user } = await mount();
await user.click(screen.getAllByLabelText("Show filters")[0]);
const initialCombobox = await screen.findAllByRole("combobox");
const typeSelect = initialCombobox[0];
await user.selectOptions(typeSelect, "imageApproval");
const columnCombobox = await screen.findAllByRole("combobox");
const operatorSelect = columnCombobox[1];
const valueSelect = columnCombobox[2];
await user.selectOptions(operatorSelect, "is");
await user.selectOptions(valueSelect, "Y");
expect(operatorSelect).toHaveValue("is");
works fine for me.