From 1989b946342177f56ace30d6f51ae8d32dc269b1 Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@meta.com>
Date: Wed, 28 Jun 2023 16:38:58 -0700
Subject: [PATCH] JestE2E: Add border screenshots (#38045)

Summary:
Changelog: [Internal] - Update some RNTester examples to allow for internal snapshot tests

Pull Request resolved: https://github.com/facebook/react-native/pull/38045

From 0.72 border breakage, adding screenshot tests for our border examples in RNTester

Reviewed By: NickGerleman

Differential Revision: D46993114

fbshipit-source-id: ff7385ce4999dc17e115a538e0af83aae19c862a
---
 .../js/examples/Border/BorderExample.js       | 277 ++++++++++--------
 packages/rn-tester/js/types/RNTesterTypes.js  |   2 +-
 .../js/utils/RNTesterList.android.js          |   2 +-
 .../rn-tester/js/utils/RNTesterList.ios.js    |   2 +-
 4 files changed, 153 insertions(+), 130 deletions(-)

diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
index 6ac3b1c7714eda..279c439cea77da 100644
--- a/packages/rn-tester/js/examples/Border/BorderExample.js
+++ b/packages/rn-tester/js/examples/Border/BorderExample.js
@@ -5,18 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
 
-const React = require('react');
-const {
+import type {RNTesterModule} from '../../types/RNTesterTypes';
+import * as React from 'react';
+
+import {
   StyleSheet,
   View,
   PlatformColor,
   Platform,
   DynamicColorIOS,
-} = require('react-native');
+} from 'react-native';
 
 const styles = StyleSheet.create({
   box: {
@@ -199,144 +202,164 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = 'Border';
-exports.category = 'UI';
-exports.description =
-  'Demonstrates some of the border styles available to Views.';
-exports.examples = [
-  {
-    title: 'Equal-Width / Same-Color',
-    description: 'borderWidth & borderColor',
-    render() {
-      return <View style={[styles.box, styles.border1]} />;
+export default ({
+  title: 'Border',
+  category: 'UI',
+  description: 'Demonstrates some of the border styles available to Views.',
+  examples: [
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Equal-Width / Same-Color',
-    description: 'borderWidth & borderColor & borderRadius',
-    render() {
-      return <View style={[styles.box, styles.borderRadius]} />;
+    {
+      title: 'Equal-Width / Same-Color',
+      name: 'equal-width-same-color-border-radius',
+      description: 'borderWidth & borderColor & borderRadius',
+      render: function ({testID}): React.Node {
+        return (
+          <View testID={testID} style={[styles.box, styles.borderRadius]} />
+        );
+      },
     },
-  },
-  {
-    title: 'Equal-Width Borders',
-    description: 'borderWidth & border*Color',
-    render() {
-      return <View style={[styles.box, styles.border2]} />;
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Same-Color Borders',
-    description: 'border*Width & borderColor',
-    render() {
-      return <View style={[styles.box, styles.border3]} />;
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Custom Borders',
-    description: 'border*Width & border*Color',
-    render() {
-      return <View style={[styles.box, styles.border4]} />;
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Custom Borders',
-    description: 'border*Width & border*Color',
-    platform: 'ios',
-    render() {
-      return <View style={[styles.box, styles.border5]} />;
+    {
+      title: 'Custom Borders',
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Custom Borders',
-    description: 'border*Width & border*Color',
-    platform: 'ios',
-    render() {
-      return <View style={[styles.box, styles.border6]} />;
+    {
+      title: 'Custom Borders',
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Custom Borders',
-    description: 'borderRadius & clipping',
-    platform: 'ios',
-    render() {
-      return (
-        <View style={[styles.box, styles.border7]}>
-          <View style={styles.border7_inner} />
-        </View>
-      );
+    {
+      title: 'Custom Borders',
+      name: 'custom-borders-ios-clipping',
+      description: 'borderRadius & clipping',
+      platform: 'ios',
+      render: function ({testID}): React.Node {
+        return (
+          <View testID={testID} style={[styles.box, styles.border7]}>
+            <View style={styles.border7_inner} />
+          </View>
+        );
+      },
     },
-  },
-  {
-    title: 'Single Borders',
-    description: 'top, left, bottom right',
-    render() {
-      return (
-        <View 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]} />
-          <View style={[styles.box, styles.border8, styles.border8Right]} />
-        </View>
-      );
+    {
+      title: 'Single Borders',
+      name: 'single-borders',
+      description: 'top, left, bottom right',
+      render: function ({testID}): React.Node {
+        return (
+          <View testID={testID} 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]} />
+            <View style={[styles.box, styles.border8, styles.border8Right]} />
+          </View>
+        );
+      },
     },
-  },
-  {
-    title: 'Corner Radii',
-    description: 'borderTopLeftRadius & borderBottomRightRadius',
-    render() {
-      return <View style={[styles.box, styles.border9]} />;
+    {
+      title: 'Corner Radii',
+      name: 'corner-radii',
+      description: 'borderTopLeftRadius & borderBottomRightRadius',
+      render: function ({testID}): React.Node {
+        return <View testID={testID} style={[styles.box, styles.border9]} />;
+      },
     },
-  },
-  {
-    title: 'Corner Radii / Elevation',
-    description: 'borderTopLeftRadius & borderBottomRightRadius & elevation',
-    platform: 'android',
-    render() {
-      return <View style={[styles.box, styles.border10]} />;
+    {
+      title: 'Corner Radii / Elevation',
+      name: 'corner-radii-elevation',
+      description: 'borderTopLeftRadius & borderBottomRightRadius & elevation',
+      platform: 'android',
+      render: function ({testID}): React.Node {
+        return <View testID={testID} style={[styles.box, styles.border10]} />;
+      },
     },
-  },
-  {
-    title: 'CSS Trick - Triangle',
-    description: 'create a triangle by manipulating border colors and widths',
-    render() {
-      return <View style={[styles.border11]} />;
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Curved border(Left|Right|Bottom|Top)Width',
-    description: 'Make a non-uniform width curved border',
-    render() {
-      return <View style={[styles.box, styles.border12]} />;
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Curved border(Left|Right|Bottom|Top)Color',
-    description: 'Make a non-uniform color curved border',
-    render() {
-      return <View style={[styles.box, styles.border13]} />;
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Curved border(Top|Bottom)(Left|Right)Radius',
-    description: 'Make a non-uniform radius curved border',
-    render() {
-      return <View style={[styles.box, styles.border14]} />;
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'System color',
-    description: 'Using a platform color',
-    render() {
-      return <View style={[styles.box, styles.border15]} />;
+    {
+      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]} />;
+      },
     },
-  },
-  {
-    title: 'Dynamic color',
-    description: 'Using a custom dynamic color',
-    platform: 'ios',
-    render() {
-      return <View style={[styles.box, styles.border16]} />;
+    {
+      title: 'Dynamic color',
+      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]} />;
+      },
     },
-  },
-];
+  ],
+}: RNTesterModule);
diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js
index 83c030e2b6a06e..d9d50db5551a0b 100644
--- a/packages/rn-tester/js/types/RNTesterTypes.js
+++ b/packages/rn-tester/js/types/RNTesterTypes.js
@@ -16,7 +16,7 @@ export type RNTesterModuleExample = $ReadOnly<{|
   platform?: 'ios' | 'android',
   description?: string,
   expect?: string,
-  render: () => React.Node,
+  render: ({testID?: ?string}) => React.Node,
 |}>;
 
 export type RNTesterModule = $ReadOnly<{|
diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js
index 68912253689a3b..877f50b410597d 100644
--- a/packages/rn-tester/js/utils/RNTesterList.android.js
+++ b/packages/rn-tester/js/utils/RNTesterList.android.js
@@ -171,7 +171,7 @@ const APIs: Array<RNTesterModuleInfo> = ([
   {
     key: 'BorderExample',
     category: 'UI',
-    module: require('../examples/Border/BorderExample'),
+    module: require('../examples/Border/BorderExample').default,
   },
   {
     key: 'CrashExample',
diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js
index 0f94c0230f33be..a443e79d56c44b 100644
--- a/packages/rn-tester/js/utils/RNTesterList.ios.js
+++ b/packages/rn-tester/js/utils/RNTesterList.ios.js
@@ -176,7 +176,7 @@ const APIs: Array<RNTesterModuleInfo> = ([
   },
   {
     key: 'BorderExample',
-    module: require('../examples/Border/BorderExample'),
+    module: require('../examples/Border/BorderExample').default,
   },
   {
     key: 'BoxShadowExample',