✅(react) add test for searchable mono select

Update mono.spec tests to verify the use of the new isLoading and
default value, async options fetching props and the loader.

packages/react/src/components/Forms/Select/mono.spec.tsx

@@ -1,6 +1,6 @@
 import userEvent from "@testing-library/user-event";
 import { act, render, screen, waitFor } from "@testing-library/react";
-import { expect, vi } from "vitest";
+import { expect, Mock, vi } from "vitest";
 import React, { createRef, FormEvent, useState } from "react";
 import { within } from "@testing-library/dom";
 import {
@@ -9,10 +9,13 @@ import {
   SelectHandle,
   SelectProps,
   CallbackFetchOptions,
+  ContextCallbackFetchOptions,
 } from ":/components/Forms/Select/index";
 import { Button } from ":/components/Button";
 import { CunninghamProvider } from ":/components/Provider";
 import {
+  expectLoaderNotToBeInTheDocument,
+  expectLoaderToBeVisible,
   expectMenuToBeClosed,
   expectMenuToBeOpen,
   expectNoOptions,
@@ -23,8 +26,69 @@ import {
 } from ":/components/Forms/Select/test-utils";
 import { Input } from ":/components/Forms/Input";
 
+const arrayCityOptions = [
+  {
+    label: "Paris",
+    value: "paris",
+  },
+  {
+    label: "Panama",
+    value: "panama",
+  },
+  {
+    label: "London",
+    value: "london",
+  },
+  {
+    label: "New York",
+    value: "new_york",
+  },
+  {
+    label: "Tokyo",
+    value: "tokyo",
+  },
+];
+
+const SearchableOptionsFetchingSelect = ({
+  optionsCallback,
+  defaultValue,
+  label,
+}: {
+  optionsCallback: (context: ContextCallbackFetchOptions) => Promise<Option[]>;
+  defaultValue?: string;
+  label: string;
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const localCallback: CallbackFetchOptions = async (context) => {
+    let arrayResults = [];
+    setIsLoading(true);
+    arrayResults = await optionsCallback(context);
+    setIsLoading(false);
+
+    return arrayResults;
+  };
+
+  return (
+    <CunninghamProvider>
+      <Select
+        label={label}
+        options={localCallback}
+        searchable={true}
+        isLoading={isLoading}
+        defaultValue={defaultValue}
+      />
+    </CunninghamProvider>
+  );
+};
+
+const callbackFetchOptionsMock: Mock = vi.fn();
 describe("<Select/>", () => {
   describe("Searchable", () => {
+    afterEach(() => {
+      vi.clearAllMocks();
+    });
+
     it("shows all options when clicking on the input", async () => {
       const user = userEvent.setup();
       render(
@@ -1021,99 +1085,88 @@ describe("<Select/>", () => {
       expect(searchTerm).toBeUndefined();
     });
 
-    it("gets the search term using onSearchInputChange through an async function provided as the options prop", async () => {
-      type Spy = {
-        asyncOptions: CallbackFetchOptions;
-      };
-
-      const spy: Spy = {
-        asyncOptions: async (context) =>
-          new Promise((resolve) => {
-            const arrayCities = [
-              {
-                label: "Paris",
-                value: "paris",
-              },
-              {
-                label: "Panama",
-                value: "panama",
-              },
-              {
-                label: "London",
-                value: "london",
-              },
-              {
-                label: "New York",
-                value: "new_york",
-              },
-              {
-                label: "Tokyo",
-                value: "tokyo",
-              },
-            ];
-
-            // simulate a delayed response
-            setTimeout(() => {
-              const stringSearch = context?.search
-                ? String(context.search)
-                : "";
-
-              const filterOptions = (arrayOptions: Option[], search: string) =>
-                arrayOptions.filter((option) =>
-                  option.label
-                    .toLocaleLowerCase()
-                    .includes(search.toLowerCase()),
-                );
-
-              const arrayOptions: Option[] = stringSearch
-                ? filterOptions(arrayCities, stringSearch)
-                : arrayCities;
+    it("executes the provided callback in options prop to fetch and passes search term param to it using onSearchInputChange prop", async () => {
+      const user = userEvent.setup();
 
-              resolve(arrayOptions);
-            }, 1);
-          }),
-      };
-      const spiedAsyncOptions = vi.spyOn(spy, "asyncOptions");
+      callbackFetchOptionsMock
+        .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(spiedAsyncOptions).toHaveBeenCalledTimes(0);
+      expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy();
 
-      const user = userEvent.setup();
       render(
-        <CunninghamProvider>
-          <Select label="City" options={spy.asyncOptions} searchable={true} />
-        </CunninghamProvider>,
+        <SearchableOptionsFetchingSelect
+          optionsCallback={callbackFetchOptionsMock}
+          label="City"
+        />,
       );
 
-      expect(spiedAsyncOptions).toHaveBeenCalledTimes(1);
-
       const input = screen.getByRole("combobox", {
         name: "City",
       });
 
-      // It returns the input.
-      expect(input.tagName).toEqual("INPUT");
-
       const menu: HTMLDivElement = screen.getByRole("listbox", {
         name: "City",
       });
 
+      expect(input.tagName).toEqual("INPUT");
+
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
+        search: "",
+      });
+
       expectMenuToBeClosed(menu);
 
-      // Click on the input.
       await user.click(input);
-      expectMenuToBeOpen(menu);
 
+      expectMenuToBeOpen(menu);
       expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
 
-      // Verify that filtering works.
-      await user.type(input, "Pa");
+      await user.type(input, "P");
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(2, {
+        search: "P",
+      });
+
+      expectMenuToBeOpen(menu);
+      expectOptions(["Paris", "Panama"]);
 
-      expect(spiedAsyncOptions).toHaveBeenCalledTimes(3);
+      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(spiedAsyncOptions).toHaveBeenCalledTimes(4);
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(4, {
+        search: "Par",
+      });
       expectOptions(["Paris"]);
 
       // Select option.
@@ -1123,7 +1176,70 @@ describe("<Select/>", () => {
       await user.click(option);
 
       expect(input).toHaveValue("Paris");
-      expect(spiedAsyncOptions).toHaveBeenCalledTimes(4);
+
+      await user.clear(input);
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(5, {
+        search: "",
+      });
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+    });
+
+    it("executes the provided callback in options prop to fetch data and select a default option matching the defaultValue prop", async () => {
+      callbackFetchOptionsMock.mockResolvedValue(arrayCityOptions);
+
+      expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy();
+
+      const user = userEvent.setup();
+
+      render(
+        <SearchableOptionsFetchingSelect
+          optionsCallback={callbackFetchOptionsMock}
+          label="Select a city"
+          defaultValue="london"
+        />,
+      );
+
+      const input = screen.getByRole("combobox", {
+        name: "Select a city",
+      });
+      const menu: HTMLDivElement = screen.getByRole("listbox", {
+        name: "Select a city",
+      });
+
+      await expectLoaderToBeVisible();
+      expect(input.tagName).toEqual("INPUT");
+      expectMenuToBeClosed(menu);
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
+        search: "london",
+      });
+      await expectLoaderNotToBeInTheDocument();
+      expect(input).toHaveValue("London");
+
+      // Click on the input.
+      await user.click(input);
+
+      expectMenuToBeOpen(menu);
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+    });
+
+    it("shows and hides the loader according to the isLoading prop", async () => {
+      callbackFetchOptionsMock.mockResolvedValue(arrayCityOptions);
+
+      expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy();
+
+      render(
+        <SearchableOptionsFetchingSelect
+          optionsCallback={callbackFetchOptionsMock}
+          label="Select a city"
+          defaultValue="london"
+        />,
+      );
+
+      await expectLoaderToBeVisible();
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
+        search: "london",
+      });
+      await expectLoaderNotToBeInTheDocument();
     });
   });
 

packages/react/src/components/Forms/Select/test-utils.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { screen } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 
 export const expectMenuToBeOpen = (menu: HTMLDivElement) => {
   expect(Array.from(menu.classList)).contains("c__select__menu--opened");
@@ -49,3 +49,18 @@ export const expectSelectedOptionsText = (expectedOptions: string[]) => {
   const valueElement = document.querySelector(".c__select__inner__value");
   expect(valueElement?.textContent).toEqual(expectedOptions.join(", "));
 };
+
+export const expectLoaderToBeVisible = async () => {
+  await waitFor(() => {
+    const loader = screen.queryByRole("status", {
+      name: "Loading data",
+    });
+    expect(loader).toBeVisible();
+  });
+};
+export const expectLoaderNotToBeInTheDocument = async () => {
+  await waitFor(() => {
+    const loader = screen.queryByRole("status");
+    expect(loader).not.toBeInTheDocument();
+  });
+};