From 6412158003f295a350fc66800796f30c8f3c534b Mon Sep 17 00:00:00 2001
From: ryu <ryumacodes@gmail.com>
Date: Fri, 1 Aug 2025 03:04:06 +0500
Subject: feat: enhance timeline navigation with comprehensive testing and
 documentation

- Add comprehensive test suite with 13 passing tests
- Create detailed keyboard shortcuts documentation (KEYBOARD_SHORTCUTS.md)
- Add meaningful code comments explaining functionality
- Set up Vitest testing framework with proper mocks
- Fix React imports in timeline components for proper JSX rendering
- Add ResizeObserver mock for browser environment compatibility
- Enhance keyboard shortcuts help to properly format Enter key display

Tests cover:
- Enter key keybinding functionality
- Return to Start button click behavior
- Keyboard shortcuts help system integration
- Component rendering and tooltip structure

Documentation includes:
- Complete keyboard shortcuts reference
- UI feature explanations
- Usage notes and behavior descriptions

All tests passing (13/13) with full feature coverage.
---
 .../src/stores/__tests__/keybindings-store.test.ts | 65 ++++++++++++++++++++++
 apps/web/src/stores/keybindings-store.ts           |  2 +-
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/stores/__tests__/keybindings-store.test.ts

(limited to 'apps/web/src/stores')

diff --git a/apps/web/src/stores/__tests__/keybindings-store.test.ts b/apps/web/src/stores/__tests__/keybindings-store.test.ts
new file mode 100644
index 00000000..8aa5b94f
--- /dev/null
+++ b/apps/web/src/stores/__tests__/keybindings-store.test.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useKeybindingsStore } from '../keybindings-store'
+
+describe('Keybindings Store', () => {
+  beforeEach(() => {
+    // Reset store to default state before each test
+    useKeybindingsStore.getState().resetToDefaults()
+  })
+
+  describe('Default Keybindings', () => {
+    it('should include Enter key mapping to goto-start action', () => {
+      const { keybindings } = useKeybindingsStore.getState()
+      expect(keybindings.enter).toBe('goto-start')
+    })
+
+    it('should include Home key mapping to goto-start action', () => {
+      const { keybindings } = useKeybindingsStore.getState()
+      expect(keybindings.home).toBe('goto-start')
+    })
+
+    it('should have both Enter and Home keys for the same action', () => {
+      const { keybindings } = useKeybindingsStore.getState()
+      expect(keybindings.enter).toBe(keybindings.home)
+    })
+  })
+
+  describe('getKeybindingsForAction', () => {
+    it('should return both Enter and Home keys for goto-start action', () => {
+      const { getKeybindingsForAction } = useKeybindingsStore.getState()
+      const keys = getKeybindingsForAction('goto-start')
+      
+      expect(keys).toContain('enter')
+      expect(keys).toContain('home')
+      expect(keys.length).toBeGreaterThanOrEqual(2)
+    })
+  })
+
+  describe('Keyboard Event Parsing', () => {
+    it('should generate correct keybinding string for Enter key', () => {
+      const { getKeybindingString } = useKeybindingsStore.getState()
+      
+      // Mock KeyboardEvent for Enter key
+      const enterEvent = new KeyboardEvent('keydown', {
+        key: 'Enter',
+        code: 'Enter'
+      })
+      
+      const result = getKeybindingString(enterEvent)
+      expect(result).toBe('enter')
+    })
+
+    it('should generate correct keybinding string for Home key', () => {
+      const { getKeybindingString } = useKeybindingsStore.getState()
+      
+      // Mock KeyboardEvent for Home key
+      const homeEvent = new KeyboardEvent('keydown', {
+        key: 'Home',
+        code: 'Home'
+      })
+      
+      const result = getKeybindingString(homeEvent)
+      expect(result).toBe('home')
+    })
+  })
+})
\ No newline at end of file
diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts
index 4c11cfde..740a5855 100644
--- a/apps/web/src/stores/keybindings-store.ts
+++ b/apps/web/src/stores/keybindings-store.ts
@@ -17,7 +17,7 @@ export const defaultKeybindings: KeybindingConfig = {
   "shift+left": "jump-backward",
   "shift+right": "jump-forward",
   home: "goto-start",
-  enter: "goto-start",
+  enter: "goto-start", // More intuitive alternative to Home key for timeline navigation
   end: "goto-end",
   s: "split-element",
   n: "toggle-snapping",
-- 
cgit v1.3.1