diff --git a/RNTester/e2e/__tests__/Touchable-test.js b/RNTester/e2e/__tests__/Touchable-test.js new file mode 100644 index 00000000000000..6ac25fdeca7381 --- /dev/null +++ b/RNTester/e2e/__tests__/Touchable-test.js @@ -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(' 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'); + }); +}); diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js index 7e662612629aa7..5fa16ff05913e7 100644 --- a/RNTester/js/TouchableExample.js +++ b/RNTester/js/TouchableExample.js @@ -45,30 +45,7 @@ exports.examples = [ 'background color change as well with the activeOpacity and ' + 'underlayColor props.', render: function() { - return ( - - - console.log('stock THW image - highlight')}> - - - console.log('custom THW text - highlight')}> - - Tap Here For Custom Highlight! - - - - - ); + return ; }, }, { @@ -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 ( + + + + + + + + Tap Here For Custom Highlight! + + + + + {textLog} + + + ); + } +} + class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> { state = { timesPressed: 0, @@ -178,13 +206,15 @@ class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> { return ( - + Tap Here For No Feedback! - {textLog} + {textLog} ); @@ -212,11 +242,14 @@ class TextOnPressBox extends React.Component<{}, $FlowFixMeState> { return ( - + Text has built-in onPress handling - {textLog} + {textLog} );