__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()
+  })
+})

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">