leocrm-bot
22976abe92
- React 18 + Vite + TypeScript + Tailwind CSS setup - AppShell with Sidebar (plugin menu) + TopBar (tenant switcher, search, notifications, user menu) - Auth pages: Login, PasswordResetRequest, PasswordResetConfirm - Protected routes with auth guard - API client (axios with interceptors: session cookie, 401 redirect, 422 validation) - TanStack Query hooks for auth, users, companies, contacts, notifications - Zustand stores: authStore, uiStore - i18n setup (de/en locales) with react-i18next - UI component library: Button, Input, Select, Modal, Toast, Table, Card, Badge, Avatar, Pagination, EmptyState, Skeleton, ConfirmDialog - Accessibility: ARIA labels, 44px touch targets, keyboard nav, reduced-motion, sr-only - Design tokens from prototype as CSS custom properties - 111 tests passing across 20 test files - tsc --noEmit: 0 errors - npm run build: success (471KB JS, 24KB CSS)
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();
|
|
});
|
|
});
|