Add comprehensive tests for RegistrationActivityChart and update empty state assertions

- Added new test suite for `RegistrationActivityChart` covering rendering, loading, empty, and error states.
- Updated existing chart tests (`UserStatusChart`, `OrganizationDistributionChart`, `UserGrowthChart`) to assert correct empty state messages.
- Replaced `SessionActivityChart` references in admin tests with `RegistrationActivityChart`.
This commit is contained in:
Felipe Cardoso
2025-11-24 19:49:41 +01:00
parent 5b0ae54365
commit d47bd34a92
5 changed files with 96 additions and 9 deletions

View File

@@ -32,8 +32,8 @@ jest.mock('@/components/charts', () => ({
OrganizationDistributionChart: () => (
<div data-testid="org-distribution-chart">Org Distribution Chart</div>
),
SessionActivityChart: () => (
<div data-testid="session-activity-chart">Session Activity Chart</div>
RegistrationActivityChart: () => (
<div data-testid="registration-activity-chart">Registration Activity Chart</div>
),
UserStatusChart: () => <div data-testid="user-status-chart">User Status Chart</div>,
}));
@@ -141,7 +141,7 @@ describe('AdminPage', () => {
expect(screen.getByTestId('user-growth-chart')).toBeInTheDocument();
expect(screen.getByTestId('org-distribution-chart')).toBeInTheDocument();
expect(screen.getByTestId('session-activity-chart')).toBeInTheDocument();
expect(screen.getByTestId('registration-activity-chart')).toBeInTheDocument();
expect(screen.getByTestId('user-status-chart')).toBeInTheDocument();
});
});

View File

@@ -41,7 +41,7 @@ describe('OrganizationDistributionChart', () => {
render(<OrganizationDistributionChart />);
expect(screen.getByText('Organization Distribution')).toBeInTheDocument();
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
expect(screen.getByText('No organization data available')).toBeInTheDocument();
});
it('shows loading state', () => {
@@ -67,6 +67,6 @@ describe('OrganizationDistributionChart', () => {
render(<OrganizationDistributionChart data={[]} />);
expect(screen.getByText('Organization Distribution')).toBeInTheDocument();
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
expect(screen.getByText('No organization data available')).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,87 @@
/**
* Tests for RegistrationActivityChart Component
*/
import { render, screen } from '@testing-library/react';
import { RegistrationActivityChart } from '@/components/charts/RegistrationActivityChart';
import type { RegistrationActivityData } from '@/components/charts/RegistrationActivityChart';
// Mock recharts to avoid rendering issues in tests
jest.mock('recharts', () => {
const OriginalModule = jest.requireActual('recharts');
return {
...OriginalModule,
ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
<div data-testid="responsive-container">{children}</div>
),
};
});
describe('RegistrationActivityChart', () => {
const mockData: RegistrationActivityData[] = [
{ date: 'Jan 1', registrations: 5 },
{ date: 'Jan 2', registrations: 8 },
{ date: 'Jan 3', registrations: 3 },
];
it('renders chart card with title and description', () => {
render(<RegistrationActivityChart data={mockData} />);
expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
expect(screen.getByText('New user registrations over the last 14 days')).toBeInTheDocument();
});
it('renders chart with provided data', () => {
render(<RegistrationActivityChart data={mockData} />);
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
});
it('shows empty state when no data is provided', () => {
render(<RegistrationActivityChart />);
expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
expect(screen.getByText('No registration data available')).toBeInTheDocument();
expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
});
it('shows empty state when data array is empty', () => {
render(<RegistrationActivityChart data={[]} />);
expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
expect(screen.getByText('No registration data available')).toBeInTheDocument();
expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
});
it('shows empty state when data has no registrations', () => {
const emptyData = [
{ date: 'Jan 1', registrations: 0 },
{ date: 'Jan 2', registrations: 0 },
];
render(<RegistrationActivityChart data={emptyData} />);
expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
expect(screen.getByText('No registration data available')).toBeInTheDocument();
expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
});
it('shows loading state', () => {
render(<RegistrationActivityChart data={mockData} loading />);
expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
// Chart should not be visible when loading
expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
expect(screen.queryByText('No registration data available')).not.toBeInTheDocument();
});
it('shows error state', () => {
render(<RegistrationActivityChart data={mockData} error="Failed to load chart data" />);
expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
expect(screen.getByText('Failed to load chart data')).toBeInTheDocument();
// Chart should not be visible when error
expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
});
});

View File

@@ -41,7 +41,7 @@ describe('UserGrowthChart', () => {
render(<UserGrowthChart />);
expect(screen.getByText('User Growth')).toBeInTheDocument();
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
expect(screen.getByText('No user growth data available')).toBeInTheDocument();
});
it('shows loading state', () => {
@@ -67,6 +67,6 @@ describe('UserGrowthChart', () => {
render(<UserGrowthChart data={[]} />);
expect(screen.getByText('User Growth')).toBeInTheDocument();
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
expect(screen.getByText('No user growth data available')).toBeInTheDocument();
});
});

View File

@@ -60,7 +60,7 @@ describe('UserStatusChart', () => {
render(<UserStatusChart />);
expect(screen.getByText('User Status Distribution')).toBeInTheDocument();
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
expect(screen.getByText('No user status data available')).toBeInTheDocument();
});
it('shows loading state', () => {
@@ -86,7 +86,7 @@ describe('UserStatusChart', () => {
render(<UserStatusChart data={[]} />);
expect(screen.getByText('User Status Distribution')).toBeInTheDocument();
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
expect(screen.getByText('No user status data available')).toBeInTheDocument();
});
describe('renderLabel function', () => {