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 =/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?

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?

• reactjs
• material-ui
• react-testing-library

1 Answer 1

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.