Sergey Krylov 55221dbf22 feat(design-system): add form and page-state patterns
- FormField: label, htmlFor, helperText, error, required, children
- FilterBar: responsive layout container with children and actions
- EmptyState: semantic heading with optional description and action
- ErrorState: semantic heading with optional description and action
- LoadingState: aria-live polite, section/page sizes, reduced-motion
2026-06-21 09:44:12 +03:00

27 lines
981 B
TypeScript

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { EmptyState } from './EmptyState';
import { MoexVibeThemeProvider } from '../../theme';
function renderWithTheme(element: React.ReactElement) {
return render(<MoexVibeThemeProvider>{element}</MoexVibeThemeProvider>);
}
describe('EmptyState', () => {
it('renders title as semantic heading', () => {
renderWithTheme(<EmptyState title="No data" />);
const heading = screen.getByText('No data');
expect(heading.tagName).toBe('H2');
});
it('renders description', () => {
renderWithTheme(<EmptyState title="No data" description="Try adjusting filters" />);
expect(screen.getByText('Try adjusting filters')).toBeInTheDocument();
});
it('renders action', () => {
renderWithTheme(<EmptyState title="No data" action={<button>Refresh</button>} />);
expect(screen.getByRole('button', { name: 'Refresh' })).toBeInTheDocument();
});
});