From 929a096304d2c4375b4283971289395101c7d0ac Mon Sep 17 00:00:00 2001
From: ilia <idobkin@gmail.com>
Date: Sun, 4 Jan 2026 22:25:51 -0500
Subject: [PATCH] Add HelpModal tests for keyboard interactions and content
 display

- Created a new test suite for the HelpModal component to verify its behavior with keyboard shortcuts.
- Added tests to ensure the modal does not render initially, opens with Shift+?, closes with Escape, and does not open with Ctrl+?.
- Included checks for toggling the modal state and verifying the display of help content when the modal is open.
- Updated HelpModal component to use HTML entities for apostrophes in text content for better rendering.
---
 __tests__/components/HelpModal.test.tsx | 117 ++++++++++++++++++++++++
 components/HelpModal.tsx                |   8 +-
 2 files changed, 121 insertions(+), 4 deletions(-)
 create mode 100644 __tests__/components/HelpModal.test.tsx

diff --git a/__tests__/components/HelpModal.test.tsx b/__tests__/components/HelpModal.test.tsx
new file mode 100644
index 0000000..633d127
--- /dev/null
+++ b/__tests__/components/HelpModal.test.tsx
@@ -0,0 +1,117 @@
+import { render, screen, fireEvent, act } from "@testing-library/react"
+import HelpModal from "@/components/HelpModal"
+
+describe("HelpModal", () => {
+  it("should not render initially", () => {
+    render(<HelpModal />)
+    expect(screen.queryByText("Welcome to MirrorMatch")).not.toBeInTheDocument()
+  })
+
+  it("should open when Shift+? is pressed", () => {
+    render(<HelpModal />)
+    
+    // Simulate Shift+? (Shift+/)
+    act(() => {
+      fireEvent.keyDown(window, {
+        key: "/",
+        shiftKey: true,
+        ctrlKey: false,
+        metaKey: false,
+      })
+    })
+    
+    expect(screen.getByText("Welcome to MirrorMatch")).toBeInTheDocument()
+  })
+
+  it("should close when Escape is pressed", () => {
+    render(<HelpModal />)
+    
+    // Open modal first
+    act(() => {
+      fireEvent.keyDown(window, {
+        key: "/",
+        shiftKey: true,
+        ctrlKey: false,
+        metaKey: false,
+      })
+    })
+    
+    expect(screen.getByText("Welcome to MirrorMatch")).toBeInTheDocument()
+    
+    // Close with Escape
+    act(() => {
+      fireEvent.keyDown(window, {
+        key: "Escape",
+      })
+    })
+    
+    // Modal should close
+    expect(screen.queryByText("Welcome to MirrorMatch")).not.toBeInTheDocument()
+  })
+
+  it("should not open with Ctrl+? (should require Shift only)", () => {
+    render(<HelpModal />)
+    
+    // Simulate Ctrl+? (Ctrl+Shift+/)
+    act(() => {
+      fireEvent.keyDown(window, {
+        key: "/",
+        shiftKey: true,
+        ctrlKey: true, // Should prevent opening
+        metaKey: false,
+      })
+    })
+    
+    // Modal should not open when Ctrl is also pressed
+    expect(screen.queryByText("Welcome to MirrorMatch")).not.toBeInTheDocument()
+  })
+
+  it("should toggle when Shift+? is pressed multiple times", () => {
+    render(<HelpModal />)
+    
+    // First press - should open
+    act(() => {
+      fireEvent.keyDown(window, {
+        key: "/",
+        shiftKey: true,
+        ctrlKey: false,
+        metaKey: false,
+      })
+    })
+    
+    expect(screen.getByText("Welcome to MirrorMatch")).toBeInTheDocument()
+    
+    // Second press - should close
+    act(() => {
+      fireEvent.keyDown(window, {
+        key: "/",
+        shiftKey: true,
+        ctrlKey: false,
+        metaKey: false,
+      })
+    })
+    
+    expect(screen.queryByText("Welcome to MirrorMatch")).not.toBeInTheDocument()
+  })
+
+  it("should display help content when open", () => {
+    render(<HelpModal />)
+    
+    // Open modal
+    act(() => {
+      fireEvent.keyDown(window, {
+        key: "/",
+        shiftKey: true,
+        ctrlKey: false,
+        metaKey: false,
+      })
+    })
+    
+    // Check for key content sections
+    expect(screen.getByText("What is MirrorMatch?")).toBeInTheDocument()
+    expect(screen.getByText("How to Play")).toBeInTheDocument()
+    expect(screen.getByText("Key Features")).toBeInTheDocument()
+    expect(screen.getByText("Keyboard Shortcuts")).toBeInTheDocument()
+    expect(screen.getByText("Tips")).toBeInTheDocument()
+  })
+})
diff --git a/components/HelpModal.tsx b/components/HelpModal.tsx
index 5a13006..bb30cf0 100644
--- a/components/HelpModal.tsx
+++ b/components/HelpModal.tsx
@@ -127,7 +127,7 @@ export default function HelpModal() {
                 </li>
                 <li>
                   <strong>Earn Points:</strong> Get points for each correct guess! The more you
-                  guess correctly, the higher you'll climb on the leaderboard.
+                  guess correctly, the higher you&apos;ll climb on the leaderboard.
                 </li>
                 <li>
                   <strong>Compete:</strong> Check the Leaderboard to see how you rank against other
@@ -252,16 +252,16 @@ export default function HelpModal() {
               <ul className="space-y-2 text-gray-700">
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">💡</span>
-                  <span>Guesses are case-insensitive, so don't worry about capitalization</span>
+                  <span>Guesses are case-insensitive, so don&apos;t worry about capitalization</span>
                 </li>
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">💡</span>
-                  <span>You can't guess your own photos, but you can still view them</span>
+                  <span>You can&apos;t guess your own photos, but you can still view them</span>
                 </li>
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">💡</span>
                   <span>
-                    You'll receive email notifications when other users upload new photos
+                    You&apos;ll receive email notifications when other users upload new photos
                   </span>
                 </li>
                 <li className="flex items-start">