diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx index 5ea42ffb1..75f811cde 100644 --- a/packages/react/src/components/Forms/Select/mono.spec.tsx +++ b/packages/react/src/components/Forms/Select/mono.spec.tsx @@ -1242,7 +1242,7 @@ describe("", () => { value: "london", }, ]) + .mockResolvedValueOnce(arrayCityOptions) + .mockResolvedValueOnce([ + { + label: "Paris", + value: "paris", + }, + { + label: "Panama", + value: "panama", + }, + ]) + .mockResolvedValueOnce([ + { + label: "Paris", + value: "paris", + }, + { + label: "Panama", + value: "panama", + }, + ]) + .mockResolvedValueOnce([ + { + label: "Paris", + value: "paris", + }, + ]) .mockResolvedValueOnce(arrayCityOptions); - // .mockResolvedValueOnce([ - // { - // label: "Paris", - // value: "paris", - // }, - // { - // label: "Panama", - // value: "panama", - // }, - // ]); - // .mockResolvedValueOnce([ - // { - // label: "Paris", - // value: "paris", - // }, - // { - // label: "Panama", - // value: "panama", - // }, - // ]) - // .mockResolvedValueOnce([ - // { - // label: "Paris", - // value: "paris", - // }, - // ]) - // .mockResolvedValueOnce(arrayCityOptions); expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy(); @@ -1351,11 +1351,7 @@ describe("", () => { await user.click(input); expectMenuToBeOpen(menu); + expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, { search: "london", }); - expectOptions(["London"]); + expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(2, { + search: "", + }); + expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]); await userEvent.click(clearButton); // Make sure value is cleared. expect(input).toHaveValue(""); - screen.getByText("Value = |"); + expect(screen.getByText("Value = |")).toBeVisible(); - expect(callbackFetchOptionsMock).toHaveBeenCalledTimes(2); - expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, { + expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(2, { search: "", }); + expectMenuToBeClosed(menu); + + await user.click(input); + + expectMenuToBeOpen(menu); expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]); - // await user.type(input, "P"); - // expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(2, { - // search: "P", - // }); - // - // expectMenuToBeOpen(menu); - // expectOptions(["Paris", "Panama"]); - // - // await user.type(input, "a", { skipClick: true }); - // expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(3, { - // search: "Pa", - // }); - // expectMenuToBeOpen(menu); - // expectOptions(["Paris", "Panama"]); - // - // await user.type(input, "r", { skipClick: true }); - // expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(4, { - // search: "Par", - // }); - // expectOptions(["Paris"]); - // - // // Select option. - // const option: HTMLLIElement = screen.getByRole("option", { - // name: "Paris", - // }); - // await user.click(option); - // - // expect(input).toHaveValue("Paris"); - // - // await user.clear(input); - // expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(5, { - // search: "", - // }); - // expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]); + await user.type(input, "P"); + expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(3, { + search: "P", + }); + + expectMenuToBeOpen(menu); + expectOptions(["Paris", "Panama"]); + + await user.type(input, "a", { skipClick: true }); + expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(4, { + search: "Pa", + }); + expectMenuToBeOpen(menu); + expectOptions(["Paris", "Panama"]); + + await user.type(input, "r", { skipClick: true }); + expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(5, { + search: "Par", + }); + expectOptions(["Paris"]); + + // Select option. + const option: HTMLLIElement = screen.getByRole("option", { + name: "Paris", + }); + await user.click(option); + + expect(screen.getByText("Value = paris|")).toBeVisible(); + expect(input).toHaveValue("Paris"); + + await user.clear(input); + + expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(6, { + search: "", + }); + expect(screen.getByText("Value = |")).toBeVisible(); + expect(input).toHaveValue(""); + expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]); }); });