veza/apps/web/src/hooks/useKeyboardNavigation.test.ts

77 lines
2.1 KiB
TypeScript

import { renderHook } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { useKeyboardNavigation } from './useKeyboardNavigation';
describe('useKeyboardNavigation', () => {
const mockOnEscape = vi.fn();
const mockOnEnter = vi.fn();
const mockOnArrowUp = vi.fn();
const mockOnArrowDown = vi.fn();
const mockOnArrowLeft = vi.fn();
const mockOnArrowRight = vi.fn();
const mockOnTab = vi.fn();
const mockOnShiftTab = vi.fn();
beforeEach(() => {
vi.clearAllMocks();
});
afterEach(() => {
document.removeEventListener('keydown', vi.fn());
});
it('should setup keyboard navigation', () => {
renderHook(() => useKeyboardNavigation({
onEscape: mockOnEscape,
}));
// Hook should be set up
expect(mockOnEscape).toBeDefined();
});
it('should call onEscape when Escape key is pressed', () => {
renderHook(() => useKeyboardNavigation({
onEscape: mockOnEscape,
}));
const event = new KeyboardEvent('keydown', { key: 'Escape' });
document.dispatchEvent(event);
expect(mockOnEscape).toHaveBeenCalledTimes(1);
});
it('should call onArrowUp when ArrowUp key is pressed', () => {
renderHook(() => useKeyboardNavigation({
onArrowUp: mockOnArrowUp,
}));
const event = new KeyboardEvent('keydown', { key: 'ArrowUp' });
document.dispatchEvent(event);
expect(mockOnArrowUp).toHaveBeenCalledTimes(1);
});
it('should call onArrowDown when ArrowDown key is pressed', () => {
renderHook(() => useKeyboardNavigation({
onArrowDown: mockOnArrowDown,
}));
const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
document.dispatchEvent(event);
expect(mockOnArrowDown).toHaveBeenCalledTimes(1);
});
it('should not call callbacks when disabled', () => {
renderHook(() => useKeyboardNavigation({
onEscape: mockOnEscape,
enabled: false,
}));
const event = new KeyboardEvent('keydown', { key: 'Escape' });
document.dispatchEvent(event);
expect(mockOnEscape).not.toHaveBeenCalled();
});
});