Calendar keyboard navigation tests

RoyalIcing · Jan 30, 2024 · 34e2ba2 · 34e2ba2
1 parent d908350
commit 34e2ba2
Showing 1 changed file with 50 additions and 0 deletions.
diff --git a/src/roles/calendar.test.tsx b/src/roles/calendar.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Calendar } from './calendar';
 import { prettyDOM, render } from '@testing-library/react';
+import user from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CalendarSpectrum } from './Calendar-spectrum';
 import { screenTest } from '../screen';
@@ -71,6 +72,55 @@ describe('Calendar', () => {
           expect(dispatch).toHaveBeenCalledTimes(1);
         });
       });
+
+      describe('keyboard navigation', () => {
+        beforeEach(async () => {
+          await user.tab(); // Previous
+          await user.tab(); // Next
+          await user.tab(); // Cells in Grid
+        });
+
+        it('focuses on selected day', () => {
+          const selectedDay = screenTest(Calendar.dayGridCell().selected);
+          expect(screenTest(Calendar.dayButton(), selectedDay)).toHaveFocus();
+        });
+
+        it('can go left', async () => {
+          await user.keyboard('{ArrowLeft}');
+          expect(
+            screenTest(Calendar.dayButton(/February 2, 2020/))
+          ).toHaveFocus();
+        });
+
+        it('can go right', async () => {
+          await user.keyboard('{ArrowRight}');
+          expect(
+            screenTest(Calendar.dayButton(/February 4, 2020/))
+          ).toHaveFocus();
+        });
+
+        it('can select left with Enter key', async () => {
+          await user.keyboard('{ArrowLeft}{Enter}');
+          const selectedDay = screenTest(Calendar.dayGridCell().selected);
+          expect(
+            screenTest(Calendar.dayButton(/February 2, 2020/), selectedDay)
+          ).toHaveFocus();
+        });
+
+        it('can select right with Enter key', async () => {
+          await user.keyboard('{ArrowRight}{Enter}');
+          expect(
+            screenTest(Calendar.dayButton(/February 4, 2020/))
+          ).toHaveFocus();
+        });
+
+        it('focuses next week after pressing right arrow 7 times', async () => {
+          await user.keyboard(new Array(7).fill('{ArrowRight}').join(''));
+          expect(
+            screenTest(Calendar.dayButton(/February 10, 2020/))
+          ).toHaveFocus();
+        });
+      });
     }
   );
 });