fix: adding better tests

src/components/EnrollmentsTable/EnrollmentsTable.test.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { BrowserRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import EnrollmentsTable from './index';
-// import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
-// import { mockEnrollmentFetchResponse } from './EnrollmentsTable.mocks';
 
 const mockStore = configureMockStore([thunk]);
 const enterpriseId = 'test-enterprise';
@@ -31,15 +31,15 @@ const store = mockStore({
 });
 
 const EnrollmentsWrapper = props => (
-  <MemoryRouter>
+  <BrowserRouter>
     <Provider store={store}>
       <IntlProvider locale="en">
         <EnrollmentsTable
           {...props}
         />
       </IntlProvider>
     </Provider>
-  </MemoryRouter>
+  </BrowserRouter>
 );
 
 describe('EnrollmentsTable', () => {
@@ -52,6 +52,25 @@ describe('EnrollmentsTable', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders regular zero state for no results', () => {
+    render(<EnrollmentsWrapper />);
+    expect(screen.getByText('There are no results.')).toBeInTheDocument();
+  });
+  it('renders a group-specific no results warning message when the filter is applied', () => {
+    const groupUuid = 'test_uuid123';
+    // eslint-disable-next-line no-global-assign
+    window = Object.create(window);
+    const params = `?group_uuid=${groupUuid}`;
+    Object.defineProperty(window, 'location', {
+      value: {
+        search: params,
+      },
+      writable: true,
+    });
+    render(<EnrollmentsWrapper />);
+    const emptyMessage = 'We are currently processing the latest updates. The data is refreshed twice a day. Thank you for your patience, and please check back soon.';
+    expect(screen.getByText(emptyMessage)).toBeInTheDocument();
+  });
   // TODO: This test is not snapshotting the full table properly
   // it('renders a full table correctly', () => {
   //   EnterpriseDataApiService.fetchCourseEnrollments = jest.fn(() =>

src/components/EnrollmentsTable/index.jsx

@@ -11,6 +11,19 @@ import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiServi
 const EnrollmentsTable = () => {
   const intl = useIntl();
 
+  const customEmptyMessage = () => {
+    const query = new URLSearchParams(window.location.search);
+    if (query.has('group_uuid')) {
+      const emptyTableDataMessage = intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.empty.groups.message',
+        defaultMessage: 'We are currently processing the latest updates. The data is refreshed twice a day. Thank you for your patience, and please check back soon.',
+        description: 'Empty table message when groups data is pending.',
+      });
+      return emptyTableDataMessage;
+    }
+    return null;
+  };
+
   const enrollmentTableColumns = [
     {
       label: intl.formatMessage({
@@ -132,6 +145,7 @@ const EnrollmentsTable = () => {
       defaultSortIndex={8}
       defaultSortType="desc"
       tableSortable
+      customEmptyMessage={customEmptyMessage()}
     />
   );
 };

src/components/LearnerActivityTable/LearnerActivityTable.test.jsx

@@ -139,28 +139,6 @@ describe('LearnerActivityTable', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders empty state correctly if groups have no loaded', () => {
-    const groupUuid = 'test_uuid123';
-    // eslint-disable-next-line no-global-assign
-    window = Object.create(window);
-    const params = `?group_uuid=${groupUuid}`;
-    Object.defineProperty(window, 'location', {
-      value: {
-        search: params,
-      },
-      writable: true,
-    });
-    const tree = renderer
-      .create((
-        <LearnerActivityEmptyTableWrapper
-          id="active-week"
-          activity="active_past_week"
-        />
-      ))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
   it('renders active learners table correctly', () => {
     const tree = renderer
       .create((

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

@@ -533,42 +533,6 @@ exports[`LearnerActivityTable renders empty state correctly 1`] = `
 </div>
 `;
 
-exports[`LearnerActivityTable renders empty state correctly if groups have no loaded 1`] = `
-<div
-  className="fade alert-content alert alert-warning show"
-  role="alert"
->
-  <span
-    className="pgn__icon alert-icon"
-  >
-    <svg
-      aria-hidden={true}
-      fill="none"
-      focusable={false}
-      height={24}
-      role="img"
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z"
-        fill="currentColor"
-      />
-    </svg>
-  </span>
-  <div
-    className="pgn__alert-message-wrapper"
-  >
-    <div
-      className="alert-message-content"
-    >
-      We are currently processing the latest updates. The data is refreshed twice a day. Thank you for your patience, and please check back soon.
-    </div>
-  </div>
-</div>
-`;
-
 exports[`LearnerActivityTable renders inactive past month learners table correctly 1`] = `
 <div
   className="inactive-month"

src/components/LearnerActivityTable/index.jsx

@@ -102,21 +102,6 @@ class LearnerActivityTable extends React.Component {
     return tableColumns;
   }
 
-  getEmptyTableDataMessage() {
-    const { intl } = this.props;
-    const emptyTableDataMessage = intl.formatMessage({
-      id: 'admin.portal.lpr.learner.activity.table.empty.groups.message',
-      defaultMessage: 'We are currently processing the latest updates. The data is refreshed twice a day. Thank you for your patience, and please check back soon.',
-      description: 'Empty table message when groups data is pending.',
-    });
-
-    const query = new URLSearchParams(window.location.search);
-    if (query.has('group_uuid')) {
-      return emptyTableDataMessage;
-    }
-    return null;
-  }
-
   formatTableData = enrollments => enrollments.map(enrollment => ({
     ...enrollment,
     user_email: <span data-hj-suppress>{enrollment.user_email}</span>,
@@ -152,7 +137,6 @@ class LearnerActivityTable extends React.Component {
         columns={this.getTableColumns()}
         formatData={this.formatTableData}
         tableSortable
-        customEmptyMessage={this.getEmptyTableDataMessage()}
       />
     );
   }

src/components/TableComponent/index.jsx

@@ -47,18 +47,18 @@ class TableComponent extends React.Component {
     const {
       className,
       currentPage,
-      pageCount,
-      tableSortable,
       data,
-      ordering,
+      defaultSortIndex,
+      defaultSortType,
+      enterpriseId,
       formatData,
       id,
       loading,
-      enterpriseId,
-      defaultSortIndex,
-      defaultSortType,
-      navigate,
       location,
+      navigate,
+      ordering,
+      pageCount,
+      tableSortable,
     } = this.props;
 
     const sortByColumn = (column, direction) => {