| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 |
- import { render, renderHook } from '@testing-library/react'
- import type { ICommand } from 'ui-patterns/CommandMenu/api/types'
- import { beforeEach, describe, expect, it, vi } from 'vitest'
- import { SHORTCUT_DEFINITIONS, SHORTCUT_IDS } from './registry'
- import { useShortcut } from './useShortcut'
- const {
- mockUseHotkeySequence,
- mockUseRegisterCommands,
- mockUseIsShortcutEnabled,
- mockSetCommandMenuOpen,
- } = vi.hoisted(() => ({
- mockUseHotkeySequence: vi.fn(),
- mockUseRegisterCommands: vi.fn(),
- mockUseIsShortcutEnabled: vi.fn(),
- mockSetCommandMenuOpen: vi.fn(),
- }))
- vi.mock('@tanstack/react-hotkeys', () => ({
- useHotkeySequence: mockUseHotkeySequence,
- }))
- vi.mock('ui-patterns/CommandMenu', () => ({
- useRegisterCommands: mockUseRegisterCommands,
- useSetCommandMenuOpen: () => mockSetCommandMenuOpen,
- }))
- vi.mock('./useIsShortcutEnabled', () => ({
- useIsShortcutEnabled: mockUseIsShortcutEnabled,
- }))
- const getLastHotkeyOptions = () => {
- const call = mockUseHotkeySequence.mock.calls.at(-1)
- if (!call) throw new Error('useHotkeySequence was not called')
- return call[2] as {
- enabled: boolean
- timeout: number | undefined
- ignoreInputs?: boolean
- meta?: { id?: string; name?: string; referenceGroup?: string }
- }
- }
- const getLastRegisterCall = () => {
- const call = mockUseRegisterCommands.mock.calls.at(-1)
- if (!call) throw new Error('useRegisterCommands was not called')
- return call as [
- string,
- Array<{ id: string; name: string; action: () => void; badge: () => any }>,
- { enabled: boolean; deps: unknown[]; orderCommands?: unknown },
- ]
- }
- describe('useShortcut', () => {
- beforeEach(() => {
- vi.clearAllMocks()
- mockUseIsShortcutEnabled.mockReturnValue(true)
- })
- describe('hotkey wiring', () => {
- it('passes the registry sequence to useHotkeySequence', () => {
- const cb = vi.fn()
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, cb))
- const [sequence, callback] = mockUseHotkeySequence.mock.calls[0]
- expect(sequence).toEqual(SHORTCUT_DEFINITIONS[SHORTCUT_IDS.COMMAND_MENU_OPEN].sequence)
- expect(callback).toBe(cb)
- })
- it('passes multi-step sequences (G-chords) through unchanged', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.NAV_HOME, vi.fn()))
- expect(mockUseHotkeySequence.mock.calls[0][0]).toEqual(['G', 'H'])
- })
- it('wires the callback by reference — useHotkeySequence receives the same function', () => {
- const cb = vi.fn()
- renderHook(() => useShortcut(SHORTCUT_IDS.ACTION_BAR_SAVE, cb))
- const passedCallback = mockUseHotkeySequence.mock.calls[0][1]
- passedCallback()
- expect(cb).toHaveBeenCalledTimes(1)
- })
- })
- describe('enabled resolution', () => {
- it('defaults to enabled: true when no options and no registry default', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn()))
- expect(getLastHotkeyOptions().enabled).toBe(true)
- })
- it('caller option takes priority over fallback', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), { enabled: false }))
- expect(getLastHotkeyOptions().enabled).toBe(false)
- })
- it('global disable forces enabled to false, regardless of caller', () => {
- mockUseIsShortcutEnabled.mockReturnValue(false)
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), { enabled: true }))
- expect(getLastHotkeyOptions().enabled).toBe(false)
- })
- it('global enabled AND caller enabled = true', () => {
- mockUseIsShortcutEnabled.mockReturnValue(true)
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), { enabled: true }))
- expect(getLastHotkeyOptions().enabled).toBe(true)
- })
- it('global enabled AND caller undefined = true', () => {
- mockUseIsShortcutEnabled.mockReturnValue(true)
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn()))
- expect(getLastHotkeyOptions().enabled).toBe(true)
- })
- it('subscribes to the correct shortcut id for global preference', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.NAV_TABLE_EDITOR, vi.fn()))
- expect(mockUseIsShortcutEnabled).toHaveBeenCalledWith(SHORTCUT_IDS.NAV_TABLE_EDITOR)
- })
- })
- describe('timeout resolution', () => {
- it('defaults to undefined (falls through to TanStack default)', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn()))
- expect(getLastHotkeyOptions().timeout).toBeUndefined()
- })
- it('uses caller-provided timeout', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), { timeout: 2000 }))
- expect(getLastHotkeyOptions().timeout).toBe(2000)
- })
- })
- describe('ignoreInputs resolution', () => {
- it('omits the key when no registry default and no caller override (library applies its per-hotkey default)', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn()))
- const options = getLastHotkeyOptions()
- expect('ignoreInputs' in options).toBe(false)
- })
- it('uses the registry default when no caller override', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.TABLE_EDITOR_JUMP_FIRST_ROW, vi.fn()))
- expect(getLastHotkeyOptions().ignoreInputs).toBe(true)
- })
- it('caller override takes priority over registry default', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.TABLE_EDITOR_JUMP_FIRST_ROW, vi.fn(), { ignoreInputs: false })
- )
- expect(getLastHotkeyOptions().ignoreInputs).toBe(false)
- })
- })
- describe('command menu registration', () => {
- it('calls useRegisterCommands under the "Shortcuts" section', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn()))
- const [section] = getLastRegisterCall()
- expect(section).toBe('Shortcuts')
- })
- it('is disabled by default (registerInCommandMenu defaults to false)', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn()))
- expect(getLastRegisterCall()[2].enabled).toBe(false)
- })
- it('is enabled when registerInCommandMenu: true AND enabled', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), { registerInCommandMenu: true })
- )
- expect(getLastRegisterCall()[2].enabled).toBe(true)
- })
- it('is disabled when globally disabled, even with registerInCommandMenu: true', () => {
- mockUseIsShortcutEnabled.mockReturnValue(false)
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), { registerInCommandMenu: true })
- )
- expect(getLastRegisterCall()[2].enabled).toBe(false)
- })
- it('is disabled when caller passes enabled: false, even with registerInCommandMenu: true', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), {
- enabled: false,
- registerInCommandMenu: true,
- })
- )
- expect(getLastRegisterCall()[2].enabled).toBe(false)
- })
- it('registers the command with id and label from the registry', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.RESULTS_COPY_MARKDOWN, vi.fn(), { registerInCommandMenu: true })
- )
- const [, commands] = getLastRegisterCall()
- expect(commands).toHaveLength(1)
- expect(commands[0].id).toBe(SHORTCUT_IDS.RESULTS_COPY_MARKDOWN)
- expect(commands[0].name).toBe(SHORTCUT_DEFINITIONS[SHORTCUT_IDS.RESULTS_COPY_MARKDOWN].label)
- })
- it('command action calls the LATEST callback after a rerender (no stale closure)', () => {
- const cb1 = vi.fn()
- const cb2 = vi.fn()
- const { rerender } = renderHook(
- ({ cb }: { cb: () => void }) =>
- useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, cb, { registerInCommandMenu: true }),
- { initialProps: { cb: cb1 } }
- )
- // Capture the action from the first render and fire it after a rerender —
- // it should call the NEW callback, proving we dodge the stale closure.
- const firstAction = mockUseRegisterCommands.mock.calls[0][1][0].action
- rerender({ cb: cb2 })
- firstAction()
- expect(cb1).not.toHaveBeenCalled()
- expect(cb2).toHaveBeenCalledTimes(1)
- })
- it('command action closes the command menu when fired', () => {
- const cb = vi.fn()
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, cb, { registerInCommandMenu: true })
- )
- const action = mockUseRegisterCommands.mock.calls[0][1][0].action
- action()
- expect(mockSetCommandMenuOpen).toHaveBeenCalledWith(false)
- expect(cb).toHaveBeenCalledTimes(1)
- })
- it('command action identity is stable across renders', () => {
- const { rerender } = renderHook(
- ({ cb }: { cb: () => void }) =>
- useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, cb, { registerInCommandMenu: true }),
- { initialProps: { cb: vi.fn() } }
- )
- const firstAction = mockUseRegisterCommands.mock.calls[0][1][0].action
- rerender({ cb: vi.fn() })
- const secondAction = mockUseRegisterCommands.mock.calls.at(-1)![1][0].action
- expect(firstAction).toBe(secondAction)
- })
- it('deps track enabled + label so downstream can invalidate correctly', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), { registerInCommandMenu: true })
- )
- const [, , options] = getLastRegisterCall()
- expect(options.deps).toEqual([
- true,
- SHORTCUT_DEFINITIONS[SHORTCUT_IDS.COMMAND_MENU_OPEN].label,
- ])
- })
- it('orders "Show all keyboard shortcuts" last within the Shortcuts section', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.SHORTCUTS_OPEN_REFERENCE, vi.fn(), { registerInCommandMenu: true })
- )
- const [, commands, options] = getLastRegisterCall()
- const orderCommands = options.orderCommands as (
- existing: ICommand[],
- commandsToInsert: ICommand[]
- ) => ICommand[]
- const ordered = orderCommands(
- [
- { id: SHORTCUT_IDS.TABLE_EDITOR_INSERT_ROW, name: 'Insert row', action: vi.fn() },
- { id: SHORTCUT_IDS.TABLE_EDITOR_INSERT_COLUMN, name: 'Insert column', action: vi.fn() },
- ],
- commands
- )
- expect(ordered.map((command) => command.id)).toEqual([
- SHORTCUT_IDS.TABLE_EDITOR_INSERT_ROW,
- SHORTCUT_IDS.TABLE_EDITOR_INSERT_COLUMN,
- SHORTCUT_IDS.SHORTCUTS_OPEN_REFERENCE,
- ])
- })
- describe('badge rendering', () => {
- it('renders a single KeyboardShortcut pill for single-step sequences (no "then")', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.COMMAND_MENU_OPEN, vi.fn(), { registerInCommandMenu: true })
- )
- const badgeNode = getLastRegisterCall()[1][0].badge()
- const { container } = render(badgeNode)
- expect(container.textContent).not.toContain('then')
- })
- it('renders a "then" separator between steps for multi-step sequences', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.NAV_HOME, vi.fn(), { registerInCommandMenu: true })
- )
- const badgeNode = getLastRegisterCall()[1][0].badge()
- const { container } = render(badgeNode)
- expect(container.textContent).toContain('then')
- })
- it('renders the converted keys (Mod → ⌘ or Ctrl via KeyboardShortcut)', () => {
- renderHook(() =>
- useShortcut(SHORTCUT_IDS.RESULTS_COPY_MARKDOWN, vi.fn(), {
- registerInCommandMenu: true,
- })
- )
- const badgeNode = getLastRegisterCall()[1][0].badge()
- const { container } = render(badgeNode)
- // Mod+Shift+M → the "M" key is always rendered as-is; the platform-specific
- // ⌘/Ctrl handling lives in KeyboardShortcut and is asserted there.
- expect(container.textContent).toContain('M')
- expect(container.textContent).toContain('⇧')
- })
- })
- })
- describe('reference-sheet metadata', () => {
- it('forwards id, label, and referenceGroup as registration meta', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.NAV_HOME, vi.fn()))
- expect(getLastHotkeyOptions().meta).toEqual({
- id: SHORTCUT_IDS.NAV_HOME,
- name: SHORTCUT_DEFINITIONS[SHORTCUT_IDS.NAV_HOME].label,
- referenceGroup: SHORTCUT_DEFINITIONS[SHORTCUT_IDS.NAV_HOME].referenceGroup,
- })
- })
- it('uses the caller label override in meta.name', () => {
- renderHook(() => useShortcut(SHORTCUT_IDS.NAV_HOME, vi.fn(), { label: 'Go home' }))
- expect(getLastHotkeyOptions().meta?.name).toBe('Go home')
- })
- it('keeps a stable meta reference when inputs do not change', () => {
- const { rerender } = renderHook(
- ({ cb }: { cb: () => void }) => useShortcut(SHORTCUT_IDS.NAV_HOME, cb),
- { initialProps: { cb: vi.fn() } }
- )
- const first = getLastHotkeyOptions().meta
- rerender({ cb: vi.fn() })
- expect(getLastHotkeyOptions().meta).toBe(first)
- })
- })
- })
|