- 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
27 lines
981 B
TypeScript
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();
|
|
});
|
|
});
|