test: set up e2e tests via Maestro

admin/src/lib/database.types.ts

@@ -354,19 +354,19 @@ export type Database = {
           company_id: number | null
           created_at: string
           id: number
-          name: string | null
+          name: string
         }
         Insert: {
           company_id?: number | null
           created_at?: string
           id?: number
-          name?: string | null
+          name: string
         }
         Update: {
           company_id?: number | null
           created_at?: string
           id?: number
-          name?: string | null
+          name?: string
         }
         Relationships: [
           {

database.types.ts

@@ -354,19 +354,19 @@ export type Database = {
           company_id: number | null
           created_at: string
           id: number
-          name: string | null
+          name: string
         }
         Insert: {
           company_id?: number | null
           created_at?: string
           id?: number
-          name?: string | null
+          name: string
         }
         Update: {
           company_id?: number | null
           created_at?: string
           id?: number
-          name?: string | null
+          name?: string
         }
         Relationships: [
           {

native/components/Header.tsx

@@ -73,6 +73,7 @@ export const Header = ({ route }: NativeStackHeaderProps) => {
           size={32}
           onPress={navigation.goBack}
           color="darkGrey"
+          testID="goBack"
         />
       ) : (
         <View />

native/components/Icon.tsx

@@ -22,6 +22,7 @@ export interface InternalIconProps {
   containerStyle?: StyleProp<ViewStyle>;
   size?: number;
   disabled?: boolean;
+  testID?: string;
 }
 
 export type IconProps = Omit<InternalIconProps, "source">;
@@ -34,6 +35,7 @@ const Icon = ({
   containerStyle,
   size = 16,
   disabled,
+  testID,
 }: InternalIconProps) => {
   const theme = useTheme();
   return onPress ? (
@@ -42,6 +44,7 @@ const Icon = ({
       style={containerStyle}
       disabled={disabled}
       activeOpacity={0.4}
+      testID={testID}
     >
       <Image
         source={source}

native/components/Toggle.tsx

@@ -17,7 +17,7 @@ export type ToggleProps = Omit<NativeToggleProps, "onValueChange" | "value"> & {
 
 export const Toggle = forwardRef<NativeToggle, ToggleProps>(
   (
-    { value = true, onChange, disabled, style }: ToggleProps,
+    { value = true, onChange, disabled, style, testID }: ToggleProps,
     ref: React.Ref<NativeToggle>
   ) => {
     const theme = useTheme();
@@ -38,6 +38,7 @@ export const Toggle = forwardRef<NativeToggle, ToggleProps>(
         value={value}
         disabled={disabled}
         style={style}
+        testID={testID}
       />
     );
   }

native/components/ToggleController.tsx

@@ -28,6 +28,7 @@ export const ToggleController = <T extends FieldValues>({
       ref={ref}
       onChange={onChange}
       value={toggleProps?.value || value}
+      testID={toggleProps?.testID}
     />
   );
 };

native/components/common/Button.tsx

@@ -31,6 +31,7 @@ type ButtonProps = {
   fullWidth?: boolean;
   children?: React.ReactNode;
   isLoading?: boolean;
+  testID?: string;
 };
 
 const BORDER_WIDTH = 2;
@@ -55,6 +56,7 @@ export const Button = ({
   fullWidth = false,
   children,
   isLoading = false,
+  testID,
 }: ButtonProps) => {
   const styles = useStyles();
   const isStringChildren = typeof children === "string";
@@ -72,6 +74,7 @@ export const Button = ({
       ]}
       disabled={disabled}
       activeOpacity={0.8}
+      testID={testID}
     >
       {isLoading ? (
         <LoadingSpinner />

native/db/types/generated.ts

@@ -354,19 +354,19 @@ export type Database = {
           company_id: number | null;
           created_at: string;
           id: number;
-          name: string | null;
+          name: string;
         };
         Insert: {
           company_id?: number | null;
           created_at?: string;
           id?: number;
-          name?: string | null;
+          name: string;
         };
         Update: {
           company_id?: number | null;
           created_at?: string;
           id?: number;
-          name?: string | null;
+          name?: string;
         };
         Relationships: [
           {

native/maestro/README.md

@@ -0,0 +1,12 @@
+### Prerequisites for running e2e tests
+Install the `maestro` e2e tool on your system.
+Clean the db with `npm run reset-db` in project root.
+
+For Android, have the Android Studio set up and start the app in an emulator in `./native` with `ANDROID_HOME=PATH_TO_ANDROID_SDK npm run expo -- start -a`.
+
+Of course, if testing edge functions, start them too.
+
+### Running the tests
+Run with `maestro test flow_name.yaml`
+
+The interactive `maestro studio` can be very helpful.

native/maestro/add_stock1_inventory.yaml

@@ -0,0 +1,67 @@
+appId: app.invtrack.invtrack
+---
+# Dodaj inwentaryzację
+- tapOn:
+    id: "addNewStock"
+- tapOn:
+    id: "toggleIsDelivery"
+- assertVisible: "Inwentaryzacja"
+- tapOn: "Nazwa"
+- inputText: "Inw 1"
+- tapOn: "Dodaj"
+
+# Dodaj produkty
+- scrollUntilVisible:
+    element:
+      text: "Podstawowe"
+- tapOn: "Podstawowe"
+- scrollUntilVisible:
+    element:
+      text: "Dodatki"
+- tapOn: "Dodatki"
+
+- tapOn: "Serwetki"
+- tapOn: "+10"
+- tapOn:
+    id: "goBack"
+
+- tapOn: "Mąka"
+- tapOn: "+10"
+- tapOn: "+10"
+- tapOn:
+    id: "goBack"
+
+- tapOn: "Jajka"
+- tapOn: "+10"
+- tapOn:
+    id: "goBack"
+
+- tapOn: "Mleko"
+- tapOn: "+10"
+- tapOn:
+    id: "goBack"
+
+- scrollUntilVisible:
+    element:
+      text: "Truskawki"
+
+- tapOn: "Nutella"
+- tapOn: "+5"
+- tapOn:
+    id: "goBack"
+
+- tapOn: "Truskawki"
+- tapOn: "+5"
+- tapOn:
+    id: "goBack"
+
+- scrollUntilVisible:
+    direction: UP
+    element:
+      text: "Zapisz zmiany"
+- tapOn: "Zapisz zmiany"
+- assertVisible: "Zmiany zostały zapisane"
+- assertNotVisible: "Zmiany zostały zapisane"
+- tapOn:
+    id: "goBack"
+- assertVisible: "Inw 1"

native/maestro/add_stock2_delivery.yaml

@@ -0,0 +1,27 @@
+appId: app.invtrack.invtrack
+---
+# Dodaj dostawę
+- tapOn:
+    id: "addNewStock"
+- assertVisible: "Dostawa"
+- tapOn: "Nazwa"
+- inputText: "Dost 1"
+- tapOn: "Dodaj"
+- tapOn:
+    id: "documentScanner"
+- tapOn:
+    point: "50%,90%"
+- tapOn: "Wyślij"
+- tapOn: "Jajka opakowanie 10szt."
+- tapOn: "Jajka"
+- tapOn: "Mleko 1l"
+- tapOn: "Mleko"
+- tapOn: "Truskawki koszyk 565g"
+- tapOn: "Truskawki"
+- tapOn: "Serwetki opakowanie"
+- tapOn: "Serwetki"
+- tapOn: "Zapisz Zmiany"
+- tapOn: "Zapisz Zmiany"
+- tapOn:
+    id: "goBack"
+- assertVisible: "Dost 1"

native/maestro/add_stock3_inventory.yaml

@@ -0,0 +1,14 @@
+appId: app.invtrack.invtrack
+---
+# Dodaj dostawę
+- tapOn:
+    id: "addNewStock"
+- tapOn:
+    id: "toggleIsDelivery"
+- assertVisible: "Inwentaryzacja"
+- tapOn: "Nazwa"
+- inputText: "Inw 2"
+- tapOn: "Dodaj"
+- tapOn:
+    id: "goBack"
+- assertVisible: "Inw 2"

native/maestro/clean_login.yaml

@@ -0,0 +1,16 @@
+appId: app.invtrack.invtrack
+---
+- launchApp:
+    clearState: true
+- tapOn:
+    text: .*^http.*
+- tapOn: "Continue"
+- tapOn:
+    point: "50%,15%"
+- tapOn: "Zaloguj się"
+- tapOn: "E-mail"
+- inputText: "[email protected]"
+- tapOn: "Hasło"
+- inputText: "aaaaaa"
+- tapOn: "Zaloguj się"
+- assertNotVisible: "Zaloguj się"

native/maestro/main.yaml

@@ -0,0 +1,6 @@
+appId: app.invtrack.invtrack
+---
+- runFlow: "clean_login.yaml"
+- runFlow: "add_stock1_inventory.yaml"
+- runFlow: "add_stock2_delivery.yaml"
+- runFlow: "add_stock3_inventory.yaml"

native/package.json

@@ -6,6 +6,7 @@
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web",
+    "expo": "expo",
     "prepare": "cd .. && husky install",
     "precommit": "lint-staged",
     "lint": "eslint --fix --cache",