fix: failing test due to limited jest support for focus-trap-react

src/components/App.test.tsx

@@ -3,8 +3,9 @@ import { App } from "./App";
 import { render, screen } from "@testing-library/react";
 
 describe("test load app", () => {
-  it("renders without crashing", () => {
-    render(<App/>);
+  const mockHandleSetActiveTrap = jest.fn();
+  it("renders without crashing", async () => {
+    render(<App activeTrap={false} handleSetActiveTrap={mockHandleSetActiveTrap}/>);
     expect(screen.getByText("(Data Analysis through Voice and Artificial Intelligence)")).toBeDefined();
   });
 });

src/components/App.tsx

@@ -25,16 +25,19 @@ const mockAiResponse = (): ChatMessage => {
   return response;
 };
 
-export const App = () => {
+interface IAppProps {
+  activeTrap: boolean;
+  handleSetActiveTrap: (active: boolean) => void;
+}
+
+export const App = ({activeTrap, handleSetActiveTrap}: IAppProps) => {
   const greeting = "Hello! I'm DAVAI, your Data Analysis through Voice and Artificial Intelligence partner.";
   const [chatTranscript, setChatTranscript] = useState<ChatTranscript>({messages: [{speaker: "DAVAI", content: greeting, timestamp: timeStamp()}]});
   const [readAloudEnabled, setReadAloudEnabled] = useState(false);
   const [playbackSpeed, setPlaybackSpeed] = useState(1);
-  const [activeTrap, setActiveTrap] = useState(false);
 
   useEffect(() => {
     initializePlugin({pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions});
-    setActiveTrap(true);
   }, []);
 
   const handleSetReadAloudEnabled = () => {
@@ -58,33 +61,25 @@ export const App = () => {
   };
 
   return (
-    <FocusTrap
-      active={activeTrap}
-      focusTrapOptions={{
-        allowOutsideClick: true,
-        escapeDeactivates: true,
-        onDeactivate: () => setActiveTrap(false),
-        onActivate: () => setActiveTrap(true)
-      }}
+    <div
+      onFocus={() => handleSetActiveTrap(true)}
+      role="main"
+      className={`App ${activeTrap && "isActive"}`}
     >
-      <div
-        onFocus={() => setActiveTrap(true)}
-        role="main"
-        className={`App ${activeTrap && "isActive"}`}
-      >
-        <h1>
-          DAVAI
-          <span>(Data Analysis through Voice and Artificial Intelligence)</span>
-        </h1>
-        <ChatTranscriptComponent chatTranscript={chatTranscript} />
-        <ChatInputComponent onSubmit={handleChatInputSubmit} />
-        <ReadAloudMenu
-          enabled={readAloudEnabled}
-          onToggle={handleSetReadAloudEnabled}
-          playbackSpeed={playbackSpeed}
-          onPlaybackSpeedSelect={handleSetPlaybackSpeed}
-        />
-      </div>
-    </FocusTrap>
+      <h1>
+        DAVAI
+        <span>(Data Analysis through Voice and Artificial Intelligence)</span>
+      </h1>
+      <ChatTranscriptComponent chatTranscript={chatTranscript} />
+      <ChatInputComponent onSubmit={handleChatInputSubmit} />
+      <ReadAloudMenu
+        enabled={readAloudEnabled}
+        onToggle={handleSetReadAloudEnabled}
+        playbackSpeed={playbackSpeed}
+        onPlaybackSpeedSelect={handleSetPlaybackSpeed}
+      />
+      <button onClick={() => handleSetActiveTrap(true)}>activate focus trap</button>
+      <button onClick={() => handleSetActiveTrap(false)}>exit focus trap</button>
+    </div>
   );
 };

src/components/focus-trap-wrapper.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+import FocusTrap from "focus-trap-react";
+import { App } from "./App";
+
+export const FocusTrapWrapper: React.FC = () => {
+  const [activeTrap, setActiveTrap] = useState(false);
+
+  useEffect(() => {
+    setActiveTrap(true);
+  }, []);
+
+  const handleSetActiveTrap = (active: boolean) => {
+    setActiveTrap(active);
+  }
+
+  return (
+    <FocusTrap
+      active={activeTrap}
+      focusTrapOptions={{
+        allowOutsideClick: true,
+        escapeDeactivates: true,
+        onDeactivate: () => setActiveTrap(false),
+        onActivate: () => setActiveTrap(true),
+      }}
+    >
+      <App activeTrap={activeTrap} handleSetActiveTrap={handleSetActiveTrap}/>
+    </FocusTrap>
+  );
+};
+

src/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { App } from "./components/App";
+import { FocusTrapWrapper } from "./components/focus-trap-wrapper";
 
 import "./index.scss";
 
 const container = document.getElementById("app");
 if (container) {
   const root = createRoot(container);
 
-  root.render(<App />);
+  root.render(<FocusTrapWrapper />);
 }