Merge pull request #256 from flexbox/feature/maestro

feature/maestro

Author: flexbox

challenges/ecosystem/06.md

@@ -9,32 +9,33 @@
 
 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.
+Maestro is a 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.
+- [ ] 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.
+  - [ ] At the root of your project, create a `e2e` folder.
 
 2. **Create a Test File**:
-  - [ ] Create a file named `process.yaml` in the `tests` folder.
+  - [ ] Create a file named `process.yaml` in the `e2e` folder.
 
 3. **Add Maestro Script**:
   - [ ] Add the following script to your `package.json`:
 
-   ```json
-   "scripts": {
-     "maestro": "maestro test tests/process.yaml"
-   }
+```json
+"scripts": {
+  "e2e": "maestro test e2e/process.yaml"
+}
 ```
 
 4. **Write Your Test**:
@@ -62,9 +63,9 @@ appId: host.exp.Exponent
 1. **Run Your Test**:
   - [ ] Run your test by lanching your project on a simulator and executing the following command:
 
-   ```console
-   npm run maestro
-   ```
+```console
+npm run maestro
+```
 
 2. **Check the Results**:
   You should see the test running on your simulator.
@@ -73,4 +74,4 @@ appId: host.exp.Exponent
 
 - [ ] Write more tests for your application.
 - [ ] Explore Maestro's documentation to learn more about its capabilities.
-- [ ] Write a more complex test that involves testIDs.
+- [ ] Write a more complex test that involves `testID`s.

hackathon/spacecraft/e2e/process.yaml

@@ -0,0 +1,14 @@
+appId: weshipit.today.spacecraft
+---
+
+- tapOn: "Email Email"
+- inputText: "yoda@mozmail.com"
+- tapOn: "Password Password  "
+- inputText: "123456"
+- tapOn: "Login"
+- tapOn: "Not Now"
+- tapOn: "CR90 corvette"
+- swipe:
+    start: "67%,87%"
+    end: "69%,51%"
+    duration: 661

hackathon/spacecraft/package.json

@@ -8,15 +8,15 @@
     "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",
     "storybook-generate": "sb-rn-get-stories",
     "storybook-watch": "sb-rn-watcher",
     "storybook": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start",
     "storybook:ios": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start --ios",
-    "storybook:android": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start --android"
+    "storybook:android": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start --android",
+    "e2e": "maestro test e2e/process.yaml"
   },
   "jest": {
     "preset": "jest-expo",

hackathon/spacecraft/src/screens/PlusScreen.tsx

@@ -3,15 +3,19 @@ import { View } from "react-native";
 import { List, Text } from "react-native-paper";
 
 import { ScreenContainer } from "~/components/ScreenContainer";
+import { useAuthentication } from "~/context/Authentication";
 import { Routes } from "~/navigation/Routes";
 
-interface Props {}
-
-export const PlusScreen = ({ navigation }: Props) => {
+export const PlusScreen = ({ navigation }: any) => {
   const navigateToDoYouLikeScreen = () => {
     navigation.navigate(Routes.DO_YOU_LIKE_SCREEN);
   };
 
+  const { setUser } = useAuthentication();
+  const handleLogout = () => {
+    setUser(false);
+  };
+
   return (
     <ScreenContainer title={"Plus"}>
       <View style={{ flex: 1 }}>
@@ -25,6 +29,16 @@ export const PlusScreen = ({ navigation }: Props) => {
           onPress={navigateToDoYouLikeScreen}
           title="Do you like Spacecraft?"
         />
+        <List.Item
+          left={(props) => (
+            <List.Icon
+              {...props}
+              icon="logout"
+            />
+          )}
+          onPress={handleLogout}
+          title="Logout"
+        />
       </View>
       <View
         style={{

hackathon/spacecraft/src/screens/StarshipDetailsScreen.tsx

@@ -55,7 +55,6 @@ export const StarshipDetailsScreen = ({
   const scale = useSharedValue(1);
 
   const theme = useTheme();
-  console.log("🚀 ~ theme:", theme);
 
   return (
     <View style={{ backgroundColor: theme.colors.background }}>