55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { describe, it, expect } from 'vitest';
|
||
|
|
import { render, screen, fireEvent } from '@testing-library/react';
|
||
|
|
import { Modal } from '@/components/ui/Modal';
|
||
|
|
|
||
|
|
describe('Modal', () => {
|
||
|
|
it('renders nothing when open=false', () => {
|
||
|
|
render(<Modal open={false} onClose={() => {}}>Content</Modal>);
|
||
|
|
expect(screen.queryByText('Content')).not.toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders content when open=true', () => {
|
||
|
|
render(<Modal open={true} onClose={() => {}}>Modal Content</Modal>);
|
||
|
|
expect(screen.getByText('Modal Content')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('has role=dialog and aria-modal=true', () => {
|
||
|
|
render(<Modal open={true} onClose={() => {}}>Content</Modal>);
|
||
|
|
expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('calls onClose when backdrop clicked', () => {
|
||
|
|
const onClose = vi.fn();
|
||
|
|
render(<Modal open={true} onClose={onClose}>Content</Modal>);
|
||
|
|
fireEvent.click(screen.getByTestId('modal-backdrop'));
|
||
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('calls onClose when ESC pressed', () => {
|
||
|
|
const onClose = vi.fn();
|
||
|
|
render(<Modal open={true} onClose={onClose}>Content</Modal>);
|
||
|
|
fireEvent.keyDown(document, { key: 'Escape' });
|
||
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('does not call onClose on backdrop when closeOnBackdrop=false', () => {
|
||
|
|
const onClose = vi.fn();
|
||
|
|
render(<Modal open={true} onClose={onClose} closeOnBackdrop={false}>Content</Modal>);
|
||
|
|
fireEvent.click(screen.getByTestId('modal-backdrop'));
|
||
|
|
expect(onClose).not.toHaveBeenCalled();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders title with aria-labelledby', () => {
|
||
|
|
render(<Modal open={true} onClose={() => {}} title="Test Title">Content</Modal>);
|
||
|
|
const dialog = screen.getByRole('dialog');
|
||
|
|
expect(dialog).toHaveAttribute('aria-labelledby', 'modal-title');
|
||
|
|
expect(screen.getByText('Test Title')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders close button with aria-label', () => {
|
||
|
|
render(<Modal open={true} onClose={() => {}}>Content</Modal>);
|
||
|
|
expect(screen.getByLabelText('Close dialog')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
});
|