diff --git a/packages/reports/src/Components/Form/CompositeCalendar/__tests__/two-month-picker.spec.tsx b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/two-month-picker.spec.tsx index 68488490e939..6bd9c60e70e3 100644 --- a/packages/reports/src/Components/Form/CompositeCalendar/__tests__/two-month-picker.spec.tsx +++ b/packages/reports/src/Components/Form/CompositeCalendar/__tests__/two-month-picker.spec.tsx @@ -13,15 +13,40 @@ describe('TwoMonthPicker', () => { value: moment(), }; - it('should render TwoMonthPicker component', () => { - render(); - const currentMonth = moment().format('MMM'); - const prevMonth = moment().subtract(1, 'month').format('MMM'); - const currentYear = moment().format('YYYY'); - expect(screen.getByText(prevMonth)).toBeInTheDocument(); - expect(screen.getByText(currentMonth)).toBeInTheDocument(); - expect(screen.getByText(currentYear)).toBeInTheDocument(); + describe('should render TwoMonthPicker component', () => { + it('should render TwoMonthPicker component with different years for December/January months', () => { + const january_10th_2025 = moment('2025-01-10', 'YYYY-MM-DD'); + + render(); + + const currentMonth = moment().month(0).format('MMM'); // January + const prevMonth = moment().month(0).subtract(1, 'month').format('MMM'); // December + const currentYear = moment().year(2025).format('YYYY'); // 2025 + const prevYear = moment().year(2024).format('YYYY'); // 2024 + + expect(screen.getByText(currentMonth)).toBeInTheDocument(); + expect(screen.getByText(prevMonth)).toBeInTheDocument(); + expect(screen.getByTestId('first-month')).toHaveTextContent(prevYear); + expect(screen.getByTestId('second-month')).toHaveTextContent(currentYear); + }); + + it('should render TwoMonthPicker component with same years for January/February months', () => { + const february_10th_2025 = moment('2025-02-10', 'YYYY-MM-DD'); + + render(); + + const currentMonth = moment().month(1).format('MMM'); // February + const prevMonth = moment().month(1).subtract(1, 'month').format('MMM'); // January + const currentYear = moment().year(2025).format('YYYY'); // 2025 + const prevYear = moment().year(2025).format('YYYY'); // 2025 + + expect(screen.getByText(currentMonth)).toBeInTheDocument(); + expect(screen.getByText(prevMonth)).toBeInTheDocument(); + expect(screen.getByTestId('first-month')).toHaveTextContent(prevYear); + expect(screen.getByTestId('second-month')).toHaveTextContent(currentYear); + }); }); + it('should call onChange when a date is selected', async () => { render(); const prevMonthDate = moment().date(1).subtract(1, 'month'); diff --git a/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx b/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx index 6cb2d8dc99f7..a5a7d5cc6e79 100644 --- a/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx +++ b/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx @@ -1,5 +1,6 @@ -import moment from 'moment'; import React from 'react'; +import moment from 'moment'; + import { Calendar } from '@deriv/components'; import { addMonths, diffInMonths, subMonths, toMoment } from '@deriv/shared'; @@ -74,7 +75,7 @@ const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }: TTwoMo return ( -
+
-
+