Add e2e tests, bug fixes for testIDs (#22537)

Summary:
This PR adds e2e tests for the Picker and DatePicker components.

While writing these tests, I also found and fixed two bugs where we wern't passing the `testID` down to the native components, so detox couldn't look them up. This confirms what was mentioned by rotemmiz [here](wix/Detox#798 (comment))
Pull Request resolved: #22537

Reviewed By: cpojer

Differential Revision: D13371307

Pulled By: rickhanlonii

fbshipit-source-id: a4dfcdb5913645bceca0c7353328eeb9ad0f6558

Author: rickhanlonii

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -148,6 +148,7 @@ class DatePickerIOS extends React.Component<Props> {
     return (
       <View style={props.style}>
         <RCTDatePickerIOS
+          testID={props.testID}
           ref={picker => {
             this._picker = picker;
           }}

Libraries/Components/Picker/PickerIOS.ios.js

@@ -47,6 +47,7 @@ type RCTPickerIOSType = Class<
       onStartShouldSetResponder: () => boolean,
       selectedIndex: number,
       style?: ?TextStyleProp,
+      testID?: ?string,
     |}>,
   >,
 >;
@@ -114,6 +115,7 @@ class PickerIOS extends React.Component<Props, State> {
           ref={picker => {
             this._picker = picker;
           }}
+          testID={this.props.testID}
           style={[styles.pickerIOS, this.props.itemStyle]}
           items={this.state.items}
           selectedIndex={this.state.selectedIndex}

RNTester/e2e/__tests__/DatePickerIOS-test.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+react_native
+ * @format
+ */
+
+/* global element, by, expect */
+
+describe('DatePickerIOS', () => {
+  beforeAll(async () => {
+    await element(by.id('explorer_search')).replaceText('<DatePickerIOS>');
+    await element(
+      by.label(
+        '<DatePickerIOS> Select dates and times using the native UIDatePicker.',
+      ),
+    ).tap();
+  });
+
+  afterAll(async () => {
+    await element(by.label('Back')).tap();
+  });
+
+  it('Should change indicator with datetime picker', async () => {
+    const testID = 'date-and-time';
+    const indicatorID = 'date-and-time-indicator';
+
+    const testElement = await element(
+      by.type('UIPickerView').withAncestor(by.id(testID)),
+    );
+    const indicator = await element(by.id(indicatorID));
+
+    await expect(testElement).toBeVisible();
+    await expect(indicator).toBeVisible();
+
+    await testElement.setColumnToValue(0, 'Dec 4');
+    await testElement.setColumnToValue(1, '4');
+    await testElement.setColumnToValue(2, '10');
+    await testElement.setColumnToValue(3, 'AM');
+
+    await expect(indicator).toHaveText('12/4/2005 4:10 AM');
+  });
+
+  it('Should change indicator with date-only picker', async () => {
+    const testID = 'date-only';
+    const indicatorID = 'date-and-time-indicator';
+
+    const testElement = await element(
+      by.type('UIPickerView').withAncestor(by.id(testID)),
+    );
+    const indicator = await element(by.id(indicatorID));
+
+    await expect(testElement).toBeVisible();
+    await expect(indicator).toBeVisible();
+
+    await testElement.setColumnToValue(0, 'November');
+    await testElement.setColumnToValue(1, '3');
+    await testElement.setColumnToValue(2, '2006');
+
+    await expect(indicator).toHaveText('11/3/2006 4:10 AM');
+  });
+});

RNTester/e2e/__tests__/Picker-test.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+react_native
+ * @format
+ */
+
+/* global element, by, expect */
+
+describe('Picker', () => {
+  beforeAll(async () => {
+    await element(by.id('explorer_search')).replaceText('<Picker>');
+    await element(
+      by.label(
+        '<Picker> Provides multiple options to choose from, using either a dropdown menu or a dialog.',
+      ),
+    ).tap();
+  });
+
+  afterAll(async () => {
+    await element(by.label('Back')).tap();
+  });
+
+  it('should be selectable by ID', async () => {
+    await expect(element(by.id('basic-picker'))).toBeVisible();
+  });
+});

RNTester/js/DatePickerIOSExample.js

@@ -46,10 +46,13 @@ class DatePickerExample extends React.Component<
     return (
       <View>
         <WithLabel label="Value:">
-          <Text>
+          <Text testID="date-and-time-indicator">
             {this.state.date.toLocaleDateString() +
               ' ' +
-              this.state.date.toLocaleTimeString()}
+              this.state.date.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
           </Text>
         </WithLabel>
         <WithLabel label="Timezone:">
@@ -62,20 +65,23 @@ class DatePickerExample extends React.Component<
         </WithLabel>
         <Heading label="Date + time picker" />
         <DatePickerIOS
+          testID="date-and-time"
           date={this.state.date}
           mode="datetime"
           timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
           onDateChange={this.onDateChange}
         />
         <Heading label="Date picker" />
         <DatePickerIOS
+          testID="date-only"
           date={this.state.date}
           mode="date"
           timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
           onDateChange={this.onDateChange}
         />
         <Heading label="Time picker, 10-minute interval" />
         <DatePickerIOS
+          testID="time-only"
           date={this.state.date}
           mode="time"
           timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}

RNTester/js/PickerExample.js

@@ -38,6 +38,7 @@ class PickerExample extends React.Component<{}, $FlowFixMeState> {
       <RNTesterPage title="<Picker>">
         <RNTesterBlock title="Basic Picker">
           <Picker
+            testID="basic-picker"
             style={styles.picker}
             selectedValue={this.state.selected1}
             onValueChange={this.onValueChange.bind(this, 'selected1')}>