test: make custom manual tests easy to add to e2e app

Author: mikehardy

tests/app.js

@@ -17,10 +17,12 @@
  */
 
 import React from 'react';
-import { StyleSheet, View, StatusBar, AppRegistry } from 'react-native';
+import { StyleSheet, View, StatusBar, AppRegistry, Text } from 'react-native';
 
 import { JetProvider, ConnectionText, StatusEmoji, StatusText } from 'jet';
 
+import { LocalTests } from './local-test-component';
+
 const platformSupportedModules = [];
 
 if (Platform.other) {
@@ -266,6 +268,11 @@ function App() {
     <>
       <StatusBar hidden />
       <View style={styles.container}>
+        <View style={styles.hardRule} />
+        <Text>Local Manual Tests:</Text>
+        <LocalTests />
+        <View style={styles.hardRule} />
+        <Text>Automated Tests:</Text>
         <JetProvider tests={loadTests}>
           <ConnectionText style={styles.connectionText} />
           <View style={styles.statusContainer}>
@@ -308,6 +315,11 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     color: 'black',
   },
+  hardRule: {
+    height: 1,
+    backgroundColor: 'black',
+    width: '100%',
+  },
 });
 
 AppRegistry.registerComponent('testing', () => App);

tests/local-test-component.jsx

@@ -0,0 +1,24 @@
+/* eslint-disable react/react-in-jsx-scope */
+
+// Add new components in `local-tests` sub-directory,
+// with a corresponding import/export in the `local-tests/index.js` file
+//
+// that file itself is copied during `yarn lerna:prepare` from
+// `local-tests/index.example.js` if it does not exist, then
+// you are free to modify it
+//
+// Why do we maintain a list and copy a template?
+//
+// 1) react-native has no way to do dynamic requires or imports, they require
+// constant strings, so we can't just read directory contents and dynamically
+// iterate on them unfortunately. So we have to maintain a list of local-only things.
+//
+// 2) But if you maintain a local-only change, you risk of accidentally committing
+// the local-only changes. To keep local changes without commit risk we have to
+// do a template copy from an example.
+
+import { TestComponents } from './local-tests';
+
+export function LocalTests() {
+  return <TestComponents />;
+}

tests/local-tests/.gitignore

@@ -0,0 +1,9 @@
+# To start with, we want nothing in this directory in general
+*
+
+# ... except our template index file (copied during prepare)
+!index.example.js
+# ... our example component
+!crash-test.jsx
+# ... and this gitignore file
+!.gitignore

tests/local-tests/crash-test.jsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { crash, getCrashlytics } from '@react-native-firebase/crashlytics';
+
+export function CrashTestComponent() {
+  return (
+    <View style={styles.horizontalCentered}>
+      <Text>Crashlytics:</Text>
+      <Button
+        style={{ color: 'blue', flex: 1 }}
+        title="JS Crash"
+        onPress={() => nonExistentObject.nonExistentFunction()}
+      />
+      <Button
+        style={{ color: 'blue', flex: 1 }}
+        title="Native Crash"
+        onPress={() => crash(getCrashlytics())}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  horizontalCentered: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignContent: 'center',
+    paddingHorizontal: 10,
+  },
+});

tests/local-tests/index.example.js

@@ -0,0 +1,18 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { View } from 'react-native';
+
+import { CrashTestComponent } from './crash-test.jsx';
+
+// import your components from your local-tests jsx file here...
+
+const testComponents = [
+  CrashTestComponent,
+
+  // List your imported components here...
+];
+
+export function TestComponents() {
+  return testComponents.map((component, index) => {
+    return <View key={index}>{component.call()}</View>;
+  });
+}

tests/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build:clean": "rimraf dist && rimraf android/build && rimraf android/app/build && rimraf android/.gradle && rimraf ios/build && rimraf macos/build",
     "build:macos": "xcodebuild CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ -workspace macos/io.invertase.testing.xcworkspace -scheme io.invertase.testing-macOS -configuration Debug -derivedDataPath macos/build | xcbeautify",
-    "prepare": "patch-package"
+    "prepare": "patch-package && cd local-tests && (yarn cpy --no-overwrite index.example.js ./ --rename=index.js || echo 'Looks like the local test file is already there. Previous copy error may be ignored.')"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.1.1",
@@ -43,6 +43,7 @@
     "@react-native/metro-config": "^0.77.1",
     "assert": "^2.1.0",
     "axios": "^1.7.9",
+    "cpy-cli": "^5.0.0",
     "detox": "20.34.0",
     "firebase": "^11.3.1",
     "firebase-tools": "^13.31.1",