From 91cc7a41f9b526b07e17a5c88802c99febb24d03 Mon Sep 17 00:00:00 2001
From: Oscar Busk <oscar.busk@gmail.com>
Date: Tue, 8 Feb 2022 01:43:21 +0100
Subject: [PATCH] Start adding tests for Combobox

This caused me lots of pain which was finally solved by https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
---
 src/components/Combobox/Combobox.test.tsx | 47 +++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/components/Combobox/Combobox.test.tsx

diff --git a/src/components/Combobox/Combobox.test.tsx b/src/components/Combobox/Combobox.test.tsx
new file mode 100644
index 00000000..0c403229
--- /dev/null
+++ b/src/components/Combobox/Combobox.test.tsx
@@ -0,0 +1,47 @@
+/** @jest-environment jsdom */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Combobox from "./Combobox";
+
+describe("Combobox", () => {
+    const setup = async () => {
+        const suggestionPromise = new Promise<{ value: string }[]>((resolve) =>
+            resolve([{ value: "a" }, { value: "b" }]),
+        );
+
+        const suggestionFinder = jest.fn(
+            (query: string | undefined) => suggestionPromise,
+        );
+
+        const utils = render(
+            <Combobox id="test" suggestionFinder={suggestionFinder} />,
+        );
+
+        const input: HTMLInputElement = await screen.findByRole("textbox");
+
+        return {
+            suggestionPromise,
+            suggestionFinder,
+            input,
+            ...utils,
+        };
+    };
+
+    it("Renders an input", async () => {
+        const { input } = await setup();
+
+        expect(input).toBeInTheDocument();
+    });
+
+    it("Calls suggestionFinder on input", async () => {
+        const { suggestionPromise, suggestionFinder, input } = await setup();
+
+        fireEvent.focus(input);
+        fireEvent.input(input, { target: { value: "a" } });
+
+        expect(suggestionFinder).toHaveBeenCalledTimes(1);
+        expect(suggestionFinder).toHaveBeenCalledWith("a");
+
+        await act(() => suggestionPromise.then(() => {}));
+    });
+});