From 0eb755e064e5ef730ef19a2ca1e9bd5911c90656 Mon Sep 17 00:00:00 2001 From: Hamzah Ullah Date: Wed, 28 Jun 2023 13:00:35 -0400 Subject: [PATCH] feat: testing pt 1 --- .../DashboardDatatable/DashboardDatatable.jsx | 22 +++++-- .../DashboardTableActions.jsx | 7 ++- .../tests/DashboardTableActions.test.jsx | 57 +++++++++++++++++++ .../tests/DashboardTableBadges.test.jsx | 24 ++++++++ 4 files changed, 103 insertions(+), 7 deletions(-) create mode 100644 src/Configuration/Provisioning/DashboardDatatable/tests/DashboardTableActions.test.jsx create mode 100644 src/Configuration/Provisioning/DashboardDatatable/tests/DashboardTableBadges.test.jsx diff --git a/src/Configuration/Provisioning/DashboardDatatable/DashboardDatatable.jsx b/src/Configuration/Provisioning/DashboardDatatable/DashboardDatatable.jsx index 745588060..00f0b2d8e 100644 --- a/src/Configuration/Provisioning/DashboardDatatable/DashboardDatatable.jsx +++ b/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) => ; 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 (
{ 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 && ( { 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}`} /> ), { destination={`${DJANGO_ADMIN_SUBSIDY_BASE_URL}/admin/subsidy/subsidy/?uuid=${rowUuid}`} target="_blank" showLaunchIcon={false} + data-testid="django-admin-link" > , ]; diff --git a/src/Configuration/Provisioning/DashboardDatatable/tests/DashboardTableActions.test.jsx b/src/Configuration/Provisioning/DashboardDatatable/tests/DashboardTableActions.test.jsx new file mode 100644 index 000000000..6803da234 --- /dev/null +++ b/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, +}) => ( + + + +); + +describe('DashboardTableBadges', () => { + it('renders', () => { + const row = { + values: { + uuid: 'Pikachu', + }, + }; + renderWithRouter(); + 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(); + const editButton = screen.getByTestId(`Edit-${row.values.uuid}`); + fireEvent.click(editButton); + expect(useHistoryPush).toHaveBeenCalledWith(`${HOME}/${row.values.uuid}/edit`); + }); +}); diff --git a/src/Configuration/Provisioning/DashboardDatatable/tests/DashboardTableBadges.test.jsx b/src/Configuration/Provisioning/DashboardDatatable/tests/DashboardTableBadges.test.jsx new file mode 100644 index 000000000..35fc3d9b3 --- /dev/null +++ b/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(); + expect(screen.getByText('Active')).toBeTruthy(); + }); + it('renders the \'Inactive\' badge', () => { + const row = { + values: { + isActive: false, + }, + }; + renderWithRouter(); + expect(screen.getByText('Inactive')).toBeTruthy(); + }); +});