diff --git a/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx b/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx index c7884c763..63a34232f 100644 --- a/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx +++ b/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx @@ -1,21 +1,21 @@ /* eslint-disable react/prop-types */ import { renderWithRouter } from '@edx/frontend-enterprise-utils'; import { screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; 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 +47,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'); + + userEvent.click(tableHeader); + await waitFor(() => expect(apiMock).toHaveBeenCalledWith( + expect.objectContaining( + { sortBy: 'active_datetime' }, + ), + )); + + userEvent.click(tableHeader); + await waitFor(() => expect(apiMock).toHaveBeenCalledWith( + expect.objectContaining( + { sortBy: 'active_datetime' }, + ), + )); + }); +}); diff --git a/src/Configuration/Provisioning/data/tests/utils.test.js b/src/Configuration/Provisioning/data/tests/utils.test.js index 3a14f79c3..36ecec909 100644 --- a/src/Configuration/Provisioning/data/tests/utils.test.js +++ b/src/Configuration/Provisioning/data/tests/utils.test.js @@ -477,7 +477,7 @@ describe('sortDatatableData', () => { expect(sortDataTableData({ sortBy: {} })).toEqual(output); }); it('returns a sort by expirationDateTime if isActive is passed as the id', () => { - const output = 'expirationDatetime'; + const output = 'expiration_datetime'; // desc is true expect(sortDataTableData({ diff --git a/src/Configuration/Provisioning/data/utils.js b/src/Configuration/Provisioning/data/utils.js index 1b4c7896b..b890883eb 100644 --- a/src/Configuration/Provisioning/data/utils.js +++ b/src/Configuration/Provisioning/data/utils.js @@ -1,6 +1,7 @@ import { useContextSelector } from 'use-context-selector'; import PropTypes from 'prop-types'; import { camelCaseObject, getConfig } from '@edx/frontend-platform'; +import snakeCase from 'lodash.snakecase'; import dayjs from './dayjs'; import { ProvisioningContext } from '../ProvisioningContext'; import LmsApiService from '../../../data/services/EnterpriseApiService'; @@ -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..b75100aad 100644 --- a/src/data/services/SubsidyApiService.js +++ b/src/data/services/SubsidyApiService.js @@ -1,6 +1,5 @@ import { getConfig, snakeCaseObject } from '@edx/frontend-platform'; import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; -import snakeCase from 'lodash.snakecase'; class SubsidyApiService { static apiClient = getAuthenticatedHttpClient; @@ -14,7 +13,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 || 'uuid', ...filteredData, })).toString(); return SubsidyApiService.apiClient().get(`${subsidiesURL}?page=${pageIndex}&${optionalUrlParams}`);