Skip to content

Commit adfe3bd

Browse files
authored
Add Functional Tests for TextInput Component and Additional Samples (#12442)
* Add Functional Tests for TextInput * Add Functional Tests for TextInput * Adjust to 100% Scaling * Lint * Update Snaphots
1 parent 46c26bb commit adfe3bd

File tree

4 files changed

+3963
-208
lines changed

4 files changed

+3963
-208
lines changed

packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@ class ToggleDefaultPaddingExample extends React.Component<
3535
render(): React.Node {
3636
return (
3737
<View>
38-
<TextInput style={this.state.hasPadding ? {padding: 0} : null} />
38+
<TextInput
39+
style={this.state.hasPadding ? {padding: 0} : null}
40+
testID="textinput-padding"
41+
/>
3942
<Text
4043
onPress={() => this.setState({hasPadding: !this.state.hasPadding})}>
4144
Toggle padding
@@ -122,6 +125,7 @@ class AutogrowingTextInputExample extends React.Component<{...}> {
122125
this.setState({contentSize: event.nativeEvent.contentSize})
123126
}
124127
{...props}
128+
testID="textinput-autogrow"
125129
/>
126130
<Text>Plain text value representation:</Text>
127131
{/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
@@ -154,6 +158,7 @@ class PressInOutEvents extends React.Component<
154158
this.setState({text: 'Holding down the click/touch'})
155159
}
156160
onPressOut={() => this.setState({text: 'Released click/touch'})}
161+
testID="textinput-press"
157162
/>
158163
</View>
159164
);
@@ -197,6 +202,7 @@ function PropagationSample() {
197202
{code: 'KeyW', handledEventPhase: 3},
198203
{code: 'KeyE', handledEventPhase: 1},
199204
]}
205+
testID="textinput-propagation"
200206
/>
201207
</View>
202208
<View style={styles.eventLogBox}>
@@ -225,6 +231,7 @@ function SpellCheckSample() {
225231
placeholder="Type text to test spell check functionality."
226232
style={[styles.singleLineWithHeightTextInput]}
227233
spellCheck={spellCheckEnabled}
234+
testID="textinput-spellcheck"
228235
/>
229236
</>
230237
);
@@ -260,35 +267,42 @@ const examples: Array<RNTesterModuleExample> = [
260267
<TextInput
261268
style={[styles.singleLine]}
262269
defaultValue="Default color text"
270+
testID="textinput-default-color"
263271
/>
264272
<TextInput
265273
style={[styles.singleLine, {color: 'green'}]}
266274
defaultValue="Green Text"
275+
testID="textinput-custom-color"
267276
/>
268277
<TextInput
269278
placeholder="Default placeholder text color"
270279
style={styles.singleLine}
280+
testID="textinput-default-placeholder-color"
271281
/>
272282
<TextInput
273283
placeholder="Red placeholder text color"
274284
placeholderTextColor="red"
275285
style={styles.singleLine}
286+
testID="textinput-custom-placeholder-color"
276287
/>
277288
<TextInput
278289
placeholder="Default underline color"
279290
style={styles.singleLine}
291+
testID="textinput-default-underline-color"
280292
/>
281293
<TextInput
282294
placeholder="Blue underline color"
283295
style={styles.singleLine}
284296
underlineColorAndroid="blue"
297+
testID="textinput-custom-underline-color"
285298
/>
286299
<TextInput
287300
defaultValue="Same BackgroundColor as View "
288301
style={[
289302
styles.singleLine,
290303
{backgroundColor: 'rgba(100, 100, 100, 0.3)'},
291-
]}>
304+
]}
305+
testID="textinput-custom-background-color">
292306
<Text style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
293307
Darker backgroundColor
294308
</Text>
@@ -297,6 +311,7 @@ const examples: Array<RNTesterModuleExample> = [
297311
defaultValue="Highlight Color is red"
298312
selectionColor={'red'}
299313
style={styles.singleLine}
314+
testID="textinput-custom-highlight-color"
300315
/>
301316
</View>
302317
);
@@ -310,6 +325,7 @@ const examples: Array<RNTesterModuleExample> = [
310325
<TextInput
311326
defaultValue="Font Weight (default)"
312327
style={[styles.singleLine]}
328+
testID="textinput-weight-default"
313329
/>
314330
{[
315331
'normal',
@@ -328,6 +344,7 @@ const examples: Array<RNTesterModuleExample> = [
328344
defaultValue={`Font Weight (${fontWeight})`}
329345
key={fontWeight}
330346
style={[styles.singleLine, {fontWeight}]}
347+
testID={'textinput-weight-' + fontWeight}
331348
/>
332349
))}
333350
</View>
@@ -341,6 +358,7 @@ const examples: Array<RNTesterModuleExample> = [
341358
<TextInput
342359
placeholder="If you set height, beware of padding set from themes"
343360
style={[styles.singleLineWithHeightTextInput]}
361+
testID="textinput-theme-padding"
344362
/>
345363
);
346364
},
@@ -353,18 +371,22 @@ const examples: Array<RNTesterModuleExample> = [
353371
<TextInput
354372
style={[styles.singleLine, {letterSpacing: 0}]}
355373
placeholder="letterSpacing = 0"
374+
testID="textinput-letterspacing-0"
356375
/>
357376
<TextInput
358377
style={[styles.singleLine, {letterSpacing: 2}]}
359378
placeholder="letterSpacing = 2"
379+
testID="textinput-letterspacing-2"
360380
/>
361381
<TextInput
362382
style={[styles.singleLine, {letterSpacing: 9}]}
363383
placeholder="letterSpacing = 9"
384+
testID="textinput-letterspacing-9"
364385
/>
365386
<TextInput
366387
style={[styles.singleLine, {letterSpacing: -1}]}
367388
placeholder="letterSpacing = -1"
389+
testID="textinput-letterspacing--1"
368390
/>
369391
</View>
370392
);
@@ -379,12 +401,14 @@ const examples: Array<RNTesterModuleExample> = [
379401
defaultValue="iloveturtles"
380402
secureTextEntry={true}
381403
style={styles.singleLine}
404+
testID="textinput-password"
382405
/>
383406
<TextInput
384407
secureTextEntry={true}
385408
style={[styles.singleLine, {color: 'red'}]}
386409
placeholder="color is supported too"
387410
placeholderTextColor="red"
411+
testID="textinput-password-placeholder"
388412
/>
389413
</View>
390414
);
@@ -398,6 +422,7 @@ const examples: Array<RNTesterModuleExample> = [
398422
defaultValue="Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^"
399423
editable={false}
400424
style={styles.singleLine}
425+
testID="textinput-not-editable"
401426
/>
402427
);
403428
},
@@ -416,6 +441,7 @@ const examples: Array<RNTesterModuleExample> = [
416441
styles.multiline,
417442
{textAlign: 'left', textAlignVertical: 'top'},
418443
]}
444+
testID="textinput-multiline-topleft"
419445
/>
420446
<TextInput
421447
autoCorrect={true}
@@ -426,6 +452,7 @@ const examples: Array<RNTesterModuleExample> = [
426452
styles.multiline,
427453
{textAlign: 'center', textAlignVertical: 'center'},
428454
]}
455+
testID="textinput-multiline-center"
429456
/>
430457
<TextInput
431458
autoCorrect={true}
@@ -434,7 +461,8 @@ const examples: Array<RNTesterModuleExample> = [
434461
styles.multiline,
435462
{color: 'blue'},
436463
{textAlign: 'right', textAlignVertical: 'bottom'},
437-
]}>
464+
]}
465+
testID="textinput-multiline-bottomright">
438466
<Text style={styles.multiline}>
439467
multiline with children, aligned bottom-right
440468
</Text>
@@ -452,21 +480,25 @@ const examples: Array<RNTesterModuleExample> = [
452480
placeholder="editable text input using editable prop"
453481
style={styles.default}
454482
editable
483+
testID="textinput-editable"
455484
/>
456485
<TextInput
457486
placeholder="uneditable text input using editable prop"
458487
style={styles.default}
459488
editable={false}
489+
testID="textinput-not-editable2"
460490
/>
461491
<TextInput
462492
placeholder="editable text input using readOnly prop"
463493
style={styles.default}
464494
readOnly={false}
495+
testID="textinput-readonly-false"
465496
/>
466497
<TextInput
467498
placeholder="uneditable text input using readOnly prop"
468499
style={styles.default}
469500
readOnly
501+
testID="textinput-readyonly"
470502
/>
471503
</View>
472504
);
@@ -535,21 +567,25 @@ const examples: Array<RNTesterModuleExample> = [
535567
autoComplete="country"
536568
placeholder="country"
537569
style={styles.default}
570+
testID="textinput-autocomplete-country"
538571
/>
539572
<TextInput
540573
autoComplete="postal-address-country"
541574
placeholder="postal-address-country"
542575
style={styles.default}
576+
testID="textinput-autocomplete-address-country"
543577
/>
544578
<TextInput
545579
autoComplete="one-time-code"
546580
placeholder="one-time-code"
547581
style={styles.default}
582+
testID="textinput-autocomplete-one-time-code"
548583
/>
549584
<TextInput
550585
autoComplete="sms-otp"
551586
placeholder="sms-otp"
552587
style={styles.default}
588+
testID="textinput-autocomplete-sms-otp"
553589
/>
554590
</View>
555591
);
@@ -575,6 +611,7 @@ const examples: Array<RNTesterModuleExample> = [
575611
returnKeyType={type}
576612
placeholder={'returnKeyType: ' + type}
577613
style={styles.singleLine}
614+
testID={'textinput-return-' + type}
578615
/>
579616
);
580617
});
@@ -585,6 +622,7 @@ const examples: Array<RNTesterModuleExample> = [
585622
returnKeyLabel={type}
586623
placeholder={'returnKeyLabel: ' + type}
587624
style={styles.singleLine}
625+
testID={'textinput-return-' + type}
588626
/>
589627
);
590628
});
@@ -605,16 +643,19 @@ const examples: Array<RNTesterModuleExample> = [
605643
inlineImageLeft="ic_menu_black_24dp"
606644
placeholder="This has drawableLeft set"
607645
style={styles.singleLine}
646+
testID="textinput-inline-images"
608647
/>
609648
<TextInput
610649
inlineImageLeft="ic_menu_black_24dp"
611650
inlineImagePadding={30}
612651
placeholder="This has drawableLeft and drawablePadding set"
613652
style={styles.singleLine}
653+
testID="textinput-inline-images-2"
614654
/>
615655
<TextInput
616656
placeholder="This does not have drawable props set"
617657
style={styles.singleLine}
658+
testID="textinput-inline-images-3"
618659
/>
619660
</View>
620661
);
@@ -639,26 +680,33 @@ const examples: Array<RNTesterModuleExample> = [
639680
return (
640681
<View>
641682
<Text>Default submit key (Enter):</Text>
642-
<TextInput clearTextOnSubmit style={styles.singleLine} />
683+
<TextInput
684+
clearTextOnSubmit
685+
style={styles.singleLine}
686+
testID="textinput-clear-on-submit"
687+
/>
643688
<Text>Custom submit key event (Shift + Enter), single-line:</Text>
644689
<TextInput
645690
clearTextOnSubmit
646691
style={styles.singleLine}
647692
submitKeyEvents={[{code: 'Enter', shiftKey: true}]}
693+
testID="textinput-clear-on-submit-2"
648694
/>
649695
<Text>Custom submit key event (Shift + Enter), multi-line:</Text>
650696
<TextInput
651697
multiline
652698
clearTextOnSubmit
653699
style={styles.multiline}
654700
submitKeyEvents={[{code: 'Enter', shiftKey: true}]}
701+
testID="textinput-clear-on-submit-3"
655702
/>
656703
<Text>Submit with Enter key, return key with Shift + Enter</Text>
657704
<TextInput
658705
multiline
659706
clearTextOnSubmit
660707
style={styles.multiline}
661708
submitKeyEvents={[{code: 'Enter'}]}
709+
testID="textinput-clear-on-submit-4"
662710
/>
663711
</View>
664712
);

0 commit comments

Comments
 (0)