Spaces:
Sleeping
Sleeping
File size: 3,236 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 84 | import { render, screen, fireEvent } from '../../../tests/helpers/render';
import userEvent from '@testing-library/user-event';
import Modal from './Modal';
describe('Modal', () => {
const onClose = vi.fn();
beforeEach(() => {
onClose.mockClear();
document.body.style.overflow = '';
});
it('FE-COMP-MODAL-001: does not render when isOpen is false', () => {
render(<Modal isOpen={false} onClose={onClose}><p>content</p></Modal>);
expect(screen.queryByText('content')).toBeNull();
});
it('FE-COMP-MODAL-002: renders overlay when isOpen is true', () => {
render(<Modal isOpen={true} onClose={onClose}><p>content</p></Modal>);
expect(screen.getByText('content')).toBeTruthy();
});
it('FE-COMP-MODAL-003: renders the title prop', () => {
render(<Modal isOpen={true} onClose={onClose} title="My Modal Title" />);
expect(screen.getByText('My Modal Title')).toBeTruthy();
});
it('FE-COMP-MODAL-004: renders children content', () => {
render(<Modal isOpen={true} onClose={onClose}><p>Hello World</p></Modal>);
expect(screen.getByText('Hello World')).toBeTruthy();
});
it('FE-COMP-MODAL-005: renders footer prop', () => {
render(
<Modal isOpen={true} onClose={onClose} footer={<button>Save</button>}>
<p>body</p>
</Modal>
);
expect(screen.getByRole('button', { name: 'Save' })).toBeTruthy();
});
it('FE-COMP-MODAL-006: close button calls onClose', async () => {
const user = userEvent.setup();
render(<Modal isOpen={true} onClose={onClose} title="T" />);
// The X button is the only button rendered by Modal itself
const closeBtn = document.querySelector('button');
await user.click(closeBtn!);
expect(onClose).toHaveBeenCalledOnce();
});
it('FE-COMP-MODAL-007: Escape key calls onClose', () => {
render(<Modal isOpen={true} onClose={onClose} title="T" />);
fireEvent.keyDown(document, { key: 'Escape' });
expect(onClose).toHaveBeenCalledOnce();
});
it('FE-COMP-MODAL-008: clicking the backdrop calls onClose', () => {
render(<Modal isOpen={true} onClose={onClose}><p>inner</p></Modal>);
const backdrop = document.querySelector('.trek-modal-backdrop') as HTMLElement;
// Simulate mousedown then click on the backdrop itself
fireEvent.mouseDown(backdrop, { target: backdrop });
fireEvent.click(backdrop);
expect(onClose).toHaveBeenCalledOnce();
});
it('FE-COMP-MODAL-009: clicking inside modal content does NOT call onClose', async () => {
const user = userEvent.setup();
render(<Modal isOpen={true} onClose={onClose}><p>inner content</p></Modal>);
await user.click(screen.getByText('inner content'));
expect(onClose).not.toHaveBeenCalled();
});
it('FE-COMP-MODAL-010: close button is hidden when hideCloseButton is true', () => {
render(<Modal isOpen={true} onClose={onClose} title="T" hideCloseButton={true} />);
// No button should be present in the modal header
expect(document.querySelector('button')).toBeNull();
});
it('FE-COMP-MODAL-011: sets document.body overflow to hidden when open', () => {
render(<Modal isOpen={true} onClose={onClose} />);
expect(document.body.style.overflow).toBe('hidden');
});
});
|