Spaces:
Sleeping
Sleeping
File size: 3,135 Bytes
cd99321 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import { render, screen, fireEvent, act } from '../../../tests/helpers/render';
import userEvent from '@testing-library/user-event';
import { ContextMenu } from './ContextMenu';
import { Trash2, Edit } from 'lucide-react';
const makeMenu = (x = 100, y = 200, overrides?: object[]) => ({
x,
y,
items: overrides ?? [
{ label: 'Edit', icon: Edit, onClick: vi.fn() },
{ label: 'Delete', icon: Trash2, onClick: vi.fn(), danger: true },
],
});
describe('ContextMenu', () => {
const onClose = vi.fn();
beforeEach(() => {
onClose.mockClear();
});
it('FE-COMP-CTX-001: renders nothing when menu is null', () => {
render(<ContextMenu menu={null} onClose={onClose} />);
expect(document.body.querySelector('[style*="z-index: 999999"]')).toBeNull();
});
it('FE-COMP-CTX-002: renders menu items at the specified position', () => {
render(<ContextMenu menu={makeMenu(150, 250)} onClose={onClose} />);
expect(screen.getByText('Edit')).toBeTruthy();
expect(screen.getByText('Delete')).toBeTruthy();
// Portal root div has position fixed at the given coords
const portal = document.body.querySelector('[style*="position: fixed"]') as HTMLElement;
expect(portal.style.left).toBe('150px');
expect(portal.style.top).toBe('250px');
});
it('FE-COMP-CTX-003: clicking a menu item calls its onClick and onClose', async () => {
const onClick = vi.fn();
const menu = makeMenu(100, 200, [{ label: 'Copy', onClick }]);
const user = userEvent.setup();
render(<ContextMenu menu={menu} onClose={onClose} />);
await user.click(screen.getByText('Copy'));
expect(onClick).toHaveBeenCalledOnce();
// onClose is called once by the button handler and once by the document click listener
expect(onClose).toHaveBeenCalled();
});
it('FE-COMP-CTX-004: divider items render as a separator without text', () => {
const menu = makeMenu(100, 200, [
{ label: 'Item A', onClick: vi.fn() },
{ divider: true },
{ label: 'Item B', onClick: vi.fn() },
]);
render(<ContextMenu menu={menu} onClose={onClose} />);
expect(screen.getByText('Item A')).toBeTruthy();
expect(screen.getByText('Item B')).toBeTruthy();
// Divider should not have any button text
const buttons = screen.getAllByRole('button');
expect(buttons).toHaveLength(2);
});
it('FE-COMP-CTX-005: danger items have red color styling', () => {
const menu = makeMenu(100, 200, [
{ label: 'Remove', onClick: vi.fn(), danger: true },
]);
render(<ContextMenu menu={menu} onClose={onClose} />);
const btn = screen.getByRole('button', { name: /remove/i });
// Danger buttons use color #ef4444 inline style
expect(btn.style.color).toBe('rgb(239, 68, 68)');
});
it('FE-COMP-CTX-006: clicking outside the menu closes it via document click listener', () => {
render(<ContextMenu menu={makeMenu()} onClose={onClose} />);
// Document click event triggers the close handler
act(() => {
document.dispatchEvent(new MouseEvent('click', { bubbles: true }));
});
expect(onClose).toHaveBeenCalledOnce();
});
});
|