Better types and tests for useKeyProps (#2468)

* Better types + tests for useKeyProps

* Change files

* Update base type

* type KeyboardEvent

* KeyboardEvent -> KeyPressEvent

* More tests + type fix

* More tests

* Combine useKeyProps to one file

* more

* PR comments

Author: Saadnajmi

change/@fluentui-react-native-interactive-hooks-856e3a2e-9eda-44e0-a5c4-f3a83ad215f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Better types + tests for useKeyProps",
+  "packageName": "@fluentui-react-native/interactive-hooks",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/utils/interactive-hooks/jest.config.js

@@ -1,2 +1,2 @@
-const { configureJest } = require('@fluentui-react-native/scripts');
-module.exports = configureJest();
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('win32');

packages/utils/interactive-hooks/package.json

@@ -34,13 +34,16 @@
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
+    "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
     "@office-iss/react-native-win32": "^0.68.0",
     "@types/invariant": "^2.2.0",
     "@types/jest": "^26.0.0",
     "@types/react": "^17.0.2",
     "@types/react-native": "^0.68.0",
     "react": "17.0.2",
-    "react-native": "^0.68.0"
+    "react-native": "^0.68.0",
+    "react-native-macos": "^0.68.0",
+    "react-native-windows": "^0.68.0"
   },
   "peerDependencies": {
     "react": "17.0.2",

packages/utils/interactive-hooks/src/__tests__/__snapshots__/useKeyProps.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pressable with useKeyProps 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;

packages/utils/interactive-hooks/src/events.types.test.ts renamed to packages/utils/interactive-hooks/src/__tests__/events.types.test.ts

@@ -1,6 +1,6 @@
 import { AccessibilityActionEvent, GestureResponderEvent } from 'react-native';
-import { KeyPressEvent } from './Pressability/CoreEventTypes';
-import { isAccessibilityActionEvent, isGestureResponderEvent, isKeyPressEvent } from './events.types';
+import { KeyPressEvent } from '../useKeyProps.types';
+import { isAccessibilityActionEvent, isGestureResponderEvent, isKeyPressEvent } from '../events.types';
 
 const createMockEvent = (nativeEvent) => {
   return {

packages/utils/interactive-hooks/src/__tests__/useKeyProps.test.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { Pressable } from 'react-native';
+import { useKeyProps } from '../useKeyProps';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import { PressablePropsExtended } from '../usePressableState.types';
+
+const dummyFunction = () => {
+  console.log('dummy');
+};
+
+// Simple wrapper function to let us use `PressablePropsExtended` to fix type errors
+const PressableWithDesktopProps = (props: PressablePropsExtended) => {
+  return <Pressable {...props} />;
+};
+
+it('Pressable with useKeyProps', () => {
+  const keyboardProps = useKeyProps(dummyFunction, ' ', 'Enter');
+  const tree = renderer.create(<PressableWithDesktopProps {...keyboardProps} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('useKeyProps called twice', () => {
+  const keyboardProps1 = useKeyProps(dummyFunction, ' ', 'Enter');
+  const keyboardProps2 = useKeyProps(dummyFunction, ' ', 'Enter');
+  expect(keyboardProps1).toBe(keyboardProps2);
+});
+
+it('Simple Pressable with useKeyProps rendering does not invalidate styling', () => {
+  const keyboardProps = useKeyProps(dummyFunction, ' ', 'Enter');
+  checkRenderConsistency(() => <PressableWithDesktopProps {...keyboardProps} />, 2);
+});
+
+it('Pressable with useKeyProps re-renders correctly', () => {
+  const keyboardProps = useKeyProps(dummyFunction, ' ', 'Enter');
+  checkReRender(() => <PressableWithDesktopProps {...keyboardProps} />, 2);
+});

packages/utils/interactive-hooks/src/events.types.ts

@@ -1,5 +1,5 @@
-import { AccessibilityActionEvent, GestureResponderEvent } from 'react-native';
-import { KeyPressEvent, MouseEvent } from './Pressability/CoreEventTypes';
+import { AccessibilityActionEvent, GestureResponderEvent, MouseEvent } from 'react-native';
+import { KeyPressEvent } from './useKeyProps.types';
 
 export type InteractionEvent = GestureResponderEvent | MouseEvent | KeyPressEvent | AccessibilityActionEvent;
 

packages/utils/interactive-hooks/src/index.ts

@@ -45,7 +45,6 @@ export type {
 export type {
   BlurEvent,
   FocusEvent,
-  KeyPressEvent,
   Layout,
   LayoutEvent,
   MouseEvent,
@@ -56,8 +55,8 @@ export type {
   TextLayout,
   TextLayoutEvent,
 } from './Pressability/CoreEventTypes';
+export type { KeyPressEvent, KeyCallback, KeyPressProps } from './useKeyProps.types';
 export { preferKeyDownForKeyEvents, useKeyCallback, useKeyDownProps, useKeyProps, useKeyUpProps } from './useKeyProps';
-export type { KeyCallback, KeyPressProps } from './useKeyProps';
 export { useOnPressWithFocus } from './useOnPressWithFocus';
 export type { OnPressCallback, OnPressWithFocusCallback } from './useOnPressWithFocus';
 export { getAccessibilityState } from './getAccessibilityState';