feat: replaced TableContainer with DataTable in enrolledLearnersTable (#1518)

Author: irfanuddinahmad

src/components/Admin/Admin.test.jsx

@@ -480,10 +480,6 @@ describe('<Admin />', () => {
         csvFetchMethod: 'fetchCourseEnrollments',
         csvFetchParams: [enterpriseId, {}, { csv: true }],
       },
-      'enrolled-learners': {
-        csvFetchMethod: 'fetchEnrolledLearners',
-        csvFetchParams: [enterpriseId, {}, { csv: true }],
-      },
     };
 
     afterEach(() => {

src/components/Admin/DownloadButtonWrapper.jsx

@@ -17,6 +17,7 @@ const DownloadButtonWrapper = ({
     'learners-inactive-month',
     'registered-unenrolled-learners',
     'enrolled-learners-inactive-courses',
+    'enrolled-learners',
     'completed-learners',
     'completed-learners-week',
   ].includes(actionSlug);

src/components/Admin/index.jsx

@@ -125,7 +125,7 @@ class Admin extends React.Component {
           defaultMessage: 'Number of Courses Enrolled by Learners',
           description: 'Report title for number of courses enrolled by learners',
         }),
-        component: <EnrolledLearnersTable />,
+        component: <EnrolledLearnersTable id="enrolled-learners" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchEnrolledLearners(enterpriseId, {}, { csv: true })
         ),

src/components/EnrolledLearnersTable/EnrolledLearnersTable.test.jsx

@@ -1,52 +1,69 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import renderer from 'react-test-renderer';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
+import { mount } from 'enzyme';
 
-import EnrolledLearnersTable from '.';
+import EnrolledLearnersTable from './index';
+import useCourseUsers from './data/hooks/useCourseUsers';
+import { mockEnrolledLearnersData, mockEmptyEnrolledLearnersData } from './data/tests/constants';
 
-const mockStore = configureMockStore([thunk]);
 const enterpriseId = 'test-enterprise';
+const mockStore = configureMockStore([thunk]);
+
+jest.mock('./data/hooks/useCourseUsers', () => jest.fn());
+
 const store = mockStore({
   portalConfiguration: {
     enterpriseId,
   },
-  table: {
-    'enrolled-learners': {
-      data: {
-        results: [],
-        current_page: 1,
-        num_pages: 1,
-      },
-      ordering: null,
-      loading: false,
-      error: null,
-    },
-  },
 });
 
 const EnrolledLearnersWrapper = props => (
   <MemoryRouter>
     <IntlProvider locale="en">
       <Provider store={store}>
-        <EnrolledLearnersTable
-          {...props}
-        />
+        <EnrolledLearnersTable {...props} />
       </Provider>
     </IntlProvider>
   </MemoryRouter>
 );
 
 describe('EnrolledLearnersTable', () => {
-  it('renders empty state correctly', () => {
-    const tree = renderer
-      .create((
-        <EnrolledLearnersWrapper />
-      ))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+  beforeEach(() => {
+    useCourseUsers.mockReturnValue(mockEnrolledLearnersData);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders table with correct columns', () => {
+    const wrapper = mount(<EnrolledLearnersWrapper id="enrolled-learners" />);
+    const table = wrapper.find('[role="table"]');
+
+    expect(table.exists()).toBe(true);
+
+    const columnHeaders = table.find('thead th').map(th => th.text());
+    expect(columnHeaders).toEqual([
+      'Email',
+      'Account Created',
+      'Total Course Enrollment Count',
+    ]);
+  });
+
+  it('renders correct number of rows with data', () => {
+    const wrapper = mount(<EnrolledLearnersWrapper id="enrolled-learners" />);
+    const rows = wrapper.find('tbody tr');
+    expect(rows.length).toBe(mockEnrolledLearnersData.data.results.length);
+  });
+
+  it('renders empty table correctly', () => {
+    useCourseUsers.mockReturnValue(mockEmptyEnrolledLearnersData);
+    const wrapper = mount(<EnrolledLearnersWrapper id="enrolled-learners" />);
+    expect(wrapper.find('[role="table"]').exists()).toBe(true);
+    expect(wrapper.find('tbody tr').length).toBe(0);
   });
 });

src/components/EnrolledLearnersTable/__snapshots__/EnrolledLearnersTable.test.jsx.snap

@@ -0,0 +1,11 @@
+import usePaginatedTableData from '../../../../hooks/usePaginatedTableData';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+
+const useCourseUsers = (enterpriseId, tableId, apiFieldsForColumnAccessor) => usePaginatedTableData({
+  enterpriseId,
+  tableId,
+  apiFieldsForColumnAccessor,
+  fetchFunction: EnterpriseDataApiService.fetchEnrolledLearners,
+});
+
+export default useCourseUsers;

src/components/EnrolledLearnersTable/data/hooks/useCourseUsers.js

@@ -0,0 +1,130 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useCourseUsers from './useCourseUsers';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+
+jest.mock('../../../../data/services/EnterpriseDataApiService');
+
+const mockApiFields = {
+  userEmail: { key: 'user_email' },
+  courseTitle: { key: 'course_title' },
+};
+
+const enterpriseId = 'enterprise-123';
+const tableId = 'test-table';
+
+describe('useCourseUsers', () => {
+  const mockResponse = {
+    data: {
+      count: 2,
+      results: [
+        {
+          user_email: '[email protected]',
+          enrollment_count: 23,
+        },
+        {
+          user_email: '[email protected]',
+          enrollment_count: 15,
+        },
+      ],
+    },
+  };
+
+  const emptyResponse = {
+    data: {
+      count: 0,
+      results: [],
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('fetches and returns user course data successfully', async () => {
+    EnterpriseDataApiService.fetchEnrolledLearners.mockResolvedValueOnce(mockResponse);
+
+    const { result } = renderHook(() => useCourseUsers(enterpriseId, tableId, mockApiFields));
+
+    await act(async () => {
+      await result.current.fetchDataImmediate({
+        pageIndex: 0,
+        pageSize: 10,
+        sortBy: [],
+      });
+    });
+
+    expect(EnterpriseDataApiService.fetchEnrolledLearners).toHaveBeenCalledWith(enterpriseId, {
+      page: 1,
+      pageSize: 10,
+    });
+
+    expect(result.current.data.results).toHaveLength(2);
+    expect(result.current.data.itemCount).toBe(2);
+    expect(result.current.hasData).toBe(true);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('handles empty data response', async () => {
+    EnterpriseDataApiService.fetchEnrolledLearners.mockResolvedValueOnce(emptyResponse);
+
+    const { result } = renderHook(() => useCourseUsers(enterpriseId, tableId, mockApiFields));
+
+    await act(async () => {
+      await result.current.fetchDataImmediate({
+        pageIndex: 0,
+        pageSize: 10,
+        sortBy: [],
+      });
+    });
+
+    expect(result.current.data.results).toHaveLength(0);
+    expect(result.current.hasData).toBe(false);
+  });
+
+  it('sets loading state correctly during fetch', async () => {
+    let resolvePromise;
+    EnterpriseDataApiService.fetchEnrolledLearners.mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolvePromise = resolve;
+      }),
+    );
+
+    const { result } = renderHook(() => useCourseUsers(enterpriseId, tableId, mockApiFields));
+
+    act(() => {
+      result.current.fetchDataImmediate({
+        pageIndex: 0,
+        pageSize: 5,
+        sortBy: [],
+      });
+    });
+
+    expect(result.current.isLoading).toBe(true);
+
+    await act(async () => {
+      resolvePromise(mockResponse);
+    });
+
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('logs error when fetch fails', async () => {
+    const error = new Error('API failure');
+    EnterpriseDataApiService.fetchEnrolledLearners.mockRejectedValueOnce(error);
+
+    const { result } = renderHook(() => useCourseUsers(enterpriseId, tableId, mockApiFields));
+
+    await act(async () => {
+      await result.current.fetchDataImmediate({
+        pageIndex: 1,
+        pageSize: 5,
+        sortBy: [],
+        filters: {},
+      });
+    });
+
+    expect(result.current.data.results).toHaveLength(0);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.hasData).toBe(false);
+  });
+});

src/components/EnrolledLearnersTable/data/hooks/useCourseUsers.test.js

@@ -0,0 +1,34 @@
+export const mockEnrolledLearnersData = {
+  isLoading: false,
+  hasData: true,
+  fetchData: jest.fn(),
+  fetchDataImmediate: jest.fn(),
+  data: {
+    results: [
+      {
+        userEmail: '[email protected]',
+        lmsUserCreated: '2024-01-01T00:00:00Z',
+        enrollmentCount: 3,
+      },
+      {
+        userEmail: '[email protected]',
+        lmsUserCreated: '2024-01-02T00:00:00Z',
+        enrollmentCount: 5,
+      },
+    ],
+    itemCount: 2,
+    pageCount: 1,
+  },
+};
+
+export const mockEmptyEnrolledLearnersData = {
+  isLoading: false,
+  hasData: false,
+  fetchData: jest.fn(),
+  fetchDataImmediate: jest.fn(),
+  data: {
+    results: [],
+    itemCount: 0,
+    pageCount: 0,
+  },
+};