Merge pull request #1486 from openedx/eahmadjaved/ENT-10168

chore: Migrate deprecated Table to DataTable for CompletedLearnersTable

Author: jajjibhai008

src/components/Admin/Admin.test.jsx

@@ -484,10 +484,6 @@ describe('<Admin />', () => {
         csvFetchMethod: 'fetchEnrolledLearners',
         csvFetchParams: [enterpriseId, {}, { csv: true }],
       },
-      'completed-learners': {
-        csvFetchMethod: 'fetchCompletedLearners',
-        csvFetchParams: [enterpriseId, {}, { csv: true }],
-      },
       'completed-learners-week': {
         csvFetchMethod: 'fetchCourseEnrollments',
         csvFetchParams: [enterpriseId, { passedDate: 'last_week' }, { csv: true }],

src/components/Admin/DownloadButtonWrapper.jsx

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

src/components/Admin/index.jsx

@@ -221,7 +221,7 @@ class Admin extends React.Component {
           defaultMessage: 'Number of Courses Completed by Learner',
           description: 'Report title for number of courses completed by learners',
         }),
-        component: <CompletedLearnersTable />,
+        component: <CompletedLearnersTable id="completed-learners" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCompletedLearners(enterpriseId, {}, { csv: true })
         ),

src/components/CompletedLearnersTable/CompletedLearnersTable.test.jsx

@@ -1,52 +1,232 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import renderer from 'react-test-renderer';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
+import { act } from '@testing-library/react';
+import { mount } from 'enzyme';
 
 import CompletedLearnersTable from '.';
+import useCompletedLearners from './data/hooks/useCompletedLearners';
+import { PAGE_SIZE } from '../../data/constants/table';
+import { mockCompletedLearners, mockEmptyLearners } from './data/tests/constants';
+
+// Mock the hooks
+jest.mock('./data/hooks/useCompletedLearners', () => jest.fn());
+jest.mock('../Admin/TableDataContext', () => ({
+  useTableData: () => ({
+    setTableHasData: jest.fn(),
+  }),
+}));
 
 const mockStore = configureMockStore([thunk]);
-const enterpriseId = 'test-enterprise';
-const store = mockStore({
-  portalConfiguration: {
-    enterpriseId,
-  },
-  table: {
-    'completed-learners': {
-      data: {
-        results: [],
-        current_page: 1,
-        num_pages: 1,
-      },
-      ordering: null,
-      loading: false,
-      error: null,
-    },
-  },
-});
 
-const CompletedLearnersWrapper = props => (
-  <MemoryRouter>
-    <IntlProvider locale="en">
-      <Provider store={store}>
-        <CompletedLearnersTable
-          {...props}
-        />
-      </Provider>
-    </IntlProvider>
-  </MemoryRouter>
-);
+// Mock implementations
+const mockFetchData = jest.fn().mockResolvedValue({});
+const mockFetchDataImmediate = jest.fn();
 
 describe('CompletedLearnersTable', () => {
-  it('renders empty state correctly', () => {
-    const tree = renderer
-      .create((
-        <CompletedLearnersWrapper />
-      ))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+  const enterpriseId = 'test-enterprise-id';
+  const tableId = 'completed-learners';
+
+  const store = mockStore({
+    portalConfiguration: {
+      enterpriseId,
+    },
+  });
+
+  const defaultProps = {
+    id: tableId,
+  };
+
+  beforeEach(() => {
+    // Setup default mock implementation
+    useCompletedLearners.mockReturnValue({
+      isLoading: false,
+      data: mockCompletedLearners,
+      fetchData: mockFetchData,
+      fetchDataImmediate: mockFetchDataImmediate,
+      hasData: true,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const CompletedLearnersTableWrapper = (props = {}) => {
+    const history = createMemoryHistory();
+    return (
+      <Router location={history.location} navigator={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <CompletedLearnersTable {...defaultProps} {...props} />
+          </Provider>
+        </IntlProvider>
+      </Router>
+    );
+  };
+
+  it('renders the table with learner data', () => {
+    const wrapper = mount(<CompletedLearnersTableWrapper />);
+
+    // Check if table exists
+    const table = wrapper.find('DataTable');
+    expect(table.exists()).toBe(true);
+
+    // Verify DataTable props
+    expect(table.prop('id')).toBe(tableId);
+    expect(table.prop('data')).toEqual(mockCompletedLearners.results);
+    expect(table.prop('itemCount')).toBe(mockCompletedLearners.itemCount);
+    expect(table.prop('pageCount')).toBe(mockCompletedLearners.pageCount);
+    expect(table.prop('isLoading')).toBe(false);
+
+    // Verify columns are correctly configured
+    expect(table.prop('columns').length).toBe(2);
+    expect(table.prop('columns')[0].accessor).toBe('userEmail');
+    expect(table.prop('columns')[1].accessor).toBe('completedCourses');
+  });
+
+  it('renders empty table when no data is available', () => {
+    useCompletedLearners.mockReturnValue({
+      isLoading: false,
+      data: mockEmptyLearners,
+      fetchData: mockFetchData,
+      fetchDataImmediate: mockFetchDataImmediate,
+      hasData: false,
+    });
+
+    const wrapper = mount(<CompletedLearnersTableWrapper />);
+
+    const table = wrapper.find('DataTable');
+    expect(table.exists()).toBe(true);
+    expect(table.prop('data')).toEqual([]);
+    expect(table.prop('itemCount')).toBe(0);
+    expect(table.prop('pageCount')).toBe(0);
+  });
+
+  it('shows loading state when data is being fetched', () => {
+    useCompletedLearners.mockReturnValue({
+      isLoading: true,
+      data: mockEmptyLearners,
+      fetchData: mockFetchData,
+      fetchDataImmediate: mockFetchDataImmediate,
+      hasData: false,
+    });
+
+    const wrapper = mount(<CompletedLearnersTableWrapper />);
+
+    const table = wrapper.find('DataTable');
+    expect(table.prop('isLoading')).toBe(true);
+  });
+
+  it('fetches data immediately on mount', () => {
+    mount(<CompletedLearnersTableWrapper />);
+
+    expect(mockFetchDataImmediate).toHaveBeenCalledTimes(1);
+    expect(mockFetchDataImmediate).toHaveBeenCalledWith(
+      {
+        pageIndex: 0,
+        pageSize: PAGE_SIZE,
+        sortBy: [],
+      },
+      true,
+    );
+  });
+
+  it('uses URL query parameters for initial page', () => {
+    const history = createMemoryHistory();
+    history.push(`?${tableId}-page=3`); // Set page 3 in URL
+
+    const wrapper = mount(
+      <Router location={history.location} navigator={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <CompletedLearnersTable {...defaultProps} />
+          </Provider>
+        </IntlProvider>
+      </Router>,
+    );
+
+    const table = wrapper.find('DataTable');
+    // Check that initialState has pageIndex set to 2 (0-based index for page 3)
+    expect(table.prop('initialState').pageIndex).toBe(2);
+
+    // Check that fetchDataImmediate was called with pageIndex 2
+    expect(mockFetchDataImmediate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pageIndex: 2,
+      }),
+      true,
+    );
+  });
+
+  it('updates URL when page changes', async () => {
+    const history = createMemoryHistory();
+    jest.spyOn(history, 'push');
+
+    const wrapper = mount(
+      <Router location={history.location} navigator={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <CompletedLearnersTable {...defaultProps} />
+          </Provider>
+        </IntlProvider>
+      </Router>,
+    );
+
+    // Simulate page change by calling fetchData prop with new table state
+    const table = wrapper.find('DataTable');
+    await act(async () => {
+      await table.prop('fetchData')({
+        pageIndex: 2, // Navigate to page 3 (0-indexed)
+        pageSize: PAGE_SIZE,
+        sortBy: [],
+      });
+    });
+
+    // Check that fetchData was called
+    expect(mockFetchData).toHaveBeenCalledWith({
+      pageIndex: 2,
+      pageSize: PAGE_SIZE,
+      sortBy: [],
+    });
+  });
+
+  it('renders UserEmail component correctly', () => {
+    const wrapper = mount(<CompletedLearnersTableWrapper />);
+
+    // Find columns in the DataTable props
+    const columns = wrapper.find('DataTable').prop('columns');
+    const emailColumn = columns.find(col => col.accessor === 'userEmail');
+
+    // Test the Cell renderer with a sample row
+    const testRow = {
+      original: {
+        userEmail: '[email protected]',
+      },
+    };
+
+    const emailCell = mount(
+      <IntlProvider locale="en">
+        {emailColumn.Cell({ row: testRow })}
+      </IntlProvider>,
+    );
+
+    expect(emailCell.find('[data-hj-suppress]').text()).toBe('[email protected]');
+  });
+
+  it('renders completedCourses column correctly', () => {
+    const wrapper = mount(<CompletedLearnersTableWrapper />);
+
+    // Find columns in the DataTable props
+    const columns = wrapper.find('DataTable').prop('columns');
+    const completedCoursesColumn = columns.find(col => col.accessor === 'completedCourses');
+    expect(completedCoursesColumn).toBeDefined();
+
+    // Verify column header text
+    expect(completedCoursesColumn.Header).toBe('Total Course Completed Count');
   });
 });

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

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