Skip to content

Commit b53b228

Browse files
NickGerlemanmeta-codesync[bot]
NickGerleman
authored and
meta-codesync[bot]
committed
Add E2E tests for Text visual examples (batch 1) (#55962)
Summary: Pull Request resolved: #55962 Add screenshot E2E tests for 10 Text examples that previously lacked E2E coverage: fontFamily, fontWeight, fontStyle, fontSize, color, textDecoration, nested, letterSpacing, textShadow, and ellipsizeMode. - Added `name` and `testID` to each example in TextExample.ios.js - Added matching `name` and `testID` to each example in TextExample.android.js - Created 10 E2E test files, one per example Reviewed By: cortinico Differential Revision: D95366459 fbshipit-source-id: a7468bf7198755d556844d3964811856a18031f4
1 parent b172f46 commit b53b228

File tree

2 files changed

+39
-29
lines changed

2 files changed

+39
-29
lines changed

‎packages/rn-tester/js/examples/Text/TextExample.android.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,7 @@ function FontVariantsExample(props: {}): React.Node {
405405

406406
function EllipsizeModeExample(props: {}): React.Node {
407407
return (
408-
<>
408+
<View testID="text-ellipsize-mode">
409409
<RNTesterText numberOfLines={1} style={styles.wrappedText}>
410410
This very long text should be truncated with dots in the end.
411411
</RNTesterText>
@@ -427,13 +427,13 @@ function EllipsizeModeExample(props: {}): React.Node {
427427
style={styles.wrappedText}>
428428
This very long text should be clipped and this will not be visible.
429429
</RNTesterText>
430-
</>
430+
</View>
431431
);
432432
}
433433

434434
function FontFamilyExample(props: {}): React.Node {
435435
return (
436-
<>
436+
<View testID="text-font-family">
437437
<RNTesterText style={{fontFamily: 'sans-serif'}}>Sans-Serif</RNTesterText>
438438
<RNTesterText style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
439439
Sans-Serif Bold
@@ -449,13 +449,13 @@ function FontFamilyExample(props: {}): React.Node {
449449
<RNTesterText style={{fontFamily: 'Unknown Font Family'}}>
450450
Unknown Font Family
451451
</RNTesterText>
452-
</>
452+
</View>
453453
);
454454
}
455455

456456
function TextShadowExample(props: {}): React.Node {
457457
return (
458-
<>
458+
<View testID="text-text-shadow">
459459
<RNTesterText
460460
style={{
461461
fontSize: 20,
@@ -465,7 +465,7 @@ function TextShadowExample(props: {}): React.Node {
465465
}}>
466466
Demo text shadow
467467
</RNTesterText>
468-
</>
468+
</View>
469469
);
470470
}
471471

@@ -588,7 +588,7 @@ function HyphenationExample(props: {}): React.Node {
588588

589589
function FontWeightExample(props: {}): React.Node {
590590
return (
591-
<>
591+
<View testID="text-font-weight">
592592
<RNTesterText style={{fontWeight: 'bold'}}>
593593
Move fast and be bold
594594
</RNTesterText>
@@ -613,7 +613,7 @@ function FontWeightExample(props: {}): React.Node {
613613
<RNTesterText style={{fontWeight: 300}}>FONT WEIGHT 300</RNTesterText>
614614
<RNTesterText style={{fontWeight: 200}}>FONT WEIGHT 200</RNTesterText>
615615
<RNTesterText style={{fontWeight: 100}}>FONT WEIGHT 100</RNTesterText>
616-
</>
616+
</View>
617617
);
618618
}
619619

@@ -671,7 +671,7 @@ function ContainerBackgroundColorExample(props: {}): React.Node {
671671

672672
function TextDecorationExample(props: {}): React.Node {
673673
return (
674-
<>
674+
<View testID="text-text-decoration">
675675
<RNTesterText style={{textDecorationLine: 'underline'}}>
676676
Solid underline
677677
</RNTesterText>
@@ -699,13 +699,13 @@ function TextDecorationExample(props: {}): React.Node {
699699
</RNTesterText>{' '}
700700
text nodes
701701
</RNTesterText>
702-
</>
702+
</View>
703703
);
704704
}
705705

706706
function NestedExample(props: {}): React.Node {
707707
return (
708-
<>
708+
<View testID="text-test-nested">
709709
<RNTesterText onPress={() => console.log('1st')}>
710710
(Normal text,
711711
<Text style={{color: 'red', fontWeight: 'bold'}}>
@@ -807,7 +807,7 @@ function NestedExample(props: {}): React.Node {
807807
</RNTesterText>
808808
)
809809
</RNTesterText>
810-
</>
810+
</View>
811811
);
812812
}
813813

@@ -1070,7 +1070,7 @@ function LineHeightExample(props: {}): React.Node {
10701070
function LetterSpacingExample(props: {}): React.Node {
10711071
return (
10721072
<>
1073-
<View>
1073+
<View testID="text-letter-spacing">
10741074
<RNTesterText style={{letterSpacing: 0}}>
10751075
letterSpacing = 0
10761076
</RNTesterText>
@@ -1380,10 +1380,10 @@ const examples = [
13801380
name: 'fontSize',
13811381
render(): React.Node {
13821382
return (
1383-
<>
1383+
<View testID="text-font-size">
13841384
<RNTesterText style={{fontSize: 23}}>Size 23</RNTesterText>
13851385
<RNTesterText style={{fontSize: 8}}>Size 8</RNTesterText>
1386-
</>
1386+
</View>
13871387
);
13881388
},
13891389
},
@@ -1392,10 +1392,10 @@ const examples = [
13921392
name: 'color',
13931393
render(): React.Node {
13941394
return (
1395-
<>
1395+
<View testID="text-test-color">
13961396
<Text style={{color: 'red'}}>Red color</Text>
13971397
<Text style={{color: 'blue'}}>Blue color</Text>
1398-
</>
1398+
</View>
13991399
);
14001400
},
14011401
},
@@ -1411,7 +1411,7 @@ const examples = [
14111411
name: 'fontStyle',
14121412
render(): React.Node {
14131413
return (
1414-
<>
1414+
<View testID="text-font-style">
14151415
<RNTesterText style={{fontStyle: 'italic'}}>
14161416
Move fast and be italic
14171417
</RNTesterText>
@@ -1422,7 +1422,7 @@ const examples = [
14221422
Move fast and be italic, but just be longer so that you don't fit on
14231423
a single line and make sure text is not truncated.
14241424
</RNTesterText>
1425-
</>
1425+
</View>
14261426
);
14271427
},
14281428
},

‎packages/rn-tester/js/examples/Text/TextExample.ios.js‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -721,9 +721,10 @@ const examples = [
721721
},
722722
{
723723
title: 'Font Family',
724+
name: 'fontFamily',
724725
render: function (): React.Node {
725726
return (
726-
<View>
727+
<View testID="text-font-family">
727728
<Text style={{fontFamily: Platform.isTV ? 'Times' : 'Cochin'}}>
728729
Cochin
729730
</Text>
@@ -758,9 +759,10 @@ const examples = [
758759
},
759760
{
760761
title: 'Font Size',
762+
name: 'fontSize',
761763
render: function (): React.Node {
762764
return (
763-
<View>
765+
<View testID="text-font-size">
764766
<Text style={{fontSize: 23}}>Size 23</Text>
765767
<Text style={{fontSize: 8}}>Size 8</Text>
766768
</View>
@@ -769,9 +771,10 @@ const examples = [
769771
},
770772
{
771773
title: 'Color',
774+
name: 'color',
772775
render: function (): React.Node {
773776
return (
774-
<View>
777+
<View testID="text-test-color">
775778
<Text style={{color: 'red'}}>Red color</Text>
776779
<Text style={{color: 'blue'}}>Blue color</Text>
777780
</View>
@@ -780,9 +783,10 @@ const examples = [
780783
},
781784
{
782785
title: 'Font Weight',
786+
name: 'fontWeight',
783787
render: function (): React.Node {
784788
return (
785-
<View>
789+
<View testID="text-font-weight">
786790
<Text style={{fontWeight: 'bold'}}>Move fast and be bold</Text>
787791
<Text style={{fontWeight: 'normal'}}>Move fast and be normal</Text>
788792
<Text style={{fontWeight: '900'}}>FONT WEIGHT 900</Text>
@@ -809,9 +813,10 @@ const examples = [
809813
},
810814
{
811815
title: 'Font Style',
816+
name: 'fontStyle',
812817
render: function (): React.Node {
813818
return (
814-
<View>
819+
<View testID="text-font-style">
815820
<Text style={{fontStyle: 'normal'}}>Normal text</Text>
816821
<Text style={{fontStyle: 'italic'}}>Italic text</Text>
817822
</View>
@@ -833,9 +838,10 @@ const examples = [
833838
},
834839
{
835840
title: 'Text Decoration',
841+
name: 'textDecoration',
836842
render: function (): React.Node {
837843
return (
838-
<View>
844+
<View testID="text-text-decoration">
839845
<Text
840846
style={{
841847
textDecorationLine: 'underline',
@@ -908,12 +914,13 @@ const examples = [
908914
},
909915
{
910916
title: 'Nested',
917+
name: 'nested',
911918
description: ('Nested text components will inherit the styles of their ' +
912919
'parents (only backgroundColor is inherited from non-Text parents). ' +
913920
'<Text> only supports other <Text> and raw text (strings) as children.': string),
914921
render: function (): React.Node {
915922
return (
916-
<View>
923+
<View testID="text-test-nested">
917924
<Text>
918925
(Normal text,
919926
<Text style={{fontWeight: 'bold'}}>
@@ -981,9 +988,10 @@ const examples = [
981988
},
982989
{
983990
title: 'Letter Spacing',
991+
name: 'letterSpacing',
984992
render: function (): React.Node {
985993
return (
986-
<View>
994+
<View testID="text-letter-spacing">
987995
<Text style={{letterSpacing: 0}}>letterSpacing = 0</Text>
988996
<Text style={{letterSpacing: 2, marginTop: 5}}>
989997
letterSpacing = 2
@@ -1240,9 +1248,10 @@ const examples = [
12401248
},
12411249
{
12421250
title: 'Text shadow',
1251+
name: 'textShadow',
12431252
render: function (): React.Node {
12441253
return (
1245-
<View>
1254+
<View testID="text-text-shadow">
12461255
<Text
12471256
style={{
12481257
fontSize: 20,
@@ -1258,9 +1267,10 @@ const examples = [
12581267
},
12591268
{
12601269
title: 'Ellipsize mode',
1270+
name: 'ellipsizeMode',
12611271
render: function (): React.Node {
12621272
return (
1263-
<View>
1273+
<View testID="text-ellipsize-mode">
12641274
<Text numberOfLines={1}>
12651275
This very long text should be truncated with dots in the end.
12661276
</Text>

0 commit comments

Comments
 (0)