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');