[Cavy] Add wrap type (#39972)

* Add wrap type and update findComponent type

* Flesh out wrap tests

* Fix findComponent type

* Revert Typescript version change

types/cavy/cavy-tests.tsx

@@ -1,12 +1,32 @@
 import * as React from 'react';
 import { TextInput, View, Text } from 'react-native';
 
-import { hook, TestScope, WithTestHook, Tester, TestHookStore, useCavy, TestReport } from 'cavy';
+import {
+  hook,
+  wrap,
+  TestScope,
+  WithTestHook,
+  Tester,
+  TestHookStore,
+  useCavy,
+  TestReport
+} from 'cavy';
 
 type Props = WithTestHook<{
   foo: string;
 }>;
 
+interface FCProps {
+  text: string;
+}
+
+const FunctionComponent: React.FunctionComponent<FCProps> = ({ text })  => {
+  return <Text>{text}</Text>;
+};
+
+const WrappedText = wrap(Text);
+const WrappedFunctionComponent = wrap(FunctionComponent);
+
 class SampleComponent extends React.Component<Props> {
   textInputRef: React.ReactNode | null;
 
@@ -20,10 +40,21 @@ class SampleComponent extends React.Component<Props> {
   }
 
   render() {
+    const { generateTestHook, foo } = this.props;
     return (
-      <View ref={this.props.generateTestHook('View.Sample')}>
-        <Text>{this.props.foo}</Text>
-        <TextInput ref={this.props.generateTestHook("Input.Sample", this.setTextInputRef)} />
+      <View ref={generateTestHook('View')}>
+        <WrappedFunctionComponent
+          ref={generateTestHook('WrappedFunctionComponent')}
+          text='text'
+        />
+
+        <WrappedText ref={generateTestHook('WrappedText')}>
+          Wrapped text
+        </WrappedText>
+
+        <Text>{foo}</Text>
+
+        <TextInput ref={generateTestHook('Input', this.setTextInputRef)} />
       </View>
     );
   }
@@ -34,7 +65,7 @@ const HookedSampleComponent = hook(SampleComponent); // $ExpectType ComponentCla
 const SampleFunctionComponent: React.FunctionComponent = () => {
   const generateTestHook = useCavy();
   const ref = React.createRef();
-  return <View ref={generateTestHook(`FunctionView.Sample`, ref)}></View>;
+  return <View ref={generateTestHook('FunctionView', ref)}></View>;
 };
 
 function sampleSpec(spec: TestScope) {
@@ -44,13 +75,20 @@ function sampleSpec(spec: TestScope) {
     spec.it('it has a name and callback', async () => {
       spec.component.reRender(); // $ExpectType void
       spec.component.clearAsync(); // $ExpectType Promise<void>
-      spec.findComponent('View.Sample'); // $ExpectType Promise<Component<{}, {}, any>>
-      spec.press('View.Sample'); // $ExpectType Promise<void>
-      spec.fillIn('Input.Sample', "hello world"); // $ExpectType Promise<void>
+      spec.findComponent('View'); // $ExpectType Promise<Component<{}, {}, any>>
+      spec.press('View'); // $ExpectType Promise<void>
+      spec.fillIn('Input', 'hello world'); // $ExpectType Promise<void>
       spec.pause(1000); // $ExpectType Promise<void>
-      spec.exists('View.Sample'); // $ExpectType Promise<true>
+      spec.exists('View'); // $ExpectType Promise<true>
       spec.notExists('View.MissingSample'); // $ExpectType Promise<true>
-      spec.containsText('Input.Sample', "hello"); // $ExpectType Promise<void>
+      spec.containsText('Input', 'hello'); // $ExpectType Promise<void>
+      // Test wrapped object like Text
+      spec.containsText('WrappedText', 'Wrapped text');
+      // Test wrapped function component, access to props
+      const functionComponent = await spec.findComponent('WrappedFunctionComponent') as React.Component<FCProps>;
+      if (functionComponent.props.text !== 'text') {
+        throw new Error();
+      }
     });
   });
 }

types/cavy/index.d.ts

@@ -7,21 +7,25 @@
 
 import * as React from 'react';
 
+// Turn off automatic exporting by exporting {}.
 export {};
 
 type RefCallback = (element: React.ReactNode | null) => void;
 
 type TestHookGeneratorWithRefCallback = (label: string, ref?: RefCallback) => RefCallback;
+
 type TestHookGeneratorWithRefObject = (label: string, ref?: React.RefObject<any>) => React.RefObject<any>;
 
 export type TestHookGenerator = TestHookGeneratorWithRefCallback & TestHookGeneratorWithRefObject;
 
-export type WithTestHook<T extends {}> = T & { generateTestHook: TestHookGenerator };
+export type WithTestHook<P extends {}> = P & { generateTestHook: TestHookGenerator };
 
-export function hook<T extends {}>(component: React.ComponentClass<WithTestHook<T>>): React.ComponentClass<T>;
+export function hook<P extends {}>(WrappedComponent: React.ComponentClass<WithTestHook<P>>): React.ComponentClass<P>;
 
 export function useCavy(): TestHookGenerator;
 
+export function wrap<P extends {}>(WrappedComponent: {} | React.FunctionComponent<P>): React.ComponentClass<P>;
+
 export interface TesterProps {
     store: TestHookStore;
     specs: Array<(spec: TestScope) => void>;