Skip to content

Add Text component RNTester page treedump tests. #7735

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
rectified95 merged 2 commits into from
May 14, 2021
Merged

Add Text component RNTester page treedump tests. #7735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4f6527
Add Text component treedump test.
May 5, 2021
dadad1d
Make dumps more fine-grained.
May 6, 2021
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
110 changes: 0 additions & 110 deletions ...act-native-windows/tester/src/js/examples-win/LegacyTests/TextBackgroundColorTestPage.tsx
View file
Open in desktop

This file was deleted.

152 changes: 87 additions & 65 deletions packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export class AttributeToggler extends React.Component<
export class BackgroundColorDemo extends React.Component<{}> {
public render() {
return (
<View>
<View testID={'text-background-color'}>
<Text style={{color: 'pink'}}>Outer pink</Text>
<Text style={{}}>
Outer <Text style={{color: 'red'}}>red nested</Text>
Expand Down Expand Up @@ -183,7 +183,7 @@ export class TextExample extends React.Component<
return (
<RNTesterPage>
<RNTesterBlock title="textTransform">
<View>
<View testID={'text-transform'}>
<Text style={{textTransform: 'uppercase'}}>
<Text>This</Text> text should be uppercased.
</Text>
Expand Down Expand Up @@ -256,19 +256,21 @@ export class TextExample extends React.Component<
</View>
</RNTesterBlock>
<RNTesterBlock title="Wrap">
<Text>
<Text testID={'text-wrap'}>
The text should wrap if it goes on multiple lines. See, this is
going to the next line. {lorumIpsum}
</Text>
</RNTesterBlock>
<RNTesterBlock title="Padding">
<Text style={{padding: 10}}>
<Text style={{padding: 10}} testID={'text-padding'}>
This text is indented by 10px padding on all sides.
</Text>
</RNTesterBlock>
<RNTesterBlock title="Font Family">
<Text style={{fontFamily: 'sans-serif'}}>Sans-Serif</Text>
<Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
<Text
style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}
testID={'text-font-family'}>
Sans-Serif Bold
</Text>
<Text style={{fontFamily: 'serif'}}>Serif</Text>
Expand Down Expand Up @@ -365,11 +367,15 @@ export class TextExample extends React.Component<
</RNTesterBlock>

<RNTesterBlock title="Font Size">
<Text style={{fontSize: 23}}>Size 23</Text>
<Text style={{fontSize: 23}} testID={'text-size'}>
Size 23
</Text>
<Text style={{fontSize: 8}}>Size 8</Text>
</RNTesterBlock>
<RNTesterBlock title="Color">
<Text style={{color: 'red'}}>Red color</Text>
<Text style={{color: 'red'}} testID={'text-color'}>
Red color
</Text>
<Text style={{color: 'blue'}}>Blue color</Text>
</RNTesterBlock>
<RNTesterBlock title="Font Weight">
Expand All @@ -386,13 +392,18 @@ export class TextExample extends React.Component<
</Text>
</RNTesterBlock>
<RNTesterBlock title="Text Decoration">
<Text style={{textDecorationLine: 'underline'}}>Solid underline</Text>
<Text
style={{textDecorationLine: 'underline'}}
testID={'text-decoration-underline'}>
Solid underline
</Text>
<Text style={{textDecorationLine: 'none'}}>None textDecoration</Text>
<Text
style={{
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
}}>
}}
testID={'text-decoration-solid-linethru'}>
Solid line-through
</Text>
<Text style={{textDecorationLine: 'underline line-through'}}>
Expand All @@ -408,7 +419,7 @@ export class TextExample extends React.Component<
</Text>
</RNTesterBlock>
<RNTesterBlock title="Nested">
<Text onPress={() => console.log('1st')}>
<Text onPress={() => console.log('1st')} testID={'text-outer-color'}>
(Normal text,
<Text style={{color: 'red', fontWeight: 'bold'}}>
(R)red
Expand Down Expand Up @@ -488,23 +499,25 @@ export class TextExample extends React.Component<
</Text>
</RNTesterBlock>
<RNTesterBlock title="Text Align">
<Text>auto (default) - english LTR</Text>
<Text>أحب اللغة العربية auto (default) - arabic RTL</Text>
<Text style={{textAlign: 'left'}}>
left left left left left left left left left left left left left
left left
</Text>
<Text style={{textAlign: 'center'}}>
center center center center center center center center center
center center
</Text>
<Text style={{textAlign: 'right'}}>
right right right right right right right right right right right
right right
</Text>
<View testID={'text-align'}>
<Text>auto (default) - english LTR</Text>
<Text>أحب اللغة العربية auto (default) - arabic RTL</Text>
<Text style={{textAlign: 'left'}}>
left left left left left left left left left left left left left
left left
</Text>
<Text style={{textAlign: 'center'}}>
center center center center center center center center center
center center
</Text>
<Text style={{textAlign: 'right'}}>
right right right right right right right right right right right
right right
</Text>
</View>
</RNTesterBlock>
<RNTesterBlock title="Unicode">
<View>
<View testID={'text-unicode'}>
<View style={{flexDirection: 'row'}}>
<Text style={{backgroundColor: 'red'}}>
星际争霸是世界上最好的游戏。
Expand Down Expand Up @@ -533,19 +546,21 @@ export class TextExample extends React.Component<
</Text>
</RNTesterBlock>
<RNTesterBlock title="Line Height">
<Text style={{lineHeight: 35}}>
Holisticly formulate inexpensive ideas before best-of-breed
benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite
magnetic potentialities rather than client-focused interfaces.
</Text>
<Text style={{lineHeight: 15}}>
Holisticly formulate inexpensive ideas before best-of-breed
benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite
magnetic potentialities rather than client-focused interfaces.
</Text>
<View testID={'text-line-height'}>
<Text style={{lineHeight: 35}}>
Holisticly formulate inexpensive ideas before best-of-breed
benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite
magnetic potentialities rather than client-focused interfaces.
</Text>
<Text style={{lineHeight: 15}}>
Holisticly formulate inexpensive ideas before best-of-breed
benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite
magnetic potentialities rather than client-focused interfaces.
</Text>
</View>
</RNTesterBlock>
<RNTesterBlock title="Letter Spacing">
<View>
<View testID={'text-letter-spacing'}>
<Text style={{letterSpacing: 0}}>letterSpacing = 0</Text>
<Text style={{letterSpacing: 2, marginTop: 5}}>
letterSpacing = 2
Expand Down Expand Up @@ -638,7 +653,7 @@ export class TextExample extends React.Component<
</RNTesterBlock>
<RNTesterBlock title="numberOfLines attribute">
<Text style={{marginTop: 0, fontStyle: 'italic'}}>1</Text>
<Text numberOfLines={1}>
<Text numberOfLines={1} testID={'text-one-line'}>
Maximum of one line no matter now much I write here. If I keep
writing it{"'"}ll just truncate after one line. {lorumIpsum}
</Text>
Expand All @@ -658,13 +673,16 @@ export class TextExample extends React.Component<
</Text>
</RNTesterBlock>
<RNTesterBlock title="selectable attribute">
<Text selectable>
<Text selectable testID={'text-selectable'}>
This text is selectable if you click-and-hold, and will offer the
native Android selection menus.
</Text>
</RNTesterBlock>
<RNTesterBlock title="selectionColor attribute">
<Text selectable selectionColor="orange">
<Text
selectable
selectionColor="orange"
testID={'text-selection-color'}>
This text will have a orange highlight on selection.
</Text>
</RNTesterBlock>
Expand All @@ -683,44 +701,48 @@ export class TextExample extends React.Component<
textShadowOffset: {width: 2, height: 2},
textShadowRadius: 1,
textShadowColor: '#00cccc',
}}>
}}
testID={'text-shadow'}>
Demo text shadow
</Text>
</RNTesterBlock>
<RNTesterBlock title="Ellipsize mode">
<Text style={{marginTop: 0, fontStyle: 'italic'}}>
(default) tail
</Text>
<Text numberOfLines={1}>
This very long text should be truncated with dots in the end.{' '}
{lorumIpsum}
</Text>
<View testID={'text-ellipsize'}>
<Text style={{marginTop: 0, fontStyle: 'italic'}}>
(default) tail
</Text>
<Text numberOfLines={1}>
This very long text should be truncated with dots in the end.{' '}
{lorumIpsum}
</Text>

<Text style={{marginTop: 20, fontStyle: 'italic'}}>middle</Text>
<Text ellipsizeMode="middle" numberOfLines={1}>
This very long text should be truncated with dots in the middle.{' '}
{lorumIpsum}
</Text>
<Text style={{marginTop: 20, fontStyle: 'italic'}}>middle</Text>
<Text ellipsizeMode="middle" numberOfLines={1}>
This very long text should be truncated with dots in the middle.{' '}
{lorumIpsum}
</Text>

<Text style={{marginTop: 20, fontStyle: 'italic'}}>head</Text>
<Text ellipsizeMode="head" numberOfLines={1}>
This very long text should be truncated with dots in the beginning.{' '}
{lorumIpsum}
</Text>
<Text style={{marginTop: 20, fontStyle: 'italic'}}>head</Text>
<Text ellipsizeMode="head" numberOfLines={1}>
This very long text should be truncated with dots in the
beginning. {lorumIpsum}
</Text>

<Text style={{marginTop: 20, fontStyle: 'italic'}}>clip</Text>
<Text ellipsizeMode="clip" numberOfLines={1}>
This very long text should be clipped and this will not be visible.{' '}
{lorumIpsum}
</Text>
<Text style={{marginTop: 20, fontStyle: 'italic'}}>clip</Text>
<Text ellipsizeMode="clip" numberOfLines={1}>
This very long text should be clipped and this will not be
visible. {lorumIpsum}
</Text>
</View>
</RNTesterBlock>
<RNTesterBlock title="Include Font Padding">
<View
style={{
flexDirection: 'row',
justifyContent: 'space-around',
marginBottom: 10,
}}>
}}
testID={'text-font-padding'}>
<View style={{alignItems: 'center'}}>
<Text style={styles.includeFontPaddingText}>Ey</Text>
<Text>Default</Text>
Expand All @@ -744,7 +766,7 @@ export class TextExample extends React.Component<
</RNTesterBlock>

<RNTesterBlock title="Text With Border">
<>
<View testID={'text-border'}>
<Text style={styles.borderedTextSimple}>
Sample bordered text with default styling.
</Text>
Expand All @@ -768,7 +790,7 @@ export class TextExample extends React.Component<
and laid out within the normal text run, so will wrap etc as
normal text.
</Text>
</>
</View>
</RNTesterBlock>
</RNTesterPage>
);
Expand Down
Loading