Add e2e tests, bug fixes for testIDs

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')}>