@transferwise/components 46.156.0 → 46.157.1

package/src/Calendar/Calendar.test.tsx

@@ -1,5 +1,6 @@
-import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import { fireEvent, mockMatchMedia, render, screen, userEvent } from '../test-utils';
 import Calendar from './Calendar';
+import type { DisabledRules } from './Calendar.types';
 
 mockMatchMedia();
 
@@ -15,35 +16,180 @@ describe('Calendar', () => {
       ['{ArrowUp}', -7],
       ['{ArrowDown}', +7],
     ])("handles '%s' to step %d day(s)", async (text: string, step: number) => {
-      const handleChange = jest.fn();
-      render(<Calendar value={initialValue} onChange={handleChange} />);
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={initialValue} onDateFocus={handleDateFocus} />);
 
       await user.click(screen.getByRole('button', { name: /selected day/iu }));
       await user.keyboard(text);
 
       const expected = new Date(initialValue);
       expected.setDate(initialValue.getDate() + step);
-      expect(handleChange).toHaveBeenCalledWith(expected);
+      expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
     });
 
     it('selects a day on click', async () => {
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={initialValue} onDateFocus={handleDateFocus} />);
+
+      await user.click(screen.getByText('15'));
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2000, 0, 15), { isEnabled: true });
+    });
+
+    it('fires both onDateFocus and onChange when clicking a day', async () => {
+      const handleDateFocus = jest.fn();
       const handleChange = jest.fn();
-      render(<Calendar value={initialValue} onChange={handleChange} />);
+      render(
+        <Calendar value={initialValue} onDateFocus={handleDateFocus} onChange={handleChange} />,
+      );
 
       await user.click(screen.getByText('15'));
 
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2000, 0, 15), { isEnabled: true });
       expect(handleChange).toHaveBeenCalledWith(new Date(2000, 0, 15));
     });
 
-    it('calls onSelect instead of onChange when clicking a day', async () => {
+    it('does not fire onChange during arrow key navigation', async () => {
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      expect(handleChange).toHaveBeenCalledTimes(1);
+
+      await user.keyboard('{ArrowRight}');
+
+      expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('fires onChange when Enter is pressed on focused date', async () => {
       const handleChange = jest.fn();
-      const handleSelect = jest.fn();
-      render(<Calendar value={initialValue} onChange={handleChange} onSelect={handleSelect} />);
+      render(<Calendar value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{Enter}');
+
+      const expected = new Date(initialValue);
+      expected.setDate(initialValue.getDate() + 1);
+      expect(handleChange).toHaveBeenCalledWith(expected);
+    });
+
+    it('does not fire onChange when Enter is pressed on a disabled focused date', async () => {
+      const handleChange = jest.fn();
+      const disabledRules: DisabledRules = {
+        weekdays: ['sat', 'sun'],
+        reason: 'Closed on weekends.',
+      };
+      render(
+        <Calendar
+          value={new Date(2000, 0, 7)}
+          disabledRules={disabledRules}
+          onChange={handleChange}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      // Click on selected day (Friday) fires onChange once
+      expect(handleChange).toHaveBeenCalledTimes(1);
+
+      // ArrowRight from Jan 7 (Friday) → Jan 8 (Saturday = disabled)
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{Enter}');
+
+      expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('fires onDateFocus with isEnabled: false when Enter is pressed on a disabled focused date', async () => {
+      const handleDateFocus = jest.fn();
+      const disabledRules: DisabledRules = {
+        weekdays: ['sat', 'sun'],
+        reason: 'Closed on weekends.',
+      };
+      render(
+        <Calendar
+          value={new Date(2000, 0, 7)}
+          disabledRules={disabledRules}
+          onDateFocus={handleDateFocus}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      handleDateFocus.mockClear();
+
+      // ArrowRight from Jan 7 (Friday) → Jan 8 (Saturday = disabled)
+      await user.keyboard('{ArrowRight}');
+      handleDateFocus.mockClear();
+
+      await user.keyboard('{Enter}');
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2000, 0, 8), { isEnabled: false });
+    });
+
+    it('fires onChange when Space is pressed on a focused enabled date', async () => {
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard(' ');
+
+      const expected = new Date(initialValue);
+      expected.setDate(initialValue.getDate() + 1);
+      expect(handleChange).toHaveBeenCalledWith(expected);
+    });
+
+    it('does not fire onChange when Space is pressed on a disabled focused date', async () => {
+      const handleChange = jest.fn();
+      const disabledRules: DisabledRules = {
+        weekdays: ['sat', 'sun'],
+        reason: 'Closed on weekends.',
+      };
+      render(
+        <Calendar
+          value={new Date(2000, 0, 7)}
+          disabledRules={disabledRules}
+          onChange={handleChange}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      expect(handleChange).toHaveBeenCalledTimes(1);
+
+      // ArrowRight from Jan 7 (Friday) → Jan 8 (Saturday = disabled)
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard(' ');
+
+      expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders and remains interactive without onDateFocus', async () => {
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} />);
 
       await user.click(screen.getByText('15'));
 
-      expect(handleSelect).toHaveBeenCalledWith(new Date(2000, 0, 15));
-      expect(handleChange).not.toHaveBeenCalled();
+      expect(handleChange).toHaveBeenCalledWith(new Date(2000, 0, 15));
+    });
+
+    it('fires onDateFocus when a cell receives DOM focus directly (screen reader navigation)', () => {
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={initialValue} onDateFocus={handleDateFocus} />);
+
+      const cell = screen.getByLabelText(/^15 January 2000/u);
+      fireEvent.focus(cell);
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2000, 0, 15), { isEnabled: true });
+    });
+
+    it('does not fire onDateFocus when the already-focused cell receives focus', () => {
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={initialValue} onDateFocus={handleDateFocus} />);
+
+      // Focus the selected date (which is already focusedDate in state)
+      const selected = screen.getByLabelText(/^1 January 2000.*selected/iu);
+      fireEvent.focus(selected);
+
+      expect(handleDateFocus).not.toHaveBeenCalled();
     });
   });
 
@@ -54,15 +200,15 @@ describe('Calendar', () => {
       ['{ArrowUp}', -4],
       ['{ArrowDown}', +4],
     ])("handles '%s' to step %d year(s)", async (text: string, step: number) => {
-      const handleChange = jest.fn();
-      render(<Calendar value={initialValue} onChange={handleChange} />);
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={initialValue} onDateFocus={handleDateFocus} />);
 
       await user.click(screen.getByRole('button', { name: /year view/iu }));
       await user.keyboard(text);
 
       const expected = new Date(initialValue);
       expected.setFullYear(initialValue.getFullYear() + step);
-      expect(handleChange).toHaveBeenCalledWith(expected);
+      expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
     });
   });
 
@@ -73,8 +219,8 @@ describe('Calendar', () => {
       ['{ArrowUp}', -4],
       ['{ArrowDown}', +4],
     ])("handles '%s' to step %d month(s)", async (text: string, step: number) => {
-      const handleChange = jest.fn();
-      render(<Calendar value={initialValue} onChange={handleChange} />);
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={initialValue} onDateFocus={handleDateFocus} />);
 
       await user.click(screen.getByRole('button', { name: /year view/iu }));
       await user.keyboard(' ');
@@ -82,48 +228,194 @@ describe('Calendar', () => {
 
       const expected = new Date(initialValue);
       expected.setMonth(initialValue.getMonth() + step);
-      expect(handleChange).toHaveBeenCalledWith(expected);
+      expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
     });
   });
 
   describe('min/max clamping', () => {
-    it('limits navigation to min value', async () => {
-      const min = new Date(initialValue);
-      min.setDate(min.getDate() - 1);
-      const handleChange = jest.fn();
-      render(<Calendar value={initialValue} min={min} onChange={handleChange} />);
+    it('allows keyboard navigation past min within the same month', async () => {
+      const min = new Date(2000, 0, 15);
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={new Date(2000, 0, 16)} min={min} onDateFocus={handleDateFocus} />);
 
       await user.click(screen.getByRole('button', { name: /selected day/iu }));
       await user.keyboard('{ArrowLeft}{ArrowLeft}');
 
-      expect(handleChange).toHaveBeenLastCalledWith(min);
+      expect(handleDateFocus).toHaveBeenLastCalledWith(new Date(2000, 0, 14), {
+        isEnabled: false,
+      });
     });
 
-    it('limits navigation to max value', async () => {
-      const max = new Date(initialValue);
-      max.setDate(max.getDate() + 1);
-      const handleChange = jest.fn();
-      render(<Calendar value={initialValue} max={max} onChange={handleChange} />);
+    it('clamps to first of month when navigating before min into a previous month', async () => {
+      const min = new Date(2000, 0, 2);
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={new Date(2000, 0, 2)} min={min} onDateFocus={handleDateFocus} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard('{ArrowLeft}{ArrowLeft}');
+
+      expect(handleDateFocus).toHaveBeenLastCalledWith(new Date(2000, 0, 1), {
+        isEnabled: false,
+      });
+    });
+
+    it('allows keyboard navigation past max within the same month', async () => {
+      const max = new Date(2000, 0, 15);
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={new Date(2000, 0, 14)} max={max} onDateFocus={handleDateFocus} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard('{ArrowRight}{ArrowRight}');
+
+      expect(handleDateFocus).toHaveBeenLastCalledWith(new Date(2000, 0, 16), {
+        isEnabled: false,
+      });
+    });
+
+    it('clamps to last of month when navigating past max into a next month', async () => {
+      const max = new Date(2000, 0, 30);
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={new Date(2000, 0, 30)} max={max} onDateFocus={handleDateFocus} />);
 
       await user.click(screen.getByRole('button', { name: /selected day/iu }));
       await user.keyboard('{ArrowRight}{ArrowRight}');
 
-      expect(handleChange).toHaveBeenLastCalledWith(max);
+      expect(handleDateFocus).toHaveBeenLastCalledWith(new Date(2000, 0, 31), {
+        isEnabled: false,
+      });
     });
 
     it('clamps value to range when value is outside min/max', () => {
       const min = new Date(2000, 0, 5);
       const max = new Date(2000, 0, 20);
-      const handleChange = jest.fn();
-      render(<Calendar value={initialValue} min={min} max={max} onChange={handleChange} />);
+      const handleDateFocus = jest.fn();
+      render(<Calendar value={initialValue} min={min} max={max} onDateFocus={handleDateFocus} />);
 
-      expect(handleChange).toHaveBeenCalledWith(min);
+      expect(handleDateFocus).toHaveBeenCalledWith(min, { isEnabled: true });
+    });
+  });
+
+  describe('navigation button boundary disabling', () => {
+    describe('day view — previous/next month', () => {
+      it('disables previous month button when min is in the current view month', () => {
+        render(<Calendar value={new Date(2000, 3, 15)} min={new Date(2000, 3, 1)} />);
+        expect(screen.getByRole('button', { name: /previous month/iu })).toBeDisabled();
+      });
+
+      it('disables next month button when max is in the current view month', () => {
+        render(<Calendar value={new Date(2000, 3, 15)} max={new Date(2000, 3, 30)} />);
+        expect(screen.getByRole('button', { name: /next month/iu })).toBeDisabled();
+      });
+
+      it('does not disable month buttons when min/max are in adjacent months', () => {
+        render(
+          <Calendar
+            value={new Date(2000, 3, 15)}
+            min={new Date(2000, 2, 1)}
+            max={new Date(2000, 4, 30)}
+          />,
+        );
+        expect(screen.getByRole('button', { name: /previous month/iu })).toBeEnabled();
+        expect(screen.getByRole('button', { name: /next month/iu })).toBeEnabled();
+      });
+
+      it('does not disable month buttons when no min/max is set', () => {
+        render(<Calendar value={new Date(2000, 3, 15)} />);
+        expect(screen.getByRole('button', { name: /previous month/iu })).toBeEnabled();
+        expect(screen.getByRole('button', { name: /next month/iu })).toBeEnabled();
+      });
+
+      it('disables previous month button when min is in January and view is January', () => {
+        // Edge case: month wraps to previous year
+        render(<Calendar value={new Date(2000, 0, 15)} min={new Date(2000, 0, 1)} />);
+        expect(screen.getByRole('button', { name: /previous month/iu })).toBeDisabled();
+      });
+
+      it('disables next month button when max is in December and view is December', () => {
+        // Edge case: month wraps to next year
+        render(<Calendar value={new Date(2000, 11, 15)} max={new Date(2000, 11, 31)} />);
+        expect(screen.getByRole('button', { name: /next month/iu })).toBeDisabled();
+      });
+    });
+
+    describe('month view — previous/next year', () => {
+      it('disables previous year button when min year equals view year', async () => {
+        render(<Calendar value={new Date(2000, 3, 15)} min={new Date(2000, 0, 1)} />);
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        await user.click(screen.getByRole('button', { name: /2000, selected year/iu }));
+        expect(screen.getByRole('button', { name: /previous year/iu })).toBeDisabled();
+      });
+
+      it('disables next year button when max year equals view year', async () => {
+        render(<Calendar value={new Date(2000, 3, 15)} max={new Date(2000, 11, 31)} />);
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        await user.click(screen.getByRole('button', { name: /2000, selected year/iu }));
+        expect(screen.getByRole('button', { name: /next year/iu })).toBeDisabled();
+      });
+
+      it('does not disable year buttons when min/max are in adjacent years', async () => {
+        render(
+          <Calendar
+            value={new Date(2000, 3, 15)}
+            min={new Date(1999, 0, 1)}
+            max={new Date(2001, 11, 31)}
+          />,
+        );
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        await user.click(screen.getByRole('button', { name: /2000, selected year/iu }));
+        expect(screen.getByRole('button', { name: /previous year/iu })).toBeEnabled();
+        expect(screen.getByRole('button', { name: /next year/iu })).toBeEnabled();
+      });
+
+      it('does not disable year buttons when no min/max is set', async () => {
+        render(<Calendar value={new Date(2000, 3, 15)} />);
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        await user.click(screen.getByRole('button', { name: /2000, selected year/iu }));
+        expect(screen.getByRole('button', { name: /previous year/iu })).toBeEnabled();
+        expect(screen.getByRole('button', { name: /next year/iu })).toBeEnabled();
+      });
+    });
+
+    describe('year view — previous/next 20 years', () => {
+      it('disables previous 20-year button when min falls in the current block', async () => {
+        // value is 2000, block is 2000–2019, min is 2005 → previous block (1980–1999) is entirely before min
+        render(<Calendar value={new Date(2005, 0, 1)} min={new Date(2005, 0, 1)} />);
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        expect(screen.getByRole('button', { name: /previous 20 years/iu })).toBeDisabled();
+      });
+
+      it('disables next 20-year button when max falls in the current block', async () => {
+        // value is 2000, block is 2000–2019, max is 2015 → next block (2020–2039) is entirely after max
+        render(<Calendar value={new Date(2000, 0, 1)} max={new Date(2015, 11, 31)} />);
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        expect(screen.getByRole('button', { name: /next 20 years/iu })).toBeDisabled();
+      });
+
+      it('does not disable 20-year buttons when min/max span multiple blocks', async () => {
+        render(
+          <Calendar
+            value={new Date(2000, 0, 1)}
+            min={new Date(1985, 0, 1)}
+            max={new Date(2025, 11, 31)}
+          />,
+        );
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        expect(screen.getByRole('button', { name: /previous 20 years/iu })).toBeEnabled();
+        expect(screen.getByRole('button', { name: /next 20 years/iu })).toBeEnabled();
+      });
+
+      it('does not disable 20-year buttons when no min/max is set', async () => {
+        render(<Calendar value={new Date(2000, 0, 1)} />);
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        expect(screen.getByRole('button', { name: /previous 20 years/iu })).toBeEnabled();
+        expect(screen.getByRole('button', { name: /next 20 years/iu })).toBeEnabled();
+      });
     });
   });
 
   describe('view switching', () => {
     it('switches to year view and back to day view', async () => {
-      render(<Calendar value={initialValue} onChange={jest.fn()} />);
+      render(<Calendar value={initialValue} />);
 
       await user.click(screen.getByRole('button', { name: /year view/iu }));
       expect(screen.getByRole('button', { name: /selected year/iu })).toBeInTheDocument();
@@ -134,5 +426,23 @@ describe('Calendar', () => {
       await user.click(screen.getByRole('button', { name: /selected month/iu }));
       expect(screen.getByRole('button', { name: /next month/iu })).toBeInTheDocument();
     });
+
+    it('switches to year view when header button is activated with keyboard', async () => {
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} />);
+
+      // Tab through to the year view header button
+      const yearViewButton = screen.getByRole('button', { name: /year view/iu });
+      await user.tab();
+      while (document.activeElement !== yearViewButton) {
+        await user.tab();
+      }
+      expect(yearViewButton).toHaveFocus();
+
+      await user.keyboard('{Enter}');
+
+      expect(screen.getByRole('button', { name: /selected year/iu })).toBeInTheDocument();
+      expect(handleChange).not.toHaveBeenCalled();
+    });
   });
 });