feat: work in progress

src/components/DatePicker/DatePicker.test.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { fireEvent, render } from '../../test';
 import DatePicker from './DatePicker';
 import { currentDay } from './utils';
+import { act } from '@testing-library/react-hooks';
 
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
   observe: jest.fn(),
@@ -178,43 +179,55 @@ describe('DatePicker', () => {
     await waitFor(() => expect(applyButton).not.toBeInTheDocument());
   });
 
-  it('should navigate through the month days when arrows are clicked', async () => {
-    const { getByTestId } = render(
+  it('should navigate through the month days when arrows are clicked', () => {
+    const { getByTestId, debug } = render(
       <DatePicker
         value={{
           from: currentDay.toDate(),
-          to: currentDay.add(1, 'day').toDate(),
+          to: currentDay.toDate(),
         }}
       />
     );
 
     const calendarButton = getByTestId('calendar_button');
     fireEvent.click(calendarButton);
 
+    const calendarTable = getByTestId('calendar_table');
+
     const selectedDay = getByTestId('3_11_2020_selected');
     expect(selectedDay).toHaveFocus();
 
-    fireEvent.keyDown(document, {
+    fireEvent.keyDown(calendarTable, {
       key: 'ArrowDown',
+      code: 'ArrowDown',
+      charCode: 40,
     });
 
-    fireEvent.keyDown(document, {
+    fireEvent.keyDown(calendarTable, {
       key: 'ArrowRight',
+      code: 'ArrowRight',
+      charCode: 39,
     });
 
-    fireEvent.keyDown(document, {
+    fireEvent.keyDown(calendarTable, {
       key: 'ArrowUp',
+      code: 'ArrowUp',
+      charCode: 38,
     });
 
-    fireEvent.keyDown(document, {
+    fireEvent.keyDown(calendarTable, {
       key: 'ArrowRight',
+      code: 'ArrowRight',
+      charCode: 39,
     });
 
-    fireEvent.keyDown(document, {
+    fireEvent.keyDown(calendarTable, {
       key: 'ArrowLeft',
+      code: 'ArrowLeft',
+      charCode: 37,
     });
 
-    fireEvent.keyDown(document, { key: 'Enter', code: 'Enter', charCode: 13 });
+    fireEvent.keyDown(calendarTable, { key: 'Enter', code: 'Enter', charCode: 13 });
 
     /** Clicked keys path should lead to the following day being selected*/
     const newSelectedDay = getByTestId('4_11_2020_selected');

src/components/DatePicker/Month/Month.tsx

@@ -90,6 +90,7 @@ const Month: React.FC<MonthProps> = ({
         css={datesWrapperStyle()}
         ref={calendarRef}
         tabIndex={0}
+        data-testid={'calendar_table'}
         {...keyboardProps}
         onFocus={() => {
           if (focusedDay === 0) {

src/components/DatePicker/Month/hooks/__tests__/useMonthKeyboardNavigation.test.tsx

@@ -0,0 +1,38 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import useMonthKeyboardNavigation from '../useMonthKeyboardNavigation';
+import { fireEvent, render } from '@testing-library/react';
+
+// jest.mock('hooks/useKeyboardEvents', () => ({
+//   useKeyboardEvents: jest.fn(() => ({ keyboardProps: {} })),
+// }));
+
+describe('useMonthKeyboardNavigation', () => {
+  it('should handle keyboard navigation correctly', () => {
+    const selectedDays = { from: undefined, to: undefined };
+    const isFirstCalendar = true;
+    const month = 8; // September (zero-based index)
+    const year = 2023;
+
+    const { result } = renderHook(
+      () => useMonthKeyboardNavigation({ selectedDays, isFirstCalendar, month, year }) // Pass calendarRef
+    );
+
+    const { focusedDay } = result.current;
+
+    const { container } = render(
+      <div>
+        <table ref={result.current.calendarRef} {...result.current.keyboardProps} />
+        <div tabIndex={0} />
+        <div tabIndex={0} />
+        <div tabIndex={0} />
+      </div>
+    );
+
+    // Simulate keyboard events
+    act(() => {
+      fireEvent.keyDown(container, { key: 'ArrowDown', code: 'ArrowDown' });
+    });
+    expect(result.current.focusedDay).toBe(focusedDay + 7);
+  });
+});

src/hooks/useKeyboardEvents.ts

@@ -1,7 +1,7 @@
 import { useKeyboard } from '@react-aria/interactions';
 import { KeyboardEvent } from 'react';
 
-const KEYBOARD_EVENT_KEYS = {
+export const KEYBOARD_EVENT_KEYS = {
   ArrowUp: 'ArrowUp',
   ArrowDown: 'ArrowDown',
   ArrowRight: 'ArrowRight',
@@ -29,6 +29,7 @@ type Props = {
 const useKeyboardEvents = ({ events: { keydown } }: Props) => {
   const { keyboardProps } = useKeyboard({
     onKeyDown: (event) => {
+      console.log('event:', event);
       const target = event.target as HTMLInputElement;
       const text = target.value;
       switch (event.key) {