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:
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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', () => {
|
||||
|
||||
Reference in New Issue
Block a user