From 9b7e2019f70dcdbd7cb775db620af3cb6bb9fc25 Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Wed, 28 Aug 2024 16:01:20 +0200
Subject: [PATCH] fix keyboard input events.

---
 src/useCallViewKeyboardShortcuts.test.tsx | 25 ++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/useCallViewKeyboardShortcuts.test.tsx b/src/useCallViewKeyboardShortcuts.test.tsx
index 7fecf63e..a3473cba 100644
--- a/src/useCallViewKeyboardShortcuts.test.tsx
+++ b/src/useCallViewKeyboardShortcuts.test.tsx
@@ -22,6 +22,12 @@ import userEvent from "@testing-library/user-event";
 
 import { useCallViewKeyboardShortcuts } from "../src/useCallViewKeyboardShortcuts";
 
+// Test Explanation:
+// - The main objective is to test `useCallViewKeyboardShortcuts`.
+//   The TestComponent just wraps a button around that hook.
+// - We need to set userEvent to the `{document = window.document}` since we are testing the
+// `useCallViewKeyboardShortcuts` hook here. Which is listening to window.
+
 interface TestComponentProps {
   setMicrophoneMuted: (muted: boolean) => void;
   onButtonClick?: () => void;
@@ -40,24 +46,33 @@ const TestComponent: FC<TestComponentProps> = ({
   );
   return (
     <div ref={ref}>
-      <Button onClick={onButtonClick}>I'm a button</Button>
+      <Button onClick={onButtonClick}>TEST</Button>
     </div>
   );
 };
 
 test("spacebar unmutes", async () => {
-  const user = userEvent.setup();
+  const user = userEvent.setup({ document: window.document });
   let muted = true;
-  render(<TestComponent setMicrophoneMuted={(m) => (muted = m)} />);
+  render(
+    <TestComponent
+      onButtonClick={() => (muted = false)}
+      setMicrophoneMuted={(m) => {
+        muted = m;
+      }}
+    />,
+  );
 
   await user.keyboard("[Space>]");
   expect(muted).toBe(false);
   await user.keyboard("[/Space]");
+
   expect(muted).toBe(true);
 });
 
 test("spacebar prioritizes pressing a button", async () => {
-  const user = userEvent.setup();
+  const user = userEvent.setup({ document: window.document });
+
   const setMuted = vi.fn();
   const onClick = vi.fn();
   render(
@@ -71,7 +86,7 @@ test("spacebar prioritizes pressing a button", async () => {
 });
 
 test("unmuting happens in place of the default action", async () => {
-  const user = userEvent.setup();
+  const user = userEvent.setup({ document: window.document });
   const defaultPrevented = vi.fn();
   // In the real application, we mostly just want the spacebar shortcut to avoid
   // scrolling the page. But to test that here in JSDOM, we need some kind of