ft(626): testing Admin Dashboard

Author: JacquelineTuyisenge

Diff for: src/Chart/TeamChart.tsx

@@ -81,6 +81,9 @@ function TeamChart({
         weeklyData[isoWeekNumber - 1].failed += failed;
       }
       // Monthly data
+      if (!monthlyData[month]) {
+        monthlyData[month] = { month: month + 1, success: 0, failed: 0 };
+      }
       monthlyData[month].success += success;
       monthlyData[month].failed += failed;
     }

Diff for: tests/other-tests/AdminTeamDetails.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import TeamDetailsModal from '../../src/components/AdminTeamDetails';
+
+const mockOnClose = jest.fn();
+
+const mockTeams = [
+  {
+    name: 'Team A',
+    avgRatings: {
+      quality: '4.5',
+      quantity: '3.5',
+      professional_Skills: '5.0',
+    },
+    members: [
+      { status: { status: 'active' } },
+      { status: { status: 'suspended' } },
+    ],
+    cohort: {
+      name: 'Cohort 1',
+      phase: { name: 'Phase 1' },
+      program: { name: 'Program A' },
+    },
+    ttl: { profile: { name: 'TTL Name' } },
+  },
+];
+
+const mockSelectedTeam = {
+  teams: 'Team A',
+  organization: 'Org Name',
+};
+
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+});
+
+describe('TeamDetailsModal', () => {
+  it('handles tab switching between Overview and Logins', () => {
+    render(
+      <TeamDetailsModal
+        isOpen={true}
+        onClose={mockOnClose}
+        selectedteam={mockSelectedTeam}
+        Teams={mockTeams}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('Logins'));
+    expect(screen.getByText('Logins')).toHaveClass('text-primary');
+  });
+
+  it('calls onClose when the Close button is clicked', () => {
+    render(
+      <TeamDetailsModal
+        isOpen={true}
+        onClose={mockOnClose}
+        selectedteam={mockSelectedTeam}
+        Teams={mockTeams}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('Close'));
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+});

Diff for: tests/other-tests/LineChart.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import UserGrowth from '../../src/Chart/LineChart';
+import GET_ROLE_QUERY from '../../src/containers/admin-dashBoard/GetRolesQuery';
+import React from 'react';
+
+const mockData = {
+  getAllUsers: [
+    { createdAt: '1630454400000', updatedAt: '1630454400000' },
+    { createdAt: '1633146400000', updatedAt: '1633146400000' },
+  ],
+};
+
+const mocks = [
+  {
+    request: {
+      query: GET_ROLE_QUERY,
+      variables: { orgToken: 'mockToken' },
+    },
+    result: {
+      data: mockData,
+    },
+  },
+];
+
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+});
+
+describe('UserGrowth Component', () => {
+  it('updates the selected year correctly on dropdown change', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <UserGrowth />
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      const yearSelect = screen.getByLabelText(/Year:/i);
+      expect(yearSelect).toBeInTheDocument();
+
+      fireEvent.change(yearSelect, { target: { value: '2023' } });
+
+      expect((yearSelect as HTMLSelectElement).value).toBe('2023');
+    });
+  });
+});

Diff for: tests/other-tests/TeamChart.test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import TeamChart from '../../src/Chart/TeamChart';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Line } from 'react-chartjs-2';
+
+jest.mock('react-chartjs-2', () => ({
+  Line: jest.fn(() => <div data-testid="mock-chart" />),
+}));
+
+describe('TeamChart Component', () => {
+  const mockData: any = {
+    daily: { '2024-01-01': { success: 10, failed: 2 } },
+    weekly: { '2024-W01': { success: 50, failed: 5 } },
+    monthly: { '2024-01': { success: 100, failed: 20 } },
+  };
+
+  const mockCurrentTeam = [{ name: 'Team A' }];
+
+  it('renders the TeamChart component', () => {
+    render(
+      <TeamChart
+        timeframe="daily"
+        CurrentTeam={mockCurrentTeam}
+        loginsbyDate={mockData}
+      />,
+    );
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument();
+  });
+
+  it('organizes login data correctly for daily timeframe', () => {
+    const { container } = render(
+      <TeamChart
+        timeframe="daily"
+        CurrentTeam={mockCurrentTeam}
+        loginsbyDate={mockData}
+      />,
+    );
+
+    expect(Line).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({
+          labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        }),
+      }),
+      {},
+    );
+  });
+
+  it('renders weekly chart correctly', () => {
+    render(
+      <TeamChart
+        timeframe="weekly"
+        CurrentTeam={mockCurrentTeam}
+        loginsbyDate={mockData}
+      />,
+    );
+
+    expect(Line).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({
+          labels: expect.arrayContaining(['03', '06', '09']),
+        }),
+      }),
+      {},
+    );
+  });
+
+  it('organizes login data correctly for monthly timeframe', () => {
+    render(
+      <TeamChart
+        timeframe="monthly"
+        CurrentTeam={mockCurrentTeam}
+        loginsbyDate={mockData}
+      />,
+    );
+
+    expect(Line).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({
+          labels: Array.from({ length: 12 }, (_, i) =>
+            String(i + 1).padStart(2, '0'),
+          ),
+        }),
+      }),
+      {},
+    );
+  });
+
+  it('uses the default timeframe of daily when not specified', () => {
+    render(<TeamChart CurrentTeam={mockCurrentTeam} loginsbyDate={mockData} />);
+
+    expect(Line).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({
+          labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        }),
+      }),
+      {},
+    );
+  });
+});