@@ -35,7 +35,10 @@ class ToggleDefaultPaddingExample extends React.Component<
35
35
render ( ) : React . Node {
36
36
return (
37
37
< 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
+ />
39
42
< Text
40
43
onPress = { ( ) => this . setState ( { hasPadding : ! this . state . hasPadding } ) } >
41
44
Toggle padding
@@ -122,6 +125,7 @@ class AutogrowingTextInputExample extends React.Component<{...}> {
122
125
this . setState ( { contentSize : event . nativeEvent . contentSize } )
123
126
}
124
127
{ ...props }
128
+ testID = "textinput-autogrow"
125
129
/>
126
130
< Text > Plain text value representation:</ Text >
127
131
{ /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
@@ -154,6 +158,7 @@ class PressInOutEvents extends React.Component<
154
158
this . setState ( { text : 'Holding down the click/touch' } )
155
159
}
156
160
onPressOut = { ( ) => this . setState ( { text : 'Released click/touch' } ) }
161
+ testID = "textinput-press"
157
162
/>
158
163
</ View >
159
164
) ;
@@ -197,6 +202,7 @@ function PropagationSample() {
197
202
{ code : 'KeyW' , handledEventPhase : 3 } ,
198
203
{ code : 'KeyE' , handledEventPhase : 1 } ,
199
204
] }
205
+ testID = "textinput-propagation"
200
206
/>
201
207
</ View >
202
208
< View style = { styles . eventLogBox } >
@@ -225,6 +231,7 @@ function SpellCheckSample() {
225
231
placeholder = "Type text to test spell check functionality."
226
232
style = { [ styles . singleLineWithHeightTextInput ] }
227
233
spellCheck = { spellCheckEnabled }
234
+ testID = "textinput-spellcheck"
228
235
/>
229
236
</ >
230
237
) ;
@@ -260,35 +267,42 @@ const examples: Array<RNTesterModuleExample> = [
260
267
< TextInput
261
268
style = { [ styles . singleLine ] }
262
269
defaultValue = "Default color text"
270
+ testID = "textinput-default-color"
263
271
/>
264
272
< TextInput
265
273
style = { [ styles . singleLine , { color : 'green' } ] }
266
274
defaultValue = "Green Text"
275
+ testID = "textinput-custom-color"
267
276
/>
268
277
< TextInput
269
278
placeholder = "Default placeholder text color"
270
279
style = { styles . singleLine }
280
+ testID = "textinput-default-placeholder-color"
271
281
/>
272
282
< TextInput
273
283
placeholder = "Red placeholder text color"
274
284
placeholderTextColor = "red"
275
285
style = { styles . singleLine }
286
+ testID = "textinput-custom-placeholder-color"
276
287
/>
277
288
< TextInput
278
289
placeholder = "Default underline color"
279
290
style = { styles . singleLine }
291
+ testID = "textinput-default-underline-color"
280
292
/>
281
293
< TextInput
282
294
placeholder = "Blue underline color"
283
295
style = { styles . singleLine }
284
296
underlineColorAndroid = "blue"
297
+ testID = "textinput-custom-underline-color"
285
298
/>
286
299
< TextInput
287
300
defaultValue = "Same BackgroundColor as View "
288
301
style = { [
289
302
styles . singleLine ,
290
303
{ backgroundColor : 'rgba(100, 100, 100, 0.3)' } ,
291
- ] } >
304
+ ] }
305
+ testID = "textinput-custom-background-color" >
292
306
< Text style = { { backgroundColor : 'rgba(100, 100, 100, 0.3)' } } >
293
307
Darker backgroundColor
294
308
</ Text >
@@ -297,6 +311,7 @@ const examples: Array<RNTesterModuleExample> = [
297
311
defaultValue = "Highlight Color is red"
298
312
selectionColor = { 'red' }
299
313
style = { styles . singleLine }
314
+ testID = "textinput-custom-highlight-color"
300
315
/>
301
316
</ View >
302
317
) ;
@@ -310,6 +325,7 @@ const examples: Array<RNTesterModuleExample> = [
310
325
< TextInput
311
326
defaultValue = "Font Weight (default)"
312
327
style = { [ styles . singleLine ] }
328
+ testID = "textinput-weight-default"
313
329
/>
314
330
{ [
315
331
'normal' ,
@@ -328,6 +344,7 @@ const examples: Array<RNTesterModuleExample> = [
328
344
defaultValue = { `Font Weight (${ fontWeight } )` }
329
345
key = { fontWeight }
330
346
style = { [ styles . singleLine , { fontWeight} ] }
347
+ testID = { 'textinput-weight-' + fontWeight }
331
348
/>
332
349
) ) }
333
350
</ View >
@@ -341,6 +358,7 @@ const examples: Array<RNTesterModuleExample> = [
341
358
< TextInput
342
359
placeholder = "If you set height, beware of padding set from themes"
343
360
style = { [ styles . singleLineWithHeightTextInput ] }
361
+ testID = "textinput-theme-padding"
344
362
/>
345
363
) ;
346
364
} ,
@@ -353,18 +371,22 @@ const examples: Array<RNTesterModuleExample> = [
353
371
< TextInput
354
372
style = { [ styles . singleLine , { letterSpacing : 0 } ] }
355
373
placeholder = "letterSpacing = 0"
374
+ testID = "textinput-letterspacing-0"
356
375
/>
357
376
< TextInput
358
377
style = { [ styles . singleLine , { letterSpacing : 2 } ] }
359
378
placeholder = "letterSpacing = 2"
379
+ testID = "textinput-letterspacing-2"
360
380
/>
361
381
< TextInput
362
382
style = { [ styles . singleLine , { letterSpacing : 9 } ] }
363
383
placeholder = "letterSpacing = 9"
384
+ testID = "textinput-letterspacing-9"
364
385
/>
365
386
< TextInput
366
387
style = { [ styles . singleLine , { letterSpacing : - 1 } ] }
367
388
placeholder = "letterSpacing = -1"
389
+ testID = "textinput-letterspacing--1"
368
390
/>
369
391
</ View >
370
392
) ;
@@ -379,12 +401,14 @@ const examples: Array<RNTesterModuleExample> = [
379
401
defaultValue = "iloveturtles"
380
402
secureTextEntry = { true }
381
403
style = { styles . singleLine }
404
+ testID = "textinput-password"
382
405
/>
383
406
< TextInput
384
407
secureTextEntry = { true }
385
408
style = { [ styles . singleLine , { color : 'red' } ] }
386
409
placeholder = "color is supported too"
387
410
placeholderTextColor = "red"
411
+ testID = "textinput-password-placeholder"
388
412
/>
389
413
</ View >
390
414
) ;
@@ -398,6 +422,7 @@ const examples: Array<RNTesterModuleExample> = [
398
422
defaultValue = "Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^"
399
423
editable = { false }
400
424
style = { styles . singleLine }
425
+ testID = "textinput-not-editable"
401
426
/>
402
427
) ;
403
428
} ,
@@ -416,6 +441,7 @@ const examples: Array<RNTesterModuleExample> = [
416
441
styles . multiline ,
417
442
{ textAlign : 'left' , textAlignVertical : 'top' } ,
418
443
] }
444
+ testID = "textinput-multiline-topleft"
419
445
/>
420
446
< TextInput
421
447
autoCorrect = { true }
@@ -426,6 +452,7 @@ const examples: Array<RNTesterModuleExample> = [
426
452
styles . multiline ,
427
453
{ textAlign : 'center' , textAlignVertical : 'center' } ,
428
454
] }
455
+ testID = "textinput-multiline-center"
429
456
/>
430
457
< TextInput
431
458
autoCorrect = { true }
@@ -434,7 +461,8 @@ const examples: Array<RNTesterModuleExample> = [
434
461
styles . multiline ,
435
462
{ color : 'blue' } ,
436
463
{ textAlign : 'right' , textAlignVertical : 'bottom' } ,
437
- ] } >
464
+ ] }
465
+ testID = "textinput-multiline-bottomright" >
438
466
< Text style = { styles . multiline } >
439
467
multiline with children, aligned bottom-right
440
468
</ Text >
@@ -452,21 +480,25 @@ const examples: Array<RNTesterModuleExample> = [
452
480
placeholder = "editable text input using editable prop"
453
481
style = { styles . default }
454
482
editable
483
+ testID = "textinput-editable"
455
484
/>
456
485
< TextInput
457
486
placeholder = "uneditable text input using editable prop"
458
487
style = { styles . default }
459
488
editable = { false }
489
+ testID = "textinput-not-editable2"
460
490
/>
461
491
< TextInput
462
492
placeholder = "editable text input using readOnly prop"
463
493
style = { styles . default }
464
494
readOnly = { false }
495
+ testID = "textinput-readonly-false"
465
496
/>
466
497
< TextInput
467
498
placeholder = "uneditable text input using readOnly prop"
468
499
style = { styles . default }
469
500
readOnly
501
+ testID = "textinput-readyonly"
470
502
/>
471
503
</ View >
472
504
) ;
@@ -535,21 +567,25 @@ const examples: Array<RNTesterModuleExample> = [
535
567
autoComplete = "country"
536
568
placeholder = "country"
537
569
style = { styles . default }
570
+ testID = "textinput-autocomplete-country"
538
571
/>
539
572
< TextInput
540
573
autoComplete = "postal-address-country"
541
574
placeholder = "postal-address-country"
542
575
style = { styles . default }
576
+ testID = "textinput-autocomplete-address-country"
543
577
/>
544
578
< TextInput
545
579
autoComplete = "one-time-code"
546
580
placeholder = "one-time-code"
547
581
style = { styles . default }
582
+ testID = "textinput-autocomplete-one-time-code"
548
583
/>
549
584
< TextInput
550
585
autoComplete = "sms-otp"
551
586
placeholder = "sms-otp"
552
587
style = { styles . default }
588
+ testID = "textinput-autocomplete-sms-otp"
553
589
/>
554
590
</ View >
555
591
) ;
@@ -575,6 +611,7 @@ const examples: Array<RNTesterModuleExample> = [
575
611
returnKeyType = { type }
576
612
placeholder = { 'returnKeyType: ' + type }
577
613
style = { styles . singleLine }
614
+ testID = { 'textinput-return-' + type }
578
615
/>
579
616
) ;
580
617
} ) ;
@@ -585,6 +622,7 @@ const examples: Array<RNTesterModuleExample> = [
585
622
returnKeyLabel = { type }
586
623
placeholder = { 'returnKeyLabel: ' + type }
587
624
style = { styles . singleLine }
625
+ testID = { 'textinput-return-' + type }
588
626
/>
589
627
) ;
590
628
} ) ;
@@ -605,16 +643,19 @@ const examples: Array<RNTesterModuleExample> = [
605
643
inlineImageLeft = "ic_menu_black_24dp"
606
644
placeholder = "This has drawableLeft set"
607
645
style = { styles . singleLine }
646
+ testID = "textinput-inline-images"
608
647
/>
609
648
< TextInput
610
649
inlineImageLeft = "ic_menu_black_24dp"
611
650
inlineImagePadding = { 30 }
612
651
placeholder = "This has drawableLeft and drawablePadding set"
613
652
style = { styles . singleLine }
653
+ testID = "textinput-inline-images-2"
614
654
/>
615
655
< TextInput
616
656
placeholder = "This does not have drawable props set"
617
657
style = { styles . singleLine }
658
+ testID = "textinput-inline-images-3"
618
659
/>
619
660
</ View >
620
661
) ;
@@ -639,26 +680,33 @@ const examples: Array<RNTesterModuleExample> = [
639
680
return (
640
681
< View >
641
682
< 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
+ />
643
688
< Text > Custom submit key event (Shift + Enter), single-line:</ Text >
644
689
< TextInput
645
690
clearTextOnSubmit
646
691
style = { styles . singleLine }
647
692
submitKeyEvents = { [ { code : 'Enter' , shiftKey : true } ] }
693
+ testID = "textinput-clear-on-submit-2"
648
694
/>
649
695
< Text > Custom submit key event (Shift + Enter), multi-line:</ Text >
650
696
< TextInput
651
697
multiline
652
698
clearTextOnSubmit
653
699
style = { styles . multiline }
654
700
submitKeyEvents = { [ { code : 'Enter' , shiftKey : true } ] }
701
+ testID = "textinput-clear-on-submit-3"
655
702
/>
656
703
< Text > Submit with Enter key, return key with Shift + Enter</ Text >
657
704
< TextInput
658
705
multiline
659
706
clearTextOnSubmit
660
707
style = { styles . multiline }
661
708
submitKeyEvents = { [ { code : 'Enter' } ] }
709
+ testID = "textinput-clear-on-submit-4"
662
710
/>
663
711
</ View >
664
712
) ;
0 commit comments