Add test for background color and border width in text.yml (#46829)

Summary:
Part of this: #46757
Solves:

- ME2E0017
- ME2E0018

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[ Internal ] [ Added ] - Add e2e test for button

Pull Request resolved: #46829

Test Plan:
yarn e2e-test-ios
yarn e2e-test-android

Reviewed By: rshest

Differential Revision: D63889079

Pulled By: cipolleschi

fbshipit-source-id: ca2ede3142d77170fcb4121b025eab56818ffb07

packages/rn-tester/.maestro/text.yml

@@ -0,0 +1,22 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+- launchApp
+- assertVisible: "Components"
+- scrollUntilVisible:
+ element:
+ id: "Text"
+ direction: DOWN
+ speed: 60
+- tapOn:
+ id: "Text"
+- scrollUntilVisible:
+ element:
+ id: "background-border-width"
+ direction: DOWN
+ speed: 10
+ visibilityPercentage: 100
+- assertVisible: "Text with background color only"
+- assertVisible: "Text with background color and uniform borderRadii"
+- assertVisible: "Text with background color and non-uniform borders"
+- assertVisible: "Text with borderWidth"
+- assertVisible: "Text with background AND borderWidth"

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

@@ -1034,6 +1034,68 @@ function TextBaseLineLayoutExample(props: {}): React.Node {
 }
 
 const examples = [
+ {
+ title: 'Background Color and Border Width',
+ name: 'background-border-width',
+ render(): React.Node {
+ return (
+ <View testID="background-border-width">
+ <Text
+ style={{
+ backgroundColor: '#F000F0',
+ padding: 10,
+ }}>
+ Text with background color only
+ </Text>
+ <Text
+ style={{
+ backgroundColor: '#F000F0',
+ borderRadius: 10,
+ padding: 10,
+ marginTop: 10,
+ }}>
+ Text with background color and uniform borderRadii
+ </Text>
+ <Text
+ style={{
+ backgroundColor: '#F000F0',
+ borderTopRightRadius: 10,
+ borderTopLeftRadius: 20,
+ borderBottomRightRadius: 20,
+ borderBottomLeftRadius: 10,
+ padding: 10,
+ marginTop: 10,
+ }}>
+ Text with background color and non-uniform borders
+ </Text>
+ <Text
+ style={{
+ borderWidth: 1,
+ borderColor: 'red',
+ borderTopRightRadius: 10,
+ borderTopLeftRadius: 20,
+ borderBottomRightRadius: 20,
+ borderBottomLeftRadius: 10,
+ padding: 10,
+ marginTop: 10,
+ }}>
+ Text with borderWidth
+ </Text>
+ <Text
+ style={{
+ backgroundColor: '#00AA00',
+ borderWidth: 2,
+ borderColor: 'blue',
+ borderRadius: 10,
+ padding: 10,
+ marginTop: 10,
+ }}>
+ Text with background AND borderWidth
+ </Text>
+ </View>
+ );
+ },
+ },
  {
  title: 'Dynamic Font Size Adjustment',
  name: 'ajustingFontSize',