Skip to content

Add Functional Tests for TextInput Component and Additional Samples #12442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chiaramooney merged 5 commits into from
Nov 28, 2023
Merged

Add Functional Tests for TextInput Component and Additional Samples #12442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c653830
Add Functional Tests for TextInput
chiaramooney Nov 17, 2023
a8b2c85
Add Functional Tests for TextInput
chiaramooney Nov 27, 2023
c5f7150
Adjust to 100% Scaling
chiaramooney Nov 27, 2023
a2b41b3
Lint
chiaramooney Nov 28, 2023
c4044db
Update Snaphots
chiaramooney Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 52 additions & 4 deletions packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@ class ToggleDefaultPaddingExample extends React.Component<
render(): React.Node {
return (
<View>
<TextInput style={this.state.hasPadding ? {padding: 0} : null} />
<TextInput
style={this.state.hasPadding ? {padding: 0} : null}
testID="textinput-padding"
/>
<Text
onPress={() => this.setState({hasPadding: !this.state.hasPadding})}>
Toggle padding
Expand Down Expand Up @@ -122,6 +125,7 @@ class AutogrowingTextInputExample extends React.Component<{...}> {
this.setState({contentSize: event.nativeEvent.contentSize})
}
{...props}
testID="textinput-autogrow"
/>
<Text>Plain text value representation:</Text>
{/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
Expand Down Expand Up @@ -154,6 +158,7 @@ class PressInOutEvents extends React.Component<
this.setState({text: 'Holding down the click/touch'})
}
onPressOut={() => this.setState({text: 'Released click/touch'})}
testID="textinput-press"
/>
</View>
);
Expand Down Expand Up @@ -197,6 +202,7 @@ function PropagationSample() {
{code: 'KeyW', handledEventPhase: 3},
{code: 'KeyE', handledEventPhase: 1},
]}
testID="textinput-propagation"
/>
</View>
<View style={styles.eventLogBox}>
Expand Down Expand Up @@ -225,6 +231,7 @@ function SpellCheckSample() {
placeholder="Type text to test spell check functionality."
style={[styles.singleLineWithHeightTextInput]}
spellCheck={spellCheckEnabled}
testID="textinput-spellcheck"
/>
</>
);
Expand Down Expand Up @@ -260,35 +267,42 @@ const examples: Array<RNTesterModuleExample> = [
<TextInput
style={[styles.singleLine]}
defaultValue="Default color text"
testID="textinput-default-color"
/>
<TextInput
style={[styles.singleLine, {color: 'green'}]}
defaultValue="Green Text"
testID="textinput-custom-color"
/>
<TextInput
placeholder="Default placeholder text color"
style={styles.singleLine}
testID="textinput-default-placeholder-color"
/>
<TextInput
placeholder="Red placeholder text color"
placeholderTextColor="red"
style={styles.singleLine}
testID="textinput-custom-placeholder-color"
/>
<TextInput
placeholder="Default underline color"
style={styles.singleLine}
testID="textinput-default-underline-color"
/>
<TextInput
placeholder="Blue underline color"
style={styles.singleLine}
underlineColorAndroid="blue"
testID="textinput-custom-underline-color"
/>
<TextInput
defaultValue="Same BackgroundColor as View "
style={[
styles.singleLine,
{backgroundColor: 'rgba(100, 100, 100, 0.3)'},
]}>
]}
testID="textinput-custom-background-color">
<Text style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
Darker backgroundColor
</Text>
Expand All @@ -297,6 +311,7 @@ const examples: Array<RNTesterModuleExample> = [
defaultValue="Highlight Color is red"
selectionColor={'red'}
style={styles.singleLine}
testID="textinput-custom-highlight-color"
/>
</View>
);
Expand All @@ -310,6 +325,7 @@ const examples: Array<RNTesterModuleExample> = [
<TextInput
defaultValue="Font Weight (default)"
style={[styles.singleLine]}
testID="textinput-weight-default"
/>
{[
'normal',
Expand All @@ -328,6 +344,7 @@ const examples: Array<RNTesterModuleExample> = [
defaultValue={`Font Weight (${fontWeight})`}
key={fontWeight}
style={[styles.singleLine, {fontWeight}]}
testID={'textinput-weight-' + fontWeight}
/>
))}
</View>
Expand All @@ -341,6 +358,7 @@ const examples: Array<RNTesterModuleExample> = [
<TextInput
placeholder="If you set height, beware of padding set from themes"
style={[styles.singleLineWithHeightTextInput]}
testID="textinput-theme-padding"
/>
);
},
Expand All @@ -353,18 +371,22 @@ const examples: Array<RNTesterModuleExample> = [
<TextInput
style={[styles.singleLine, {letterSpacing: 0}]}
placeholder="letterSpacing = 0"
testID="textinput-letterspacing-0"
/>
<TextInput
style={[styles.singleLine, {letterSpacing: 2}]}
placeholder="letterSpacing = 2"
testID="textinput-letterspacing-2"
/>
<TextInput
style={[styles.singleLine, {letterSpacing: 9}]}
placeholder="letterSpacing = 9"
testID="textinput-letterspacing-9"
/>
<TextInput
style={[styles.singleLine, {letterSpacing: -1}]}
placeholder="letterSpacing = -1"
testID="textinput-letterspacing--1"
/>
</View>
);
Expand All @@ -379,12 +401,14 @@ const examples: Array<RNTesterModuleExample> = [
defaultValue="iloveturtles"
secureTextEntry={true}
style={styles.singleLine}
testID="textinput-password"
/>
<TextInput
secureTextEntry={true}
style={[styles.singleLine, {color: 'red'}]}
placeholder="color is supported too"
placeholderTextColor="red"
testID="textinput-password-placeholder"
/>
</View>
);
Expand All @@ -398,6 +422,7 @@ const examples: Array<RNTesterModuleExample> = [
defaultValue="Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^"
editable={false}
style={styles.singleLine}
testID="textinput-not-editable"
/>
);
},
Expand All @@ -416,6 +441,7 @@ const examples: Array<RNTesterModuleExample> = [
styles.multiline,
{textAlign: 'left', textAlignVertical: 'top'},
]}
testID="textinput-multiline-topleft"
/>
<TextInput
autoCorrect={true}
Expand All @@ -426,6 +452,7 @@ const examples: Array<RNTesterModuleExample> = [
styles.multiline,
{textAlign: 'center', textAlignVertical: 'center'},
]}
testID="textinput-multiline-center"
/>
<TextInput
autoCorrect={true}
Expand All @@ -434,7 +461,8 @@ const examples: Array<RNTesterModuleExample> = [
styles.multiline,
{color: 'blue'},
{textAlign: 'right', textAlignVertical: 'bottom'},
]}>
]}
testID="textinput-multiline-bottomright">
<Text style={styles.multiline}>
multiline with children, aligned bottom-right
</Text>
Expand All @@ -452,21 +480,25 @@ const examples: Array<RNTesterModuleExample> = [
placeholder="editable text input using editable prop"
style={styles.default}
editable
testID="textinput-editable"
/>
<TextInput
placeholder="uneditable text input using editable prop"
style={styles.default}
editable={false}
testID="textinput-not-editable2"
/>
<TextInput
placeholder="editable text input using readOnly prop"
style={styles.default}
readOnly={false}
testID="textinput-readonly-false"
/>
<TextInput
placeholder="uneditable text input using readOnly prop"
style={styles.default}
readOnly
testID="textinput-readyonly"
/>
</View>
);
Expand Down Expand Up @@ -535,21 +567,25 @@ const examples: Array<RNTesterModuleExample> = [
autoComplete="country"
placeholder="country"
style={styles.default}
testID="textinput-autocomplete-country"
/>
<TextInput
autoComplete="postal-address-country"
placeholder="postal-address-country"
style={styles.default}
testID="textinput-autocomplete-address-country"
/>
<TextInput
autoComplete="one-time-code"
placeholder="one-time-code"
style={styles.default}
testID="textinput-autocomplete-one-time-code"
/>
<TextInput
autoComplete="sms-otp"
placeholder="sms-otp"
style={styles.default}
testID="textinput-autocomplete-sms-otp"
/>
</View>
);
Expand All @@ -575,6 +611,7 @@ const examples: Array<RNTesterModuleExample> = [
returnKeyType={type}
placeholder={'returnKeyType: ' + type}
style={styles.singleLine}
testID={'textinput-return-' + type}
/>
);
});
Expand All @@ -585,6 +622,7 @@ const examples: Array<RNTesterModuleExample> = [
returnKeyLabel={type}
placeholder={'returnKeyLabel: ' + type}
style={styles.singleLine}
testID={'textinput-return-' + type}
/>
);
});
Expand All @@ -605,16 +643,19 @@ const examples: Array<RNTesterModuleExample> = [
inlineImageLeft="ic_menu_black_24dp"
placeholder="This has drawableLeft set"
style={styles.singleLine}
testID="textinput-inline-images"
/>
<TextInput
inlineImageLeft="ic_menu_black_24dp"
inlineImagePadding={30}
placeholder="This has drawableLeft and drawablePadding set"
style={styles.singleLine}
testID="textinput-inline-images-2"
/>
<TextInput
placeholder="This does not have drawable props set"
style={styles.singleLine}
testID="textinput-inline-images-3"
/>
</View>
);
Expand All @@ -639,26 +680,33 @@ const examples: Array<RNTesterModuleExample> = [
return (
<View>
<Text>Default submit key (Enter):</Text>
<TextInput clearTextOnSubmit style={styles.singleLine} />
<TextInput
clearTextOnSubmit
style={styles.singleLine}
testID="textinput-clear-on-submit"
/>
<Text>Custom submit key event (Shift + Enter), single-line:</Text>
<TextInput
clearTextOnSubmit
style={styles.singleLine}
submitKeyEvents={[{code: 'Enter', shiftKey: true}]}
testID="textinput-clear-on-submit-2"
/>
<Text>Custom submit key event (Shift + Enter), multi-line:</Text>
<TextInput
multiline
clearTextOnSubmit
style={styles.multiline}
submitKeyEvents={[{code: 'Enter', shiftKey: true}]}
testID="textinput-clear-on-submit-3"
/>
<Text>Submit with Enter key, return key with Shift + Enter</Text>
<TextInput
multiline
clearTextOnSubmit
style={styles.multiline}
submitKeyEvents={[{code: 'Enter'}]}
testID="textinput-clear-on-submit-4"
/>
</View>
);
Expand Down
Loading