diff --git a/src/components/DatePicker/DatePicker.test.tsx b/src/components/DatePicker/DatePicker.test.tsx
index c30feb548..f93288054 100644
--- a/src/components/DatePicker/DatePicker.test.tsx
+++ b/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,12 +179,12 @@ 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(
);
@@ -191,30 +192,42 @@ describe('DatePicker', () => {
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');
diff --git a/src/components/DatePicker/Month/Month.tsx b/src/components/DatePicker/Month/Month.tsx
index 4ba120b1c..1e3187615 100644
--- a/src/components/DatePicker/Month/Month.tsx
+++ b/src/components/DatePicker/Month/Month.tsx
@@ -90,6 +90,7 @@ const Month: React.FC = ({
css={datesWrapperStyle()}
ref={calendarRef}
tabIndex={0}
+ data-testid={'calendar_table'}
{...keyboardProps}
onFocus={() => {
if (focusedDay === 0) {
diff --git a/src/components/DatePicker/Month/hooks/__tests__/useMonthKeyboardNavigation.test.tsx b/src/components/DatePicker/Month/hooks/__tests__/useMonthKeyboardNavigation.test.tsx
new file mode 100644
index 000000000..43b343143
--- /dev/null
+++ b/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(
+
+ );
+
+ // Simulate keyboard events
+ act(() => {
+ fireEvent.keyDown(container, { key: 'ArrowDown', code: 'ArrowDown' });
+ });
+ expect(result.current.focusedDay).toBe(focusedDay + 7);
+ });
+});
diff --git a/src/hooks/useKeyboardEvents.ts b/src/hooks/useKeyboardEvents.ts
index a950e067b..1dceaec63 100644
--- a/src/hooks/useKeyboardEvents.ts
+++ b/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) {