test: updated tests

src/components/AdvanceAnalyticsV2/tabs/Completions.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import EmptyChart from '../charts/EmptyChart';
 import Header from '../Header';
 import { ANALYTICS_TABS, CHART_TYPES, chartColorMap } from '../data/constants';
 import AnalyticsTable from './AnalyticsTable';

src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx

@@ -1,16 +1,65 @@
-import { render } from '@testing-library/react';
+import { render, screen, waitFor, within, } from '@testing-library/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import Completions from './Completions';
 import '@testing-library/jest-dom';
 import { queryClient } from '../../test/testUtils';
+import MockAdapter from 'axios-mock-adapter';
+import axios from 'axios';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
+
+const mockAnalyticsData = {
+  next: null,
+  previous: null,
+  count: 2,
+  num_pages: 1,
+  current_page: 1,
+  results: [
+    {
+      email: 'user100@example.com',
+      course_title: 'Course 1',
+      course_subject: 'Subject 1',
+      passed_date: '2021-01-01',
+    },
+    {
+      email: 'user200@example.com',
+      course_title: 'Course 2',
+      course_subject: 'Subject 2',
+      passed_date: '2022-01-01',
+    },
+  ],
+};
+
+jest.spyOn(EnterpriseDataApiService, 'fetchAdminAnalyticsData');
+const axiosMock = new MockAdapter(axios);
+getAuthenticatedHttpClient.mockReturnValue(axios);
+axiosMock.onAny().reply(200);
+axios.get = jest.fn(() => Promise.resolve({ data: mockAnalyticsData }));
+
+jest.mock('../charts/LineChart', () => {
+  const MockedLineChart = () => <div>Mocked LineChart</div>;
+  return MockedLineChart;
+});
+
+jest.mock('../charts/BarChart', () => {
+  const MockedBarChart = () => <div>Mocked BarChart</div>;
+  return MockedBarChart;
+});
 
 describe('Completions Component', () => {
-  test('renders all sections with correct classes and content', () => {
+  test('renders all charts correctly', async () => {
+
     const { container } = render(
       <QueryClientProvider client={queryClient()}>
         <IntlProvider locale="en">
-          <Completions />
+          <Completions
+            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+            startDate="2021-01-01"
+            endDate="2021-12-31"
+            granularity="Daily"
+            calculation="Total"
+          />
         </IntlProvider>,
       </QueryClientProvider>
     );
@@ -43,5 +92,55 @@ describe('Completions Component', () => {
       expect(section).toHaveTextContent(title);
       expect(section).toHaveTextContent(subtitle);
     });
+
+    await waitFor(() => {
+      expect(EnterpriseDataApiService.fetchAdminAnalyticsData).toHaveBeenCalled();
+
+      expect(screen.getByText('Mocked LineChart')).toBeInTheDocument();
+      const elements = screen.getAllByText('Mocked BarChart');
+      expect(elements).toHaveLength(2);
+
+      // ensure the correct number of rows are rendered (including header row)
+      const rows = screen.getAllByRole('row');
+      expect(rows).toHaveLength(mockAnalyticsData.count + 1); // +1 for header row
+
+      // validate content of each data row
+      mockAnalyticsData.results.forEach((user, index) => {
+        const rowCells = within(rows[index + 1]).getAllByRole('cell'); // Skip header row
+        expect(rowCells[0]).toHaveTextContent(user.email);
+        expect(rowCells[1]).toHaveTextContent(user.course_title);
+        expect(rowCells[2]).toHaveTextContent(user.course_subject);
+        expect(rowCells[3]).toHaveTextContent(user.passed_date);
+      });
+    });
+  });
+  test('renders charts with correct loading messages', () => {
+    jest.mock('../data/hooks', () => ({
+      useEnterpriseAnalyticsTableData: jest.fn().mockReturnValue({
+        isLoading: true,
+        data: null,
+        isError: false,
+        isFetching: false,
+        error: null,
+      }),
+    }));
+
+    render(
+      <QueryClientProvider client={queryClient()}>
+        <IntlProvider locale="en">
+          <Completions
+            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+            startDate="2021-01-01"
+            endDate="2021-12-31"
+            granularity="Daily"
+            calculation="Total"
+          />
+        </IntlProvider>,
+      </QueryClientProvider>,
+    );
+
+    expect(screen.getByText('Loading top courses by completions chart data')).toBeInTheDocument();
+    expect(screen.getByText('Loading top 10 courses by completions chart data')).toBeInTheDocument();
+    expect(screen.getByText('Loading top 10 subjects by completions chart data')).toBeInTheDocument();
   });
 });

src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx

@@ -1,16 +1,66 @@
-import { render } from '@testing-library/react';
+import { render, screen, waitFor, within, } from '@testing-library/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import Engagements from './Engagements';
 import '@testing-library/jest-dom';
 import { queryClient } from '../../test/testUtils';
+import MockAdapter from 'axios-mock-adapter';
+import axios from 'axios';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
+
+const mockAnalyticsData = {
+  next: null,
+  previous: null,
+  count: 2,
+  num_pages: 1,
+  current_page: 1,
+  results: [
+    {
+      email: 'user100@example.com',
+      course_title: 'Course 1',
+      activity_date: '2020-01-01',
+      course_subject: 'Subject 1',
+      learning_time_hours: 12,
+    },
+    {
+      email: 'user200@example.com',
+      course_title: 'Course 2',
+      activity_date: '20219-01-01',
+      course_subject: 'Subject 2',
+      learning_time_hours: 22,
+    },
+  ],
+};
+
+jest.spyOn(EnterpriseDataApiService, 'fetchAdminAnalyticsData');
+const axiosMock = new MockAdapter(axios);
+getAuthenticatedHttpClient.mockReturnValue(axios);
+axiosMock.onAny().reply(200);
+axios.get = jest.fn(() => Promise.resolve({ data: mockAnalyticsData }));
+
+jest.mock('../charts/LineChart', () => {
+  const MockedLineChart = () => <div>Mocked LineChart</div>;
+  return MockedLineChart;
+});
+
+jest.mock('../charts/BarChart', () => {
+  const MockedBarChart = () => <div>Mocked BarChart</div>;
+  return MockedBarChart;
+});
 
 describe('Engagements Component', () => {
-  test('renders all sections with correct classes and content', () => {
+  test('renders all sections with correct classes and content', async () => {
     const { container } = render(
       <QueryClientProvider client={queryClient()}>
         <IntlProvider locale="en">
-          <Engagements />
+          <Engagements
+            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+            startDate="2021-01-01"
+            endDate="2021-12-31"
+            granularity="Daily"
+            calculation="Total"
+          />
         </IntlProvider>,
       </QueryClientProvider>
     );
@@ -43,5 +93,56 @@ describe('Engagements Component', () => {
       expect(section).toHaveTextContent(title);
       expect(section).toHaveTextContent(subtitle);
     });
+
+    await waitFor(() => {
+      expect(EnterpriseDataApiService.fetchAdminAnalyticsData).toHaveBeenCalled();
+
+      expect(screen.getByText('Mocked LineChart')).toBeInTheDocument();
+      const elements = screen.getAllByText('Mocked BarChart');
+      expect(elements).toHaveLength(2);
+
+      // ensure the correct number of rows are rendered (including header row)
+      const rows = screen.getAllByRole('row');
+      expect(rows).toHaveLength(mockAnalyticsData.count + 1); // +1 for header row
+
+      // validate content of each data row
+      mockAnalyticsData.results.forEach((user, index) => {
+        const rowCells = within(rows[index + 1]).getAllByRole('cell'); // Skip header row
+        expect(rowCells[0]).toHaveTextContent(user.email);
+        expect(rowCells[1]).toHaveTextContent(user.course_title);
+        expect(rowCells[2]).toHaveTextContent(user.activity_date);
+        expect(rowCells[3]).toHaveTextContent(user.course_subject);
+        expect(rowCells[4]).toHaveTextContent(user.learning_time_hours);
+      });
+    });
+  });
+  test('renders charts with correct loading messages', () => {
+    jest.mock('../data/hooks', () => ({
+      useEnterpriseAnalyticsTableData: jest.fn().mockReturnValue({
+        isLoading: true,
+        data: null,
+        isError: false,
+        isFetching: false,
+        error: null,
+      }),
+    }));
+
+    render(
+      <QueryClientProvider client={queryClient()}>
+        <IntlProvider locale="en">
+          <Engagements
+            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+            startDate="2021-01-01"
+            endDate="2021-12-31"
+            granularity="Daily"
+            calculation="Total"
+          />
+        </IntlProvider>,
+      </QueryClientProvider>,
+    );
+
+    expect(screen.getByText('Loading learning hours over time chart data')).toBeInTheDocument();
+    expect(screen.getByText('Loading top 10 courses by learning hours chart data')).toBeInTheDocument();
+    expect(screen.getByText('Loading top 10 subjects by learning hours chart data')).toBeInTheDocument();
   });
 });

src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx

@@ -1,12 +1,56 @@
-import { render } from '@testing-library/react';
+import { render, screen, waitFor, within, } from '@testing-library/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import Enrollments from './Enrollments';
 import '@testing-library/jest-dom';
 import { queryClient } from '../../test/testUtils';
+import MockAdapter from 'axios-mock-adapter';
+import axios from 'axios';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
+
+const mockAnalyticsData = {
+  next: null,
+  previous: null,
+  count: 2,
+  num_pages: 1,
+  current_page: 1,
+  results: [
+    {
+      email: 'user100@example.com',
+      course_title: 'Course 1',
+      course_subject: 'Subject 1',
+      enroll_type: 'certificate',
+      enterprise_enrollment_date: '2020-01-01',
+    },
+    {
+      email: 'user200@example.com',
+      course_title: 'Course 2',
+      course_subject: 'Subject 2',
+      enroll_type: 'certificate 2',
+      enterprise_enrollment_date: '2021-01-01',
+    },
+  ],
+};
+
+jest.spyOn(EnterpriseDataApiService, 'fetchAdminAnalyticsData');
+const axiosMock = new MockAdapter(axios);
+getAuthenticatedHttpClient.mockReturnValue(axios);
+axiosMock.onAny().reply(200);
+axios.get = jest.fn(() => Promise.resolve({ data: mockAnalyticsData }));
+
+jest.mock('../charts/LineChart', () => {
+  const MockedLineChart = () => <div>Mocked LineChart</div>;
+  return MockedLineChart;
+});
+
+jest.mock('../charts/BarChart', () => {
+  const MockedBarChart = () => <div>Mocked BarChart</div>;
+  return MockedBarChart;
+});
 
 describe('Enrollments Component', () => {
-  test('renders all sections with correct classes and content', () => {
+  test('renders all sections with correct classes and content', async () => {
     const { container } = render(
       <QueryClientProvider client={queryClient()}>
         <IntlProvider locale="en">
@@ -43,5 +87,56 @@ describe('Enrollments Component', () => {
       expect(section).toHaveTextContent(title);
       expect(section).toHaveTextContent(subtitle);
     });
+
+    await waitFor(() => {
+      expect(EnterpriseDataApiService.fetchAdminAnalyticsData).toHaveBeenCalled();
+
+      expect(screen.getByText('Mocked LineChart')).toBeInTheDocument();
+      const elements = screen.getAllByText('Mocked BarChart');
+      expect(elements).toHaveLength(2);
+
+      // ensure the correct number of rows are rendered (including header row)
+      const rows = screen.getAllByRole('row');
+      expect(rows).toHaveLength(mockAnalyticsData.count + 1); // +1 for header row
+
+      // validate content of each data row
+      mockAnalyticsData.results.forEach((user, index) => {
+        const rowCells = within(rows[index + 1]).getAllByRole('cell'); // Skip header row
+        expect(rowCells[0]).toHaveTextContent(user.email);
+        expect(rowCells[1]).toHaveTextContent(user.course_title);
+        expect(rowCells[2]).toHaveTextContent(user.course_subject);
+        expect(rowCells[3]).toHaveTextContent(user.enroll_type);
+        expect(rowCells[4]).toHaveTextContent(user.enterprise_enrollment_date);
+      });
+    });
+  });
+  test('renders charts with correct loading messages', () => {
+    jest.mock('../data/hooks', () => ({
+      useEnterpriseAnalyticsTableData: jest.fn().mockReturnValue({
+        isLoading: true,
+        data: null,
+        isError: false,
+        isFetching: false,
+        error: null,
+      }),
+    }));
+
+    render(
+      <QueryClientProvider client={queryClient()}>
+        <IntlProvider locale="en">
+          <Enrollments
+            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+            startDate="2021-01-01"
+            endDate="2021-12-31"
+            granularity="Daily"
+            calculation="Total"
+          />
+        </IntlProvider>,
+      </QueryClientProvider>,
+    );
+
+    expect(screen.getByText('Loading enrollments over time chart data')).toBeInTheDocument();
+    expect(screen.getByText('Loading top courses by enrollments chart data')).toBeInTheDocument();
+    expect(screen.getByText('Loading top subjects by enrollments chart data')).toBeInTheDocument();
   });
 });

src/setupTest.js

@@ -7,6 +7,7 @@ import MockAdapter from 'axios-mock-adapter';
 import ResizeObserverPolyfill from 'resize-observer-polyfill';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import 'jest-localstorage-mock';
+import 'jest-canvas-mock';
 
 Enzyme.configure({ adapter: new Adapter() });