diff --git a/src/useCallViewKeyboardShortcuts.test.tsx b/src/useCallViewKeyboardShortcuts.test.tsx index 306bb5f7..9b8d45e7 100644 --- a/src/useCallViewKeyboardShortcuts.test.tsx +++ b/src/useCallViewKeyboardShortcuts.test.tsx @@ -12,19 +12,24 @@ import { Button } from "@vector-im/compound-web"; import userEvent from "@testing-library/user-event"; import { useCallViewKeyboardShortcuts } from "../src/useCallViewKeyboardShortcuts"; +import { ReactionOption, ReactionSet, ReactionsRowSize } from "./reactions"; // Test Explanation: // - The main objective is to test `useCallViewKeyboardShortcuts`. // The TestComponent just wraps a button around that hook. interface TestComponentProps { - setMicrophoneMuted: (muted: boolean) => void; + setMicrophoneMuted?: (muted: boolean) => void; onButtonClick?: () => void; + sendReaction?: () => void; + toggleHandRaised?: () => void; } const TestComponent: FC = ({ - setMicrophoneMuted, + setMicrophoneMuted = (): void => {}, onButtonClick = (): void => {}, + sendReaction = (reaction: ReactionOption): void => {}, + toggleHandRaised = (): void => {}, }) => { const ref = useRef(null); useCallViewKeyboardShortcuts( @@ -32,6 +37,8 @@ const TestComponent: FC = ({ () => {}, () => {}, setMicrophoneMuted, + sendReaction, + toggleHandRaised, ); return (
@@ -74,6 +81,28 @@ test("spacebar prioritizes pressing a button", async () => { expect(onClick).toBeCalled(); }); +test("reactions can be sent via keyboard presses", async () => { + const user = userEvent.setup(); + + const sendReaction = vi.fn(); + render(); + + for (let index = 1; index <= ReactionsRowSize; index++) { + await user.keyboard(index.toString()); + expect(sendReaction).toHaveBeenNthCalledWith(index, ReactionSet[index - 1]); + } +}); + +test("raised hand can be sent via keyboard presses", async () => { + const user = userEvent.setup(); + + const toggleHandRaised = vi.fn(); + render(); + await user.keyboard("h"); + + expect(toggleHandRaised).toHaveBeenCalledOnce(); +}); + test("unmuting happens in place of the default action", async () => { const user = userEvent.setup(); const defaultPrevented = vi.fn(); diff --git a/src/useCallViewKeyboardShortcuts.ts b/src/useCallViewKeyboardShortcuts.ts index 6a0a883b..7c27e1e2 100644 --- a/src/useCallViewKeyboardShortcuts.ts +++ b/src/useCallViewKeyboardShortcuts.ts @@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details. import { RefObject, useCallback, useMemo, useRef } from "react"; import { useEventTarget } from "./useEvents"; -import { ReactionOption, ReactionSet } from "./reactions"; +import { ReactionOption, ReactionSet, ReactionsRowSize } from "./reactions"; /** * Determines whether focus is in the same part of the tree as the given @@ -19,14 +19,9 @@ const mayReceiveKeyEvents = (e: HTMLElement): boolean => { return focusedElement !== null && focusedElement.contains(e); }; -const KeyToReactionMap: Record = { - ["1"]: ReactionSet[0], - ["2"]: ReactionSet[1], - ["3"]: ReactionSet[2], - ["4"]: ReactionSet[3], - ["5"]: ReactionSet[4], - ["6"]: ReactionSet[5], -}; +const KeyToReactionMap: Record = Object.fromEntries( + ReactionSet.slice(0, ReactionsRowSize).map((r, i) => [(i + 1).toString(), r]), +); export function useCallViewKeyboardShortcuts( focusElement: RefObject,