test: unify the manual and automated tests

package.json

@@ -24,9 +24,9 @@
     "tests:jest-watch": "jest --watch",
     "tests:jest-coverage": "jest --coverage",
     "tests:packager:chrome": "cd tests && yarn react-native start --reset-cache",
-    "tests:packager:jet": "cd tests && cross-env REACT_DEBUGGER=\"echo nope\" yarn react-native start --client-logs",
-    "tests:packager:jet-ci": "cd tests && (mkdir $HOME/.metro || true) && cross-env TMPDIR=$HOME/.metro REACT_DEBUGGER=\"echo nope\" yarn react-native start",
-    "tests:packager:jet-reset-cache": "cd tests && cross-env REACT_DEBUGGER=\"echo nope\" yarn react-native start --reset-cache",
+    "tests:packager:jet": "cd tests && yarn react-native start --client-logs",
+    "tests:packager:jet-ci": "cd tests && (mkdir $HOME/.metro || true) && cross-env TMPDIR=$HOME/.metro yarn react-native start",
+    "tests:packager:jet-reset-cache": "cd tests && yarn react-native start --reset-cache",
     "tests:emulator:prepare": "cd .github/workflows/scripts/functions && yarn && yarn build",
     "tests:emulator:start": "run-script-os",
     "tests:emulator:start:default": "yarn tests:emulator:prepare && cd ./.github/workflows/scripts && ./start-firebase-emulator.sh --no-daemon",
@@ -36,6 +36,7 @@
     "tests:android:build:default": "cd tests && yarn detox build --configuration android.emu.debug",
     "tests:android:build:windows": "cd tests && yarn detox build --configuration android.emu.debug.windows",
     "tests:android:build:release": "cd tests && yarn detox build --configuration android.emu.release",
+    "tests:android:manual": "cd tests && yarn react-native run-android",
     "tests:android:test": "cd tests && yarn detox test --configuration android.emu.debug",
     "tests:android:test:debug": "cd tests && yarn detox test --configuration android.emu.debug --inspect",
     "tests:android:test-reuse": "cd tests && yarn detox test --configuration android.emu.debug --reuse",
@@ -44,6 +45,7 @@
     "tests:android:test:jacoco-report": "cd tests/android && ./gradlew jacocoAndroidTestReport",
     "tests:ios:build": "cd tests && yarn detox build --configuration ios.sim.debug",
     "tests:ios:build:release": "cd tests && yarn detox build --configuration ios.sim.release",
+    "tests:ios:manual": "cd tests && SIMCTL_CHILD_GULGeneratedClassDisposeDisabled=1 CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ yarn react-native run-ios",
     "tests:ios:test": "cd tests && SIMCTL_CHILD_GULGeneratedClassDisposeDisabled=1 yarn detox test --configuration ios.sim.debug --loglevel warn",
     "tests:ios:test:release": "cd tests && SIMCTL_CHILD_GULGeneratedClassDisposeDisabled=1 yarn detox test --configuration ios.sim.release --loglevel warn",
     "tests:ios:test:debug": "cd tests && SIMCTL_CHILD_GULGeneratedClassDisposeDisabled=1 yarn detox test --configuration ios.sim.debug --loglevel warn --inspect",
@@ -53,11 +55,9 @@
     "tests:ios:pod:install": "cd tests && rm -f ios/Podfile.lock && rm -rf ios/ReactNativeFirebaseDemo.xcworkspace && cd ios && pod install",
     "tests:macos:build": "cd tests && yarn build:macos",
     "tests:macos:pod:install": "cd tests && rm -f macos/Podfile.lock && cd macos && pod install",
+    "tests:macos:manual": "cd tests && yarn react-native run-macos",
     "tests:macos:test-cover": "cd tests && npx jet --target=macos --coverage",
-    "format:markdown": "prettier --write \"docs/**/*.md\"",
-    "example:app:bundler": "cd tests && yarn react-native start --config ./test-app/metro.config.js --reset-cache",
-    "example:app:run:ios": "cd tests && SIMCTL_CHILD_GULGeneratedClassDisposeDisabled=1 CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ yarn react-native run-ios",
-    "example:app:run:android": "cd tests && yarn react-native run-android"
+    "format:markdown": "prettier --write \"docs/**/*.md\""
   },
   "devDependencies": {
     "@babel/core": "^7.28.3",

tests/app.js

@@ -16,12 +16,12 @@
  *
  */
 
-import React from 'react';
-import { StyleSheet, View, StatusBar, AppRegistry, Text } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, View, StatusBar, AppRegistry, Text, Button } from 'react-native';
 
 import { JetProvider, ConnectionText, StatusEmoji, StatusText } from 'jet';
 
-import { LocalTests } from './local-test-component';
+import { TestComponents } from './local-tests';
 
 const platformSupportedModules = [];
 
@@ -67,6 +67,9 @@ ErrorUtils.setGlobalHandler((err, isFatal) => {
 });
 
 function loadTests(_) {
+  // this will only execute if Jet executes
+  // ...so manual tests will not have this setup - emulators etc
+  // ...that allows them the freedom to define their own test environment
   describe('React Native Firebase', function () {
     if (!globalThis.RNFBDebug) {
       // Only retry tests if not debugging or hunting deprecated API usage locally,
@@ -239,13 +242,28 @@ function loadTests(_) {
 }
 
 function App() {
+  const [showManualTestPicker, setShowManualTestPicker] = useState(false);
+
+  if (showManualTestPicker) {
+    return (
+      <>
+        <StatusBar hidden />
+        <View style={styles.container}>
+          <View style={styles.hardRule} />
+          <Button title="Hide Manual Tests" onPress={() => setShowManualTestPicker(false)} />
+          <View style={styles.hardRule} />
+          <TestComponents />
+        </View>
+      </>
+    );
+  }
+
   return (
     <>
       <StatusBar hidden />
       <View style={styles.container}>
         <View style={styles.hardRule} />
-        <Text>Local Manual Tests:</Text>
-        <LocalTests />
+        <Button title="Show Manual Tests" onPress={() => setShowManualTestPicker(true)} />
         <View style={styles.hardRule} />
         <Text>Automated Tests:</Text>
         <JetProvider tests={loadTests}>

tests/test-app/examples/ai/ai.js → tests/local-tests/ai/ai.js

@@ -1,5 +1,6 @@
+/* eslint-disable no-console */
 import React, { useState } from 'react';
-import { AppRegistry, Button, View, Text, Pressable } from 'react-native';
+import { Button, View, Text, Pressable } from 'react-native';
 
 import { getApp } from '@react-native-firebase/app';
 import { getAI, getGenerativeModel, Schema } from '@react-native-firebase/ai';
@@ -43,7 +44,7 @@ function OptionSelector({ selectedOption, setSelectedOption }) {
   );
 }
 
-function App() {
+export function AITestComponent() {
   const [selectedOption, setSelectedOption] = useState('image');
   const getMediaDetails = option => {
     switch (option) {
@@ -242,7 +243,7 @@ function App() {
           // This function calls a hypothetical external API that returns
           // a collection of weather information for a given location on a given date.
           // `location` is an object of the form { city: string, state: string }
-          async function fetchWeather({ location, date }) {
+          async function fetchWeather({ _location, _date }) {
             // For demo purposes, this hypothetical response is hardcoded here in the expected format.
             return {
               temperature: 38,
@@ -324,5 +325,3 @@ function App() {
     </View>
   );
 }
-
-AppRegistry.registerComponent('testing', () => App);

tests/test-app/examples/database/index.js → tests/local-tests/database/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppRegistry, Button, Text, View } from 'react-native';
+import { Button, Text, View } from 'react-native';
 
 // import firebase, { utils } from '@react-native-firebase/app';
 import {
@@ -15,7 +15,7 @@ import {
 
 connectDatabaseEmulator(getDatabase(), '127.0.0.1', 9000);
 
-function App() {
+export function DatabaseOnChildMovedTest() {
   return (
     <View>
       <Text>text text text</Text>
@@ -56,5 +56,3 @@ function App() {
     </View>
   );
 }
-
-AppRegistry.registerComponent('testing', () => App);

tests/local-tests/firestore/onSnapshotInSync.js

@@ -0,0 +1,73 @@
+/* eslint-disable no-console */
+import React, { useEffect } from 'react';
+import { Button, Text, View } from 'react-native';
+
+import '@react-native-firebase/app';
+import {
+  collection,
+  doc,
+  setDoc,
+  getFirestore,
+  onSnapshotsInSync,
+} from '@react-native-firebase/firestore';
+
+export function FirestoreOnSnapshotInSyncTest() {
+  let unsubscribe;
+
+  const subscribe = () => {
+    if (unsubscribe) {
+      console.log('already subscribed');
+      return;
+    }
+    unsubscribe = onSnapshotsInSync(getFirestore(), () => {
+      console.log('snapshots are in sync.');
+    });
+  };
+  useEffect(() => {
+    subscribe();
+  }, []);
+
+  async function addDocument() {
+    console.log('adding a document');
+    await setDoc(doc(collection(getFirestore(), 'flutter-tests'), 'one'), { foo: 'bar' });
+    console.log('done adding a document');
+  }
+
+  return (
+    <View>
+      <Text>React Native Firebase</Text>
+      <Text>onSnapshotsInSync API</Text>
+      <Button
+        title="add document"
+        onPress={async () => {
+          try {
+            addDocument();
+          } catch (e) {
+            console.log('Add document failed', e);
+          }
+        }}
+      />
+      <Button
+        title="unsubscribe to snapshot in sync"
+        onPress={() => {
+          try {
+            unsubscribe();
+            unsubscribe = undefined;
+          } catch (e) {
+            console.log('Unsubscribe failed: ', e);
+          }
+        }}
+      />
+      <Button
+        title="subscribe to snapshot in sync"
+        onPress={() => {
+          try {
+            subscribe();
+          } catch (e) {
+            console.log('Subscribe failed: ', e);
+          }
+        }}
+      />
+    </View>
+  );
+}

tests/local-tests/index.js

@@ -0,0 +1,44 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { Button } from 'react-native';
+
+import { useState } from 'react';
+
+// import your components from your local-tests jsx file here...
+import { CrashTestComponent } from './crash-test';
+import { AITestComponent } from './ai/ai';
+import { DatabaseOnChildMovedTest } from './database';
+import { FirestoreOnSnapshotInSyncTest } from './firestore/onSnapshotInSync';
+import { VertexAITestComponent } from './vertexai/vertexai';
+
+const testComponents = {
+  // List your imported components here...
+  'Crashlytics Test Crash': CrashTestComponent,
+  'AI Generation Example': AITestComponent,
+  'Database onChildMoved Test': DatabaseOnChildMovedTest,
+  'Firestore onSnapshotInSync Test': FirestoreOnSnapshotInSyncTest,
+  'VertexAI Generation Example': VertexAITestComponent,
+};
+
+export function TestComponents() {
+  const [currentTestTitle, setCurrentTestTitle] = useState(undefined);
+
+  if (currentTestTitle) {
+    const CurrentTest = testComponents[currentTestTitle];
+    return (
+      <>
+        <Button title={`Hide ${currentTestTitle}`} onPress={() => setCurrentTestTitle(undefined)} />
+        <CurrentTest />
+      </>
+    );
+  }
+
+  return Object.keys(testComponents).map((testTitle, index) => {
+    return (
+      <Button
+        key={index}
+        title={`Show ${testTitle}`}
+        onPress={() => setCurrentTestTitle(testTitle)}
+      />
+    );
+  });
+}

tests/test-app/examples/vertexai/vertexai.js → tests/local-tests/vertexai/vertexai.js

@@ -1,5 +1,6 @@
+/* eslint-disable no-console */
 import React, { useState } from 'react';
-import { AppRegistry, Button, View, Text, Pressable } from 'react-native';
+import { Button, View, Text, Pressable } from 'react-native';
 
 import { getApp } from '@react-native-firebase/app';
 import { getVertexAI, getGenerativeModel, Schema } from '@react-native-firebase/vertexai';
@@ -43,7 +44,7 @@ function OptionSelector({ selectedOption, setSelectedOption }) {
   );
 }
 
-function App() {
+export function VertexAITestComponent() {
   const [selectedOption, setSelectedOption] = useState('image');
   const getMediaDetails = option => {
     switch (option) {
@@ -242,7 +243,7 @@ function App() {
           // This function calls a hypothetical external API that returns
           // a collection of weather information for a given location on a given date.
           // `location` is an object of the form { city: string, state: string }
-          async function fetchWeather({ location, date }) {
+          async function fetchWeather({ _location, _date }) {
             // For demo purposes, this hypothetical response is hardcoded here in the expected format.
             return {
               temperature: 38,
@@ -324,5 +325,3 @@ function App() {
     </View>
   );
 }
-
-AppRegistry.registerComponent('testing', () => App);