feat: by role ts hints (#1596)

* feat: autocomplete

* refactor: cleanup

* chore: fix typos

Author: mdjastrzebski

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["Pressable", "RNTL"]
+  "cSpell.words": ["Pressable", "RNTL", "Uncapitalize"]
 }

src/fire-event.ts

@@ -11,6 +11,7 @@ import { isHostElement } from './helpers/component-tree';
 import { isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
 import { isTextInputEditable } from './helpers/text-input';
+import { StringWithAutocomplete } from './types';
 
 type EventHandler = (...args: unknown[]) => unknown;
 
@@ -105,20 +106,17 @@ function getEventHandlerName(eventName: string) {
   return `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
 }
 
-// Allows any string but will provide autocomplete for type T
-type StringWithAutoComplete<T> = T | (string & Record<never, never>);
-
-// String union type of keys of T that start with on, stripped from on
-type OnKeys<T> = keyof {
+// String union type of keys of T that start with on, stripped of 'on'
+type EventNameExtractor<T> = keyof {
   [K in keyof T as K extends `on${infer Rest}` ? Uncapitalize<Rest> : never]: T[K];
 };
 
-type EventName = StringWithAutoComplete<
-  | OnKeys<ViewProps>
-  | OnKeys<TextProps>
-  | OnKeys<TextInputProps>
-  | OnKeys<PressableProps>
-  | OnKeys<ScrollViewProps>
+type EventName = StringWithAutocomplete<
+  | EventNameExtractor<ViewProps>
+  | EventNameExtractor<TextProps>
+  | EventNameExtractor<TextInputProps>
+  | EventNameExtractor<PressableProps>
+  | EventNameExtractor<ScrollViewProps>
 >;
 
 function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: unknown[]) {

src/helpers/__tests__/accessiblity.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TextInput, Pressable, Switch, TouchableOpacity } from 'react-native';
 import { render, isHiddenFromAccessibility, isInaccessible, screen } from '../..';
-import { isAccessibilityElement } from '../accessiblity';
+import { isAccessibilityElement } from '../accessibility';
 
 describe('isHiddenFromAccessibility', () => {
   test('returns false for accessible elements', () => {

src/helpers/accessiblity.ts renamed to src/helpers/accessibility.ts

@@ -16,7 +16,7 @@ export const accessibilityStateKeys: (keyof AccessibilityState)[] = [
   'expanded',
 ];
 
-export const accessiblityValueKeys: (keyof AccessibilityValue)[] = ['min', 'max', 'now', 'text'];
+export const accessibilityValueKeys: (keyof AccessibilityValue)[] = ['min', 'max', 'now', 'text'];
 
 export function isHiddenFromAccessibility(
   element: ReactTestInstance | null,

src/helpers/find-all.ts

@@ -1,6 +1,6 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { getConfig } from '../config';
-import { isHiddenFromAccessibility } from './accessiblity';
+import { isHiddenFromAccessibility } from './accessibility';
 import { HostTestInstance, isHostElement } from './component-tree';
 
 interface FindAllOptions {

src/helpers/matchers/match-accessibility-state.ts

@@ -1,6 +1,6 @@
 import { AccessibilityState } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
-import { accessibilityStateKeys, getAccessibilityState } from '../accessiblity';
+import { accessibilityStateKeys, getAccessibilityState } from '../accessibility';
 
 // This type is the same as AccessibilityState from `react-native` package
 // It is re-declared here due to issues with migration from `@types/react-native` to

src/helpers/matchers/match-accessibility-value.ts

@@ -1,5 +1,5 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import { getAccessibilityValue } from '../accessiblity';
+import { getAccessibilityValue } from '../accessibility';
 import { TextMatch } from '../../matches';
 import { matchStringProp } from './match-string-prop';
 

src/helpers/matchers/match-label-text.ts

@@ -1,6 +1,6 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matches, TextMatch, TextMatchOptions } from '../../matches';
-import { getAccessibilityLabel, getAccessibilityLabelledBy } from '../accessiblity';
+import { getAccessibilityLabel, getAccessibilityLabelledBy } from '../accessibility';
 import { findAll } from '../find-all';
 import { matchTextContent } from './match-text-content';
 

src/matchers/to-be-busy.tsx

@@ -1,6 +1,6 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { isElementBusy } from '../helpers/accessiblity';
+import { isElementBusy } from '../helpers/accessibility';
 import { checkHostElement, formatElement } from './utils';
 
 export function toBeBusy(this: jest.MatcherContext, element: ReactTestInstance) {

src/matchers/to-be-checked.tsx

@@ -4,7 +4,7 @@ import {
   getAccessibilityCheckedState,
   getAccessibilityRole,
   isAccessibilityElement,
-} from '../helpers/accessiblity';
+} from '../helpers/accessibility';
 import { ErrorWithStack } from '../helpers/errors';
 import { checkHostElement, formatElement } from './utils';