rn upgrade & maestro e2e tests (#44)

* rn upgrade & maestro e2e tests

* readme update how to run E2E tests

* adding modal screen test

* e2e tests completion

* unit test fix and libs upgrade

* record command addition

* docs: add gif of app impression

Author: vanGalilea

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: '@react-native',
 };

.gitignore

@@ -61,3 +61,6 @@ yarn-error.log
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
+
+# testing
+/coverage

.node-version

@@ -50,7 +50,11 @@ export default () => {
     <>
       <ThemeProvider initialTheme={'dark'}>
         <NavigationContainer>
-          <Stack.Navigator initialRouteName="Home">
+          <Stack.Navigator
+            initialRouteName="Home"
+            screenOptions={{
+              headerBackTestID: 'go-back-home-button',
+            }}>
             <Stack.Screen name={SCREENS.HOME} component={Home} />
             <Stack.Screen name={SCREENS.LOGIN} component={LoginSubmission} />
             <Stack.Screen

App.tsx

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '>= 2.6.10'
+ruby ">= 2.6.10"
 
-gem 'cocoapods', '>= 1.11.3'
+gem 'cocoapods', '~> 1.12'

Gemfile

@@ -89,7 +89,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  cocoapods (>= 1.11.3)
+  cocoapods (~> 1.12)
 
 RUBY VERSION
    ruby 2.7.5p203

Gemfile.lock

@@ -20,14 +20,21 @@
 ### Tools in use 🛠️
 - [Jest](https://jestjs.io/)
 - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/)
+- [Maestro](https://maestro.mobile.dev/)
 
+### Setup and requirements 📋
+- [RN- Setting up the development environment](https://reactnative.dev/docs/environment-setup)
+- [Installing Maestro](https://maestro.mobile.dev/getting-started/installing-maestro)
 
 ### How to run the tests 🏃‍♀️
 - Clone the repo
 - Run `yarn` to install dependencies
-- Run `yarn test` to run the tests
-- Run `yarn test:coverage` to run the tests and generate a coverage report
-
+- Run `yarn test:unit` to run the unit tests 
+- Run `yarn test:unit:dev` to run the unit tests in dev/watch mode
+- Run `yarn test:unit:coverage` to run the tests and generate a coverage report
+- Run `yarn test:e2e` to run the e2e tests
+- Run `yarn test:e2e:dev` to run the e2e tests in dev/watch mode
+- Run `yarn test:e2e:record` to run the e2e tests and record a video of the tests
 
 ### How to run the app 📱
 - Clone the repo
@@ -37,7 +44,6 @@
 - Click `i` to run the app on iOS simulator or `a` to run it on Android emulator
 
 ### Ideas and future improvements 🚀
-- 📱 Add E2E tests with Maestro
 - ⚛️ Add tests for react native web project
 
 ### Inspiration, resources and further reading 📚
@@ -50,3 +56,6 @@ For more info check [Epic React](https://epicreact.dev/).
 - 🗺 [React Navigation](https://reactnavigation.org/)
 - 🛰 [MSW](https://mswjs.io/)
 
+- #### Impression of the the project 📸
+
+![app-in-e2e-testing-gif](https://github.com/vanGalilea/react-native-testing/assets/25864161/7015cb21-5347-453a-aee7-4f848ae7a780)

README.md

@@ -24,7 +24,7 @@ it.each(cases)(
       theme: desiredTheme,
     });
     const innerText = screen.getByText(/click me/i);
-    const pressable = screen.getByLabelText('easy-button');
+    const pressable = screen.getByRole('button');
     expect(pressable).toHaveStyle({
       backgroundColor: expectedBackground,
     });

__tests__/EasyButton.test.tsx

@@ -34,7 +34,7 @@ test('displays images from the server', async () => {
 test('displays error upon error response from server', async () => {
   // Simulate an error response from the server
   server.resetHandlers(
-    rest.get('https://fakerapi.it/api/v1/users', (res, req, ctx) => {
+    rest.get('https://dummyjson.com/users', (res, req, ctx) => {
       // @ts-ignore
       res(ctx.status(500));
     }),

__tests__/ListWithFetch.test.tsx

@@ -1,8 +1,6 @@
 apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
 
-import com.android.build.OutputFile
-
 /**
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.
@@ -11,10 +9,8 @@ react {
     /* Folders */
     //   The root of your project, i.e. where "package.json" lives. Default is '..'
     // root = file("../")
-    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
-    // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
-    // codegenDir = file("../node_modules/react-native-codegen")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
     //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
     // cliFile = file("../node_modules/react-native/cli.js")
 
@@ -52,14 +48,6 @@ react {
     // hermesFlags = ["-O", "-output-source-map"]
 }
 
-/**
- * Set this to true to create four separate APKs instead of one,
- * one for each native architecture. This is useful if you don't
- * use App Bundles (https://developer.android.com/guide/app-bundle/)
- * and want to have separate APKs to upload to the Play Store.
- */
-def enableSeparateBuildPerCPUArchitecture = false
-
 /**
  * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
@@ -78,16 +66,6 @@ def enableProguardInReleaseBuilds = false
  */
 def jscFlavor = 'org.webkit:android-jsc:+'
 
-/**
- * Private function to get the list of Native Architectures you want to build.
- * This reads the value from reactNativeArchitectures in your gradle.properties
- * file and works together with the --active-arch-only flag of react-native run-android.
- */
-def reactNativeArchitectures() {
-    def value = project.getProperties().get("reactNativeArchitectures")
-    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
-
 android {
     ndkVersion rootProject.ext.ndkVersion
 
@@ -101,15 +79,6 @@ android {
         versionCode 1
         versionName "1.0"
     }
-
-    splits {
-        abi {
-            reset()
-            enable enableSeparateBuildPerCPUArchitecture
-            universalApk false  // If true, also generate a universal APK
-            include (*reactNativeArchitectures())
-        }
-    }
     signingConfigs {
         debug {
             storeFile file('debug.keystore')
@@ -130,30 +99,11 @@ android {
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
-
-    // applicationVariants are e.g. debug, release
-    applicationVariants.all { variant ->
-        variant.outputs.each { output ->
-            // For each separate APK per architecture, set a unique version code as described here:
-            // https://developer.android.com/studio/build/configure-apk-splits.html
-            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
-            def abi = output.getFilter(OutputFile.ABI)
-            if (abi != null) {  // null for the universal-debug, universal-release variants
-                output.versionCodeOverride =
-                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
-            }
-
-        }
-    }
 }
 
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-
-    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
-
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'