test: Add comprehensive test cases for TwoMonthPicker component (#18043)

Author: heorhi-deriv

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(<TwoMonthPicker {...mockProps} />);
-        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(<TwoMonthPicker {...mockProps} value={january_10th_2025} />);
+
+            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(<TwoMonthPicker {...mockProps} value={february_10th_2025} />);
+
+            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(<TwoMonthPicker {...mockProps} />);
         const prevMonthDate = moment().date(1).subtract(1, 'month');

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 (
         <React.Fragment>
-            <div className='first-month'>
+            <div className='first-month' data-testid='first-month'>
                 <Calendar.Header
                     calendar_date={left_pane_date}
                     calendar_view='date'
@@ -92,7 +93,7 @@ const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }: TTwoMo
                     updateSelected={updateSelectedDate}
                 />
             </div>
-            <div className='second-month'>
+            <div className='second-month' data-testid='second-month'>
                 <Calendar.Header
                     calendar_date={right_pane_date}
                     calendar_view='date'