feat(android): add testID support to date (not time) picker (#705)

* add testid support

* switch tests to use testID for picker

* adjust docs to explain testID working on android

* remove accidental var

* fix accidentally broken matcher

* Rephrase testID docs to be more generic instad of focused on detox

* docs: review

---------

Co-authored-by: Maurice Döpke <mauricedoepkeoutlook.de>
Co-authored-by: Vojtech Novak <[email protected]>

Author: mauricedoepke

README.md

@@ -517,6 +517,15 @@ Alternatively, use the `themeVariant` prop.
 
 If true, the user won't be able to interact with the view.
 
+#### `testID` (`optional`)
+
+Usually used by app automation frameworks.
+Fully supported on iOS. On Android, only supported for `mode="date"`.
+
+```js
+<RNDateTimePicker testID="datePicker" />
+```
+
 #### `View Props` (`optional`, `iOS only`)
 
 On iOS, you can pass any [View props](https://reactnative.dev/docs/view#props) to the component. Given that the underlying component is a native view, not all of them are guaranteed to be supported, but `testID` and `onLayout` are known to work.

android/src/main/java/com/reactcommunity/rndatetimepicker/DatePickerModule.java

@@ -135,6 +135,9 @@ public void dismiss(Promise promise) {
    *   <li>
    *      {@code display} To set the date picker display to 'calendar/spinner/default'
    *   </li>
+   *   <li>
+   *      {@code testID} testID for testing with e.g. detox.
+   *   </li>
    * </ul>
    *
    * @param promise This will be invoked with parameters action, year,
@@ -198,6 +201,9 @@ private Bundle createFragmentArguments(ReadableMap options) {
     if (options.hasKey(RNConstants.ARG_TZOFFSET_MINS) && !options.isNull(RNConstants.ARG_TZOFFSET_MINS)) {
       args.putLong(RNConstants.ARG_TZOFFSET_MINS, (long) options.getDouble(RNConstants.ARG_TZOFFSET_MINS));
     }
+    if (options.hasKey(RNConstants.ARG_TESTID) && !options.isNull(RNConstants.ARG_TESTID)) {
+      args.putString(RNConstants.ARG_TESTID, options.getString(RNConstants.ARG_TESTID));
+    }
     return args;
   }
 }

android/src/main/java/com/reactcommunity/rndatetimepicker/RNConstants.java

@@ -12,6 +12,7 @@ public final class RNConstants {
   public static final String ARG_DISPLAY = "display";
   public static final String ARG_DIALOG_BUTTONS = "dialogButtons";
   public static final String ARG_TZOFFSET_MINS = "timeZoneOffsetInMinutes";
+  public static final String ARG_TESTID = "testID";
   public static final String ACTION_DATE_SET = "dateSetAction";
   public static final String ACTION_TIME_SET = "timeSetAction";
   public static final String ACTION_DISMISSED = "dismissedAction";

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java

@@ -145,6 +145,10 @@ private DatePickerDialog createDialog(Bundle args) {
       datePicker.setOnDateChangedListener(new KeepDateInRangeListener(args));
     }
 
+    if (args != null && args.containsKey(RNConstants.ARG_TESTID)) {
+      datePicker.setTag(args.getString(RNConstants.ARG_TESTID));
+    }
+
     return dialog;
   }
 

example/e2e/detoxTest.spec.js

@@ -74,7 +74,7 @@ describe('e2e tests', () => {
       const calendarHorizontalScrollView = element(
         by
           .type('android.widget.ScrollView')
-          .withAncestor(by.type('android.widget.DatePicker')),
+          .withAncestor(by.id('dateTimePicker')),
       );
       await calendarHorizontalScrollView.swipe('left', 'fast', 1);
       await calendarHorizontalScrollView.tap({x: 50, y: 200});

example/e2e/utils/matchers.js

@@ -10,8 +10,7 @@ const getInlineTimePickerIOS = () => element(by.label('Time Picker'));
 
 const getDateTimePickerControlIOS = () => element(by.type('UIDatePicker'));
 
-const getDatePickerAndroid = () =>
-  element(by.type('android.widget.DatePicker'));
+const getDatePickerAndroid = () => element(by.id('dateTimePicker'));
 
 module.exports = {
   getTimeText,

src/DateTimePickerAndroid.android.js

@@ -44,6 +44,7 @@ function open(props: AndroidNativeProps) {
     neutralButtonLabel,
     positiveButtonLabel,
     negativeButtonLabel,
+    testID,
   } = props;
   validateAndroidProps(props);
   invariant(originalValue, 'A date or time must be specified as `value` prop.');
@@ -84,6 +85,7 @@ function open(props: AndroidNativeProps) {
         minuteInterval,
         timeZoneOffsetInMinutes,
         dialogButtons,
+        testID,
       });
 
       switch (action) {

src/androidUtils.js

@@ -24,6 +24,7 @@ type OpenParams = {
   maximumDate: AndroidNativeProps['maximumDate'],
   minuteInterval: AndroidNativeProps['minuteInterval'],
   timeZoneOffsetInMinutes: AndroidNativeProps['timeZoneOffsetInMinutes'],
+  testID: AndroidNativeProps['testID'],
   dialogButtons: {
     positive: ProcessedButton,
     negative: ProcessedButton,
@@ -64,6 +65,7 @@ function getOpenPicker(
         maximumDate,
         timeZoneOffsetInMinutes,
         dialogButtons,
+        testID,
       }: OpenParams) =>
         // $FlowFixMe - `AbstractComponent` [1] is not an instance type.
         pickers[ANDROID_MODE.date].open({
@@ -73,6 +75,7 @@ function getOpenPicker(
           maximumDate,
           timeZoneOffsetInMinutes,
           dialogButtons,
+          testID,
         });
   }
 }

src/datepicker.android.js

@@ -21,6 +21,7 @@ export default class DatePickerAndroid {
    *   - `value` (`Date` object) - date to show by default
    *   - `minimumDate` (`Date` object) - minimum date that can be selected
    *   - `maximumDate` (`Date` object) - maximum date that can be selected
+   *   - `testID` (`string`) - Sets view tag for use with automation frameworks
    *   - `display` (`enum('calendar', 'spinner', 'default')`) - To set the date-picker display to calendar/spinner/default
    *     - 'calendar': Show a date picker in calendar mode.
    *     - 'spinner': Show a date picker in spinner mode.

src/datetimepicker.android.js

@@ -30,6 +30,7 @@ export default function RNDateTimePickerAndroid(
     positiveButtonLabel,
     negativeButtonLabel,
     neutralButtonLabel,
+    testID,
   } = props;
   const valueTimestamp = value.getTime();
 
@@ -58,6 +59,7 @@ export default function RNDateTimePickerAndroid(
         positiveButtonLabel,
         negativeButtonLabel,
         neutralButtonLabel,
+        testID,
       };
       DateTimePickerAndroid.open(params);
     },