Adm-909[frontend] sort time range

frontend/__tests__/constants/fileConfig/fileConfig.test.ts

@@ -5,11 +5,13 @@ import {
   CHINA_CALENDAR,
   DEFAULT_REWORK_SETTINGS,
 } from '../../fixtures';
+import { SortType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
 import { convertToNewFileConfig } from '@src/constants/fileConfig';
 
 describe('#fileConfig', () => {
   const BASIC_NEW_CONFIG = {
     projectName: 'ConfigFileForImporting',
+    sortType: SortType.DEFAULT,
     dateRange: [
       {
         startDate: '2023-03-16T00:00:00.000+08:00',

frontend/__tests__/containers/ConfigStep/DateRangePicker.test.tsx

@@ -36,6 +36,9 @@ const setup = () => {
 };
 
 describe('DateRangePickerSection', () => {
+  beforeEach(() => {
+    setup();
+  });
   describe('Single range behaviors', () => {
     const expectDate = (inputDate: HTMLInputElement) => {
       expect(inputDate.value).toEqual(expect.stringContaining(TODAY.date().toString()));
@@ -44,33 +47,25 @@ describe('DateRangePickerSection', () => {
     };
 
     it('should render DateRangePicker', () => {
-      setup();
-
       expect(screen.queryAllByText(START_DATE_LABEL)).toHaveLength(1);
       expect(screen.queryAllByText(END_DATE_LABEL)).toHaveLength(1);
     });
 
     it('should show right start date when input a valid date given init start date is null ', async () => {
-      setup();
-
       const startDateInput = screen.getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
       await userEvent.type(startDateInput, INPUT_DATE_VALUE);
 
       expectDate(startDateInput);
     });
 
     it('should show right end date when input a valid date given init end date is null ', async () => {
-      setup();
-
       const endDateInput = screen.getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
 
       await userEvent.type(endDateInput, INPUT_DATE_VALUE);
       expectDate(endDateInput);
     });
 
     it('should Auto-fill endDate which is after startDate 13 days when fill right startDate ', async () => {
-      setup();
-
       const endDate = TODAY.add(13, 'day');
       const startDateInput = screen.getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
       const endDateInput = screen.getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
@@ -82,8 +77,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should Auto-clear endDate when its corresponding startDate is cleared ', async () => {
-      setup();
-
       const addButton = screen.getByLabelText('Button for adding date range');
       await userEvent.click(addButton);
       const rangeDate1 = ['03/01/2024', '03/10/2024'];
@@ -98,8 +91,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should not auto change startDate when its corresponding endDate changes ', async () => {
-      setup();
-
       const startDateInput = screen.getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
       const endDateInput = screen.getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
       const startDate = dayjs('2024-03-20').format('MM/DD/YYYY');
@@ -113,8 +104,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should not Auto-fill endDate which is after startDate 14 days when fill wrong format startDate ', async () => {
-      setup();
-
       const startDateInput = screen.getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
       const endDateInput = screen.getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
       await userEvent.type(startDateInput, ERROR_DATE);
@@ -124,8 +113,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should dispatch update configuration when change startDate', async () => {
-      setup();
-
       const startDateInput = screen.getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
       await userEvent.type(startDateInput, INPUT_DATE_VALUE);
 
@@ -135,8 +122,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should dispatch update configuration when change endDate', async () => {
-      setup();
-
       const endDateInput = screen.getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
       await userEvent.type(endDateInput, INPUT_DATE_VALUE);
 
@@ -148,8 +133,6 @@ describe('DateRangePickerSection', () => {
 
   describe('Multiple range amount behaviors', () => {
     it('should not show remove button given there is only one range by default', () => {
-      setup();
-
       const removeButton = screen.queryByRole('button', { name: 'Remove' });
       const ranges = screen.getAllByLabelText('Range picker row');
 
@@ -158,8 +141,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should allow user to add up to 6 ranges', async () => {
-      setup();
-
       const addButton = screen.getByLabelText('Button for adding date range');
       const defaultRanges = screen.getAllByLabelText('Range picker row');
 
@@ -173,8 +154,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should show remove button when ranges are more than 1 and user is able to remove the range itself by clicking the remove button within that row', async () => {
-      setup();
-
       const addButton = screen.getByLabelText('Button for adding date range');
       await userEvent.click(addButton);
       const ranges = screen.getAllByLabelText('Range picker row');
@@ -194,8 +173,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should dispatch update configuration when remove the range', async () => {
-      setup();
-
       const addButton = screen.getByLabelText('Button for adding date range');
       await userEvent.click(addButton);
       const ranges = screen.getAllByLabelText('Range picker row');
@@ -216,7 +193,6 @@ describe('DateRangePickerSection', () => {
 
   describe('Multiple ranges date interactions', () => {
     it('should auto fill end date when change star date by cloeset earliest date of other ranges', async () => {
-      setup();
       const rangeDate1 = ['03/12/2024', '03/25/2024'];
       const rangeDate2 = ['03/08/2024'];
 
@@ -237,7 +213,6 @@ describe('DateRangePickerSection', () => {
     });
 
     it('should display error message for start-date and end-date respectively when time ranges conflict', async () => {
-      setup();
       const rangeDate1 = ['03/12/2024', '03/25/2024'];
       const rangeDate2 = ['03/08/2024', '03/26/2024'];
 
@@ -258,4 +233,78 @@ describe('DateRangePickerSection', () => {
       expect(screen.getByText(TIME_RANGE_ERROR_MESSAGE.END_DATE_INVALID_TEXT)).toBeVisible();
     });
   });
+
+  describe('Sort date range behaviors', () => {
+    it('should not show sort button given only one date range', async () => {
+      const rangeDate1 = ['03/15/2024', '03/25/2024'];
+      const ranges = screen.getAllByLabelText('Range picker row');
+      const startDate1Input = within(ranges[0]).getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
+      const endDate1Input = within(ranges[0]).getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
+      await userEvent.type(startDate1Input, rangeDate1[0]);
+      await userEvent.type(endDate1Input, rangeDate1[1]);
+      const sortButtonContainer = screen.queryByLabelText('Sorting date range');
+      expect(sortButtonContainer).toBeNull();
+    });
+  });
+
+  it('should show sort button given more than one time range', async () => {
+    const rangeDate1 = ['03/15/2024', '03/25/2024'];
+    const rangeDate2 = ['03/08/2024', '03/11/2024'];
+
+    const addButton = screen.getByLabelText('Button for adding date range');
+    await userEvent.click(addButton);
+    const ranges = screen.getAllByLabelText('Range picker row');
+    const startDate1Input = within(ranges[0]).getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
+    const endDate1Input = within(ranges[0]).getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
+    const startDate2Input = within(ranges[1]).getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
+    const endDate12nput = within(ranges[1]).getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
+    await userEvent.type(startDate1Input, rangeDate1[0]);
+    await userEvent.type(endDate1Input, rangeDate1[1]);
+    await userEvent.type(startDate2Input, rangeDate2[0]);
+    await userEvent.type(endDate12nput, rangeDate2[1]);
+    const sortButton = screen.getByLabelText('Sorting date range');
+    expect(sortButton).toBeInTheDocument();
+  });
+
+  it('should not show sort button given exist errors in date range', async () => {
+    const rangeDate1 = ['03/12/2024', '03/25/2024'];
+    const rangeDate2 = ['03/08/2024', '03/26/2024'];
+
+    const addButton = screen.getByLabelText('Button for adding date range');
+    await userEvent.click(addButton);
+    await userEvent.click(addButton);
+    const ranges = screen.getAllByLabelText('Range picker row');
+    const startDate1Input = within(ranges[0]).getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
+    const endDate1Input = within(ranges[0]).getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
+    const startDate2Input = within(ranges[1]).getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
+    const endDate12nput = within(ranges[1]).getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
+    await userEvent.type(startDate1Input, rangeDate1[0]);
+    await userEvent.type(endDate1Input, rangeDate1[1]);
+    await userEvent.type(startDate2Input, rangeDate2[0]);
+    await userEvent.type(endDate12nput, rangeDate2[1]);
+    const sortButtonContainer = screen.queryByLabelText('Sorting date range');
+    expect(sortButtonContainer).toBeNull();
+  });
+
+  it('should update sort status when handleSortTypeChange is called', async () => {
+    const rangeDate1 = ['03/15/2024', '03/25/2024'];
+    const rangeDate2 = ['03/08/2024', '03/11/2024'];
+
+    const addButton = screen.getByLabelText('Button for adding date range');
+    await userEvent.click(addButton);
+    const ranges = screen.getAllByLabelText('Range picker row');
+    const startDate1Input = within(ranges[0]).getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
+    const endDate1Input = within(ranges[0]).getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
+    const startDate2Input = within(ranges[1]).getByRole('textbox', { name: START_DATE_LABEL }) as HTMLInputElement;
+    const endDate12nput = within(ranges[1]).getByRole('textbox', { name: END_DATE_LABEL }) as HTMLInputElement;
+    await userEvent.type(startDate1Input, rangeDate1[0]);
+    await userEvent.type(endDate1Input, rangeDate1[1]);
+    await userEvent.type(startDate2Input, rangeDate2[0]);
+    await userEvent.type(endDate12nput, rangeDate2[1]);
+    const sortButton = screen.getByLabelText('sort button');
+    await userEvent.click(sortButton);
+    expect(screen.getByRole('button', { name: 'Descending' })).toBeInTheDocument();
+    await userEvent.click(sortButton);
+    expect(screen.getByRole('button', { name: 'Ascending' })).toBeInTheDocument();
+  });
 });

frontend/__tests__/containers/ConfigStep/SortingDateRange.test.tsx

@@ -0,0 +1,63 @@
+import { SortingDateRange } from '@src/containers/ConfigStep/DateRangePicker/SortingDateRange';
+import { SortType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
+import { updateDateRangeSortType } from '@src/context/config/configSlice';
+import { setupStore } from '@test/utils/setupStoreUtil';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import React from 'react';
+
+let store = setupStore();
+const setup = () => {
+  store = setupStore();
+  return render(
+    <Provider store={store}>
+      <SortingDateRange onChange={() => {}} sortType={SortType.DEFAULT} />
+    </Provider>,
+  );
+};
+jest.mock('@src/context/config/configSlice', () => ({
+  ...jest.requireActual('@src/context/config/configSlice'),
+  updateDateRangeSortType: jest.fn().mockReturnValue({ type: 'SHOULD_UPDATE_SORT_STATUS' }),
+}));
+
+describe('SortDateRange button behaviors', () => {
+  it('should show sort time rang button', () => {
+    setup();
+    const sortButtonContainer = screen.getByLabelText('Sorting date range');
+    expect(sortButtonContainer).toBeInTheDocument();
+
+    const sortTextButton = screen.getByText('Default sort');
+    expect(sortTextButton).toBeInTheDocument();
+
+    const sortButton = screen.getByLabelText('sort button');
+    expect(sortButton).toBeInTheDocument();
+  });
+
+  it('should change sort order given SortButton is clicked', async () => {
+    setup();
+    const sortButtonContainer = screen.getByLabelText('Sorting date range');
+    expect(sortButtonContainer).toBeInTheDocument();
+
+    const sortTextButton = screen.getByText('Default sort');
+
+    expect(sortTextButton).toBeInTheDocument();
+
+    const sortButton = screen.getByLabelText('sort button');
+    await userEvent.click(sortButton);
+
+    expect(updateDateRangeSortType).toHaveBeenCalledTimes(1);
+    expect(updateDateRangeSortType).toHaveBeenCalledWith(SortType.DESCENDING);
+  });
+
+  it('should render right icon with sort status', async () => {
+    setup();
+    const sortButton = screen.getByLabelText('sort button');
+    await userEvent.click(sortButton);
+    const arrowDropDown = screen.getByRole('button', { name: 'Descending' });
+    expect(arrowDropDown).toBeInTheDocument();
+    await userEvent.click(sortButton);
+    const arrowDropUp = screen.getByRole('button', { name: 'Ascending' });
+    expect(arrowDropUp).toBeInTheDocument();
+  });
+});

frontend/__tests__/context/configSlice.test.ts

@@ -3,11 +3,13 @@ import configReducer, {
   selectSteps,
   updateCalendarType,
   updateDateRange,
+  updateDateRangeSortType,
   updateMetrics,
   updateProjectCreatedState,
   updateProjectName,
 } from '@src/context/config/configSlice';
 import { CHINA_CALENDAR, CONFIG_PAGE_VERIFY_IMPORT_ERROR_MESSAGE, REGULAR_CALENDAR, VELOCITY } from '../fixtures';
+import { SortType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
 import { setupStore } from '@test/utils/setupStoreUtil';
 import initialConfigState from '../initialConfigState';
 
@@ -50,6 +52,13 @@ describe('config reducer', () => {
     expect(config.dateRange[0].endDate).toEqual('');
   });
 
+  it('should update date range sort type with given sort type', () => {
+    const newSortType = SortType.DEFAULT;
+    const config = configReducer(initialConfigState, updateDateRangeSortType(newSortType)).basic;
+
+    expect(config.sortType).toEqual(newSortType);
+  });
+
   it('should isProjectCreated is false when import file', () => {
     const config = configReducer(initialConfigState, updateProjectCreatedState(false));
 

frontend/__tests__/fixtures.ts

@@ -1,3 +1,4 @@
+import { SortType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
 import { CSVReportRequestDTO, ReportRequestDTO } from '@src/clients/report/dto/request';
 import { ReportResponseDTO } from '@src/clients/report/dto/response';
 import { SOURCE_CONTROL_TYPES } from '@src/constants/resources';
@@ -224,6 +225,7 @@ export const MOCK_GENERATE_REPORT_REQUEST_PARAMS: ReportRequestDTO = {
 export const IMPORTED_NEW_CONFIG_FIXTURE = {
   projectName: 'ConfigFileForImporting',
   metrics: ['Velocity', 'Cycle time', 'Classification', 'Lead time for changes'],
+  sortType: SortType.DEFAULT,
   dateRange: [
     {
       startDate: '2023-03-16T00:00:00.000+08:00',

frontend/__tests__/initialConfigState.ts

@@ -1,3 +1,4 @@
+import { SortType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
 import { BOARD_TYPES, PIPELINE_TOOL_TYPES, REGULAR_CALENDAR } from './fixtures';
 import { BasicConfigState } from '@src/context/config/configSlice';
 import { SOURCE_CONTROL_TYPES } from '@src/constants/resources';
@@ -13,6 +14,7 @@ const initialConfigState: BasicConfigState = {
         endDate: null,
       },
     ],
+    sortType: SortType.DEFAULT,
     metrics: [],
   },
   board: {

frontend/e2e/fixtures/create-new/config-step.ts

@@ -6,6 +6,7 @@ export const config = {
       endDate: '2024-01-19T23:59:59.999+08:00',
     },
   ],
+  sortType: 'DEFAULT',
   calendarType: 'Calendar with Chinese Holiday',
   metrics: [
     'Velocity',
@@ -42,6 +43,7 @@ export const configWithoutBlockColumn = {
       endDate: '2024-04-08T23:59:59.999+08:00',
     },
   ],
+  sortType: 'DEFAULT',
   calendarType: 'Calendar with Chinese Holiday',
   metrics: ['Cycle time'],
   board: {

frontend/e2e/fixtures/create-new/metrics-step.ts

@@ -6,6 +6,7 @@ export const config = {
       endDate: '2024-01-19T23:59:59.999+08:00',
     },
   ],
+  sortType: 'DEFAULT',
   calendarType: 'Calendar with Chinese Holiday',
   metrics: [
     'Velocity',
@@ -112,6 +113,7 @@ export const modifiedConfig = {
     startDate: '2024-01-15T00:00:00.000+08:00',
     endDate: '2024-01-19T23:59:59.999+08:00',
   },
+  sortType: 'DEFAULT',
   calendarType: 'Calendar with Chinese Holiday',
   metrics: [
     'Velocity',