From 8270de9c2cfad721b554201ab97d645ffbfdc84b Mon Sep 17 00:00:00 2001 From: Mike Grabowski Date: Tue, 12 Mar 2019 18:30:31 -0700 Subject: [PATCH] Fix DatePickerIOS e2e tests (#23861) Summary: DatePickerIOS tests stopped working after US changed their time zone on CircleCI. I decided to update the tests to be more reliable, by: - removing "timezoneoffset" from the examples - I don't think it's needed. We don't demonstrate other props and it was causing us some troubles when timezones actually changed - changing "interval" example from "time-only" to "datetime" because there's a known bug that prevented the previous example from working https://github.com/facebook/react-native/issues/9566 - splitting the label to two: one for date and other one for time, so that we can match the date only when we test "date" mode only [IOS] [FIXED] - Improved reliability of DatePickerIOS e2e tests Pull Request resolved: https://github.com/facebook/react-native/pull/23861 Differential Revision: D14434324 Pulled By: cpojer fbshipit-source-id: 0f82b7e94bb1cb6ce75b44badd0064d1754370b9 --- RNTester/e2e/__tests__/DatePickerIOS-test.js | 17 +++---- RNTester/js/DatePickerIOSExample.js | 48 ++++++-------------- 2 files changed, 23 insertions(+), 42 deletions(-) diff --git a/RNTester/e2e/__tests__/DatePickerIOS-test.js b/RNTester/e2e/__tests__/DatePickerIOS-test.js index 6f8a3b6ee..024f237d7 100644 --- a/RNTester/e2e/__tests__/DatePickerIOS-test.js +++ b/RNTester/e2e/__tests__/DatePickerIOS-test.js @@ -27,33 +27,34 @@ describe('DatePickerIOS', () => { it('Should change indicator with datetime picker', async () => { await openExampleWithTitle('Date and time picker'); 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)); + const dateIndicator = await element(by.id('date-indicator')); + const timeIndicator = await element(by.id('time-indicator')); await expect(testElement).toBeVisible(); - await expect(indicator).toBeVisible(); + await expect(dateIndicator).toBeVisible(); + await expect(timeIndicator).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'); + await expect(dateIndicator).toHaveText('12/4/2005'); + await expect(timeIndicator).toHaveText('4:10 AM'); }); it('Should change indicator with date-only picker', async () => { - await openExampleWithTitle('Date only'); + await openExampleWithTitle('Date only picker'); 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)); + const indicator = await element(by.id('date-indicator')); await expect(testElement).toBeVisible(); await expect(indicator).toBeVisible(); @@ -62,6 +63,6 @@ describe('DatePickerIOS', () => { await testElement.setColumnToValue(1, '3'); await testElement.setColumnToValue(2, '2006'); - await expect(indicator).toHaveText('11/3/2006 4:10 AM'); + await expect(indicator).toHaveText('11/3/2006'); }); }); diff --git a/RNTester/js/DatePickerIOSExample.js b/RNTester/js/DatePickerIOSExample.js index fa4dcb12b..e58423cc0 100644 --- a/RNTester/js/DatePickerIOSExample.js +++ b/RNTester/js/DatePickerIOSExample.js @@ -12,11 +12,10 @@ const React = require('react'); const ReactNative = require('react-native'); -const {DatePickerIOS, StyleSheet, Text, TextInput, View} = ReactNative; +const {DatePickerIOS, StyleSheet, Text, View} = ReactNative; type State = {| date: Date, - timeZoneOffsetInHours: number, |}; type Props = {| @@ -26,43 +25,26 @@ type Props = {| class WithDatePickerData extends React.Component { state = { date: new Date(), - timeZoneOffsetInHours: (-1 * new Date().getTimezoneOffset()) / 60, }; onDateChange = date => { this.setState({date: date}); }; - onTimezoneChange = event => { - const offset = parseInt(event.nativeEvent.text, 10); - if (isNaN(offset)) { - return; - } - this.setState({timeZoneOffsetInHours: offset}); - }; - render() { - // Ideally, the timezone input would be a picker rather than a - // text input, but we don't have any pickers yet :( return ( - - {this.state.date.toLocaleDateString() + - ' ' + - this.state.date.toLocaleTimeString([], { - hour: '2-digit', - minute: '2-digit', - })} + + {this.state.date.toLocaleDateString()} + +   + + {this.state.date.toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit', + })} - - - - hours from UTC {this.props.children(this.state, this.onDateChange)} @@ -124,7 +106,6 @@ exports.examples = [ testID="date-and-time" date={state.date} mode="datetime" - timeZoneOffsetInMinutes={state.timeZoneOffsetInHours * 60} onDateChange={onDateChange} /> )} @@ -142,7 +123,6 @@ exports.examples = [ testID="date-only" date={state.date} mode="date" - timeZoneOffsetInMinutes={state.timeZoneOffsetInHours * 60} onDateChange={onDateChange} /> )} @@ -151,16 +131,16 @@ exports.examples = [ }, }, { - title: 'Time only picker, 10-minute interval', + title: 'Picker with 20-minute interval', render: function(): React.Element { return ( {(state, onDateChange) => ( )}