Add basic isEventTargetUsingKeyEvent tests

the <textarea> and contenteditable tests are currently failing due to a bug in the handler code
acusti · Sep 7, 2023 · 2f4a7f0 · 2f4a7f0
1 parent f4efb3c
commit 2f4a7f0
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 2 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/packages/use-keyboard-events/package.json b/packages/use-keyboard-events/package.json
@@ -34,7 +34,13 @@
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/use-keyboard-events#readme",
     "devDependencies": {
+        "@testing-library/dom": "^9.3.1",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/react": "^18.0.25",
+        "jsdom": "^22.1.0",
+        "react": "^18",
+        "react-dom": "^18",
         "typescript": "^5.1.6"
     },
     "peerDependencies": {

diff --git a/.../use-keyboard-events/src/handlers.test.ts → ...use-keyboard-events/src/handlers.test.tsx b/.../use-keyboard-events/src/handlers.test.ts → ...use-keyboard-events/src/handlers.test.tsx
@@ -1,6 +1,10 @@
-import { describe, expect, it } from 'vitest';
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { addHandler, handlersData } from './handlers.js';
+import { addHandler, handlersData, isEventTargetUsingKeyEvent } from './handlers.js';
 
 describe('@acusti/use-keyboard-events', () => {
     describe('handlers', () => {
@@ -89,5 +93,84 @@ describe('@acusti/use-keyboard-events', () => {
                 expect(handlersData.keyup.length).toBe(0);
             });
         });
+
+        describe('isEventTargetUsingKeyEvent', () => {
+            let isUsingKeyEvent: null | boolean = null;
+            const handleKeyEvent = (event) => {
+                isUsingKeyEvent = isEventTargetUsingKeyEvent(event);
+            };
+
+            beforeEach(() => {
+                isUsingKeyEvent = null;
+            });
+
+            afterEach(cleanup);
+
+            it('detects that textual <input>s are using key events triggered on them', async () => {
+                const user = userEvent.setup();
+                const { getByRole, rerender } = render(
+                    <input onKeyDown={handleKeyEvent} type="text" />,
+                );
+                const input = getByRole('textbox');
+                expect(isUsingKeyEvent).toBe(null);
+                await user.type(input, 'A');
+                expect(isUsingKeyEvent).toBe(true);
+                isUsingKeyEvent = null;
+
+                rerender(<input onKeyUp={handleKeyEvent} type="password" />);
+                expect(isUsingKeyEvent).toBe(null);
+                await user.type(input, ' ');
+                expect(isUsingKeyEvent).toBe(true);
+            });
+
+            it('detects that <textarea>s are using key events triggered on them', async () => {
+                const user = userEvent.setup();
+                const { getByRole, rerender } = render(
+                    <textarea onKeyDown={handleKeyEvent} />,
+                );
+                const textarea = getByRole('textbox');
+                expect(isUsingKeyEvent).toBe(null);
+                await user.type(textarea, 'z');
+                expect(isUsingKeyEvent).toBe(true);
+                isUsingKeyEvent = null;
+
+                rerender(<textarea onKeyUp={handleKeyEvent} />);
+                expect(isUsingKeyEvent).toBe(null);
+                await user.type(textarea, '{Enter}');
+                expect(isUsingKeyEvent).toBe(true);
+            });
+
+            it('detects that contenteditable elements are using key events triggered on them', async () => {
+                const user = userEvent.setup();
+                // const text = 'Lorem ipsum dolor sit amet.';
+                const { getByTestId, rerender } = render(
+                    <div
+                        contentEditable
+                        onKeyDown={handleKeyEvent}
+                        data-testid="contenteditable"
+                    />,
+                );
+                const element = getByTestId('contenteditable');
+                // Add missing property http://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/isContentEditable
+                element.isContentEditable = true;
+                expect(isUsingKeyEvent).toBe(null);
+                await user.type(element, 'z');
+                expect(isUsingKeyEvent).toBe(true);
+                isUsingKeyEvent = null;
+
+                rerender(<div contentEditable onKeyUp={handleKeyEvent} />);
+                expect(isUsingKeyEvent).toBe(null);
+                await user.type(element, '{Enter}');
+                expect(isUsingKeyEvent).toBe(true);
+            });
+
+            it('detects that non-interactive elements aren’t using key events triggered on them', async () => {
+                const text = 'Lorem ipsum dolor sit amet.';
+                const { getByText } = render(<p onKeyDown={handleKeyEvent}>{text}</p>);
+                expect(isUsingKeyEvent).toBe(null);
+                fireEvent.keyDown(getByText(text), { key: 'A', code: 'KeyA' });
+                expect(isUsingKeyEvent).toBe(false);
+            });
+        });
     });
 });
diff --git a/yarn.lock b/yarn.lock
@@ -236,7 +236,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@acusti/use-keyboard-events@workspace:packages/use-keyboard-events"
   dependencies:
+    "@testing-library/dom": ^9.3.1
+    "@testing-library/react": ^14.0.0
+    "@testing-library/user-event": ^14.4.3
     "@types/react": ^18.0.25
+    jsdom: ^22.1.0
+    react: ^18
+    react-dom: ^18
     typescript: ^5.1.6
   peerDependencies:
     react: ^16.8 || ^17 || ^18