Enable enter to open someday events (#587)

* feat(web): open someday form on enter key

* fix(web): stop event propagation on Enter key press to prevent unintended submit

* chore(web): update SomedayEventContainer tests to use proper draggable props and types

Author: that-one-arab

packages/web/src/views/Calendar/Calendar.form.test.tsx

@@ -21,7 +21,10 @@ describe("Event Form", () => {
     const user = userEvent.setup();
 
     await act(async () => {
-      await user.click(screen.getByRole("button", { name: CLIMB.title }));
+      const climbBtn = document.querySelector(
+        `[data-event-id="${CLIMB._id}"]`,
+      ) as HTMLElement;
+      await user.click(climbBtn);
     });
 
     await act(async () => {
@@ -64,11 +67,10 @@ describe("Event Form", () => {
       const { container } = render(<CalendarView />, { state: preloadedState });
 
       await act(async () => {
-        await user.click(
-          screen.getByRole("button", {
-            name: /climb/i,
-          }),
-        );
+        const climbBtn = document.querySelector(
+          `[data-event-id="${CLIMB._id}"]`,
+        ) as HTMLElement;
+        await user.click(climbBtn);
       });
 
       expect(container.getElementsByClassName("startDatePicker")).toHaveLength(

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventContainer/SomedayEventContainer.test.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import "@testing-library/jest-dom";
+import { LEARN_CHINESE } from "@core/__mocks__/v1/events/events.misc";
+import { Categories_Event } from "@core/types/event.types";
+import { fireEvent, render } from "@web/__tests__/__mocks__/mock.render";
+import { SidebarDraftContext } from "../../../../Draft/sidebar/context/SidebarDraftContext";
+import { SomedayEventContainer } from "./SomedayEventContainer";
+
+jest.mock(
+  "@web/views/Calendar/components/Draft/hooks/state/useDraftForm",
+  () => ({
+    useDraftForm: () => ({
+      context: {},
+      refs: { setFloating: jest.fn(), setReference: jest.fn() },
+      strategy: "absolute",
+      x: 0,
+      y: 0,
+      getReferenceProps: () => ({}),
+      getFloatingProps: () => ({}),
+    }),
+  }),
+);
+
+describe("SomedayEventContainer keyboard interactions", () => {
+  it("opens the form when Enter is pressed", async () => {
+    const onDraft = jest.fn();
+    const contextValue = {
+      state: {
+        draft: null,
+        isDrafting: false,
+        isOverGrid: false,
+        isSomedayFormOpen: false,
+      } as any,
+      setters: {
+        setIsSomedayFormOpen: jest.fn(),
+      } as any,
+      actions: {
+        onDraft,
+        onMigrate: jest.fn(),
+        discard: jest.fn(),
+        reset: jest.fn(),
+        closeForm: jest.fn(),
+        close: jest.fn(),
+      } as any,
+    };
+
+    render(
+      <SidebarDraftContext.Provider value={contextValue as any}>
+        <SomedayEventContainer
+          category={Categories_Event.SOMEDAY_WEEK}
+          event={LEARN_CHINESE}
+          isDrafting={false}
+          isDragging={false}
+          isOverGrid={false}
+          onSubmit={jest.fn()}
+          provided={
+            {
+              draggableProps: {
+                "data-rfd-draggable-context-id": "mock-context",
+                "data-rfd-draggable-id": "mock-id",
+                style: {},
+              },
+              dragHandleProps: null,
+              innerRef: jest.fn(),
+            } as DraggableProvided
+          }
+          snapshot={{ isDragging: false } as DraggableStateSnapshot}
+          setEvent={jest.fn()}
+          weekViewRange={{ startDate: "2020-01-01", endDate: "2020-01-07" }}
+        />
+      </SidebarDraftContext.Provider>,
+    );
+
+    const btn = document.querySelector(
+      `[data-event-id="${LEARN_CHINESE._id}"]`,
+    )! as HTMLElement;
+    btn.focus();
+    fireEvent.keyDown(btn, { key: "Enter" });
+
+    expect(onDraft).toHaveBeenCalledTimes(1);
+    expect(onDraft).toHaveBeenCalledWith(
+      LEARN_CHINESE,
+      Categories_Event.SOMEDAY_WEEK,
+    );
+  });
+});

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventContainer/SomedayEventContainer.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Key } from "ts-key-enum";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { Priorities } from "@core/constants/core.constants";
@@ -51,6 +52,14 @@ export const SomedayEventContainer = ({
 
   const [isFocused, setIsFocused] = useState(false);
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === Key.Enter) {
+      e.preventDefault();
+      e.stopPropagation();
+      actions.onDraft(event, category);
+    }
+  };
+
   const isDraftingThisEvent =
     state.isDrafting && state.draft?._id === event._id;
 
@@ -68,7 +77,7 @@ export const SomedayEventContainer = ({
           actions.onDraft(event, category);
         }}
         onFocus={() => setIsFocused(true)}
-        onKeyDown={() => console.log("onKeyDown")}
+        onKeyDown={handleKeyDown}
         priority={event.priority || Priorities.UNASSIGNED}
         provided={provided}
         snapshot={snapshot}