Picker - add driver (initial) (#2905)

* Picker - add driver (initial)

* Remove driver

Author: M-i-k-e-l

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

@@ -1,12 +1,12 @@
 import {ModalProps} from './index';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
-import {usePressableDriver} from '../../testkit/new/usePressable.driver';
+import {ButtonDriver} from '../button/Button.driver.new';
 
 export const ModalDriver = (props: ComponentProps) => {
   const {renderTree, testID} = props;
   const driver = useComponentDriver<ModalProps>(props);
-  const overlayDriver = usePressableDriver<{}>(useComponentDriver<{}>({renderTree, testID: `${testID}.TouchableOverlay`}));
-  
+  const overlayDriver = ButtonDriver({renderTree, testID: `${testID}.TouchableOverlay`});
+
   const isVisible = () => {
     return !!driver.getProps().visible;
   };

src/components/modal/TopBar.tsx

@@ -81,6 +81,7 @@ export interface ModalTopBarProps {
    * Whether or not to handle SafeArea
    */
   useSafeArea?: boolean;
+  testID?: string;
 }
 
 type topBarButtonProp = {
@@ -89,6 +90,7 @@ type topBarButtonProp = {
   icon?: ImageSourcePropType | null;
   accessibilityLabel?: string;
   buttonProps?: Omit<ButtonProps, 'onPress'>;
+  testID?: string;
 };
 
 const TOP_BAR_HEIGHT = Constants.isIOS ? 44 : 56;
@@ -111,7 +113,7 @@ class TopBar extends Component<ModalTopBarProps> {
     includeStatusBar: Constants.isIOS
   };
 
-  renderTopBarButton({onPress, label, icon, accessibilityLabel, buttonProps}: topBarButtonProp, key: string) {
+  renderTopBarButton({onPress, label, icon, accessibilityLabel, buttonProps, testID}: topBarButtonProp, key: string) {
     if (onPress && (label || icon)) {
       return (
         <Button
@@ -125,31 +127,34 @@ class TopBar extends Component<ModalTopBarProps> {
           {...DEFAULT_BUTTON_PROPS}
           accessibilityLabel={accessibilityLabel}
           hitSlop={{top: 10, bottom: 10, left: 20, right: 20}}
+          testID={testID}
           {...buttonProps}
         />
       );
     }
   }
 
   renderDone() {
-    const {doneButtonProps, doneLabel, doneIcon, onDone} = this.props;
+    const {doneButtonProps, doneLabel, doneIcon, onDone, testID} = this.props;
     return this.renderTopBarButton({
       onPress: onDone,
       label: doneLabel,
       icon: doneIcon,
       accessibilityLabel: 'Done',
+      testID: `${testID}.done`,
       buttonProps: doneButtonProps
     },
     'done');
   }
 
   renderCancel() {
-    const {cancelButtonProps, cancelLabel, cancelIcon, onCancel} = this.props;
+    const {cancelButtonProps, cancelLabel, cancelIcon, onCancel, testID} = this.props;
     return this.renderTopBarButton({
       onPress: onCancel,
       label: cancelLabel,
       icon: cancelIcon,
       accessibilityLabel: 'Cancel',
+      testID: `${testID}.cancel`,
       buttonProps: cancelButtonProps
     },
     'cancel');

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

@@ -0,0 +1,67 @@
+import {ComponentProps} from '../../testkit/new/Component.driver';
+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';
+
+export const PickerDriver = (props: ComponentProps) => {
+  const textFieldDriver = TextFieldDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.input`
+  });
+  const modalDriver = ModalDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.overlay`
+  });
+  const dialogDriver = DialogDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.overlay`
+  });
+  const cancelButtonDriver = ButtonDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.modal.topBar.cancel`
+  });
+  const doneButtonDriver = ButtonDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.modal.topBar.done`
+  });
+
+  const getValue = (): string | undefined => {
+    return textFieldDriver.getValue();
+  };
+
+  const open = (): void => {
+    textFieldDriver.press();
+  };
+
+  const cancel = (): void => {
+    cancelButtonDriver.press();
+  };
+
+  const done = (): void => {
+    doneButtonDriver.press();
+  };
+
+  const isOpen = (): boolean => {
+    // TODO: we should find a better solution for when using useDialog (maybe in the refactor)
+    if (modalDriver.exists()) {
+      return modalDriver.isVisible();
+    } else {
+      return dialogDriver.getModal().isVisible();
+    }
+  };
+
+  const selectItem = (testID: string): void => {
+    const itemDriver = ButtonDriver({renderTree: props.renderTree, testID});
+    itemDriver.press();
+  };
+
+  return {
+    getValue,
+    open,
+    cancel,
+    done,
+    isOpen,
+    selectItem
+  };
+};

src/components/picker/PickerItemsList.tsx

@@ -150,7 +150,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     if (renderCustomDialogHeader) {
       return renderCustomDialogHeader?.({onDone: topBarProps?.onDone, onCancel: topBarProps?.onCancel});
     } else if (!useDialog || mode === PickerModes.MULTI) {
-      return <Modal.TopBar {...topBarProps}/>;
+      return <Modal.TopBar testID={`${props.testID}.topBar`} {...topBarProps}/>;
     }
   };