Add back keyboard toast tests (#2582)

* Fix global-jsdom initialization

* add back toast tests

* fix keyboard input events.

* add jsdom types

src/Toast.test.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import { describe, expect, test, vi } from "vitest";
 import { render, configure } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { Toast } from "../src/Toast";
 import { withFakeTimers } from "./utils/test";
@@ -24,6 +25,9 @@ configure({
   defaultHidden: true,
 });
 
+// Test Explanation:
+// This test the toast. We need to use { document: window.document } because the toast listens
+// for user input on `window`.
 describe("Toast", () => {
   test("renders", () => {
     const { queryByRole } = render(
@@ -40,6 +44,33 @@ describe("Toast", () => {
     expect(getByRole("dialog")).toMatchSnapshot();
   });
 
+  test("dismisses when Esc is pressed", async () => {
+    const user = userEvent.setup({ document: window.document });
+    const onDismiss = vi.fn();
+    const { debug } = render(
+      <Toast open={true} onDismiss={onDismiss}>
+        Hello world!
+      </Toast>,
+    );
+    debug();
+    await user.keyboard("[Escape]");
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  test("dismisses when background is clicked", async () => {
+    const user = userEvent.setup();
+    const onDismiss = vi.fn();
+    const { getByRole, unmount } = render(
+      <Toast open={true} onDismiss={onDismiss}>
+        Hello world!
+      </Toast>,
+    );
+    const background = getByRole("dialog").previousSibling! as Element;
+    await user.click(background);
+    expect(onDismiss).toHaveBeenCalled();
+    unmount();
+  });
+
   test("dismisses itself after the specified timeout", () => {
     withFakeTimers(() => {
       const onDismiss = vi.fn();

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

src/vitest.setup.ts

@@ -13,13 +13,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-
 import "global-jsdom/register";
-
+import globalJsdom from "global-jsdom";
 import i18n from "i18next";
 import posthog from "posthog-js";
 import { initReactI18next } from "react-i18next";
-import { afterEach } from "vitest";
+import { afterEach, beforeEach } from "vitest";
 import { cleanup } from "@testing-library/react";
 
 import { Config } from "./config/Config";
@@ -36,4 +35,12 @@ i18n.use(initReactI18next).init({
 Config.initDefault();
 posthog.opt_out_capturing();
 
-afterEach(cleanup);
+// We need to cleanup the global jsDom
+// Otherwise we will run into issues with async input test overlapping and throwing.
+
+let cleanupJsDom: { (): void };
+beforeEach(() => (cleanupJsDom = globalJsdom()));
+afterEach(() => {
+  cleanupJsDom();
+  cleanup();
+});