Update fantom test, add helpers (#49337)

Summary:

*Note: This diff adds helpers and updates the one test we have. The next diff adds a bunch of tests, see that diff for how these helpers are used to scale to a large number of tests.*

-----

## Overview

Adds helpers for the LogBox e2e test to make it easier to write simple, readable, tests with a healthy level of abstraction over the e2e APIs. 

## API
The helpers expose an ability to render a component, and return methods to get the UI state:

```
// Returns the LogBox inspector UI as an object.
getInspectorUI: () => ?InspectorUI,

// Returns the LogBox notification UI as an object.
getNotificationUI: () => ?NotificationUI,
```

These return objects that represent the main text elements in the UI like `title` and `message`.

The helpers also provide methods for interacting with the LogBox UI:

```
// True if the LogBox inspector is open.
isOpen: () => boolean,

// Tap the notification to open the LogBox inspector.
openNotification: () => void,

// Tap to close the notification.
dimissNotification: () => void,

// Tap the minimize button to collapse the LogBox inspector.
mimimizeInspector: () => void,

// Tap the dismiss button to close the LogBox inspector.
dismissInspector: () => void,

// Tap the next button to go to the next log.
nextLog: () => void,

// Tap the previous button to go to the previous log.
previousLog: () => void,
```

## Example test
This allows writing tests like:

```
test('should log error', () => {
  const logBox = renderLogBox(<ComponentThatErrors />);

  // Should show notification
  expect(logBox.isOpen()).toBe(false);
  expect(logBox.getNotifciationUI()).toEqual({
    count: '!',
    message: 'error message',
  });

  // Tap the notification
  logBox.openNotification();

  // Should show log
  expect(logBox.isOpen()).toBe(true);
  expect(logBox.getInspectorUI()).toEqual({
    header: 'Log 1 of 1',
    title: 'Console Error',
    message: 'error message',
    stackFrames: [
      'ComponentThatErrors'
    ],
    componentStackFrames: [
      '<ComponentThatErrors />',
    ],
    isDismissable: true,
  });
})
```

## Changelog

Changelog: [internal]

Reviewed By: rubennorte

Differential Revision: D69443041

packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js

@@ -98,7 +98,10 @@ export default function Ansi({
                       backgroundColor: bundle.bg && COLORS[bundle.bg],
                     };
               return (
-                <Text style={[style, textStyle]} key={key}>
+                <Text
+                  id="logbox_codeframe_contents_text"
+                  style={[style, textStyle]}
+                  key={key}>
                   {getText(bundle.content, key)}
                 </Text>
               );

packages/react-native/Libraries/LogBox/UI/LogBoxInspector.js

@@ -64,7 +64,7 @@ export default function LogBoxInspector(props: Props): React.Node {
   }
 
   return (
-    <View style={styles.root}>
+    <View id="logbox_inspector" style={styles.root}>
       <LogBoxInspectorHeader
         onSelectIndex={props.onChangeSelectedIndex}
         selectedIndex={selectedIndex}

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -28,7 +28,7 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
     return (
       <View style={styles.root}>
         <View style={styles.button}>
-          <Text style={styles.syntaxErrorText}>
+          <Text id="logbox_dismissable_text" style={styles.syntaxErrorText}>
             This error cannot be dismissed.
           </Text>
         </View>
@@ -38,8 +38,16 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
 
   return (
     <View style={styles.root}>
-      <LogBoxInspectorFooterButton text="Dismiss" onPress={props.onDismiss} />
-      <LogBoxInspectorFooterButton text="Minimize" onPress={props.onMinimize} />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_dismiss"
+        text="Dismiss"
+        onPress={props.onDismiss}
+      />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_minimize"
+        text="Minimize"
+        onPress={props.onMinimize}
+      />
     </View>
   );
 }

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -17,6 +17,7 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 type ButtonProps = $ReadOnly<{
+  id: string,
   onPress: () => void,
   text: string,
 }>;
@@ -27,6 +28,7 @@ export default function LogBoxInspectorFooterButton(
   return (
     <SafeAreaView style={styles.button}>
       <LogBoxButton
+        id={props.id}
         backgroundColor={{
           default: 'transparent',
           pressed: LogBoxStyle.getBackgroundDarkColor(),

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -56,6 +56,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
     <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
+          id="logbox_header_button_prev"
           disabled={props.total <= 1}
           level={props.level}
           image={require('./LogBoxImages/chevron-left.png')}
@@ -67,6 +68,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           </Text>
         </View>
         <LogBoxInspectorHeaderButton
+          id="logbox_header_button_next"
           disabled={props.total <= 1}
           level={props.level}
           image={require('./LogBoxImages/chevron-right.png')}

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js

@@ -39,6 +39,7 @@ const backgroundForLevel = (level: LogLevel) =>
 
 export default function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{
+    id: string,
     disabled: boolean,
     image: ImageSource,
     level: LogLevel,
@@ -47,6 +48,7 @@ export default function LogBoxInspectorHeaderButton(
 ): React.Node {
   return (
     <LogBoxButton
+      id={props.id}
       backgroundColor={backgroundForLevel(props.level)}
       onPress={props.disabled ? null : props.onPress}
       style={styles.button}>

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -101,7 +101,9 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
             }
             style={componentStyles.frame}>
             <View style={componentStyles.component}>
-              <Text style={componentStyles.frameName}>
+              <Text
+                id="logbox_component_stack_frame_text"
+                style={componentStyles.frameName}>
                 <Text style={componentStyles.bracket}>{'<'}</Text>
                 {frame.content}
                 <Text style={componentStyles.bracket}>{' />'}</Text>

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -43,7 +43,9 @@ function LogBoxInspectorStackFrame(props: Props): React.Node {
         }}
         onPress={onPress}
         style={styles.frame}>
-        <Text style={[styles.name, frame.collapse === true && styles.dim]}>
+        <Text
+          id="logbox_stack_frame_text"
+          style={[styles.name, frame.collapse === true && styles.dim]}>
           {frame.methodName}
         </Text>
         <Text

packages/react-native/Libraries/LogBox/UI/LogBoxNotification.js

@@ -37,9 +37,9 @@ export default function LogBoxNotification(props: Props): React.Node {
   }, [log]);
 
   return (
-    <View style={styles.container}>
+    <View id="logbox_notification" style={styles.container}>
       <LogBoxButton
-        id={`logbox_button_${level}`}
+        id={`logbox_open_button_${level}`}
         onPress={props.onPressOpen}
         style={styles.press}
         backgroundColor={{
@@ -49,7 +49,10 @@ export default function LogBoxNotification(props: Props): React.Node {
         <View style={styles.content}>
           <LogBoxNotificationCountBadge count={totalLogCount} level={level} />
           <LogBoxNotificationMessage message={log.message} />
-          <LogBoxNotificationDismissButton onPress={props.onPressDismiss} />
+          <LogBoxNotificationDismissButton
+            id={`logbox_dismiss_button_${level}`}
+            onPress={props.onPressDismiss}
+          />
         </View>
       </LogBoxButton>
     </View>

packages/react-native/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js

@@ -24,7 +24,9 @@ export default function LogBoxNotificationCountBadge(props: {
        * when fixing the type of `StyleSheet.create`. Remove this comment to
        * see the error. */}
       <View style={[styles.inside, styles[props.level]]}>
-        <Text style={styles.text}>{props.count <= 1 ? '!' : props.count}</Text>
+        <Text id="logbox_notification_count_text" style={styles.text}>
+          {props.count <= 1 ? '!' : props.count}
+        </Text>
       </View>
     </View>
   );

packages/react-native/Libraries/LogBox/UI/LogBoxNotificationDismissButton.js

@@ -16,11 +16,13 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 export default function LogBoxNotificationDismissButton(props: {
+  id: string,
   onPress: () => void,
 }): React.Node {
   return (
     <View style={styles.container}>
       <LogBoxButton
+        id={props.id}
         backgroundColor={{
           default: LogBoxStyle.getTextColor(0.3),
           pressed: LogBoxStyle.getTextColor(0.5),

packages/react-native/Libraries/LogBox/UI/LogBoxNotificationMessage.js

@@ -22,7 +22,10 @@ export default function LogBoxNotificationMessage(props: {
 }): React.Node {
   return (
     <View style={styles.container}>
-      <Text numberOfLines={1} style={styles.text}>
+      <Text
+        id="logbox_notification_message_text"
+        numberOfLines={1}
+        style={styles.text}>
         {props.message && (
           <LogBoxMessage
             plaintext

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`LogBoxContainer should render fatal with selectedIndex 2 1`] = `
 <View
+  id="logbox_inspector"
   style={
     Object {
       "backgroundColor": "rgba(255, 255, 255, 1)",
@@ -59,6 +60,7 @@ exports[`LogBoxContainer should render null with no logs 1`] = `null`;
 
 exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = `
 <View
+  id="logbox_inspector"
   style={
     Object {
       "backgroundColor": "rgba(255, 255, 255, 1)",

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap

@@ -24,6 +24,7 @@ exports[`LogBoxInspectorFooter should render no buttons and a message for syntax
     }
   >
     <Text
+      id="logbox_dismissable_text"
       style={
         Object {
           "color": "rgba(255, 255, 255, 0.6)",
@@ -61,10 +62,12 @@ exports[`LogBoxInspectorFooter should render two buttons for error 1`] = `
   }
 >
   <LogBoxInspectorFooterButton
+    id="logbox_footer_button_dismiss"
     onPress={[Function]}
     text="Dismiss"
   />
   <LogBoxInspectorFooterButton
+    id="logbox_footer_button_minimize"
     onPress={[Function]}
     text="Minimize"
   />
@@ -88,10 +91,12 @@ exports[`LogBoxInspectorFooter should render two buttons for fatal 1`] = `
   }
 >
   <LogBoxInspectorFooterButton
+    id="logbox_footer_button_dismiss"
     onPress={[Function]}
     text="Dismiss"
   />
   <LogBoxInspectorFooterButton
+    id="logbox_footer_button_minimize"
     onPress={[Function]}
     text="Minimize"
   />
@@ -115,10 +120,12 @@ exports[`LogBoxInspectorFooter should render two buttons for warning 1`] = `
   }
 >
   <LogBoxInspectorFooterButton
+    id="logbox_footer_button_dismiss"
     onPress={[Function]}
     text="Dismiss"
   />
   <LogBoxInspectorFooterButton
+    id="logbox_footer_button_minimize"
     onPress={[Function]}
     text="Minimize"
   />

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap

@@ -18,6 +18,7 @@ exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
   >
     <LogBoxInspectorHeaderButton
       disabled={false}
+      id="logbox_header_button_prev"
       image={
         Object {
           "testUri": "../Libraries/LogBox/UI/LogBoxImages/chevron-left.png",
@@ -52,6 +53,7 @@ exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
     </View>
     <LogBoxInspectorHeaderButton
       disabled={false}
+      id="logbox_header_button_next"
       image={
         Object {
           "testUri": "../Libraries/LogBox/UI/LogBoxImages/chevron-right.png",
@@ -82,6 +84,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
   >
     <LogBoxInspectorHeaderButton
       disabled={true}
+      id="logbox_header_button_prev"
       image={
         Object {
           "testUri": "../Libraries/LogBox/UI/LogBoxImages/chevron-left.png",
@@ -116,6 +119,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
     </View>
     <LogBoxInspectorHeaderButton
       disabled={true}
+      id="logbox_header_button_next"
       image={
         Object {
           "testUri": "../Libraries/LogBox/UI/LogBoxImages/chevron-right.png",
@@ -190,6 +194,7 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
   >
     <LogBoxInspectorHeaderButton
       disabled={true}
+      id="logbox_header_button_prev"
       image={
         Object {
           "testUri": "../Libraries/LogBox/UI/LogBoxImages/chevron-left.png",
@@ -224,6 +229,7 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
     </View>
     <LogBoxInspectorHeaderButton
       disabled={true}
+      id="logbox_header_button_next"
       image={
         Object {
           "testUri": "../Libraries/LogBox/UI/LogBoxImages/chevron-right.png",

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorReactFrames-test.js.snap

@@ -38,6 +38,7 @@ exports[`LogBoxInspectorReactFrames should render componentStack frames with ful
         }
       >
         <Text
+          id="logbox_component_stack_frame_text"
           style={
             Object {
               "color": "rgba(255, 255, 255, 1)",
@@ -174,6 +175,7 @@ exports[`LogBoxInspectorReactFrames should render componentStack frames with mor
         }
       >
         <Text
+          id="logbox_component_stack_frame_text"
           style={
             Object {
               "color": "rgba(255, 255, 255, 1)",
@@ -266,6 +268,7 @@ exports[`LogBoxInspectorReactFrames should render componentStack frames with mor
         }
       >
         <Text
+          id="logbox_component_stack_frame_text"
           style={
             Object {
               "color": "rgba(255, 255, 255, 1)",
@@ -358,6 +361,7 @@ exports[`LogBoxInspectorReactFrames should render componentStack frames with mor
         }
       >
         <Text
+          id="logbox_component_stack_frame_text"
           style={
             Object {
               "color": "rgba(255, 255, 255, 1)",
@@ -496,6 +500,7 @@ exports[`LogBoxInspectorReactFrames should render componentStack frames with par
         }
       >
         <Text
+          id="logbox_component_stack_frame_text"
           style={
             Object {
               "color": "rgba(255, 255, 255, 1)",
@@ -632,6 +637,7 @@ exports[`LogBoxInspectorReactFrames should render componentStack frames without
         }
       >
         <Text
+          id="logbox_component_stack_frame_text"
           style={
             Object {
               "color": "rgba(255, 255, 255, 1)",

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorStackFrame-test.js.snap

@@ -27,6 +27,7 @@ exports[`LogBoxInspectorStackFrame should render collapsed stack frame with dimm
     }
   >
     <Text
+      id="logbox_stack_frame_text"
       style={
         Array [
           Object {
@@ -99,6 +100,7 @@ exports[`LogBoxInspectorStackFrame should render stack frame 1`] = `
     }
   >
     <Text
+      id="logbox_stack_frame_text"
       style={
         Array [
           Object {
@@ -164,6 +166,7 @@ exports[`LogBoxInspectorStackFrame should render stack frame without press feedb
     }
   >
     <Text
+      id="logbox_stack_frame_text"
       style={
         Array [
           Object {

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorStackFrames-test.js.snap

@@ -93,6 +93,7 @@ exports[`LogBoxInspectorStackFrames should render stack frames with 1 frame coll
         }
       >
         <Text
+          id="logbox_stack_frame_text"
           style={
             Array [
               Object {

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxNotification-test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`LogBoxNotification should render log 1`] = `
 <View
+  id="logbox_notification"
   style={
     Object {
       "backgroundColor": "rgba(255, 255, 255, 1)",
@@ -20,7 +21,7 @@ exports[`LogBoxNotification should render log 1`] = `
         "pressed": "rgba(51, 51, 51, 0.9)",
       }
     }
-    id="logbox_button_warn"
+    id="logbox_open_button_warn"
     onPress={[Function]}
     style={
       Object {
@@ -58,6 +59,7 @@ exports[`LogBoxNotification should render log 1`] = `
         }
       />
       <LogBoxNotificationDismissButton
+        id="logbox_dismiss_button_warn"
         onPress={[Function]}
       />
     </View>