Fix DatePicker tests

This commit is contained in:
Mike Grabowski 2019-03-12 13:11:02 +01:00
parent f6ca4d0a96
commit 9f5946bdc2
2 changed files with 22 additions and 41 deletions

View File

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

View File

@ -12,7 +12,7 @@
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,
@ -26,44 +26,26 @@ type Props = {|
class WithDatePickerData extends React.Component<Props, State> {
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 (
<View>
<WithLabel label="Value:">
<Text testID="date-and-time-indicator">
{this.state.date.toLocaleDateString() +
' ' +
this.state.date.toLocaleTimeString([], {
<Text testID="date-indicator">
{this.state.date.toLocaleDateString()}
</Text>
<Text testID="time-indicator">
{this.state.date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
})}
</Text>
</WithLabel>
<WithLabel label="Timezone:">
<TextInput
onChange={this.onTimezoneChange}
style={styles.textinput}
value={this.state.timeZoneOffsetInHours.toString()}
/>
<Text> hours from UTC</Text>
</WithLabel>
{this.props.children(this.state, this.onDateChange)}
</View>
);
@ -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<any> {
return (
<WithDatePickerData>
{(state, onDateChange) => (
<DatePickerIOS
testID="time-only"
testID="date-and-time-with-interval"
date={state.date}
mode="time"
timeZoneOffsetInMinutes={state.timeZoneOffsetInHours * 60}
minuteInterval={20}
mode="datetime"
onDateChange={onDateChange}
/>
)}