From 615101628516b73ec3d0a65cea115cbfac2876ac Mon Sep 17 00:00:00 2001
From: David Langley <davidl@element.io>
Date: Wed, 5 Jun 2024 14:13:49 +0100
Subject: [PATCH 1/2] return React.ChangeEvent<HTMLInputElement> in onChange
 definition to avoid casting in the application

---
 src/components/Search/Search.test.tsx | 35 ++++++++++++++++++++++++---
 src/components/Search/Search.tsx      |  2 +-
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/Search.test.tsx b/src/components/Search/Search.test.tsx
index 0b80b03d..941fa415 100644
--- a/src/components/Search/Search.test.tsx
+++ b/src/components/Search/Search.test.tsx
@@ -14,14 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import React, { ChangeEvent } from "react";
+import { userEvent } from "@storybook/test";
 
 import { Search } from "./Search";
 import { Form } from "@radix-ui/react-form";
 
+type SearchTestProps = {
+  onChange?: (e: ChangeEvent) => void;
+};
+
 describe("Search", () => {
+  const SearchTest = (props: SearchTestProps) => (
+    <Form>
+      <Search name="search" onChange={props.onChange ?? (() => {})} />
+    </Form>
+  );
+
   it("renders", () => {
     const { asFragment } = render(
       <Form>
@@ -30,4 +41,22 @@ describe("Search", () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it("calls onChange when text edited", async () => {
+    let value;
+    const onChange = vi
+      .fn()
+      .mockImplementation((e: ChangeEvent<HTMLInputElement>) => {
+        value = e.target.value;
+      });
+    render(<SearchTest onChange={onChange} />);
+    const query = "my query";
+    await act(async () => {
+      const input = screen.getByRole("searchbox");
+      await userEvent.type(input, query);
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(value).toEqual(query);
+  });
 });
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 3175aabf..cf5b68d6 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -39,7 +39,7 @@ type SearchProps = {
   /**
    * Event handler called when the search changes.
    */
-  onChange?: (e: React.ChangeEvent) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
 /**

From 627e5c701b1e73929ff534f523214d7e7b600431 Mon Sep 17 00:00:00 2001
From: David Langley <davidl@element.io>
Date: Wed, 2 Oct 2024 11:00:55 +0100
Subject: [PATCH 2/2] remove act

---
 src/components/Search/Search.test.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/Search.test.tsx b/src/components/Search/Search.test.tsx
index 941fa415..f2141c1d 100644
--- a/src/components/Search/Search.test.tsx
+++ b/src/components/Search/Search.test.tsx
@@ -51,10 +51,8 @@ describe("Search", () => {
       });
     render(<SearchTest onChange={onChange} />);
     const query = "my query";
-    await act(async () => {
-      const input = screen.getByRole("searchbox");
-      await userEvent.type(input, query);
-    });
+    const input = screen.getByRole("searchbox");
+    await userEvent.type(input, query);
 
     expect(onChange).toHaveBeenCalled();
     expect(value).toEqual(query);