diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js index ab2b4c25bd34fb..6ab037f28bf9cb 100644 --- a/Libraries/Components/DatePicker/DatePickerIOS.ios.js +++ b/Libraries/Components/DatePicker/DatePickerIOS.ios.js @@ -148,6 +148,7 @@ class DatePickerIOS extends React.Component { return ( { this._picker = picker; }} diff --git a/Libraries/Components/Picker/PickerIOS.ios.js b/Libraries/Components/Picker/PickerIOS.ios.js index 594f913599bff6..787126356a4974 100644 --- a/Libraries/Components/Picker/PickerIOS.ios.js +++ b/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 { ref={picker => { this._picker = picker; }} + testID={this.props.testID} style={[styles.pickerIOS, this.props.itemStyle]} items={this.state.items} selectedIndex={this.state.selectedIndex} diff --git a/RNTester/e2e/__tests__/DatePickerIOS-test.js b/RNTester/e2e/__tests__/DatePickerIOS-test.js new file mode 100644 index 00000000000000..0947e00c0a09a2 --- /dev/null +++ b/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(''); + await element( + by.label( + ' 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'); + }); +}); diff --git a/RNTester/e2e/__tests__/Picker-test.js b/RNTester/e2e/__tests__/Picker-test.js new file mode 100644 index 00000000000000..37a97ae49498e0 --- /dev/null +++ b/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(''); + await element( + by.label( + ' 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(); + }); +}); diff --git a/RNTester/js/DatePickerIOSExample.js b/RNTester/js/DatePickerIOSExample.js index 647359009269c9..5d4ad687150aef 100644 --- a/RNTester/js/DatePickerIOSExample.js +++ b/RNTester/js/DatePickerIOSExample.js @@ -46,10 +46,13 @@ class DatePickerExample extends React.Component< return ( - + {this.state.date.toLocaleDateString() + ' ' + - this.state.date.toLocaleTimeString()} + this.state.date.toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit', + })} @@ -62,6 +65,7 @@ class DatePickerExample extends React.Component< {