From 6528d8d36e885e2f2763fe3940b40a7076464fdf Mon Sep 17 00:00:00 2001 From: agarwalmanya Date: Tue, 18 Aug 2020 16:51:01 +0530 Subject: [PATCH 1/2] use cases and e2e tests for TextInput --- .../app/src/main/res/drawable/magnify.png | Bin 0 -> 529 bytes .../rn-tester/e2e/__tests__/TextInput-test.js | 49 +- .../TextInput/TextInputExample.android.js | 426 ----- .../TextInput/TextInputExample.ios.js | 723 -------- .../js/examples/TextInput/TextInputExample.js | 1617 +++++++++++++++++ .../TextInput/TextInputSharedExamples.js | 618 ------- 6 files changed, 1640 insertions(+), 1793 deletions(-) create mode 100644 packages/rn-tester/android/app/src/main/res/drawable/magnify.png delete mode 100644 packages/rn-tester/js/examples/TextInput/TextInputExample.android.js delete mode 100644 packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js create mode 100644 packages/rn-tester/js/examples/TextInput/TextInputExample.js delete mode 100644 packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js diff --git a/packages/rn-tester/android/app/src/main/res/drawable/magnify.png b/packages/rn-tester/android/app/src/main/res/drawable/magnify.png new file mode 100644 index 0000000000000000000000000000000000000000..a73c2b27eb8890dc29b4500e35158c921aad9364 GIT binary patch literal 529 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEa{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBD8ZKG?d}4kf#9d}?s_1_ zS>O>_%)r2R1cVubqPIEHu}e>>TctI0v6&0gh|kkG{Tf`zQHi_bkWTqHfE zqQ}bJGj;bi-JIa=%0ntIOlEa2l5cDOwEzF)kG4Nnx2iet#5Bm9Xy6st#`}&@`$1sw zv`5)Xl>V@}9FTb7-TS1LapScR?(f<*``9>h7&n@@vBj(G+p7COsW-X#yl{LP_lcz& z^FQz&nLe9o?xoM6tFm7dd;i9)`F_l+bKkn0-Ym;V;$|?t|4Xi7Mg60XyVyM^ z7X(O0Ijr(iGG%r1b!5yscm9B^>7k8fx-ZogN~M^p8)XdNpPTM9N3BzJZi8gOi$||Z zdtbar|G#5ii&wzJtyRshfIe3(ag8WRNi0dVN-jzTQVd20Mh3bD=0Fr;U}0rsX=P%f zZD3$!U|_0J=ZvBuH$NpatrE8em&#-Rff^)1HU#IVm6RtIr81P4m+NKbWfvzW7NqLs W7p2dBXCnnv#Ng@b=d#Wzp$P!avALZ9 literal 0 HcmV?d00001 diff --git a/packages/rn-tester/e2e/__tests__/TextInput-test.js b/packages/rn-tester/e2e/__tests__/TextInput-test.js index d262221f5fe23b..167c70b3248d40 100644 --- a/packages/rn-tester/e2e/__tests__/TextInput-test.js +++ b/packages/rn-tester/e2e/__tests__/TextInput-test.js @@ -19,44 +19,41 @@ describe('TextInput', () => { await device.reloadReactNative(); await openComponentWithLabel( 'TextInput', - 'Single and multi-line text inputs.', + 'TextInput A foundational component for inputting text into the app via a keyboard.', ); }); - it('Live rewrite with spaces should replace spaces and enforce max length', async () => { - await openExampleWithTitle('Live Re-Write \\('); + it('should accept input', async () => { + await openExampleWithTitle("TextInput with autoFocus={true}"); - await element(by.id('rewrite_sp_underscore_input')).typeText( - 'this is a long sentence', - ); - await expect(element(by.id('rewrite_sp_underscore_input'))).toHaveText( - 'this_is_a_long_sente', - ); - }); + await element(by.id('check_text_input')).typeText("Check text input"); + await expect(element(by.id('check_text_input'))).toHaveText("Check text input"); + }) - it('Live rewrite with no spaces should remove spaces', async () => { - await openExampleWithTitle('Live Re-Write \\(no spaces'); + it('should not allow spaces in no-spaces-input', async () => { + await openExampleWithTitle("TextInput that replaces spaces with underscore '_'"); - await element(by.id('rewrite_no_sp_input')).typeText( + await element(by.id('rewrite_sp_underscore_input')).typeText( 'this is a long sentence', ); - await expect(element(by.id('rewrite_no_sp_input'))).toHaveText( - 'thisisalongsentence', - ); + + await expect(element(by.id('rewrite_sp_underscore_input'))).toHaveText('this_is_a_long_sentence'); }); - it('Live rewrite with clear should remove spaces and clear', async () => { - await openExampleWithTitle('and clear'); + it('should not exceed maximum length when maxLength is used', async () => { + await openExampleWithTitle("TextInput with maxLength={limit}"); - await element(by.id('rewrite_clear_input')).typeText( - 'this is a long sentence', - ); - await expect(element(by.id('rewrite_clear_input'))).toHaveText( - 'thisisalongsentence', + await element(by.id('max_length_input')).typeText( + 'this is a very long sentence.' ); - await element(by.id('rewrite_clear_button')).tap(); + await expect(element(by.id('max_length_input'))).toHaveText('this is a very long '); + }) - await expect(element(by.id('rewrite_clear_input'))).toHaveText(''); - }); + it("should be cleared by tapping 'Clear' button", async () => { + await openExampleWithTitle("TextInput along with 'Clear' button"); + await element(by.id('clear_text_input')).typeText('this text needs to be cleared'); + await element(by.id('rewrite_clear_button')).tap(); + await expect(element(by.id('clear_text_input'))).toHaveText(''); + }) }); diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js deleted file mode 100644 index aa083a9e42bd2c..00000000000000 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js +++ /dev/null @@ -1,426 +0,0 @@ -/** - * 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. - * - * @format - * @flow - */ - -'use strict'; - -const React = require('react'); - -const { - Text, - TextInput, - View, - StyleSheet, - Slider, - Switch, -} = require('react-native'); - -const TextInputSharedExamples = require('./TextInputSharedExamples.js'); - -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; - -class ToggleDefaultPaddingExample extends React.Component< - $FlowFixMeProps, - $FlowFixMeState, -> { - constructor(props) { - super(props); - this.state = {hasPadding: false}; - } - render() { - return ( - - - this.setState({hasPadding: !this.state.hasPadding})}> - Toggle padding - - - ); - } -} - -class AutogrowingTextInputExample extends React.Component<{...}> { - constructor(props) { - super(props); - - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found - * when making Flow check .android.js files. */ - this.state = { - width: 100, - multiline: true, - text: '', - contentSize: { - width: 0, - height: 0, - }, - }; - } - - UNSAFE_componentWillReceiveProps(props) { - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found - * when making Flow check .android.js files. */ - this.setState({ - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found - * when making Flow check .android.js files. */ - multiline: props.multiline, - }); - } - - render() { - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found - * when making Flow check .android.js files. */ - const {style, multiline, ...props} = this.props; - return ( - - Width: - =0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - onValueChange={value => this.setState({width: value})} - /> - Multiline: - =0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - value={this.state.multiline} - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - onValueChange={value => this.setState({multiline: value})} - /> - TextInput: - {/* $FlowFixMe(>=0.122.0 site=react_native_android_fb) This comment - * suppresses an error found when Flow v0.122.0 was deployed. To see - * the error, delete this comment and run Flow. */} - =0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - multiline={this.state.multiline} - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - style={[style, {width: this.state.width + '%'}]} - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - onChangeText={value => this.setState({text: value})} - onContentSizeChange={event => - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - this.setState({contentSize: event.nativeEvent.contentSize}) - } - {...props} - /> - Plain text value representation: - {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */} - {this.state.text} - {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */} - Content Size: {JSON.stringify(this.state.contentSize)} - - ); - } -} - -const styles = StyleSheet.create({ - multiline: { - height: 60, - fontSize: 16, - }, - singleLine: { - fontSize: 16, - }, - singleLineWithHeightTextInput: { - height: 30, - }, -}); - -exports.title = 'TextInput'; -exports.category = 'Basic'; -exports.description = 'Single and multi-line text inputs.'; -exports.examples = ([ - ...TextInputSharedExamples, - { - title: 'Colors and text inputs', - render: function(): React.Node { - return ( - - - - - - - - - - Darker backgroundColor - - - - - ); - }, - }, - { - title: 'Text input, themes and heights', - render: function(): React.Node { - return ( - - ); - }, - }, - { - title: 'letterSpacing', - render: function(): React.Node { - return ( - - - - - - - ); - }, - }, - { - title: 'Passwords', - render: function(): React.Node { - return ( - - - - - ); - }, - }, - { - title: 'Editable', - render: function(): React.Node { - return ( - - ); - }, - }, - { - title: 'Multiline', - render: function(): React.Node { - return ( - - - - - - multiline with children, aligned bottom-right - - - - ); - }, - }, - { - title: 'Fixed number of lines', - platform: 'android', - render: function(): React.Node { - return ( - - - - - ); - }, - }, - { - title: 'Auto-expanding', - render: function(): React.Node { - return ( - - - generic generic generic - - small small small small small small - - regular regular - - huge huge huge huge huge - - generic generic generic - - - ); - }, - }, - { - title: 'Return key', - render: function(): React.Node { - const returnKeyTypes = [ - 'none', - 'go', - 'search', - 'send', - 'done', - 'previous', - 'next', - ]; - const returnKeyLabels = ['Compile', 'React Native']; - const examples = returnKeyTypes.map(type => { - return ( - - ); - }); - const types = returnKeyLabels.map(type => { - return ( - - ); - }); - return ( - - {examples} - {types} - - ); - }, - }, - { - title: 'Inline Images', - render: function(): React.Node { - return ( - - - - - - ); - }, - }, - { - title: 'Toggle Default Padding', - render: function(): React.Node { - return ; - }, - }, -]: Array); diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js deleted file mode 100644 index ccb732568227cb..00000000000000 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js +++ /dev/null @@ -1,723 +0,0 @@ -/** - * 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. - * - * @format - * @flow - */ - -'use strict'; - -const React = require('react'); - -const { - Button, - InputAccessoryView, - Text, - TextInput, - View, - StyleSheet, - Slider, - Switch, - Alert, -} = require('react-native'); - -const TextInputSharedExamples = require('./TextInputSharedExamples.js'); - -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; - -class WithLabel extends React.Component<$FlowFixMeProps> { - render() { - return ( - - - {this.props.label} - - {this.props.children} - - ); - } -} - -class TextInputAccessoryViewExample extends React.Component<{...}, *> { - constructor(props) { - super(props); - this.state = {text: 'Placeholder Text'}; - } - - render() { - const inputAccessoryViewID = 'inputAccessoryView1'; - return ( - - this.setState({text})} - value={this.state.text} - /> - - -