From d47bd34a92e2c7a841ea268faf3721f60cb6e788 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@shootify.io>
Date: Mon, 24 Nov 2025 19:49:41 +0100
Subject: [PATCH] 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`.
---
 frontend/tests/app/admin/page.test.tsx        |  6 +-
 .../OrganizationDistributionChart.test.tsx    |  4 +-
 .../charts/RegistrationActivityChart.test.tsx | 87 +++++++++++++++++++
 .../charts/UserGrowthChart.test.tsx           |  4 +-
 .../charts/UserStatusChart.test.tsx           |  4 +-
 5 files changed, 96 insertions(+), 9 deletions(-)
 create mode 100644 frontend/tests/components/charts/RegistrationActivityChart.test.tsx

diff --git a/frontend/tests/app/admin/page.test.tsx b/frontend/tests/app/admin/page.test.tsx
index d2ae918..926ba77 100644
--- a/frontend/tests/app/admin/page.test.tsx
+++ b/frontend/tests/app/admin/page.test.tsx
@@ -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();
   });
 });
diff --git a/frontend/tests/components/charts/OrganizationDistributionChart.test.tsx b/frontend/tests/components/charts/OrganizationDistributionChart.test.tsx
index 01f5d90..9467a68 100644
--- a/frontend/tests/components/charts/OrganizationDistributionChart.test.tsx
+++ b/frontend/tests/components/charts/OrganizationDistributionChart.test.tsx
@@ -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();
   });
 });
diff --git a/frontend/tests/components/charts/RegistrationActivityChart.test.tsx b/frontend/tests/components/charts/RegistrationActivityChart.test.tsx
new file mode 100644
index 0000000..12a6c34
--- /dev/null
+++ b/frontend/tests/components/charts/RegistrationActivityChart.test.tsx
@@ -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();
+    });
+});
diff --git a/frontend/tests/components/charts/UserGrowthChart.test.tsx b/frontend/tests/components/charts/UserGrowthChart.test.tsx
index ee10532..ac44f94 100644
--- a/frontend/tests/components/charts/UserGrowthChart.test.tsx
+++ b/frontend/tests/components/charts/UserGrowthChart.test.tsx
@@ -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();
   });
 });
diff --git a/frontend/tests/components/charts/UserStatusChart.test.tsx b/frontend/tests/components/charts/UserStatusChart.test.tsx
index aabf855..8583890 100644
--- a/frontend/tests/components/charts/UserStatusChart.test.tsx
+++ b/frontend/tests/components/charts/UserStatusChart.test.tsx
@@ -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', () => {