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;