Adding initial Appium Android test and improving safeareaprovider / safeareaview implementation

.gitignore

@@ -1,6 +1,7 @@
 .idea/
 .dccache
 node_modules/
+android
 coverage/
 jest-coverage/
 .nyc_output/

README.md

@@ -73,6 +73,108 @@ After running tests, `.nyc_output` and `coverage` folders are generated. The cov
 More information can be found at [cypress docs](https://github.com/cypress-io/code-coverage).  
 The best way to view coverage results locally is to open the `coverage/lcov-report/index.html` file.
 
+# Build Android APK Locally
+
+1. Follow the [guide here](https://docs.expo.dev/guides/local-app-development/#prerequisites)
+2. SDK path for Android can be found by following below steps:  
+   Android Studio > Tools > SDK Manager
+   ![android sdk path](docs/img/android-sdk-location.png)  
+   Use this value as `ANDROID_HOME` environment variable
+3. Output directory for apk file is `android\app\build\outputs\apk\debug\app-debug.apk`
+
+# Android testing with real android device
+
+This project used [appium-boilerplate](https://github.com/webdriverio/appium-boilerplate/) as reference.
+
+Turn on developer mode for android device.  
+Enable USB tethering for android device.  
+Run adb devices command to get `DEVICE_NAME`.  
+`PLATFORM_VERSION` can be found from the device.
+
+May be a way to do it over wifi as well:  
+https://qaautomationworld.blogspot.com/2014/06/appium-executing-test-throgh-wi-fi-on-real-devies.html  
+https://stackoverflow.com/questions/42992965/how-to-connect-to-your-device-from-terminal-using-adb-commands
+
+---
+
+Android Expo Method: Run `npm run android` command in the root directory to start the app locally if testing with expo.
+
+Android Method: Build the apk file. Ensure that you have android sdk and java 17 setup from earlier.
+
+1. Create a debug app with command `npx expo run:android`. More info can be [found here](https://docs.expo.dev/more/expo-cli/#compiling)
+2. Create a final build of the android app. Can only be done on mac / linux. Command is `npx eas build --platform android --local`.
+
+Update the SDK variable in `.env` to match path to sdk file.
+
+If you used step 1 from earlier, you will also need to download the SDK for Sudokuru app on the phone/device, either from itch.io or from a pipeline build. Find some way to get the correct version on the device. The reason for this is that the sdk generated in step 1 is not good enough to run on its own, so it is only used for appium to identify which app to open on the device. Step 2 method shouldn't need to do this.
+
+---
+
+Run `appium:start` command in `e2e/mobile` directory. Before running the command ensure that `ANDROID_HOME` variable is set correctly.
+
+Set the appropriate `.env` variables based on the `.env.config` file.
+
+Run the [Appium Inspector](https://github.com/appium/appium-inspector/releases) and connect to the appium instance. The capabilitiy builder can be filled out by using values from the wdio config files.
+
+The Appium Inspector is the easiest way to find UI selectors for writing test cases. The preferred selector types are as follows:
+
+1. ID
+2. Accessibility ID
+3. Class Name
+4. XPath
+
+For elements that we have control over, we should be able to use Accessibility id. This would allow our test identifiers to be cross-platform between iOS and Android. XPath should be avoided when possible with appium due to stability issues, but sometimes it cannot be avoided.
+
+More information can be found in these guides:
+
+- https://www.browserstack.com/guide/locators-in-appium
+- https://webdriver.io/docs/selectors/#mobile-selectors
+
+Run the test cases using the desired profile.
+Current working profiles:
+
+- `wdio:android:expo`
+- `npm run wdio:android:apk`
+
+##
+
+# Android Simulator (todo not ready yet)
+
+appium with webdriver doesn't shut down port after execution:  
+solution is to remove port:  
+windows:  
+`netstat -aon | findstr ":4723" | findstr "LISTENING"`  
+`Taskkill /F /PID <pid>`
+
+1. https://github.com/webdriverio/appium-boilerplate/blob/main/docs/FAQ.md#faq
+
+Interesting info.
+
+Appium Error:
+
+- error: https://discuss.appium.io/t/error-wdio-appium-service-appium-exited-before-timeout/40704
+- https://stackoverflow.com/questions/76173741/appium-exited-before-timeout-error-on-every-second-execution-in-wdio
+- https://stackoverflow.com/questions/77966534/error-wdio-appium-service-appium-exited-before-timeout
+
+Somewhat related:
+
+- https://github.com/webdriverio/appium-boilerplate/issues/98
+
+We are able to resolve this error by running Appium server seperatly and not using `@wdio/appium-service` package.
+
+---
+
+- https://webdriver.io/docs/devtools-service/#installation
+
+- https://medium.com/tauk-blog/building-and-testing-native-mobile-apps-with-react-native-and-webdriverio-part-2-f1f595ebe6d0
+
+- helpful guide to get appPackage and appActivity: https://www.automationtestinghub.com/apppackage-and-appactivity-name/
+
+# Build iOS Simulator
+
+This makes the claim that we can build the app without needing an apple developer account.  
+https://docs.expo.dev/build-reference/simulators/
+
 # Deployments
 
 ### Preview Branch

app/Contexts/InitializeContext.ts

@@ -37,14 +37,14 @@ const InitializeContext = () => {
     (props: any) => {
       return setCurrentPage(props);
     },
-    [currentPage]
+    [currentPage],
   );
 
   const updateLearnedLessons = React.useCallback(
     (props: any) => {
       return setLearnedLessons(props);
     },
-    [learnedLessons]
+    [learnedLessons],
   );
 
   const toggleHighlightIdenticalValues = React.useCallback(() => {
@@ -99,7 +99,7 @@ const InitializeContext = () => {
       highlightRowSetting,
       toggleHighlightColumn,
       highlightColumnSetting,
-    ]
+    ],
   );
 
   return {

app/Navigation/DrawerNavigator.tsx

@@ -11,6 +11,7 @@ import StatisticsStackNavigator from "./StackNavigators/StatisticsStackNavigator
 import ProfileStackNavigator from "./StackNavigators/ProfileStackNavigator";
 import { useTheme } from "react-native-paper";
 import ContactStackNavigator from "./StackNavigators/ContactStackNavigator";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 
 const Drawer = createDrawerNavigator();
 
@@ -19,30 +20,39 @@ const DrawerNavigator = () => {
   const theme = useTheme();
 
   return (
-    <Drawer.Navigator
-      drawerContent={({ navigation }) => {
-        return <NavigationSideBar navigation={navigation} />;
-      }}
-      screenOptions={{
-        drawerStyle: {
-          width: 210,
-          backgroundColor: theme.colors.background,
-          overflow: "hidden", //white space was being caused during some resizes
-        },
-        headerShown: true,
-        header: ({ navigation, route, options }) => {
-          return <Header />;
-        },
-      }}
-    >
-      <Drawer.Screen name="Landing" component={LandingStackNavigator} />
-      <Drawer.Screen name="Learn" component={LearnStackNavigator} />
-      <Drawer.Screen name="Drill" component={DrillStackNavigator} />
-      <Drawer.Screen name="Play" component={PlayStackNavigator} />
-      <Drawer.Screen name="Statistics" component={StatisticsStackNavigator} />
-      <Drawer.Screen name="Profile" component={ProfileStackNavigator} />
-      <Drawer.Screen name="Contact" component={ContactStackNavigator} />
-    </Drawer.Navigator>
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{ flex: 1, backgroundColor: theme.colors.background }}
+      >
+        <Drawer.Navigator
+          drawerContent={({ navigation }) => {
+            return <NavigationSideBar navigation={navigation} />;
+          }}
+          screenOptions={{
+            drawerStyle: {
+              width: 210,
+              backgroundColor: theme.colors.background,
+              overflow: "hidden", //white space was being caused during some resizes
+            },
+            headerShown: true,
+            header: ({ navigation, route, options }) => {
+              return <Header />;
+            },
+          }}
+        >
+          <Drawer.Screen name="Landing" component={LandingStackNavigator} />
+          <Drawer.Screen name="Learn" component={LearnStackNavigator} />
+          <Drawer.Screen name="Drill" component={DrillStackNavigator} />
+          <Drawer.Screen name="Play" component={PlayStackNavigator} />
+          <Drawer.Screen
+            name="Statistics"
+            component={StatisticsStackNavigator}
+          />
+          <Drawer.Screen name="Profile" component={ProfileStackNavigator} />
+          <Drawer.Screen name="Contact" component={ContactStackNavigator} />
+        </Drawer.Navigator>
+      </SafeAreaView>
+    </SafeAreaProvider>
   );
 };