chore: Migrate deprecated Table to DataTable for LearnerActivityTable

openedx · Sep 12, 2024 · 3637b96 · 3637b96
1 parent 115c430
commit 3637b96
Show file tree

Hide file tree

Showing 7 changed files with 2,244 additions and 1,124 deletions.
diff --git a/src/components/LearnerActivityTable/LearnerActivityTable.test.jsx b/src/components/LearnerActivityTable/LearnerActivityTable.test.jsx
@@ -8,96 +8,26 @@ import { Provider } from 'react-redux';
 import { mount } from 'enzyme';
 
 import LearnerActivityTable from '.';
+import useCourseEnrollments from './data/hooks/useCourseEnrollments';
+import mockUseCourseEnrollments from './data/tests/constants';
 
 const enterpriseId = 'test-enterprise';
 const mockStore = configureMockStore([thunk]);
-const learnerActivityEmptyStore = mockStore({
-  portalConfiguration: {
-    enterpriseId,
-  },
-  table: {
-    'active-week': {
-      data: {
-        results: [],
-        current_page: 1,
-        num_pages: 1,
-      },
-      ordering: null,
-      loading: false,
-      error: null,
-    },
-  },
-});
 
-const tableMockData = {
-  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: 'awesome.me@example.com',
-        course_list_price: '200',
-        course_start_date: '2017-10-21T23:47:32.738Z',
-        course_end_date: '2018-05-13T12:47:27.534Z',
-        current_grade: '0.66',
-        progress_status: 'Failed',
-        last_activity_date: '2018-09-22T10:59:28.628Z',
-      },
-      {
-        id: 5,
-        passed_date: '2018-09-22T16:27:34.690065Z',
-        course_title: 'Redux with ReactJS',
-        course_key: 'edX/Redux_ReactJS',
-        user_email: 'new@example.com',
-        course_list_price: '200',
-        course_start_date: '2017-10-21T23:47:32.738Z',
-        course_end_date: '2018-05-13T12:47:27.534Z',
-        current_grade: '0.80',
-        progress_status: 'Passed',
-        last_activity_date: '2018-09-25T10:59:28.628Z',
-      },
-    ],
-    next: null,
-    start: 0,
-    previous: null,
-  },
-  ordering: null,
-  loading: false,
-  error: null,
-};
+jest.mock('./data/hooks/useCourseEnrollments', () => (
+  jest.fn().mockReturnValue({})
+));
 
-const learnerActivityStore = mockStore({
+const store = mockStore({
   portalConfiguration: {
     enterpriseId,
   },
-  table: {
-    'active-week': tableMockData,
-    'inactive-week': tableMockData,
-    'inactive-month': tableMockData,
-  },
 });
 
-const LearnerActivityEmptyTableWrapper = props => (
-  <MemoryRouter>
-    <IntlProvider locale="en">
-      <Provider store={learnerActivityEmptyStore}>
-        <LearnerActivityTable
-          {...props}
-        />
-      </Provider>
-    </IntlProvider>
-  </MemoryRouter>
-);
-
 const LearnerActivityTableWrapper = props => (
   <MemoryRouter>
     <IntlProvider locale="en">
-      <Provider store={learnerActivityStore}>
+      <Provider store={store}>
         <LearnerActivityTable
           {...props}
         />
@@ -107,33 +37,53 @@ const LearnerActivityTableWrapper = props => (
 );
 
 const verifyLearnerActivityTableRendered = (tableId, activity, columnTitles, rowsData) => {
-  const wrapper = mount((
-    <LearnerActivityTableWrapper id={tableId} activity={activity} />
-  ));
-  // Verify that table has correct number of columns
-  expect(wrapper.find(`.${tableId} thead th`).length).toEqual(columnTitles.length);
+  const wrapper = mount(<LearnerActivityTableWrapper id={tableId} activity={activity} />);
+
+  const table = wrapper.find('[role="table"]');
+  const headerColumns = table.find('thead th');
+  const tableRows = table.find('tbody tr');
 
-  // Verify only expected columns are shown
-  wrapper.find(`.${tableId} thead th`).forEach((column, index) => {
+  // Verify the number of columns
+  expect(headerColumns).toHaveLength(columnTitles.length);
+
+  // Verify column titles
+  headerColumns.forEach((column, index) => {
     expect(column.text()).toContain(columnTitles[index]);
   });
 
-  // Verify that table has correct number of rows
-  expect(wrapper.find(`.${tableId} tbody tr`).length).toEqual(2);
+  // Verify the number of rows
+  expect(tableRows).toHaveLength(rowsData.length);
 
-  // Verify each row in table has correct data
-  wrapper.find(`.${tableId} tbody tr`).forEach((row, rowIndex) => {
-    row.find('td').forEach((cell, colIndex) => {
+  // Verify row data
+  tableRows.forEach((row, rowIndex) => {
+    const cells = row.find('td');
+    cells.forEach((cell, colIndex) => {
       expect(cell.text()).toEqual(rowsData[rowIndex][colIndex]);
     });
   });
 };
 
 describe('LearnerActivityTable', () => {
+  beforeEach(() => {
+    useCourseEnrollments.mockReturnValue(mockUseCourseEnrollments);
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
   it('renders empty state correctly', () => {
+    useCourseEnrollments.mockReturnValue(
+      {
+        isLoading: false,
+        courseEnrollments: {
+          itemCount: 0,
+          pageCount: 0,
+          results: [],
+        },
+      },
+    );
     const tree = renderer
       .create((
-        <LearnerActivityEmptyTableWrapper id="active-week" activity="active_past_week" />
+        <LearnerActivityTableWrapper id="active-week" activity="active_past_week" />
       ))
       .toJSON();
     expect(tree).toMatchSnapshot();