Merge pull request #241 from flexbox/feat/maestro

feat: 🎸 add bonus section with maestro

Author: flexbox

challenges/ecosystem/05.md

@@ -215,3 +215,8 @@ Now you can run `npm run test:watch` to watch your files and run tests automatic
 
 - https://reactnativetesting.io/
 - https://github.com/vanGalilea/react-native-testing?tab=readme-ov-file#covered-examples-
+
+
+### 👽 Bonus
+
+- [ ] Check the [React Native Testing Library Cookbook](https://callstack.github.io/react-native-testing-library/cookbook/index) and add a new test to your component.

challenges/ecosystem/06.md

@@ -0,0 +1,75 @@
+# Exercise 6: End-to-End Testing with Maestro
+
+## 📡 What you will learn
+
+- Set up end-to-end (E2E) tests for your React Native application.
+- Use Maestro to write and run automated E2E tests.
+
+## 👾 Before we start the exercise
+
+End-to-end (E2E) testing involves testing the complete functionality of an application from the user's perspective, ensuring all components work together as expected.
+
+Maestro is a powerful library for automating user interactions in your React Native app, allowing you to write and run E2E tests.
+
+- Check the [Maestro documentation](https://maestro.mobile.dev/getting-started/installing-maestro).
+
+## 👨‍🚀 Exercise 6
+
+### Setting Up Maestro
+
+1. **Install Maestro**:
+   Follow the [getting started guide](https://maestro.mobile.dev/getting-started/installing-maestro) to install Maestro on your laptop.
+
+### Writing Your First Test
+
+1. **Create a Tests Folder**:
+  - [ ] At the root of your project, create a `tests` folder.
+
+2. **Create a Test File**:
+  - [ ] Create a file named `process.yaml` in the `tests` folder.
+
+3. **Add Maestro Script**:
+  - [ ] Add the following script to your `package.json`:
+
+   ```json
+   "scripts": {
+     "maestro": "maestro test tests/process.yaml"
+   }
+
+4. **Write Your Test**:
+  - [ ] Write a test in the `process.yaml` file.
+
+  You should have something like this:
+
+```yaml
+appId: host.exp.Exponent
+---
+
+- launchApp
+- tapOn: "Email"
+- inputText: "[email protected]"
+- tapOn: "Password"
+- inputText: "123456"
+- tapOn: "Login"
+- waitFor: "Welcome"
+- tapOn: "Buy this ship"
+- tapOn: "Confirm"
+``` 
+
+### Running Your Test
+
+1. **Run Your Test**:
+  - [ ] Run your test by lanching your project on a simulator and executing the following command:
+
+   ```console
+   npm run maestro
+   ```
+
+2. **Check the Results**:
+  You should see the test running on your simulator.
+
+### 👽 Bonus
+
+- [ ] Write more tests for your application.
+- [ ] Explore Maestro's documentation to learn more about its capabilities.
+- [ ] Write a more complex test that involves testIDs.

hackathon/spacecraft/package.json

@@ -8,6 +8,7 @@
     "web": "expo start --web",
     "eject": "expo eject",
     "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
+    "maestro": "maestro test tests/process.yaml",
     "test": "jest",
     "test:watch": "jest --watch",
     "build-storybook": "build-storybook",
@@ -103,4 +104,4 @@
     "prettier": "^3.2.5",
     "typescript": "~5.3.3"
   }
-}
+}

hackathon/spacecraft/tests/process.yaml

@@ -0,0 +1,10 @@
+appId: host.exp.Exponent
+---
+
+- tapOn: "Email"
+- inputText: "[email protected]"
+- tapOn: "Password"
+- inputText: "123456"
+- tapOn: "Login"
+- tapOn: "Buy this ship"
+- tapOn: "Ok"