From bffe481f4b7add89dee8aef542187685c09b9e55 Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Fri, 7 Dec 2018 13:21:16 -0600 Subject: [PATCH 1/9] Add first Touchable test --- RNTester/e2e/__tests__/Touchable-test.js | 32 ++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 RNTester/e2e/__tests__/Touchable-test.js diff --git a/RNTester/e2e/__tests__/Touchable-test.js b/RNTester/e2e/__tests__/Touchable-test.js new file mode 100644 index 00000000000000..2d6cb7249878e6 --- /dev/null +++ b/RNTester/e2e/__tests__/Touchable-test.js @@ -0,0 +1,32 @@ +/** + * 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 Without Feedback should be tappable', async () => { + await element(by.label('Tap Here For No Feedback!')).tap(); + await expect( + element(by.text('TouchableWithoutFeedback onPress')), + ).toBeVisible(); + }); +}); From 73861e51bab742490756731286f8ebfd46d2c772 Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Fri, 7 Dec 2018 13:29:40 -0600 Subject: [PATCH 2/9] Add test for tappable text --- RNTester/e2e/__tests__/Touchable-test.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/RNTester/e2e/__tests__/Touchable-test.js b/RNTester/e2e/__tests__/Touchable-test.js index 2d6cb7249878e6..7394ee78cf72ea 100644 --- a/RNTester/e2e/__tests__/Touchable-test.js +++ b/RNTester/e2e/__tests__/Touchable-test.js @@ -29,4 +29,9 @@ describe('Touchable', () => { element(by.text('TouchableWithoutFeedback onPress')), ).toBeVisible(); }); + + it('Text should be tappable', async () => { + await element(by.text('Text has built-in onPress handling')).tap(); + await expect(element(by.text('text onPress'))).toBeVisible(); + }); }); From e696b3c49d75f2dd319f5d3a8bdc089f4d575962 Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Fri, 7 Dec 2018 19:52:46 -0600 Subject: [PATCH 3/9] Extract touchable highlight example to a component --- RNTester/js/TouchableExample.js | 54 ++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js index 7e662612629aa7..06dff026956574 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,35 @@ exports.examples = [ }, ]; +class TouchableHighlightBox extends React.Component<{}, $FlowFixMeState> { + render() { + return ( + + + console.log('stock THW image - highlight')}> + + + console.log('custom THW text - highlight')}> + + Tap Here For Custom Highlight! + + + + + ); + } +} + class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> { state = { timesPressed: 0, From cd1b0701119fe7c3e093d9f75a924d2a31af7b2c Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Fri, 7 Dec 2018 19:54:43 -0600 Subject: [PATCH 4/9] Add log box to TouchableHighlight --- RNTester/js/TouchableExample.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js index 06dff026956574..e915a1c7f0f253 100644 --- a/RNTester/js/TouchableExample.js +++ b/RNTester/js/TouchableExample.js @@ -135,13 +135,30 @@ 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 TouchableHighlightBox onPress'; + } else if (this.state.timesPressed > 0) { + textLog = 'TouchableHighlightBox onPress'; + } + return ( console.log('stock THW image - highlight')}> + onPress={this.touchableOnPress}> { pressDuration: 0.6, }} underlayColor="rgb(210, 230, 255)" - onPress={() => console.log('custom THW text - highlight')}> + onPress={this.touchableOnPress}> Tap Here For Custom Highlight! + + {textLog} + ); } From e770cce4bacb3647edbdb8ac3c17a7323e17bc92 Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Sat, 8 Dec 2018 07:53:39 -0600 Subject: [PATCH 5/9] Add test IDs and log box to TouchableHighlight --- RNTester/js/TouchableExample.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js index e915a1c7f0f253..fd4b601653a4af 100644 --- a/RNTester/js/TouchableExample.js +++ b/RNTester/js/TouchableExample.js @@ -148,9 +148,9 @@ class TouchableHighlightBox extends React.Component<{}, $FlowFixMeState> { render() { let textLog = ''; if (this.state.timesPressed > 1) { - textLog = this.state.timesPressed + 'x TouchableHighlightBox onPress'; + textLog = this.state.timesPressed + 'x TouchableHighlight onPress'; } else if (this.state.timesPressed > 0) { - textLog = 'TouchableHighlightBox onPress'; + textLog = 'TouchableHighlight onPress'; } return ( @@ -158,11 +158,13 @@ class TouchableHighlightBox extends React.Component<{}, $FlowFixMeState> { { - {textLog} + + {textLog} + ); From 0ca40ba8adf585086a6f77bf914adadd98c22110 Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Sat, 8 Dec 2018 08:00:35 -0600 Subject: [PATCH 6/9] WIP --- RNTester/e2e/__tests__/Touchable-test.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/RNTester/e2e/__tests__/Touchable-test.js b/RNTester/e2e/__tests__/Touchable-test.js index 7394ee78cf72ea..efca288b23be84 100644 --- a/RNTester/e2e/__tests__/Touchable-test.js +++ b/RNTester/e2e/__tests__/Touchable-test.js @@ -23,6 +23,13 @@ describe('Touchable', () => { await element(by.label('Back')).tap(); }); + it('Touchable Highlight should be tappable', async () => { + await element(by.id('touchable_highlight_image_button')).tap(); + await expect(element(by.id('touchable_highlight_console'))).toHaveText( + 'TouchableHighlight onPress', + ); + }); + it('Touchable Without Feedback should be tappable', async () => { await element(by.label('Tap Here For No Feedback!')).tap(); await expect( From 2a4bc7abef752d73807b2f8a4ec5bb45c1d69298 Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Sat, 8 Dec 2018 08:54:49 -0600 Subject: [PATCH 7/9] Format to Prettier --- RNTester/js/TouchableExample.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js index fd4b601653a4af..d82b6bb17200ac 100644 --- a/RNTester/js/TouchableExample.js +++ b/RNTester/js/TouchableExample.js @@ -178,9 +178,7 @@ class TouchableHighlightBox extends React.Component<{}, $FlowFixMeState> { - - {textLog} - + {textLog} ); From a1d931bbadc1700d49d17872a5559ce1c2f2abf8 Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Sat, 8 Dec 2018 20:09:10 -0600 Subject: [PATCH 8/9] Add testIDs to TouchableExample --- RNTester/js/TouchableExample.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js index d82b6bb17200ac..5fa16ff05913e7 100644 --- a/RNTester/js/TouchableExample.js +++ b/RNTester/js/TouchableExample.js @@ -206,13 +206,15 @@ class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> { return ( - + Tap Here For No Feedback! - {textLog} + {textLog} ); @@ -240,11 +242,14 @@ class TextOnPressBox extends React.Component<{}, $FlowFixMeState> { return ( - + Text has built-in onPress handling - {textLog} + {textLog} ); From d4fc331f77c97787e0abe0d68c1ed7741421df6b Mon Sep 17 00:00:00 2001 From: Josh Justice Date: Sat, 8 Dec 2018 20:09:32 -0600 Subject: [PATCH 9/9] Add testIDs and 2x tests to Touchable-test --- RNTester/e2e/__tests__/Touchable-test.js | 44 +++++++++++++++++++----- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/RNTester/e2e/__tests__/Touchable-test.js b/RNTester/e2e/__tests__/Touchable-test.js index efca288b23be84..6ac25fdeca7381 100644 --- a/RNTester/e2e/__tests__/Touchable-test.js +++ b/RNTester/e2e/__tests__/Touchable-test.js @@ -24,21 +24,49 @@ describe('Touchable', () => { }); it('Touchable Highlight should be tappable', async () => { - await element(by.id('touchable_highlight_image_button')).tap(); - await expect(element(by.id('touchable_highlight_console'))).toHaveText( + 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 () => { - await element(by.label('Tap Here For No Feedback!')).tap(); - await expect( - element(by.text('TouchableWithoutFeedback onPress')), - ).toBeVisible(); + 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 () => { - await element(by.text('Text has built-in onPress handling')).tap(); - await expect(element(by.text('text onPress'))).toBeVisible(); + 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'); }); });