reactjsmaterial-uireact-testing-library

Ensuring the correct drop down option selected from multiple select elements available


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:

Filter pane of mine

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?


Solution

  • 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.