Fix tests after modal changes

Author: ethanshar

package.json

@@ -74,8 +74,8 @@
     "@react-native/metro-config": "0.73.5",
     "@react-native/typescript-config": "0.73.1",
     "@shopify/flash-list": "^1.2.1",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/react-native": "^11.5.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^11.5.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^29.2.1",
     "@types/lodash": "^4.0.0",

src/components/modal/Modal.driver.new.ts

@@ -7,7 +7,9 @@ export const ModalDriver = (props: ComponentProps) => {
   const overlayDriver = ButtonDriver({renderTree, testID: `${testID}.TouchableOverlay`});
 
   const isVisible = () => {
-    return !!driver.getElement().props.visible;
+    // Note: when modal is not visible it's not being rendered
+    // return !!driver.getElement().props.visible;
+    return !!driver.queryElement()?.props?.visible;
   };
 
   return {...driver, isVisible, pressOnBackground: overlayDriver.press};

src/components/picker/Picker.driver.new.ts

@@ -3,8 +3,14 @@ import {TextFieldDriver} from '../textField/TextField.driver.new';
 import {ModalDriver} from '../modal/Modal.driver.new';
 import {DialogDriver} from '../../incubator/Dialog/Dialog.driver.new';
 import {ButtonDriver} from '../button/Button.driver.new';
+import {ExpandableOverlayDriver} from '../../incubator/expandableOverlay/ExpandableOverlay.driver';
+
+export const PickerDriver = (props: ComponentProps, useDialog: boolean) => {
+  const mainDriver = ExpandableOverlayDriver({
+    renderTree: props.renderTree,
+    testID: props.testID
+  }, useDialog);
 
-export const PickerDriver = (props: ComponentProps) => {
   const textFieldDriver = TextFieldDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.input`
@@ -27,7 +33,7 @@ export const PickerDriver = (props: ComponentProps) => {
   });
 
   const exists = () => {
-    return textFieldDriver.exists();
+    return mainDriver.exists();
   };
 
   const getValue = (): string | undefined => {
@@ -36,6 +42,7 @@ export const PickerDriver = (props: ComponentProps) => {
 
   const open = (): void => {
     textFieldDriver.press();
+    mainDriver.open();
   };
 
   const cancel = (): void => {

src/components/picker/__tests__/index.spec.tsx

@@ -24,7 +24,8 @@ const TestCase = (props?: any) => {
 };
 
 const getDriver = (props?: any) => {
-  return PickerDriver({renderTree: render(<TestCase {...props}/>), testID});
+  const renderTree = render(<TestCase {...props}/>);
+  return PickerDriver({renderTree, testID}, props?.useDialog);
 };
 
 const onPress = jest.fn();
@@ -159,7 +160,7 @@ describe('Picker', () => {
 
   describe('Dialog', () => {
     const dialogProps = {useDialog: true, customPickerProps: {migrateDialog: true}};
-    
+
     describe('Test value', () => {
       it('Get correct value of a single item', () => {
         const driver = getDriver({
@@ -201,7 +202,7 @@ describe('Picker', () => {
         act(() => driver.open());
         await waitFor(() => expect(driver.isOpen()).toBeTruthy());
         act(() => driver.dismissDialog());
-        await waitFor(() => expect(driver.dismissDialog()).toBeFalsy());
+        await waitFor(() => expect(driver.isOpen()).toBeFalsy());
       });
     });
 
@@ -212,7 +213,6 @@ describe('Picker', () => {
         act(() => driver.open());
         await waitFor(() => expect(driver.isOpen()).toBeTruthy());
         driver.selectItem(countries[2].label);
-        act(() => driver.dismissDialog());
         await waitFor(() => expect(driver.isOpen()).toBeFalsy());
         expect(driver.getValue()).toEqual(countries[2].label);
       });
@@ -244,7 +244,7 @@ describe('Picker', () => {
       act(() => driver.open());
       await waitFor(() => expect(driver.isOpen()).toBeTruthy());
       act(() => driver.dismissDialog());
-      await waitFor(() => expect(driver.dismissDialog()).toBeFalsy());
+      await waitFor(() => expect(driver.isOpen()).toBeFalsy());
       expect(onDismiss).toHaveBeenCalledTimes(1);
     });
   });
@@ -258,7 +258,7 @@ describe('Picker', () => {
   describe('Picker field types', () => {
     describe('Test filter field type', () => {
       const placeholderText = 'Select a Filter';
-      
+
       it('should render a filter picker', () => {
         const driver = getDriver({fieldType: 'filter', placeholder: placeholderText});
         expect(driver.isOpen()).toBeFalsy();
@@ -267,11 +267,11 @@ describe('Picker', () => {
         expect(label.props.children).toEqual(placeholderText);
       });
     });
-    
+
     describe('Test settings field type', () => {
       const labelText = 'Settings';
       const placeholderText = 'Select a setting';
-      
+
       it('should render a settings picker with label', async () => {
         const driver = getDriver({fieldType: 'settings', label: labelText, placeholder: placeholderText});
         const label = screen.getByTestId(`${testID}.settings.type.label`);

src/incubator/Dialog/__tests__/index.new.spec.tsx

@@ -104,7 +104,7 @@ describe('Incubator.Dialog sanity checks', () => {
     const onDismiss = jest.fn();
     const component = <TestCase2 onDismiss={onDismiss}/>;
     const {dialogDriver} = getDriver(component);
-    expect(dialogDriver.exists()).toBeTruthy();
+    expect(dialogDriver.exists()).toBeFalsy();
     expect(dialogDriver.isVisible()).toBeFalsy();
   });
 });

src/incubator/expandableOverlay/ExpandableOverlay.driver.ts

@@ -3,11 +3,12 @@ import {DialogDriver} from '../Dialog/Dialog.driver.new';
 import {type ComponentProps, useComponentDriver} from '../../testkit/new/Component.driver';
 import {usePressableDriver} from '../../testkit/new/usePressable.driver';
 
-export const ExpandableOverlayDriver = (props: ComponentProps) => {
+export const ExpandableOverlayDriver = (props: ComponentProps, useDialog: boolean) => {
   const {renderTree, testID} = props;
 
   const driver = usePressableDriver(useComponentDriver({renderTree, testID}));
-  const isUsingDialog = !!renderTree.queryByTestId(`${testID}.overlay.modal`);
+  // const isUsingDialog = !!renderTree.queryByTestId(`${testID}.overlay.modal`);
+  const isUsingDialog = useDialog;
 
   const overlayDriver = (isUsingDialog ? DialogDriver : ModalDriver)({
     renderTree,

src/incubator/expandableOverlay/__tests__/index.spec.tsx

@@ -17,7 +17,6 @@ const universe = 'Hello Universe';
 
 const TestCase = (props: Omit<ExpandableOverlayProps, 'testID'>) => {
   return (
-    //@ts-expect-error
     <ExpandableOverlay migrateDialog expandableContent={<Text>{universe}</Text>} {...props} testID={testID}>
       <View>
         <Text>{helloWorld}</Text>
@@ -28,15 +27,15 @@ const TestCase = (props: Omit<ExpandableOverlayProps, 'testID'>) => {
 
 const getDriver = <T extends ExpandableOverlayProps>(props: T) => {
   const renderTree = render(<TestCase {...props}/>);
-  const driver = ExpandableOverlayDriver({renderTree, testID});
+  const driver = ExpandableOverlayDriver({renderTree, testID}, props.useDialog ?? false);
   return {driver, renderTree};
 };
 
 describe('ExpandableOverlay', () => {
   describe('With Dialog (useDialog)', () => {
     it('Sanity', () => {
       const {driver} = getDriver({useDialog: true});
-      expect(driver.exists()).toBeTruthy();
+      expect(driver.exists()).toBeFalsy();
     });
 
     it('Test open', () => {
@@ -66,7 +65,7 @@ describe('ExpandableOverlay', () => {
   describe('With Modal', () => {
     it('Sanity', () => {
       const {driver} = getDriver({});
-      expect(driver.exists()).toBeTruthy();
+      expect(driver.exists()).toBeFalsy();
     });
 
     it('Test open', () => {

src/testkit/new/Component.driver.ts

@@ -1,13 +1,13 @@
 import {ReactTestInstance} from 'react-test-renderer';
 import {within} from '@testing-library/react-native';
-
 export interface ComponentProps {
   renderTree: ReturnType<typeof within>; // Note: This changed was asked for integration with amino. This still gives all querying functionality.
   testID: string | RegExp;
 }
 
 export interface ComponentDriverResult {
   getElement: () => ReactTestInstance;
+  queryElement:() => ReactTestInstance | undefined;
   exists: () => boolean;
 }
 
@@ -28,6 +28,15 @@ export const useComponentDriver = (props: ComponentProps): ComponentDriverResult
     }
   };
 
+  const queryElement = (): ReactTestInstance => {
+    const elements = renderTree.queryAllByTestId(testID);
+    if (elements.length > 1) {
+      console.warn(`Found more than one element with testID: ${testID}`);
+    }
+
+    return elements?.[0];
+  };
+
   const exists = (): boolean => {
     try {
       getElement();
@@ -37,7 +46,7 @@ export const useComponentDriver = (props: ComponentProps): ComponentDriverResult
     }
   };
 
-  return {getElement, exists};
+  return {getElement, queryElement, exists};
 };
 
 export const ComponentDriver = (props: ComponentProps): ComponentDriverResult => {

yarn.lock

@@ -3370,29 +3370,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react-hooks@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "@testing-library/react-hooks@npm:7.0.2"
+"@testing-library/react-hooks@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "@testing-library/react-hooks@npm:8.0.1"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@types/react": ">=16.9.0"
-    "@types/react-dom": ">=16.9.0"
-    "@types/react-test-renderer": ">=16.9.0"
     react-error-boundary: ^3.1.0
   peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-    react-test-renderer: ">=16.9.0"
+    "@types/react": ^16.9.0 || ^17.0.0
+    react: ^16.9.0 || ^17.0.0
+    react-dom: ^16.9.0 || ^17.0.0
+    react-test-renderer: ^16.9.0 || ^17.0.0
   peerDependenciesMeta:
+    "@types/react":
+      optional: true
     react-dom:
       optional: true
     react-test-renderer:
       optional: true
-  checksum: 27c6169b5c9832bd02dcea232e6a0a3cd8d4504e13ecb49d57eb5ab6bea5e2f1bff65f3102068b7e57eec3cbd671326dc0b277335014b0edfbdedf11a1fe6db5
+  checksum: 7fe44352e920deb5cb1876f80d64e48615232072c9d5382f1e0284b3aab46bb1c659a040b774c45cdf084a5257b8fe463f7e08695ad8480d8a15635d4d3d1f6d
   languageName: node
   linkType: hard
 
-"@testing-library/react-native@npm:^11.5.2":
+"@testing-library/react-native@npm:^11.5.1":
   version: 11.5.4
   resolution: "@testing-library/react-native@npm:11.5.4"
   dependencies:
@@ -3557,15 +3557,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:>=16.9.0":
-  version: 18.3.0
-  resolution: "@types/react-dom@npm:18.3.0"
-  dependencies:
-    "@types/react": "*"
-  checksum: a0cd9b1b815a6abd2a367a9eabdd8df8dd8f13f95897b2f9e1359ea3ac6619f957c1432ece004af7d95e2a7caddbba19faa045f831f32d6263483fc5404a7596
-  languageName: node
-  linkType: hard
-
 "@types/react-native@npm:0.73.0":
   version: 0.73.0
   resolution: "@types/react-native@npm:0.73.0"
@@ -3575,16 +3566,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-test-renderer@npm:>=16.9.0":
-  version: 18.3.0
-  resolution: "@types/react-test-renderer@npm:18.3.0"
-  dependencies:
-    "@types/react": "*"
-  checksum: c53683990bd194cb68e3987bda79c78eff41517f7a747e92f3e54217c2ce3addd031b8a45bf631982c909cc2caeeb905372f322758e05bb76c03754a3f24426e
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:*, @types/react@npm:18.3.7, @types/react@npm:>=16.9.0":
+"@types/react@npm:*, @types/react@npm:18.3.7":
   version: 18.3.7
   resolution: "@types/react@npm:18.3.7"
   dependencies:
@@ -10324,8 +10306,8 @@ __metadata:
     "@react-native/metro-config": 0.73.5
     "@react-native/typescript-config": 0.73.1
     "@shopify/flash-list": ^1.2.1
-    "@testing-library/react-hooks": ^7.0.2
-    "@testing-library/react-native": ^11.5.2
+    "@testing-library/react-hooks": ^8.0.1
+    "@testing-library/react-native": ^11.5.1
     "@types/hoist-non-react-statics": ^3.3.1
     "@types/jest": ^29.2.1
     "@types/lodash": ^4.0.0