feat: testing pt 1

src/Configuration/Provisioning/DashboardDatatable/DashboardDatatable.jsx

@@ -3,10 +3,11 @@ import {
   TextFilter,
 } from '@edx/paragon';
 import React, {
-  useCallback, useMemo,
+  useCallback, useMemo, useState,
 } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import debounce from 'lodash.debounce';
+import { logError } from '@edx/frontend-platform/logging';
 import { DashboardContext } from '../DashboardContext';
 import { MAX_PAGE_SIZE } from '../data/constants';
 import { useDashboardContext } from '../data/hooks';
@@ -17,16 +18,24 @@ import { filterDatatableData, sortDatatableData, transformDatatableDate } from '
 const DashboardDatatable = () => {
   const { enterpriseSubsidies } = useContextSelector(DashboardContext, v => v[0]);
   const { hydrateEnterpriseSubsidies } = useDashboardContext();
+  const [isLoading, setIsLoading] = useState(true);
 
   // Implementation due to filterText value displaying accessor value customerName as opposed to Customer Name
   const filterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
 
   const fetchData = useCallback(async (datatableProps) => {
-    await hydrateEnterpriseSubsidies({
-      pageIndex: datatableProps.pageIndex + 1,
-      sortBy: sortDatatableData(datatableProps),
-      filterBy: filterDatatableData(datatableProps),
-    });
+    setIsLoading(true);
+    try {
+      await hydrateEnterpriseSubsidies({
+        pageIndex: datatableProps.pageIndex + 1,
+        sortBy: sortDatatableData(datatableProps),
+        filterBy: filterDatatableData(datatableProps),
+      });
+    } catch (e) {
+      logError(e);
+    } finally {
+      setIsLoading(false);
+    }
   }, [hydrateEnterpriseSubsidies]);
 
   const debouncedFetchData = useMemo(() => debounce(
@@ -40,6 +49,7 @@ const DashboardDatatable = () => {
   return (
     <section className="mt-5">
       <DataTable
+        isLoading={isLoading}
         isPaginated
         manualPagination
         isSortable

src/Configuration/Provisioning/DashboardDatatable/DashboardTableActions.jsx

@@ -10,33 +10,38 @@ import {
   DjangoShort,
 } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
+import ROUTES from '../../../data/constants/routes';
 
 const DashboardTableActions = ({ row }) => {
   const rowUuid = row.values.uuid;
   const { DJANGO_ADMIN_SUBSIDY_BASE_URL } = getConfig();
   const history = useHistory();
+  const { HOME } = ROUTES.CONFIGURATION.SUB_DIRECTORY.PROVISIONING;
   return [
     getConfig().FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION && (
       <IconButton
         key="edit-icon"
         size="sm"
         src={EditOutline}
         iconAs={Icon}
-        onClick={() => history.push(`/enterprise-configuration/learner-credit/${rowUuid}/edit`)}
+        onClick={() => history.push(`${HOME}/${rowUuid}/edit`)}
         alt="Edit Subsidy Icon Button"
+        data-testid={`Edit-${rowUuid}`}
       />
     ),
     <Hyperlink
       key="django-icon"
       destination={`${DJANGO_ADMIN_SUBSIDY_BASE_URL}/admin/subsidy/subsidy/?uuid=${rowUuid}`}
       target="_blank"
       showLaunchIcon={false}
+      data-testid="django-admin-link"
     >
       <IconButton
         size="sm"
         src={DjangoShort}
         iconAs={Icon}
         alt="Django Admin Icon Button"
+        data-testid={`Django-Admin-Page-${rowUuid}`}
       />
     </Hyperlink>,
   ];

src/Configuration/Provisioning/DashboardDatatable/tests/DashboardTableActions.test.jsx

@@ -0,0 +1,57 @@
+/* eslint-disable react/prop-types */
+import { renderWithRouter } from '@edx/frontend-enterprise-utils';
+import { fireEvent, screen } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import DashboardTableActions from '../DashboardTableActions';
+import ROUTES from '../../../../data/constants/routes';
+
+const { HOME } = ROUTES.CONFIGURATION.SUB_DIRECTORY.PROVISIONING;
+
+const useHistoryPush = jest.fn();
+const historyMock = {
+  push: useHistoryPush,
+  location: jest.fn(),
+  listen: jest.fn(),
+  replace: jest.fn(),
+};
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: () => {
+    const DJANGO_ADMIN_SUBSIDY_BASE_URL = 'https://example.com';
+    return {
+      DJANGO_ADMIN_SUBSIDY_BASE_URL,
+      FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: true,
+    };
+  },
+}));
+
+const DashboardTableActionsWrapper = ({
+  row,
+}) => (
+  <Router history={historyMock}>
+    <DashboardTableActions row={row} />
+  </Router>
+);
+
+describe('DashboardTableBadges', () => {
+  it('renders', () => {
+    const row = {
+      values: {
+        uuid: 'Pikachu',
+      },
+    };
+    renderWithRouter(<DashboardTableActionsWrapper row={row} />);
+    expect(screen.getByTestId(`Edit-${row.values.uuid}`)).toBeTruthy();
+    expect(screen.getByTestId(`Django-Admin-Page-${row.values.uuid}`)).toBeTruthy();
+  });
+  it('useHistory is called on click, Edit', async () => {
+    const row = {
+      values: {
+        uuid: 'Pikachu',
+      },
+    };
+    renderWithRouter(<DashboardTableActionsWrapper row={row} />);
+    const editButton = screen.getByTestId(`Edit-${row.values.uuid}`);
+    fireEvent.click(editButton);
+    expect(useHistoryPush).toHaveBeenCalledWith(`${HOME}/${row.values.uuid}/edit`);
+  });
+});

src/Configuration/Provisioning/DashboardDatatable/tests/DashboardTableBadges.test.jsx

@@ -0,0 +1,24 @@
+import { renderWithRouter } from '@edx/frontend-enterprise-utils';
+import { screen } from '@testing-library/react';
+import DashboardTableBadges from '../DashboardTableBadges';
+
+describe('DashboardTableBadges', () => {
+  it('renders the \'Active\' badge', () => {
+    const row = {
+      values: {
+        isActive: true,
+      },
+    };
+    renderWithRouter(<DashboardTableBadges row={row} />);
+    expect(screen.getByText('Active')).toBeTruthy();
+  });
+  it('renders the \'Inactive\' badge', () => {
+    const row = {
+      values: {
+        isActive: false,
+      },
+    };
+    renderWithRouter(<DashboardTableBadges row={row} />);
+    expect(screen.getByText('Inactive')).toBeTruthy();
+  });
+});