KeyboardShortcut.test.tsx48 lines · main

1	import { render, screen } from '@testing-library/react'
2	import { afterEach, describe, expect, it } from 'vitest'
3
4	import { KeyboardShortcut } from './KeyboardShortcut'
5
6	const originalNavigator = global.navigator
7
8	const setNavigator = (platform: string, userAgent: string) => {
9	Object.defineProperty(global, 'navigator', {
10	configurable: true,
11	value: {
12	...originalNavigator,
13	platform,
14	userAgent,
15	},
16	})
17	}
18
19	describe('KeyboardShortcut', () => {
20	afterEach(() => {
21	Object.defineProperty(global, 'navigator', {
22	configurable: true,
23	value: originalNavigator,
24	})
25	})
26
27	it('renders arrow keys as symbols', () => {
28	render(<KeyboardShortcut keys={['ArrowUp']} />)
29
30	expect(screen.getByText('↑')).toBeInTheDocument()
31	})
32
33	it('renders compact mac-style shortcuts for symbol and single-character keys', () => {
34	setNavigator('MacIntel', 'Mozilla/5.0 (Macintosh; Intel Mac OS X)')
35
36	render(<KeyboardShortcut keys={['Meta', 'ArrowUp']} />)
37
38	expect(screen.getByText('⌘↑')).toBeInTheDocument()
39	})
40
41	it('keeps word-style non-mac shortcuts readable', () => {
42	setNavigator('Linux x86_64', 'Mozilla/5.0 (X11; Linux x86_64)')
43
44	render(<KeyboardShortcut keys={['Meta', 'ArrowUp']} />)
45
46	expect(screen.getByText('Ctrl ↑')).toBeInTheDocument()
47	})
48	})