mirror of
https://github.com/status-im/react-native.git
synced 2025-02-23 22:58:19 +00:00
Add Touchable E2E tests (#22570)
Summary: Adds some initial tests for Touchable*. It only tests the first screen worth of examples; in a separate PR I'll work on an alternate way to "scroll" to individual examples in tests, before I add tests for the rest of the Touchable examples. On the live stream where I began writing these tests, I reorganized the "Touchable feedback examples" to the top of the list so it would be on-screen for testing. I didn't include this reorganization or test in this PR; that can be added in once the "alternative to scrolling" is added in, to avoid having to reorganize. Changelog: ---------- [General] [Added] - Add E2E tests for Touchable Pull Request resolved: https://github.com/facebook/react-native/pull/22570 Differential Revision: D13400348 Pulled By: TheSavior fbshipit-source-id: 821af135296049090427a16472cc14dabeb10ab4
This commit is contained in:
Josh Justice
Mike Grabowski
parent
860d01a2c4
commit
0189ea2c2b
72
RNTester/e2e/__tests__/Touchable-test.js
Normal file
72
RNTester/e2e/__tests__/Touchable-test.js
Normal file
@ -0,0 +1,72 @@
|
||||
/**
|
||||
* 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('Touchable', () => {
|
||||
beforeAll(async () => {
|
||||
await element(by.id('explorer_search')).replaceText('<Touchable*');
|
||||
await element(
|
||||
by.label('<Touchable*> and onPress Touchable and onPress examples.'),
|
||||
).tap();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
//TODO - remove app state persistency, till then, we must go back to main screen,
|
||||
await element(by.label('Back')).tap();
|
||||
});
|
||||
|
||||
it('Touchable Highlight should be tappable', async () => {
|
||||
const buttonID = 'touchable_highlight_image_button';
|
||||
const button2ID = 'touchable_highlight_text_button';
|
||||
const consoleID = 'touchable_highlight_console';
|
||||
|
||||
await element(by.id(buttonID)).tap();
|
||||
await expect(element(by.id(consoleID))).toHaveText(
|
||||
'TouchableHighlight onPress',
|
||||
);
|
||||
|
||||
await element(by.id(buttonID)).tap();
|
||||
await expect(element(by.id(consoleID))).toHaveText(
|
||||
'2x TouchableHighlight onPress',
|
||||
);
|
||||
|
||||
await element(by.id(button2ID)).tap();
|
||||
await expect(element(by.id(consoleID))).toHaveText(
|
||||
'3x TouchableHighlight onPress',
|
||||
);
|
||||
});
|
||||
|
||||
it('Touchable Without Feedback should be tappable', async () => {
|
||||
const buttonID = 'touchable_without_feedback_button';
|
||||
const consoleID = 'touchable_without_feedback_console';
|
||||
|
||||
await element(by.id(buttonID)).tap();
|
||||
await expect(element(by.id(consoleID))).toHaveText(
|
||||
'TouchableWithoutFeedback onPress',
|
||||
);
|
||||
|
||||
await element(by.id(buttonID)).tap();
|
||||
await expect(element(by.id(consoleID))).toHaveText(
|
||||
'2x TouchableWithoutFeedback onPress',
|
||||
);
|
||||
});
|
||||
|
||||
it('Text should be tappable', async () => {
|
||||
const buttonID = 'tappable_text';
|
||||
const consoleID = 'tappable_text_console';
|
||||
|
||||
await element(by.id(buttonID)).tap();
|
||||
await expect(element(by.id(consoleID))).toHaveText('text onPress');
|
||||
|
||||
await element(by.id(buttonID)).tap();
|
||||
await expect(element(by.id(consoleID))).toHaveText('2x text onPress');
|
||||
});
|
||||
});
|
||||
@ -45,30 +45,7 @@ exports.examples = [
|
||||
'background color change as well with the activeOpacity and ' +
|
||||
'underlayColor props.',
|
||||
render: function() {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.row}>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => console.log('stock THW image - highlight')}>
|
||||
<Image source={heartImage} style={styles.image} />
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
activeOpacity={1}
|
||||
tvParallaxProperties={{
|
||||
pressMagnification: 1.3,
|
||||
pressDuration: 0.6,
|
||||
}}
|
||||
underlayColor="rgb(210, 230, 255)"
|
||||
onPress={() => console.log('custom THW text - highlight')}>
|
||||
<View style={styles.wrapperCustom}>
|
||||
<Text style={styles.text}>Tap Here For Custom Highlight!</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
return <TouchableHighlightBox />;
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -157,6 +134,57 @@ exports.examples = [
|
||||
},
|
||||
];
|
||||
|
||||
class TouchableHighlightBox extends React.Component<{}, $FlowFixMeState> {
|
||||
state = {
|
||||
timesPressed: 0,
|
||||
};
|
||||
|
||||
touchableOnPress = () => {
|
||||
this.setState({
|
||||
timesPressed: this.state.timesPressed + 1,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
let textLog = '';
|
||||
if (this.state.timesPressed > 1) {
|
||||
textLog = this.state.timesPressed + 'x TouchableHighlight onPress';
|
||||
} else if (this.state.timesPressed > 0) {
|
||||
textLog = 'TouchableHighlight onPress';
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.row}>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
testID="touchable_highlight_image_button"
|
||||
onPress={this.touchableOnPress}>
|
||||
<Image source={heartImage} style={styles.image} />
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
testID="touchable_highlight_text_button"
|
||||
activeOpacity={1}
|
||||
tvParallaxProperties={{
|
||||
pressMagnification: 1.3,
|
||||
pressDuration: 0.6,
|
||||
}}
|
||||
underlayColor="rgb(210, 230, 255)"
|
||||
onPress={this.touchableOnPress}>
|
||||
<View style={styles.wrapperCustom}>
|
||||
<Text style={styles.text}>Tap Here For Custom Highlight!</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
<View style={styles.logBox}>
|
||||
<Text testID="touchable_highlight_console">{textLog}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> {
|
||||
state = {
|
||||
timesPressed: 0,
|
||||
@ -178,13 +206,15 @@ class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> {
|
||||
|
||||
return (
|
||||
<View>
|
||||
<TouchableWithoutFeedback onPress={this.textOnPress}>
|
||||
<TouchableWithoutFeedback
|
||||
onPress={this.textOnPress}
|
||||
testID="touchable_without_feedback_button">
|
||||
<View style={styles.wrapperCustom}>
|
||||
<Text style={styles.text}>Tap Here For No Feedback!</Text>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
<View style={styles.logBox}>
|
||||
<Text>{textLog}</Text>
|
||||
<Text testID="touchable_without_feedback_console">{textLog}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@ -212,11 +242,14 @@ class TextOnPressBox extends React.Component<{}, $FlowFixMeState> {
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text style={styles.textBlock} onPress={this.textOnPress}>
|
||||
<Text
|
||||
style={styles.textBlock}
|
||||
testID="tappable_text"
|
||||
onPress={this.textOnPress}>
|
||||
Text has built-in onPress handling
|
||||
</Text>
|
||||
<View style={styles.logBox}>
|
||||
<Text>{textLog}</Text>
|
||||
<Text testID="tappable_text_console">{textLog}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user