diff --git a/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx b/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx index c7884c763..99a7cf2de 100644 --- a/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx +++ b/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx @@ -1,21 +1,20 @@ /* eslint-disable react/prop-types */ import { renderWithRouter } from '@edx/frontend-enterprise-utils'; -import { screen, waitFor } from '@testing-library/react'; +import { fireEvent, screen, waitFor } from '@testing-library/react'; import { camelCaseObject } from '@edx/frontend-platform'; import { DashboardContext, initialStateValue } from '../../../testData/Dashboard'; import DashboardDataTable from '../DashboardDataTable'; import { sampleDataTableData } from '../../../testData/constants'; +import SubsidyApiService from '../../../../data/services/SubsidyApiService' // Mock the debounce function jest.mock('lodash.debounce', () => jest.fn((fn) => fn)); // Mock the subsidy list const mockGetAllSubsidiesData = sampleDataTableData(10); -jest.mock('../../../../data/services/SubsidyApiService', () => ({ - getAllSubsidies: () => Promise.resolve({ - data: mockGetAllSubsidiesData, - }), -})); +const apiMock = jest + .spyOn(SubsidyApiService, 'getAllSubsidies') + .mockImplementation(() => Promise.resolve({ data: mockGetAllSubsidiesData })); // Mock the enterprise customers list const mockCustomerData = camelCaseObject(mockGetAllSubsidiesData).results.map((subsidy) => ({ @@ -47,3 +46,24 @@ describe('DashboardDatatable', () => { await waitFor(() => expect(screen.getByText('Enterprise Customer 1')).toBeTruthy()); }); }); + +describe('DashboardDatatable SortBy', ()=> { + it('sorts the data asc and desc', async ()=> { + renderWithRouter(); + const tableHeader = screen.getByText('Start date'); + + fireEvent.click(tableHeader); + await waitFor(() => expect(apiMock).toHaveBeenCalledWith( + expect.objectContaining({ + sortBy: 'active_datetime' + }) + )); + + fireEvent.click(tableHeader); + await waitFor(() => expect(apiMock).toHaveBeenCalledWith( + expect.objectContaining({ + sortBy: '-active_datetime' + }) + )); + }); +}); diff --git a/src/Configuration/Provisioning/data/utils.js b/src/Configuration/Provisioning/data/utils.js index 1b4c7896b..bf0879352 100644 --- a/src/Configuration/Provisioning/data/utils.js +++ b/src/Configuration/Provisioning/data/utils.js @@ -7,6 +7,7 @@ import LmsApiService from '../../../data/services/EnterpriseApiService'; import SubsidyApiService from '../../../data/services/SubsidyApiService'; import { isValidOpportunityProduct } from '../../../utils'; import { PREDEFINED_QUERY_DISPLAY_NAMES } from './constants'; +import snakeCase from 'lodash.snakecase'; export const indexOnlyPropType = { index: PropTypes.number.isRequired, @@ -650,10 +651,13 @@ export function sortDataTableData({ sortBy }) { if (!sortByObject) { return null; } - if (sortByObject.id === 'isActive') { - return sortByObject.desc ? '-expirationDatetime' : 'expirationDatetime'; + let sortString = sortByObject.id; + if ( sortString === 'isActive') { + sortString = 'expirationDatetime'; } - return sortByObject.desc ? `-${sortByObject.id}` : sortByObject.id; + sortString = snakeCase(sortString); + sortString = sortByObject.desc ? `-${sortString}` : sortString; + return sortString; } /** diff --git a/src/data/services/SubsidyApiService.js b/src/data/services/SubsidyApiService.js index 12ad43c89..3ad96e1d3 100644 --- a/src/data/services/SubsidyApiService.js +++ b/src/data/services/SubsidyApiService.js @@ -14,7 +14,7 @@ class SubsidyApiService { const subsidiesURL = `${getConfig().SUBSIDY_BASE_URL}/api/v1/subsidies/`; const optionalUrlParams = new URLSearchParams(snakeCaseObject({ pageSize, - sortBy: sortBy ? snakeCase(sortBy) : 'uuid', + sortBy: sortBy ? sortBy : 'uuid', ...filteredData, })).toString(); return SubsidyApiService.apiClient().get(`${subsidiesURL}?page=${pageIndex}&${optionalUrlParams}`);