Merge pull request #4840 from ryantanrk/chore/keytype

[typescript-migration] test-utils.js
Hacker0x01 · May 29, 2024 · 359478a · 359478a
2 parents b3bb446 + d6578b4
commit 359478a
Show file tree

Hide file tree

Showing 12 changed files with 163 additions and 96 deletions.
diff --git a/src/date_utils.ts b/src/date_utils.ts
@@ -82,6 +82,7 @@ export enum KeyType {
   Space = " ",
   Tab = "Tab",
   Escape = "Escape",
+  Backspace = "Backspace",
 }
 
 function getLocaleScope() {

diff --git a/src/day.tsx b/src/day.tsx
@@ -170,7 +170,7 @@ export default class Day extends Component<DayProps> {
     const eventKey = event.key;
     if (eventKey === KeyType.Space) {
       event.preventDefault();
-      event.key = "Enter";
+      event.key = KeyType.Enter;
     }
 
     this.props.handleOnKeyDown(event);

diff --git a/src/index.tsx b/src/index.tsx
@@ -877,7 +877,7 @@ export default class DatePicker extends Component<
       }
 
       const copy = newDate(this.state.preSelection);
-      if (eventKey === "Enter") {
+      if (eventKey === KeyType.Enter) {
         event.preventDefault();
         if (
           this.inputOk() &&
@@ -888,11 +888,11 @@ export default class DatePicker extends Component<
         } else {
           this.setOpen(false);
         }
-      } else if (eventKey === "Escape") {
+      } else if (eventKey === KeyType.Escape) {
         event.preventDefault();
         this.sendFocusBackToInput();
         this.setOpen(false);
-      } else if (eventKey === "Tab") {
+      } else if (eventKey === KeyType.Tab) {
         this.setOpen(false);
       }
 
@@ -904,7 +904,7 @@ export default class DatePicker extends Component<
 
   onPortalKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
     const eventKey = event.key;
-    if (eventKey === "Escape") {
+    if (eventKey === KeyType.Escape) {
       event.preventDefault();
       this.setState(
         {
@@ -1095,7 +1095,7 @@ export default class DatePicker extends Component<
   // ex: while focusing prev and next month buttons
   onPopperKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
     const eventKey = event.key;
-    if (eventKey === "Escape") {
+    if (eventKey === KeyType.Escape) {
       event.preventDefault();
       this.sendFocusBackToInput();
     }

diff --git a/src/month.tsx b/src/month.tsx
@@ -939,7 +939,7 @@ export default class Month extends Component<MonthProps> {
             onKeyDown={(event) => {
               if (isSpaceKeyDown(event)) {
                 event.preventDefault();
-                event.key = "Enter";
+                event.key = KeyType.Enter;
               }
 
               this.onMonthKeyDown(event, m);

diff --git a/src/week_number.tsx b/src/week_number.tsx
@@ -47,7 +47,7 @@ export default class WeekNumber extends Component<WeekNumberProps> {
     const eventKey = event.key;
     if (eventKey === KeyType.Space) {
       event.preventDefault();
-      event.key = "Enter";
+      event.key = KeyType.Enter;
     }
 
     this.props.handleOnKeyDown(event);

diff --git a/src/year.tsx b/src/year.tsx
@@ -248,7 +248,7 @@ export default class Year extends Component<YearProps> {
     const { key } = event;
     const { date, yearItemNumber, handleOnKeyDown } = this.props;
 
-    if (key !== "Tab") {
+    if (key !== KeyType.Tab) {
       // preventDefault on tab event blocks focus change
       event.preventDefault();
     }
@@ -429,7 +429,7 @@ export default class Year extends Component<YearProps> {
           onKeyDown={(event) => {
             if (isSpaceKeyDown(event)) {
               event.preventDefault();
-              event.key = "Enter";
+              event.key = KeyType.Enter;
             }
 
             this.onYearKeyDown(event, y);

diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
@@ -5,7 +5,7 @@ import DatePicker, { registerLocale } from "../src/index";
 import TestWrapper from "./test_wrapper.jsx";
 import CustomInput from "./helper_components/custom_input.jsx";
 import * as utils from "../src/date_utils.ts";
-import { getKey } from "./test_utils.js";
+import { getKey } from "./test_utils";
 
 function getSelectedDayNode(datePicker) {
   return (
@@ -1478,6 +1478,19 @@ describe("DatePicker", () => {
         utils.formatDate(data.copyM, data.testFormat),
       );
     });
+    it("should update the selected date when spacebar is pressed", () => {
+      const data = getOnInputKeyDownStuff();
+      fireEvent.keyDown(data.dateInput, getKey("ArrowDown")); // puts focus on the calendar day
+      fireEvent.keyDown(getSelectedDayNode(data.instance), getKey("ArrowLeft"));
+      fireEvent.keyDown(getSelectedDayNode(data.instance), getKey(" "));
+
+      data.copyM = utils.subDays(data.copyM, 1);
+      expect(data.callback).toHaveBeenCalled();
+      const result = data.callback.mock.calls[0][0];
+      expect(utils.formatDate(result, data.testFormat)).toBe(
+        utils.formatDate(data.copyM, data.testFormat),
+      );
+    });
     it("should update the selected date on manual input", () => {
       const data = getOnInputKeyDownStuff();
       fireEvent.change(data.dateInput, {
@@ -3344,6 +3357,52 @@ describe("DatePicker", () => {
 
   describe("Week picker", () => {
     describe("Keyboard navigation", () => {
+      it("should select the week when pressing Enter", () => {
+        const date = new Date("2021-02-08");
+        let selected = date;
+        const onChange = (d) => {
+          selected = d;
+        };
+        const data = getOnInputKeyDownStuff({
+          showWeekPicker: true,
+          selected: date,
+          preSelection: date,
+          onChange,
+        });
+
+        fireEvent.keyDown(data.dateInput, getKey("ArrowDown")); // open
+        fireEvent.keyDown(
+          getSelectedDayNode(data.instance),
+          getKey("ArrowDown"),
+        ); // navigate to week
+        fireEvent.keyDown(getSelectedDayNode(data.instance), getKey("Enter"));
+        expect(utils.formatDate(selected, data.testFormat)).toBe(
+          utils.formatDate(new Date("2021-02-15"), data.testFormat),
+        );
+      });
+      it("should select the week when pressing Space", () => {
+        const date = new Date("2021-02-08");
+        let selected = date;
+        const onChange = (d) => {
+          selected = d;
+        };
+        const data = getOnInputKeyDownStuff({
+          showWeekPicker: true,
+          selected: date,
+          preSelection: date,
+          onChange,
+        });
+
+        fireEvent.keyDown(data.dateInput, getKey("ArrowDown")); // open
+        fireEvent.keyDown(
+          getSelectedDayNode(data.instance),
+          getKey("ArrowDown"),
+        ); // navigate to week
+        fireEvent.keyDown(getSelectedDayNode(data.instance), getKey(" "));
+        expect(utils.formatDate(selected, data.testFormat)).toBe(
+          utils.formatDate(new Date("2021-02-15"), data.testFormat),
+        );
+      });
       it("should navigate to the previous week when pressing ArrowUp", () => {
         const date = new Date("2021-02-08");
         const data = getOnInputKeyDownStuff({

diff --git a/test/test_utils.js b/test/test_utils.js
diff --git a/test/test_utils.ts b/test/test_utils.ts
@@ -0,0 +1,59 @@
+import { KeyType } from "../src/date_utils";
+
+interface KeyEvent {
+  key: string;
+  code: number;
+  which: number;
+}
+
+export function getKey(key: KeyType, shiftKey = false) {
+  let event: KeyEvent = null as unknown as KeyEvent;
+  switch (key) {
+    case KeyType.Backspace:
+      event = { key, code: 8, which: 8 };
+      break;
+    case KeyType.Tab:
+      event = { key, code: 9, which: 9 };
+      break;
+    case KeyType.Enter:
+      event = { key, code: 13, which: 13 };
+      break;
+    case KeyType.Escape:
+      event = { key, code: 27, which: 27 };
+      break;
+    case KeyType.Space:
+      event = { key, code: 32, which: 32 };
+      break;
+    case KeyType.PageUp:
+      event = { key, code: 33, which: 33 };
+      break;
+    case KeyType.PageDown:
+      event = { key, code: 34, which: 34 };
+      break;
+    case KeyType.End:
+      event = { key, code: 35, which: 35 };
+      break;
+    case KeyType.Home:
+      event = { key, code: 36, which: 36 };
+      break;
+    case KeyType.ArrowLeft:
+      event = { key, code: 37, which: 37 };
+      break;
+    case KeyType.ArrowRight:
+      event = { key, code: 39, which: 39 };
+      break;
+    case KeyType.ArrowUp:
+      event = { key, code: 38, which: 38 };
+      break;
+    case KeyType.ArrowDown:
+      event = { key, code: 40, which: 40 };
+      break;
+    case "x" as KeyType:
+      event = { key, code: 88, which: 88 };
+      break;
+  }
+  if (!event) {
+    throw new Error("Unknown key :" + key);
+  }
+  return { ...event, shiftKey };
+}
diff --git a/test/timepicker_test.test.tsx b/test/timepicker_test.test.tsx
@@ -1,7 +1,7 @@
 import { render, fireEvent, waitFor } from "@testing-library/react";
 import React from "react";
 
-import { newDate, formatDate } from "../src/date_utils";
+import { newDate, formatDate, KeyType } from "../src/date_utils";
 import DatePicker from "../src/index";
 
 import { getKey } from "./test_utils";
@@ -152,7 +152,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey("Enter"));
+    fireEvent.keyDown(lis[1], getKey(KeyType.Enter));
     expect(getInputString()).toBe("February 28, 2018 12:30 AM");
   });
 
@@ -163,7 +163,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(" "));
+    fireEvent.keyDown(lis[1], getKey(KeyType.Space));
     expect(getInputString()).toBe("February 28, 2018 12:30 AM");
   });
 
@@ -176,7 +176,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey("Enter"));
+    fireEvent.keyDown(lis[1], getKey(KeyType.Enter));
 
     await waitFor(() => {
       expect(document.activeElement).toBe(input);
@@ -190,7 +190,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey("Escape"));
+    fireEvent.keyDown(lis[1], getKey(KeyType.Escape));
     expect(getInputString()).toBe("February 28, 2018 4:43 PM");
   });
 
@@ -204,7 +204,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey("Escape"));
+    fireEvent.keyDown(lis[1], getKey(KeyType.Escape));
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -218,7 +218,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey("Enter"));
+    fireEvent.keyDown(lis[1], getKey(KeyType.Enter));
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -232,7 +232,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(" "));
+    fireEvent.keyDown(lis[1], getKey(KeyType.Space));
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -243,9 +243,10 @@ describe("TimePicker", () => {
       showTimeSelectOnly: true,
     });
     fireEvent.focus(instance?.input ?? new HTMLElement());
-    fireEvent.keyDown(instance?.input ?? new HTMLElement(), {
-      key: "ArrowDown",
-    });
+    fireEvent.keyDown(
+      instance?.input ?? new HTMLElement(),
+      getKey(KeyType.ArrowDown),
+    );
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 

diff --git a/test/week_number_test.test.tsx b/test/week_number_test.test.tsx
@@ -94,20 +94,20 @@ describe("WeekNumber", () => {
 
     describe("handleOnKeyDown", () => {
       const handleOnKeyDownMock = jest.fn((event) => {
-        if (event.key === " ") {
+        if (event.key === utils.KeyType.Space) {
           event.preventDefault();
-          event.key = "Enter";
+          event.key = utils.KeyType.Enter;
         }
       });
 
       it("should change space key to Enter", () => {
         const eventSpace = {
-          key: " ",
+          key: utils.KeyType.Space,
           preventDefault: jest.fn(),
         };
         handleOnKeyDownMock(eventSpace);
         expect(eventSpace.preventDefault).toHaveBeenCalled();
-        expect(eventSpace.key).toBe("Enter");
+        expect(eventSpace.key).toBe(utils.KeyType.Enter);
       });
 
       it("should not change any other key", () => {