Felipe Cardoso
96df7edf88
- Consolidated multi-line arguments into single lines where appropriate in `useAuth`. - Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`). - Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`). - Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.
92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
/**
|
|
* Tests for ChartCard Component
|
|
*/
|
|
|
|
import { render, screen } from '@testing-library/react';
|
|
import { ChartCard } from '@/components/charts/ChartCard';
|
|
|
|
describe('ChartCard', () => {
|
|
const mockChildren = <div>Chart Content</div>;
|
|
|
|
it('renders with title and children', () => {
|
|
render(<ChartCard title="Test Chart">{mockChildren}</ChartCard>);
|
|
|
|
expect(screen.getByText('Test Chart')).toBeInTheDocument();
|
|
expect(screen.getByText('Chart Content')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders with title and description', () => {
|
|
render(
|
|
<ChartCard title="Test Chart" description="Test description">
|
|
{mockChildren}
|
|
</ChartCard>
|
|
);
|
|
|
|
expect(screen.getByText('Test Chart')).toBeInTheDocument();
|
|
expect(screen.getByText('Test description')).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows loading skeleton when loading is true', () => {
|
|
render(
|
|
<ChartCard title="Test Chart" loading>
|
|
{mockChildren}
|
|
</ChartCard>
|
|
);
|
|
|
|
expect(screen.getByText('Test Chart')).toBeInTheDocument();
|
|
expect(screen.queryByText('Chart Content')).not.toBeInTheDocument();
|
|
|
|
// Skeleton should be visible
|
|
const skeleton = document.querySelector('.h-\\[300px\\]');
|
|
expect(skeleton).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows error alert when error is provided', () => {
|
|
render(
|
|
<ChartCard title="Test Chart" error="Failed to load data">
|
|
{mockChildren}
|
|
</ChartCard>
|
|
);
|
|
|
|
expect(screen.getByText('Test Chart')).toBeInTheDocument();
|
|
expect(screen.getByText('Failed to load data')).toBeInTheDocument();
|
|
expect(screen.queryByText('Chart Content')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
const { container } = render(
|
|
<ChartCard title="Test Chart" className="custom-class">
|
|
{mockChildren}
|
|
</ChartCard>
|
|
);
|
|
|
|
const card = container.firstChild;
|
|
expect(card).toHaveClass('custom-class');
|
|
});
|
|
|
|
it('renders without description when not provided', () => {
|
|
render(<ChartCard title="Test Chart">{mockChildren}</ChartCard>);
|
|
|
|
expect(screen.getByText('Test Chart')).toBeInTheDocument();
|
|
expect(screen.getByText('Chart Content')).toBeInTheDocument();
|
|
|
|
// Description should not be present
|
|
const cardDescription = document.querySelector('[class*="CardDescription"]');
|
|
expect(cardDescription).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('prioritizes error over loading state', () => {
|
|
render(
|
|
<ChartCard title="Test Chart" loading error="Error message">
|
|
{mockChildren}
|
|
</ChartCard>
|
|
);
|
|
|
|
// Error should be shown
|
|
expect(screen.getByText('Error message')).toBeInTheDocument();
|
|
|
|
// Loading skeleton should not be shown
|
|
expect(screen.queryByText('Chart Content')).not.toBeInTheDocument();
|
|
});
|
|
});
|