Skip to content

Commit

Permalink
✅(react) test controlled Select mono searchable with fetched options
Browse files Browse the repository at this point in the history 
Add component test for controlled Select mono searchable
with fetched options. Makes sure to not call the fetch
options callback when previous search is the same
as the current one.
  • Loading branch information
@daproclaima
daproclaima committed Jun 24, 2024
1 parent 2868447 commit 64e71ed
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 73 deletions.
148 changes: 76 additions & 72 deletions packages/react/src/components/Forms/Select/mono.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1242,7 +1242,7 @@ describe("<Select/>", () => {
expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
});

it.skip("gets new options asynchronously on search update when component is controlled", async () => {
it("gets new options asynchronously on search update when component is controlled", async () => {
const ControlledSearchableFetchedOptionsSelectWrapper = ({
optionsCallback,
defaultValue,
Expand Down Expand Up @@ -1293,34 +1293,34 @@ describe("<Select/>", () => {
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();

Expand Down Expand Up @@ -1351,70 +1351,74 @@ describe("<Select/>", () => {
expect(input.tagName).toEqual("INPUT");

// Make sure value is selected.
screen.getByText("Value = london|");

expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
search: "london",
});
expect(screen.getByText("Value = london|")).toBeVisible();

expect(input).toHaveValue("London");
expectMenuToBeClosed(menu);

await user.click(input);

expectMenuToBeOpen(menu);

expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
search: "london",
});
expectOptions(["London"]);

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, {
expectMenuToBeClosed(menu);

await user.click(input);

expectMenuToBeOpen(menu);

expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(2, {
search: "",
});

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"]);
});
});

Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/components/Forms/Select/test-utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ export const expectLoaderToBeVisible = async () => {
};
export const expectLoaderNotToBeInTheDocument = async () => {
await waitFor(() => {
const loader = screen.queryByRole("status");
const loader = screen.queryByRole("status", {
name: "Loading data",
});
expect(loader).not.toBeInTheDocument();
});
};

0 comments on commit 64e71ed

Please sign in to comment.