From ed3ea5bf63c8f7559d0557e252851814b830744a Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Tue, 7 May 2024 10:56:31 -0400
Subject: [PATCH] feat: Part 3 of converting to Restart modals: Preset modals
 (#2578)

---
 assets/src/components/inputModal.tsx        | 29 +++++++++------------
 assets/tests/components/inputModal.test.tsx | 15 ++++++-----
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/assets/src/components/inputModal.tsx b/assets/src/components/inputModal.tsx
index 5c2eb410f..89e3aeed2 100644
--- a/assets/src/components/inputModal.tsx
+++ b/assets/src/components/inputModal.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from "react"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { closeInputModal } from "../state"
+import { Modal } from "@restart/ui"
 
 const InputModal = ({
   children,
@@ -9,22 +10,18 @@ const InputModal = ({
 }) => {
   const [, dispatch] = useContext(StateDispatchContext)
   return (
-    <>
-      <div role="dialog">
-        <div
-          className="c-input-modal"
-          role="presentation"
-          onKeyDown={(event) => {
-            if (event.key === "Escape") {
-              dispatch(closeInputModal())
-            }
-          }}
-        >
-          {children}
-        </div>
-      </div>
-      <div className="c-input-modal-backdrop" aria-hidden={true} />
-    </>
+    <Modal
+      className="c-input-modal"
+      onHide={() => {
+        dispatch(closeInputModal())
+      }}
+      show
+      renderBackdrop={(props) => (
+        <div {...props} className="c-input-modal-backdrop" aria-hidden />
+      )}
+    >
+      <>{children}</>
+    </Modal>
   )
 }
 
diff --git a/assets/tests/components/inputModal.test.tsx b/assets/tests/components/inputModal.test.tsx
index 320b04ca4..e7a68dae7 100644
--- a/assets/tests/components/inputModal.test.tsx
+++ b/assets/tests/components/inputModal.test.tsx
@@ -1,24 +1,25 @@
 import { jest, describe, test, expect } from "@jest/globals"
 import React from "react"
-import { render, fireEvent } from "@testing-library/react"
+import { render, waitFor } from "@testing-library/react"
 import InputModal from "../../src/components/inputModal"
 import { StateDispatchProvider } from "../../src/contexts/stateDispatchContext"
 import { initialState, closeInputModal } from "../../src/state"
+import userEvent from "@testing-library/user-event"
 
 describe("InputModal", () => {
-  test("can be dismissed with escape key", () => {
+  test("can be dismissed with escape key", async () => {
     const mockDispatch = jest.fn()
 
-    const result = render(
+    render(
       <StateDispatchProvider state={initialState} dispatch={mockDispatch}>
         <InputModal>
           <>Hello, world!</>
         </InputModal>
       </StateDispatchProvider>
     )
-
-    fireEvent.keyDown(result.getByText("Hello, world!"), { key: "Escape" })
-
-    expect(mockDispatch).toHaveBeenCalledWith(closeInputModal())
+    await userEvent.keyboard("{Escape}")
+    await waitFor(() =>
+      expect(mockDispatch).toHaveBeenCalledWith(closeInputModal())
+    )
   })
 })