mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
RNTester: inline BorderExample testIDs for simpler maintenance (#41987)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/41987 Previously, the examples allow overriding the testIDs for each inner example from BorderExample.js in RNTester. However, that setup relies on another infra/abstraction to inject the testIDs properly. For simplicity, let's just make them hardcoded using the pattern `border-test-<example-name>`. Changelog: [Internal] Reviewed By: NickGerleman, mdvacca Differential Revision: D52282922 fbshipit-source-id: 8fdc3d799befddbbb9bd8e60c8a904670c035d59
This commit is contained in:
Kevin Gozali
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
a47d7c54e8
commit
f7e99e6978
@@ -211,17 +211,25 @@ export default ({
|
||||
title: 'Equal-Width / Same-Color',
|
||||
name: 'equal-width-same-color',
|
||||
description: 'borderWidth & borderColor',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border1]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-equal-width-same-color"
|
||||
style={[styles.box, styles.border1]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Equal-Width / Same-Color',
|
||||
name: 'equal-width-same-color-border-radius',
|
||||
description: 'borderWidth & borderColor & borderRadius',
|
||||
render: function ({testID}): React.Node {
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View testID={testID} style={[styles.box, styles.borderRadius]} />
|
||||
<View
|
||||
testID="border-test-equal-width-same-color-border-radius"
|
||||
style={[styles.box, styles.borderRadius]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
@@ -229,24 +237,39 @@ export default ({
|
||||
title: 'Equal-Width Borders',
|
||||
name: 'equal-width-borders',
|
||||
description: 'borderWidth & border*Color',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border2]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-equal-width-borders"
|
||||
style={[styles.box, styles.border2]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Same-Color Borders',
|
||||
name: 'same-color-borders',
|
||||
description: 'border*Width & borderColor',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border3]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-same-color-borders"
|
||||
style={[styles.box, styles.border3]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Custom Borders',
|
||||
name: 'custom-borders',
|
||||
description: 'border*Width & border*Color',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border4]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-custom-borders"
|
||||
style={[styles.box, styles.border4]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -254,8 +277,13 @@ export default ({
|
||||
name: 'custom-borders-ios-1',
|
||||
description: 'border*Width & border*Color',
|
||||
platform: 'ios',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border5]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-custom-borders-ios-1"
|
||||
style={[styles.box, styles.border5]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -263,8 +291,13 @@ export default ({
|
||||
name: 'custom-borders-ios-2',
|
||||
description: 'border*Width & border*Color',
|
||||
platform: 'ios',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border6]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-custom-borders-ios-2"
|
||||
style={[styles.box, styles.border6]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -272,9 +305,11 @@ export default ({
|
||||
name: 'custom-borders-ios-clipping',
|
||||
description: 'borderRadius & clipping',
|
||||
platform: 'ios',
|
||||
render: function ({testID}): React.Node {
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View testID={testID} style={[styles.box, styles.border7]}>
|
||||
<View
|
||||
testID="border-test-custom-borders-ios-clipping"
|
||||
style={[styles.box, styles.border7]}>
|
||||
<View style={styles.border7_inner} />
|
||||
</View>
|
||||
);
|
||||
@@ -284,9 +319,9 @@ export default ({
|
||||
title: 'Single Borders',
|
||||
name: 'single-borders',
|
||||
description: 'top, left, bottom right',
|
||||
render: function ({testID}): React.Node {
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View testID={testID} style={styles.wrapper}>
|
||||
<View testID="border-test-single-borders" style={styles.wrapper}>
|
||||
<View style={[styles.box, styles.border8, styles.border8Top]} />
|
||||
<View style={[styles.box, styles.border8, styles.border8Left]} />
|
||||
<View style={[styles.box, styles.border8, styles.border8Bottom]} />
|
||||
@@ -299,8 +334,13 @@ export default ({
|
||||
title: 'Corner Radii',
|
||||
name: 'corner-radii',
|
||||
description: 'borderTopLeftRadius & borderBottomRightRadius',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border9]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-corner-radii"
|
||||
style={[styles.box, styles.border9]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -308,48 +348,78 @@ export default ({
|
||||
name: 'corner-radii-elevation',
|
||||
description: 'borderTopLeftRadius & borderBottomRightRadius & elevation',
|
||||
platform: 'android',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border10]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-corner-radii-elevation"
|
||||
style={[styles.box, styles.border10]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CSS Trick - Triangle',
|
||||
name: 'css-trick-triangle',
|
||||
description: 'create a triangle by manipulating border colors and widths',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.border11]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-css-trick-triangle"
|
||||
style={[styles.border11]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Curved border(Left|Right|Bottom|Top)Width',
|
||||
name: 'curved-border-lrbt-width',
|
||||
description: 'Make a non-uniform width curved border',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border12]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-curved-border-lrbt-width"
|
||||
style={[styles.box, styles.border12]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Curved border(Left|Right|Bottom|Top)Color',
|
||||
name: 'curved-border-lrbt-color',
|
||||
description: 'Make a non-uniform color curved border',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border13]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-curved-border-lrbt-color"
|
||||
style={[styles.box, styles.border13]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Curved border(Top|Bottom)(Left|Right)Radius',
|
||||
name: 'curved-border-tb-lr-radius',
|
||||
description: 'Make a non-uniform radius curved border',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border14]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-curved-border-tb-lr-radius"
|
||||
style={[styles.box, styles.border14]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'System color',
|
||||
name: 'system-color',
|
||||
description: 'Using a platform color',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border15]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-system-color"
|
||||
style={[styles.box, styles.border15]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -357,8 +427,13 @@ export default ({
|
||||
name: 'dynamic-color-ios',
|
||||
description: 'Using a custom dynamic color',
|
||||
platform: 'ios',
|
||||
render: function ({testID}): React.Node {
|
||||
return <View testID={testID} style={[styles.box, styles.border16]} />;
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="border-test-dynamic-color-ios"
|
||||
style={[styles.box, styles.border16]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user