From 6304691af5834cccbd4c9fea6bbf346ab6197bac Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Fri, 7 Jun 2024 15:06:42 +0300 Subject: [PATCH 1/4] refactor: add tests for calendar icon file --- .../__tests__/calendar-icon.spec.tsx | 24 +++++++++++++++++++ .../Form/CompositeCalendar/calendar-icon.tsx | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 packages/reports/src/Components/Form/CompositeCalendar/__tests__/calendar-icon.spec.tsx diff --git a/packages/reports/src/Components/Form/CompositeCalendar/__tests__/calendar-icon.spec.tsx b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/calendar-icon.spec.tsx new file mode 100644 index 000000000000..9ee596e251ed --- /dev/null +++ b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/calendar-icon.spec.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import CalendarIcon from '../calendar-icon'; + +const mockDefaultProps = { + onClick: jest.fn(), +}; + +describe('CalendarIcon', () => { + it('should render component with default props', () => { + render(); + + expect(screen.getByTestId('dt_calendar_icon')).toBeInTheDocument(); + }); + + it('should call function onClick from props if user clicks on the component', () => { + render(); + + expect(mockDefaultProps.onClick).not.toBeCalled(); + userEvent.click(screen.getByTestId('dt_calendar_icon')); + expect(mockDefaultProps.onClick).toBeCalled(); + }); +}); diff --git a/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx index 5115ae575d28..6b9a0835c24a 100644 --- a/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx +++ b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx @@ -6,7 +6,7 @@ type TCalendarIcon = { }; const CalendarIcon = ({ onClick }: TCalendarIcon) => ( - + ); export default CalendarIcon; From 92559567f0af8d3a60ca1b102b296af8a5953115 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Mon, 10 Jun 2024 16:12:22 +0300 Subject: [PATCH 2/4] refactor: add tests for composite calendar mobile file --- .../composite-calendar-mobile.spec.tsx | 188 ++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx diff --git a/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx new file mode 100644 index 000000000000..a0f9c5ba2527 --- /dev/null +++ b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx @@ -0,0 +1,188 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import CompositeCalendarMobile from '../composite-calendar-mobile'; +import { toMoment } from '@deriv/shared'; + +const startDate = 'Start date'; +const endDate = 'End date'; +const backToTodayButtonText = 'Back to today'; +const radioButtonText = ['All time', 'Last 7 days', 'Last 30 days', 'Last 365 days']; +const customDateRangeText = 'Custom'; +const mockDefaultProps = { + duration_list: [ + { value: 'all_time', label: radioButtonText[0], onClick: jest.fn() }, + { value: 'last_7_days', label: radioButtonText[1], onClick: jest.fn() }, + { value: 'last_30_days', label: radioButtonText[2], onClick: jest.fn() }, + { value: 'last_365_days', label: radioButtonText[3], onClick: jest.fn() }, + ], + from: 1696319493, + to: 1715346191, + onChange: jest.fn(), + setCurrentFocus: jest.fn(), +}; + +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + MobileDialog: jest.fn(({ children, visible, footer, onClose }) => ( +
+ {visible && ( +
+ {children} + {footer} + +
+ )} +
+ )), +})); + +describe('CompositeCalendarMobile', () => { + it('should render the input field by default and not render MobileDialog children if it is closed (default state)', () => { + render(); + + expect(screen.getByRole('textbox')).toBeInTheDocument(); + radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); + expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); + expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); + expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + }); + + it('should render functioning component if props from and to are equal to 0', () => { + render(); + + radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); + expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); + expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); + expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + + userEvent.click(screen.getByRole('textbox')); + + radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); + expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); + expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); + expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); + }); + + it('should open the MobileDialog with children on clicking on the calendar field', () => { + render(); + + radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); + expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); + expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); + expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + + userEvent.click(screen.getByRole('textbox')); + + radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); + expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); + expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); + expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); + }); + + it('should close the MobileDialog if user clicks on Cancel button', () => { + render(); + + userEvent.click(screen.getByRole('textbox')); + + radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); + expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); + expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); + expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); + + userEvent.click(screen.getByText('Cancel')); + + radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); + expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); + expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); + expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + }); + + it('should close the MobileDialog if user clicks on Close button', () => { + render(); + + userEvent.click(screen.getByRole('textbox')); + + radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); + expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); + expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); + expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); + + userEvent.click(screen.getByText('Close MobileDialog')); + + radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); + expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); + expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); + expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + }); + + it('should close the MobileDialog if user clicks on backToTodayButtonText button', () => { + render(); + + userEvent.click(screen.getByRole('textbox')); + + radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); + expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); + expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); + expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); + + userEvent.click(screen.getByText(backToTodayButtonText)); + + radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); + expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); + expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); + expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + }); + + it('should apply new value and set it to the input if user choose some radio button value and clicks on OK button', () => { + render(); + + const input = screen.getByRole('textbox'); + + expect(input).toHaveValue(radioButtonText[0]); + userEvent.click(input); + userEvent.click(screen.getByText(radioButtonText[1])); + + userEvent.click(screen.getByText('OK')); + expect(input).toHaveValue(radioButtonText[1]); + }); + + it('should apply custom value and set it to the input if user click on Custom radio button value and clicks on OK button', () => { + render(); + + const input = screen.getByRole('textbox'); + + expect(input).toHaveValue(radioButtonText[0]); + userEvent.click(input); + userEvent.click(screen.getByText(customDateRangeText)); + + userEvent.click(screen.getByText('OK')); + expect(input).toHaveValue('03 Oct 2023 - 10 May 2024'); + }); + + it('should apply date which user type in DatePicker for Start date', () => { + render(); + + userEvent.click(screen.getByRole('textbox')); + + const inputForStartDate = screen.getByPlaceholderText(startDate); + expect(inputForStartDate).toHaveValue('03 Oct 2023'); + + userEvent.type(inputForStartDate, '10 Jun 2024'); + + expect(inputForStartDate).toHaveValue('10 Jun 2024'); + }); + + it('should apply date which user type in DatePicker for End date', () => { + render(); + + userEvent.click(screen.getByRole('textbox')); + + const inputForEndDate = screen.getByPlaceholderText(endDate); + expect(inputForEndDate).toHaveValue('10 May 2024'); + + const newDate = toMoment().format('DD MMM YYYY'); + userEvent.type(inputForEndDate, newDate); + expect(inputForEndDate).toHaveValue(newDate); + }); +}); From c1309499eb03304d81924daf9919b2481a690f86 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Mon, 10 Jun 2024 16:39:23 +0300 Subject: [PATCH 3/4] refactor: extract some testing logic into a function --- .../composite-calendar-mobile.spec.tsx | 88 +++++-------------- 1 file changed, 24 insertions(+), 64 deletions(-) diff --git a/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx index a0f9c5ba2527..760f3b40a953 100644 --- a/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx +++ b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx @@ -38,103 +38,64 @@ jest.mock('@deriv/components', () => ({ })); describe('CompositeCalendarMobile', () => { - it('should render the input field by default and not render MobileDialog children if it is closed (default state)', () => { - render(); - - expect(screen.getByRole('textbox')).toBeInTheDocument(); - radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); - expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); - expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); - expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); - }); - - it('should render functioning component if props from and to are equal to 0', () => { - render(); - - radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); - expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); - expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); - expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); - + const checkModalOpenCloseFunctionality = (buttonName?: string) => { userEvent.click(screen.getByRole('textbox')); radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); - }); - it('should open the MobileDialog with children on clicking on the calendar field', () => { - render(); + if (!buttonName) return; + + userEvent.click(screen.getByText(buttonName)); radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + }; - userEvent.click(screen.getByRole('textbox')); - - radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); - expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); - expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); - }); - - it('should close the MobileDialog if user clicks on Cancel button', () => { + it('should render the input field by default and not render MobileDialog with children if the Modal is closed (default state)', () => { render(); - userEvent.click(screen.getByRole('textbox')); - - radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); - expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); - expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); - - userEvent.click(screen.getByText('Cancel')); - + expect(screen.getByRole('textbox')).toBeInTheDocument(); radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); }); - it('should close the MobileDialog if user clicks on Close button', () => { - render(); - - userEvent.click(screen.getByRole('textbox')); - - radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); - expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); - expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); - - userEvent.click(screen.getByText('Close MobileDialog')); + it('should render functioning component if props "from" and "to" are equal to 0: MobileDialog should be opened if user clicks on the calendar field', () => { + render(); radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + + checkModalOpenCloseFunctionality(); }); - it('should close the MobileDialog if user clicks on backToTodayButtonText button', () => { + it('should close the MobileDialog if user clicks on Cancel button', () => { render(); - userEvent.click(screen.getByRole('textbox')); + checkModalOpenCloseFunctionality('Cancel'); + }); - radioButtonText.forEach(item => expect(screen.getByText(item)).toBeInTheDocument()); - expect(screen.getByText(customDateRangeText)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(startDate)).toBeInTheDocument(); - expect(screen.getByText(backToTodayButtonText)).toBeInTheDocument(); + it('should close the MobileDialog if user clicks on Close button', () => { + render(); - userEvent.click(screen.getByText(backToTodayButtonText)); + checkModalOpenCloseFunctionality('Close MobileDialog'); + }); - radioButtonText.forEach(item => expect(screen.queryByText(item)).not.toBeInTheDocument()); - expect(screen.queryByText(customDateRangeText)).not.toBeInTheDocument(); - expect(screen.queryByPlaceholderText(startDate)).not.toBeInTheDocument(); - expect(screen.queryByText(backToTodayButtonText)).not.toBeInTheDocument(); + it('should close the MobileDialog if user clicks on "Back to today" button', () => { + render(); + + checkModalOpenCloseFunctionality(backToTodayButtonText); }); - it('should apply new value and set it to the input if user choose some radio button value and clicks on OK button', () => { + it('should apply new value and set it to the input if user chooses some radio button value and clicks on OK button', () => { render(); const input = screen.getByRole('textbox'); @@ -147,7 +108,7 @@ describe('CompositeCalendarMobile', () => { expect(input).toHaveValue(radioButtonText[1]); }); - it('should apply custom value and set it to the input if user click on Custom radio button value and clicks on OK button', () => { + it('should apply custom value and set it to the input if user clicks on Custom radio button value and clicks on OK button', () => { render(); const input = screen.getByRole('textbox'); @@ -167,7 +128,6 @@ describe('CompositeCalendarMobile', () => { const inputForStartDate = screen.getByPlaceholderText(startDate); expect(inputForStartDate).toHaveValue('03 Oct 2023'); - userEvent.type(inputForStartDate, '10 Jun 2024'); expect(inputForStartDate).toHaveValue('10 Jun 2024'); From 669eb67bd2a55a4a99a783816d8e67294273fdb2 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Mon, 10 Jun 2024 17:16:27 +0300 Subject: [PATCH 4/4] chore: grammar --- .../__tests__/composite-calendar-mobile.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx index 760f3b40a953..a65adc9c5b50 100644 --- a/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx +++ b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx @@ -121,7 +121,7 @@ describe('CompositeCalendarMobile', () => { expect(input).toHaveValue('03 Oct 2023 - 10 May 2024'); }); - it('should apply date which user type in DatePicker for Start date', () => { + it('should apply date which user has typed in DatePicker for Start date', () => { render(); userEvent.click(screen.getByRole('textbox')); @@ -133,7 +133,7 @@ describe('CompositeCalendarMobile', () => { expect(inputForStartDate).toHaveValue('10 Jun 2024'); }); - it('should apply date which user type in DatePicker for End date', () => { + it('should apply date which user has typed in DatePicker for End date', () => { render(); userEvent.click(screen.getByRole('textbox'));