@simplybusiness/mobius 3.3.2 → 3.4.0

package/src/components/Chopin/TradeSelector/TradeSelector.test.tsx

@@ -1,413 +1,341 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TradeSelector, ERROR_MESSAGE_SERVICE_UNAVAIALBLE } from ".";
-import { useTradeSelector } from "./useTradeSelector";
+import { ERROR_MESSAGE_SERVICE_UNAVAILABLE, TradeSelector } from ".";
+import { getConfig } from "./config";
+import { jestHTMLDialogPolyfill } from "./jestHTMLDialogPolyfill";
 import { exactResults, suggestedResults } from "./mockApiResults";
 
-const mockUseTradeSelector = useTradeSelector as jest.MockedFunction<
-  typeof useTradeSelector
->;
-
-jest.mock("./useTradeSelector");
+jestHTMLDialogPolyfill();
 
 const mockedApiResults = [...exactResults, ...suggestedResults];
 
-const trade = {
-  value: "Builder",
-  vertical: "business",
-  supported_verticals: ["contractors_combined"],
-  label: "<strong>Builder</strong>",
-  type: "exact",
-  trade_detail: null,
-  trade_type: null,
-  blocked: false,
-};
+const { defaultLabels } = getConfig();
 
 describe("TradeSelector", () => {
   it("should render without errors", () => {
-    mockUseTradeSelector.mockReturnValue({
-      inputValue: "",
-      isLoading: false,
-      trades: [],
-      onInputChange: () => {},
-      onSelectionChange: () => {},
-      error: undefined,
-      selectedTrade: undefined,
-      hasUserChangedMind: false,
-      onUserChangedMind: () => {},
-    });
-
     render(<TradeSelector />);
-
-    const label = screen.getByText("What is your specific trade/profession?");
-    const input = screen.getByRole("combobox");
-    const placeholderText = "e.g. Cleaner, builder, consultant";
-
-    expect(label).toBeInTheDocument();
-    expect(input).toHaveAttribute("placeholder", placeholderText);
   });
 
-  describe("given elementType", () => {
-    it("is not applied as element attribute", () => {
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: "",
-        isLoading: false,
-        trades: [],
-        onInputChange: () => {},
-        onSelectionChange: () => {},
-        error: undefined,
-        selectedTrade: undefined,
-        hasUserChangedMind: false,
-        onUserChangedMind: () => {},
-      });
+  describe("given a minimum required user input", () => {
+    describe("when no results are returned", () => {
+      it("should display a link to view all trades", async () => {
+        global.fetch = jest.fn(() =>
+          Promise.resolve({
+            json: () => Promise.resolve({ results: [] }),
+            ok: true,
+          }),
+        ) as jest.Mock;
+
+        const userInput = "qwa";
+        render(<TradeSelector />);
 
-      const { container } = render(<TradeSelector elementType="ul" />);
+        await userEvent.tab();
+        await userEvent.keyboard(userInput);
+        await waitFor(() => screen.getByText("View all trades"));
 
-      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
-    });
-  });
+        const noResultsLink = screen.getByText("View all trades");
 
-  describe("given no results for user input (that meets minimum input requirements)", () => {
-    it("should display a link to view all trades", async () => {
-      const userInput = "qwa";
-
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: userInput,
-        isLoading: false,
-        trades: [],
-        onInputChange: () => {},
-        onSelectionChange: () => {},
-        error: undefined,
-        selectedTrade: undefined,
-        hasUserChangedMind: false,
-        onUserChangedMind: () => {},
+        expect(noResultsLink).toBeInTheDocument();
+        expect(noResultsLink).toHaveAttribute(
+          "href",
+          "https://quote.simplybusiness.co.uk/trades?vertical=business",
+        );
       });
-
-      render(<TradeSelector />);
-
-      await userEvent.tab();
-
-      await userEvent.keyboard(userInput);
-
-      await userEvent.keyboard("[Alt][ArrowDown]");
-
-      const noResultsLink = screen.getByText("View all trades");
-
-      expect(noResultsLink).toBeInTheDocument();
-
-      expect(noResultsLink).toHaveAttribute(
-        "href",
-        "https://quote.simplybusiness.co.uk/trades?vertical=business",
-      );
     });
   });
 
   describe("given a set of results", () => {
     describe("containing both exact matches and suggested trades", () => {
       it("should display the results under their respective titles", async () => {
-        const userInput = "swim";
-
-        mockUseTradeSelector.mockReturnValue({
-          inputValue: userInput,
-          isLoading: false,
-          trades: mockedApiResults,
-          onInputChange: () => {},
-          onSelectionChange: () => {},
-          error: undefined,
-          selectedTrade: undefined,
-          hasUserChangedMind: false,
-          onUserChangedMind: () => {},
-        });
+        global.fetch = jest.fn(() =>
+          Promise.resolve({
+            json: () => Promise.resolve({ results: mockedApiResults }),
+            ok: true,
+          }),
+        ) as jest.Mock;
 
+        const userInput = "swim";
         render(<TradeSelector />);
 
         await userEvent.tab();
-
         await userEvent.keyboard(userInput);
+        await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
 
-        await userEvent.keyboard("[Alt][ArrowDown]");
-
-        await waitFor(() => {
-          const exactTitle = screen.getByText("Exact matches for your search");
-          const suggestedTitle = screen.getByText(
-            "Suggested matches for your search",
-          );
-          const groups = screen.getAllByRole("group");
-          const exactResultExample = document.querySelector(
-            '[data-key="Swim Shop"]',
-          );
-          const suggestedResultExample = document.querySelector(
-            '[data-key="Teacher / tutor"]',
-          );
-          const EXPECTED_NUMBER_OF_GROUPS = 2;
+        const exactTitle = screen.queryByText(defaultLabels.exact);
+        const suggestedTitle = screen.queryByText(defaultLabels.suggested);
+        const exactResultExample = document.querySelector(
+          '[data-key="Swim Shop"]',
+        );
+        const suggestedResultExample = document.querySelector(
+          '[data-key="Teacher / tutor"]',
+        );
 
-          expect(exactTitle).toBeInTheDocument();
-          expect(suggestedTitle).toBeInTheDocument();
-          expect(groups.length).toBe(EXPECTED_NUMBER_OF_GROUPS);
-          expect(exactResultExample).toBeInTheDocument();
-          expect(suggestedResultExample).toBeInTheDocument();
-        });
+        expect(exactTitle).toBeInTheDocument();
+        expect(suggestedTitle).toBeInTheDocument();
+        expect(exactResultExample).toBeInTheDocument();
+        expect(suggestedResultExample).toBeInTheDocument();
       });
     });
 
     describe("containing only the exact matches", () => {
       it("should display the results under the title for exact matches", async () => {
-        const userInput = "swim";
-
-        mockUseTradeSelector.mockReturnValue({
-          inputValue: userInput,
-          isLoading: false,
-          trades: exactResults,
-          onInputChange: () => {},
-          onSelectionChange: () => {},
-          error: undefined,
-          selectedTrade: undefined,
-          hasUserChangedMind: false,
-          onUserChangedMind: () => {},
-        });
+        global.fetch = jest.fn(() =>
+          Promise.resolve({
+            json: () => Promise.resolve({ results: exactResults }),
+            ok: true,
+          }),
+        ) as jest.Mock;
 
+        const userInput = "swim";
         render(<TradeSelector />);
 
         await userEvent.tab();
-
         await userEvent.keyboard(userInput);
+        await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
 
-        await userEvent.keyboard("[Alt][ArrowDown]");
-
-        await waitFor(() => {
-          const exactTitle = screen.getByText("Exact matches for your search");
-          const suggestedTitle = screen.queryByText(
-            "Suggested matches for your search",
-          );
-          const groups = screen.getAllByRole("group");
-          const exactResultExample = document.querySelector(
-            '[data-key="Swim Shop"]',
-          );
-          const suggestedResultExample = document.querySelector(
-            '[data-key="Teacher / tutor"]',
-          );
-          const EXPECTED_NUMBER_OF_GROUPS = 1;
+        const exactTitle = screen.queryByText(defaultLabels.exact);
+        const suggestedTitle = screen.queryByText(defaultLabels.suggested);
+        const exactResultExample = document.querySelector(
+          '[data-key="Swim Shop"]',
+        );
+        const suggestedResultExample = document.querySelector(
+          '[data-key="Teacher / tutor"]',
+        );
 
-          expect(exactTitle).toBeInTheDocument();
-          expect(suggestedTitle).not.toBeInTheDocument();
-          expect(groups.length).toBe(EXPECTED_NUMBER_OF_GROUPS);
-          expect(exactResultExample).toBeInTheDocument();
-          expect(suggestedResultExample).toBeNull();
-        });
+        expect(exactTitle).toBeInTheDocument();
+        expect(suggestedTitle).not.toBeInTheDocument();
+        expect(exactResultExample).toBeInTheDocument();
+        expect(suggestedResultExample).toBeNull();
       });
     });
   });
 
   describe("given the API is unavailable", () => {
-    it("should show the error message", async () => {
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: "",
-        isLoading: false,
-        trades: [],
-        onInputChange: () => {},
-        onSelectionChange: () => {},
-        error: Error(ERROR_MESSAGE_SERVICE_UNAVAIALBLE),
-        selectedTrade: undefined,
-        hasUserChangedMind: false,
-        onUserChangedMind: () => {},
-      });
-
-      render(<TradeSelector />);
+    const consoleError = console.error;
 
-      expect(
-        screen.getByText(ERROR_MESSAGE_SERVICE_UNAVAIALBLE),
-      ).toBeInTheDocument();
+    beforeAll(() => {
+      console.error = jest.fn();
     });
-  });
 
-  describe("as well as an error message", () => {
-    it("should not display the overlay component", async () => {
-      const userInput = "swim";
+    afterAll(() => {
+      console.error = consoleError;
+      jest.resetAllMocks();
+    });
 
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: userInput,
-        isLoading: false,
-        trades: mockedApiResults,
-        onInputChange: () => {},
-        onSelectionChange: () => {},
-        error: Error(ERROR_MESSAGE_SERVICE_UNAVAIALBLE),
-        selectedTrade: undefined,
-        hasUserChangedMind: false,
-        onUserChangedMind: () => {},
-      });
+    it("should show the error message", async () => {
+      global.fetch = jest.fn(() =>
+        Promise.resolve({
+          json: () => Promise.resolve({ statusText: "Internal Server Error" }),
+          ok: false,
+        }),
+      ) as jest.Mock;
 
+      const userInput = "swim";
       render(<TradeSelector />);
 
       await userEvent.tab();
-
       await userEvent.keyboard(userInput);
+      await waitFor(() => screen.getByText(ERROR_MESSAGE_SERVICE_UNAVAILABLE));
 
-      await userEvent.keyboard("[Alt][ArrowDown]");
-
-      await waitFor(() => {
-        const errorMessage = screen.getByText(
-          ERROR_MESSAGE_SERVICE_UNAVAIALBLE,
-        );
-        const overlay = screen.queryByLabelText("Suggestions");
+      const errorMessage = screen.getByText(ERROR_MESSAGE_SERVICE_UNAVAILABLE);
+      const resultsOverlay = document.querySelector("dialog");
 
-        expect(errorMessage).toBeInTheDocument();
-        expect(overlay).not.toBeInTheDocument();
-      });
+      expect(errorMessage).toBeInTheDocument();
+      expect(resultsOverlay).not.toBeInTheDocument();
     });
   });
 
   describe("when the user reduces the input value to a single character", () => {
     it("should not display the overlay component", async () => {
-      const userInput = "s";
-
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: userInput,
-        isLoading: false,
-        trades: mockedApiResults,
-        onInputChange: () => {},
-        onSelectionChange: () => {},
-        error: undefined,
-        selectedTrade: undefined,
-        hasUserChangedMind: false,
-        onUserChangedMind: () => {},
-      });
+      global.fetch = jest.fn(() =>
+        Promise.resolve({
+          json: () => Promise.resolve({ results: mockedApiResults }),
+          ok: true,
+        }),
+      ) as jest.Mock;
 
+      const userInput = "swim";
       render(<TradeSelector />);
 
       await userEvent.tab();
-
       await userEvent.keyboard(userInput);
 
-      await userEvent.keyboard("[Alt][ArrowDown]");
+      const resultsOverlay = document.querySelector("dialog");
 
-      await waitFor(() => {
-        const overlay = screen.queryByLabelText("Suggestions");
+      expect(resultsOverlay).toBeInTheDocument();
 
-        expect(overlay).not.toBeInTheDocument();
-      });
+      await userEvent.keyboard("{Backspace}{Backspace}{Backspace}");
+
+      expect(resultsOverlay).not.toBeInTheDocument();
     });
   });
 
   describe("given a user has selected a trade", () => {
     it("should display the selected trade and hide the input field", async () => {
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: "",
-        isLoading: false,
-        trades: [],
-        onInputChange: () => {},
-        onSelectionChange: () => {},
-        error: undefined,
-        selectedTrade: trade.value,
-        hasUserChangedMind: false,
-        onUserChangedMind: () => {},
-      });
+      global.fetch = jest.fn(() =>
+        Promise.resolve({
+          json: () => Promise.resolve({ results: mockedApiResults }),
+          ok: true,
+        }),
+      ) as jest.Mock;
 
-      const expectedTrade = "Builder";
+      const userInput = "swim";
+      const expectedTrade = "Swim Shop";
+      const { container } = render(<TradeSelector />);
 
-      render(<TradeSelector />);
+      await userEvent.tab();
+      await userEvent.keyboard(userInput);
+      await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
 
-      const partialText = screen.getByText(/You have selected/);
-      const chosenTrade = screen.getByText(expectedTrade);
-      const changeButton = screen.getByLabelText(
-        "Change your selected profession",
+      const exactResultExample = document.querySelector(
+        `[data-key="${expectedTrade}"]`,
       );
 
-      expect(partialText).toBeInTheDocument();
-      expect(chosenTrade).toBeInTheDocument();
-      expect(changeButton).toBeInTheDocument();
-    });
-  });
+      expect(exactResultExample).toBeInTheDocument();
 
-  describe("clicking Change", () => {
-    it("should display the input field with previously selected trade", async () => {
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: "",
-        isLoading: false,
-        trades: [],
-        onInputChange: () => {},
-        onSelectionChange: () => {},
-        error: undefined,
-        selectedTrade: trade.value,
-        hasUserChangedMind: false,
-        onUserChangedMind: () => {},
-      });
+      await fireEvent.click(
+        document.querySelector(`[data-key="${expectedTrade}"]`)!,
+      );
 
-      const expectedTrade = "Builder";
+      const textElement = container.querySelector("p");
 
-      render(<TradeSelector />);
+      expect(textElement).toHaveTextContent(
+        `You have selected ‘${expectedTrade}’ as your trade/profession. Change`,
+      );
+    });
+  });
 
-      const changeButton = screen.getByLabelText(
-        "Change your selected profession",
+  describe("given an initial trade", () => {
+    it("clicking Change should reveal result overlay", async () => {
+      global.fetch = jest.fn(() =>
+        Promise.resolve({
+          json: () => Promise.resolve({ results: mockedApiResults }),
+          ok: true,
+        }),
+      ) as jest.Mock;
+
+      const initialTrade = "Swim Shop";
+      const { container } = render(
+        <TradeSelector initialTrade={initialTrade} />,
       );
 
-      await userEvent.click(changeButton);
+      const button = screen.getByText("Change");
 
-      waitFor(() => {
-        const inputField = screen.getByRole("combobox");
+      await userEvent.click(button);
+      await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
 
-        expect(inputField).toHaveDisplayValue(expectedTrade);
-      });
+      const dialog = container.querySelector("dialog");
+
+      expect(dialog).toHaveClass("--is-open");
     });
   });
 
-  describe("given a user has selected the wrong trade", () => {
-    it("they should be able to choose a different trade", async () => {
-      const onInputChangeMock = jest.fn();
-
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: "Fitness instructor",
-        isLoading: false,
-        trades: [],
-        onInputChange: onInputChangeMock,
-        onSelectionChange: () => {},
-        error: undefined,
-        selectedTrade: trade.value,
-        hasUserChangedMind: true,
-        onUserChangedMind: () => {},
-      });
+  describe("clicking Change", () => {
+    it("should display the input field with previously selected trade", async () => {
+      global.fetch = jest.fn(() =>
+        Promise.resolve({
+          json: () => Promise.resolve({ results: mockedApiResults }),
+          ok: true,
+        }),
+      ) as jest.Mock;
 
+      const userInput = "swim";
+      const expectedTrade = "Swim Shop";
       render(<TradeSelector />);
 
-      const inputField = screen.getByRole("combobox");
+      await userEvent.tab();
+      await userEvent.keyboard(userInput);
+      await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
+
+      const exactResultExample = document.querySelector(
+        `[data-key="${expectedTrade}"]`,
+      );
+
+      expect(exactResultExample).toBeInTheDocument();
 
-      const newTrade = "Swimmer";
+      await fireEvent.click(
+        document.querySelector(`[data-key="${expectedTrade}"]`)!,
+      );
 
-      await userEvent.type(inputField, newTrade);
+      const button = screen.getByText("Change");
 
-      expect(onInputChangeMock).toHaveBeenCalledTimes(newTrade.length);
+      await userEvent.click(button);
+
+      waitFor(() => screen.getByRole("textbox"));
+
+      const inputField = screen.getByRole("textbox");
+
+      expect(inputField).toHaveValue(expectedTrade);
     });
   });
 
   describe("given hideLabel is set to true", () => {
     it("hides the label and the description and renders aria-label instead", () => {
-      mockUseTradeSelector.mockReturnValue({
-        inputValue: "",
-        isLoading: false,
-        trades: [],
-        onInputChange: () => {},
-        onSelectionChange: () => {},
-        error: undefined,
-        selectedTrade: undefined,
-        hasUserChangedMind: false,
-        onUserChangedMind: () => {},
-      });
-
       render(<TradeSelector hideLabel />);
 
-      const label = screen.queryByText(
-        "What is your specific trade/profession?",
-      );
+      const label = screen.queryByText(defaultLabels.input);
       const description = screen.queryByText(
         "Start typing to choose from over 1,000 options.",
       );
-      const input = screen.getByRole("combobox");
+      const input = screen.getByRole("textbox");
 
       expect(label).not.toBeInTheDocument();
       expect(description).not.toBeInTheDocument();
-      expect(input).toHaveAttribute(
-        "aria-label",
-        "What is your specific trade/profession?",
-      );
+      expect(input).toHaveAttribute("aria-label", defaultLabels.input);
+    });
+  });
+
+  describe("API calls", () => {
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve({ results: mockedApiResults }),
+        ok: true,
+      }),
+    ) as jest.Mock;
+
+    describe("with no initial trade provided", () => {
+      it("should not call the API on render", async () => {
+        render(<TradeSelector />);
+
+        await waitFor(() => expect(global.fetch).not.toHaveBeenCalled());
+      });
+    });
+
+    describe("with initial trade provided", () => {
+      it("should not call the API on initial render", async () => {
+        render(<TradeSelector initialTrade="Builder" />);
+
+        await waitFor(() => expect(global.fetch).not.toHaveBeenCalled());
+      });
+    });
+
+    describe("with user input set above minimum length", () => {
+      it("should call the API", async () => {
+        const userInput = "swim";
+        const AbortSignalMock = expect.anything();
+
+        render(<TradeSelector />);
+
+        await userEvent.tab();
+        await userEvent.keyboard(userInput);
+        await waitFor(() => {
+          expect(global.fetch).toHaveBeenCalledWith(
+            expect.any(URL),
+            AbortSignalMock,
+          );
+          expect(
+            (global.fetch as jest.Mock).mock.calls[2][0].toString(),
+          ).toEqual(
+            `https://fns-staging.simplybusiness.co.uk/rambdas/trade-selector-chopin?q=${userInput}&site=simplybusiness_hoverla`,
+          );
+        });
+      });
     });
   });
 });