mirror_match/__tests__/components/HelpModal.test.tsx
ilia 929a096304
All checks were successful
CI / skip-ci-check (pull_request) Successful in 1m22s
CI / lint-and-type-check (pull_request) Successful in 1m48s
CI / test (pull_request) Successful in 1m52s
CI / build (pull_request) Successful in 1m53s
CI / secret-scanning (pull_request) Successful in 1m24s
CI / dependency-scan (pull_request) Successful in 1m28s
CI / sast-scan (pull_request) Successful in 2m30s
CI / workflow-summary (pull_request) Successful in 1m22s
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.
2026-01-04 22:25:51 -05:00

118 lines
2.9 KiB
TypeScript

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