Merge pull request #1493 from openedx/eahmadjaved/ENT-10164

feat: migrate deprecated Table to DataTable for PastWeekPassedLearner

Author: jajjibhai008

src/components/Admin/Admin.test.jsx

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

src/components/Admin/DownloadButtonWrapper.jsx

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

src/components/Admin/index.jsx

@@ -238,7 +238,7 @@ class Admin extends React.Component {
           defaultMessage: 'Past Week',
           description: 'Report title for number of courses completed by learners in past week',
         }),
-        component: <PastWeekPassedLearnersTable />,
+        component: <PastWeekPassedLearnersTable id="completed-learners-week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,

src/components/PastWeekPassedLearnersTable/PastWeekPassedLearnersTable.test.jsx

@@ -1,114 +1,265 @@
-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 { IntlProvider } from '@edx/frontend-platform/i18n';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router';
+import { act } from '@testing-library/react';
 import { mount } from 'enzyme';
-
 import PastWeekPassedLearnersTable from '.';
+import usePastWeekPassedLearners from './data/hooks/usePastWeekPassedLearners';
+import { PAGE_SIZE } from '../../data/constants/table';
+
+// Mock the hooks
+jest.mock('./data/hooks/usePastWeekPassedLearners', () => jest.fn());
+jest.mock('../Admin/TableDataContext', () => ({
+  useTableData: () => ({
+    setTableHasData: jest.fn(),
+  }),
+}));
 
-const enterpriseId = 'test-enterprise';
 const mockStore = configureMockStore([thunk]);
-const store = mockStore({
-  portalConfiguration: {
-    enterpriseId,
-  },
-  table: {
-    'completed-learners-week': {
+
+// Mock implementations
+const mockFetchData = jest.fn().mockResolvedValue({});
+const mockFetchDataImmediate = jest.fn();
+
+describe('PastWeekPassedLearnersTable', () => {
+  const enterpriseId = 'test-enterprise-id';
+  const tableId = 'completed-learners-week';
+
+  const store = mockStore({
+    portalConfiguration: {
+      enterpriseId,
+    },
+  });
+
+  const defaultProps = {
+    id: tableId,
+  };
+
+  beforeEach(() => {
+    // Setup default mock implementation
+    usePastWeekPassedLearners.mockReturnValue({
+      isLoading: false,
       data: {
-        count: 2,
-        num_pages: 1,
-        current_page: 1,
         results: [
           {
-            id: 1,
-            passed_date: '2018-09-23T16:27:34.690065Z',
-            course_title: 'Dive into ReactJS',
-            course_key: 'edX/ReactJS',
-            user_email: '[email protected]',
+            userEmail: '[email protected]',
+            courseTitle: 'React Basics',
+            passedDate: '2025-04-20T12:00:00Z',
           },
           {
-            id: 5,
-            passed_date: '2018-09-22T16:27:34.690065Z',
-            course_title: 'Redux with ReactJS',
-            course_key: 'edX/Redux_ReactJS',
-            user_email: '[email protected]',
-
+            userEmail: '[email protected]',
+            courseTitle: 'Advanced React',
+            passedDate: '2025-04-19T12:00:00Z',
           },
         ],
-        next: null,
-        start: 0,
-        previous: null,
+        itemCount: 2,
+        pageCount: 1,
       },
-      ordering: null,
-      loading: false,
-      error: null,
-    },
-  },
-});
+      fetchData: mockFetchData,
+      fetchDataImmediate: mockFetchDataImmediate,
+      hasData: true,
+    });
+  });
 
-const PastWeekPassedLearnersWrapper = props => (
-  <MemoryRouter>
-    <IntlProvider locale="en">
-      <Provider store={store}>
-        <PastWeekPassedLearnersTable
-          {...props}
-        />
-      </Provider>
-    </IntlProvider>
-  </MemoryRouter>
-);
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
 
-describe('PastWeekPassedLearnersTable', () => {
-  let wrapper;
-
-  it('renders table correctly', () => {
-    const tree = renderer
-      .create((
-        <PastWeekPassedLearnersWrapper />
-      ))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+  const PastWeekPassedLearnersTableWrapper = (props = {}) => {
+    const history = createMemoryHistory();
+    return (
+      <Router location={history.location} navigator={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <PastWeekPassedLearnersTable {...defaultProps} {...props} />
+          </Provider>
+        </IntlProvider>
+      </Router>
+    );
+  };
+
+  it('renders the table with learner data', () => {
+    const wrapper = mount(<PastWeekPassedLearnersTableWrapper />);
+
+    // 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([
+      {
+        userEmail: '[email protected]',
+        courseTitle: 'React Basics',
+        passedDate: '2025-04-20T12:00:00Z',
+      },
+      {
+        userEmail: '[email protected]',
+        courseTitle: 'Advanced React',
+        passedDate: '2025-04-19T12:00:00Z',
+      },
+    ]);
+    expect(table.prop('itemCount')).toBe(2);
+    expect(table.prop('pageCount')).toBe(1);
+    expect(table.prop('isLoading')).toBe(false);
+
+    // Verify columns are correctly configured
+    expect(table.prop('columns').length).toBe(3);
+    expect(table.prop('columns')[0].accessor).toBe('userEmail');
+    expect(table.prop('columns')[1].accessor).toBe('courseTitle');
+    expect(table.prop('columns')[2].accessor).toBe('passedDate');
+  });
+
+  it('renders empty table when no data is available', () => {
+    usePastWeekPassedLearners.mockReturnValue({
+      isLoading: false,
+      data: {
+        results: [],
+        itemCount: 0,
+        pageCount: 0,
+      },
+      fetchData: mockFetchData,
+      fetchDataImmediate: mockFetchDataImmediate,
+      hasData: false,
+    });
+
+    const wrapper = mount(<PastWeekPassedLearnersTableWrapper />);
+
+    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('renders table with correct data', () => {
-    const tableId = 'completed-learners-week';
-    const columnTitles = ['Email', 'Course Title', 'Passed Date'];
-    const rowsData = [
-      [
-        '[email protected]',
-        'Dive into ReactJS',
-        'September 23, 2018',
-      ],
-      [
-        '[email protected]',
-        'Redux with ReactJS',
-        'September 22, 2018',
-      ],
-    ];
-
-    wrapper = mount((
-      <PastWeekPassedLearnersWrapper />
-    ));
-
-    // Verify that table has correct number of columns
-    expect(wrapper.find(`.${tableId} thead th`).length).toEqual(3);
-
-    // Verify only expected columns are shown
-    wrapper.find(`.${tableId} thead th`).forEach((column, index) => {
-      expect(column.text()).toContain(columnTitles[index]);
+  it('shows loading state when data is being fetched', () => {
+    usePastWeekPassedLearners.mockReturnValue({
+      isLoading: true,
+      data: {
+        results: [],
+        itemCount: 0,
+        pageCount: 0,
+      },
+      fetchData: mockFetchData,
+      fetchDataImmediate: mockFetchDataImmediate,
+      hasData: false,
     });
 
-    // Verify that table has correct number of rows
-    expect(wrapper.find(`.${tableId} tbody tr`).length).toEqual(2);
+    const wrapper = mount(<PastWeekPassedLearnersTableWrapper />);
+
+    const table = wrapper.find('DataTable');
+    expect(table.prop('isLoading')).toBe(true);
+  });
+
+  it('fetches data immediately on mount', () => {
+    mount(<PastWeekPassedLearnersTableWrapper />);
+
+    expect(mockFetchDataImmediate).toHaveBeenCalledTimes(1);
+    expect(mockFetchDataImmediate).toHaveBeenCalledWith(
+      {
+        pageIndex: 0,
+        pageSize: PAGE_SIZE, // PAGE_SIZE constant value
+        sortBy: [
+          { id: 'passedDate', desc: true },
+        ],
+      },
+      true,
+    );
+  });
+
+  it('uses URL query parameters for initial page', () => {
+    const history = createMemoryHistory();
+    history.push(`?${tableId}-page=2`); // Set page 2 in URL
+
+    const wrapper = mount(
+      <Router location={history.location} navigator={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <PastWeekPassedLearnersTable {...defaultProps} />
+          </Provider>
+        </IntlProvider>
+      </Router>,
+    );
+
+    const table = wrapper.find('DataTable');
+    // Check that initialState has pageIndex set to 1 (0-based index for page 2)
+    expect(table.prop('initialState').pageIndex).toBe(1);
+
+    // Check that fetchDataImmediate was called with pageIndex 1
+    expect(mockFetchDataImmediate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pageIndex: 1,
+      }),
+      true,
+    );
+  });
+
+  it('updates URL when page changes', async () => {
+    const history = createMemoryHistory();
+    jest.spyOn(history, 'push');
 
-    // Verify each row in table has correct data
-    wrapper.find(`.${tableId} tbody tr`).forEach((row, rowIndex) => {
-      row.find('td').forEach((cell, colIndex) => {
-        expect(cell.text()).toEqual(rowsData[rowIndex][colIndex]);
+    const wrapper = mount(
+      <Router location={history.location} navigator={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <PastWeekPassedLearnersTable {...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: 1, // Navigate to page 2 (0-indexed)
+        pageSize: 50,
+        sortBy: [],
       });
     });
+
+    // Check that fetchData was called
+    expect(mockFetchData).toHaveBeenCalledWith({
+      pageIndex: 1,
+      pageSize: 50,
+      sortBy: [],
+    });
+  });
+
+  it('renders UserEmail component correctly', () => {
+    const wrapper = mount(<PastWeekPassedLearnersTableWrapper />);
+
+    // 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('formats timestamps correctly in the passedDate column', () => {
+    const wrapper = mount(<PastWeekPassedLearnersTableWrapper />);
+
+    // Since the actual formatting depends on a utility function i18nFormatTimestamp,
+    // we can verify the Cell prop is properly configured
+    const columns = wrapper.find('DataTable').prop('columns');
+    const dateColumn = columns.find(col => col.accessor === 'passedDate');
+    expect(dateColumn).toBeDefined();
+    expect(typeof dateColumn.Cell).toBe('function');
   });
 });