From 8e2e29d6539b4df36985a7856a4ca624b001f794 Mon Sep 17 00:00:00 2001 From: kate-deriv <121025168+kate-deriv@users.noreply.github.com> Date: Thu, 13 Jun 2024 05:30:26 +0300 Subject: [PATCH] WEBREL-3 / Kate / Test coverage: composite-calendar-mobile & calendar-icon in Reports (#15561) * refactor: add tests for calendar icon file * refactor: add tests for composite calendar mobile file * refactor: extract some testing logic into a function * chore: grammar --- .../__tests__/calendar-icon.spec.tsx | 24 +++ .../composite-calendar-mobile.spec.tsx | 148 ++++++++++++++++++ .../Form/CompositeCalendar/calendar-icon.tsx | 2 +- 3 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 packages/reports/src/Components/Form/CompositeCalendar/__tests__/calendar-icon.spec.tsx 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__/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/__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..a65adc9c5b50 --- /dev/null +++ b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/composite-calendar-mobile.spec.tsx @@ -0,0 +1,148 @@ +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', () => { + 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(); + + 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(); + }; + + it('should render the input field by default and not render MobileDialog with children if the Modal 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: 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 Cancel button', () => { + render(); + + checkModalOpenCloseFunctionality('Cancel'); + }); + + it('should close the MobileDialog if user clicks on Close button', () => { + render(); + + checkModalOpenCloseFunctionality('Close MobileDialog'); + }); + + 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 chooses 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 clicks 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 has typed 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 has typed 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); + }); +}); 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;