eletrotupi/tcc — frontend: add a Maestro smoke suite for the core journey • pira

eletrotupi / tcc/ commit / cd4e510

frontend: add a Maestro smoke suite for the core journey

Covers login, registering a mood including the components sheet, and
logout. Each flow clears state and logs in through a shared helper, so
the suite does not depend on the order Maestro decides to run the flows
in, which still takes a fucking long time, but as a PoC is more than
enough

Pedro Lucas Porcellis porcellis@eletrotupi.com · 1 month ago cd4e510347589b652e51c97c5db46b27392f76da Browse files

Parents be9c517

Changed files

Additions

+474

Deletions

-13

frontend/.env.example added+8 
/dev/null → frontend/.env.example
  + # Bundle-time env for Expo (inlined by Metro; keep values device-reachable).
  + # Copy to .env.local (gitignored) or export before `npx expo start`.
  + #
  + # Never put a secret here: EXPO_PUBLIC_* ends up inside the shipped JS bundle.
  + #
  + # LAN IP of the machine running the API (see frontend/scripts/e2e.sh print-env).
  + EXPO_PUBLIC_API_BASE_URL=http://192.168.1.10:3000
  + # SecureStore key under which the JWT is persisted.
  + EXPO_PUBLIC_TOKEN_KEY=orbit-jwt
frontend/.maestro/config.yaml added+14 
/dev/null → frontend/.maestro/config.yaml
  + name: nexo e2e
  + 
  + # NOTE: `appId` is deliberately NOT set here. Maestro 2.x requires appId in the
  + # config section of *every* flow file, subflows included; an appId in this
  + # workspace config is ignored. Each flow under ../e2e declares it itself
  + 
  + env:
  +   PORT: "8081"
  +   E2E_EMAIL: e2e@example.com
  +   E2E_PASSWORD: e2e-password
  +   # HOST_IP is intentionally NOT set here: it must be the machine's LAN IP
  +   # `frontend/scripts/e2e.sh` detects it and passes `--env HOST_IP=...`;
  +   # when running `maestro test` directly, pass it yourself:
  +   #   maestro test e2e --include-tags=smoke --env HOST_IP=192.168.x.y
frontend/app/(tabs)/history.tsx modified+1 -1
frontend/app/(tabs)/history.tsx
    import { useState } from "react";
    import { ScrollView, View } from "react-native";
    import { ScreenLayout } from "@/components/ui/ScreenLayout";
    import { Section, SectionHeader } from "@/components/ui/Sections";
    import { FilterPills } from "@/components/ui/FilterPills";
        <ScreenLayout
          userName={user.firstName}
          userAvatar={user.avatarURL}
          showNotificationBadge={true}
        >
  -       <ScrollView>
  +       <ScrollView testID="history-list">
            <FilterPills active={activeFilter} onChange={setActiveFilter} />
    
            {Object.keys(grouped).length === 0 ? (
              <EmptyState
                title="Nenhum registro encontrado"
            )}
          </ScrollView>
        </ScreenLayout>
      );
    }
frontend/app/(tabs)/new/entry.tsx modified+4 -1
frontend/app/(tabs)/new/entry.tsx
    import { useState, useEffect } from "react";
    import { Link, router, useLocalSearchParams } from "expo-router";
    
    import { View, StyleSheet, ScrollView } from "react-native";
    
      return (
        <View>
          <ScrollView scrollEventThrottle={16}>
            <View style={styles.container}>
              <Center>
  -             <Text style={styles.statusPrefix}>
  +             <Text style={styles.statusPrefix} testID="text-status-prefix">
                  Como você está se sentindo agora?
                </Text>
    
                <Text style={styles.statusText}>
                  {selectedMood?.label || "Neutro"}
                  onChangeText={(val) => setAnnotation(val)}
                  value={annotation}
                  minRows={4}
                  maxRows={6}
                  placeholder="Escreva uma nota rápida sobre o seu dia até o momento..."
  +               testID="input-notes"
                />
              </Card>
    
              <Section>
                <SectionHeader title="Também estou..." />
                <Button
                  title="Adicionar estados & emoções"
                  onPress={editComponents}
                  textStyle={{ fontWeight: 500 }}
                  variant="dashed"
  +               testID="button-add-mood-components"
                />
              </Section>
    
              <Button
                title="Salvar Registro"
                onPress={saveMoodEntry}
                disabled={!components.length}
  +             testID="button-save-entry"
              />
            </View>
          </ScrollView>
        </View>
      );
      },
      resumeCard: {
        padding: Spacing.cardGap,
      },
    });
frontend/app/(tabs)/new/index.tsx modified+3 -3
frontend/app/(tabs)/new/index.tsx
    import { useEffect, useState } from "react";
    import { StyleSheet, View, ActivityIndicator } from "react-native";
    
    import { Text } from "@/components/ui/Text";
    import { ThemedView } from "@/components/misc/themed-view";
      const { user } = useAuth();
      const [mood, setMood] = useState<string>("good");
      const { data, isLoading } = useMoodEntries({ limit: 5 });
      const recentEntries = data?.entries ?? [];
    
  -   console.log("entries: ", data, recentEntries);
  - 
      const initQuickRegister = () => {
        // TODO: Set down on camelCase vs kebab case
        router.navigate(`/new/entry?initialMood=${mood}`);
      };
    
        >
          <Section>
            <SectionHeader
              title="Como você está hoje?"
              subtitle="Sua jornada começa agora"
  +           testID="text-welcome-quick-register"
            ></SectionHeader>
    
  -         <Card style={{ minHeight: 200 }}>
  +         <Card style={{ minHeight: 200 }} testID="card-quick-register">
              <Col gap={16}>
                <Between style={styles.quickRegisterHeader}>
                  <Text style={styles.quickRegisterTitle}>
                    Registro rápido
                  </Text>
    
                <Button
                  title="Salvar Humor"
                  onPress={initQuickRegister}
                  style={styles.quickRegisterButton}
  +               testID="button-save-mood"
                />
              </Col>
            </Card>
          </Section>
    
        fontSize: 11,
        fontWeight: 600,
        lineHeight: 16.5,
      },
    });
frontend/app/(tabs)/new/post-mood.tsx modified+2 -1
frontend/app/(tabs)/new/post-mood.tsx
    import { useState } from "react";
    import {
      View,
      StyleSheet,
      TouchableOpacity,
            <View style={styles.outerRing}>
              <View style={styles.innerCircle}>
                <Ionicons name="checkmark" size={32} color="#fff" />
              </View>
            </View>
  -         <Text style={styles.confirmTitle}>Humor Salvo!</Text>
  +         <Text style={styles.confirmTitle} testID="text-mood-saved">Humor Salvo!</Text>
            <Text style={styles.confirmSubtitle}>
              Seu registro foi armazenado com sucesso.
            </Text>
          </View>
    
          <Button
            title={linked ? 'Voltar para a tela inicial' : 'Pular essa etapa'}
            variant="ghost"
            onPress={() => router.replace("/(tabs)/new")}
            style={styles.concludeButton}
  +         testID="button-conclude"
          />
        </ScreenLayout>
      );
    }
    
      },
      concludeButton: {
        marginTop: 8,
      },
    });
frontend/app/(tabs)/settings.tsx modified+1 
frontend/app/(tabs)/settings.tsx
    import {
      TouchableOpacity,
      StyleSheet,
      SectionList,
      View,
          <Button
            title="Sair da Conta"
            onPress={handleLogout}
            variant="outline"
            style={{ borderColor: Colors.light.danger }}
  +         testID="button-logout"
            textStyle={{ color: Colors.light.danger }}
          />
        </ScreenLayout>
      );
    }
        height: StyleSheet.hairlineWidth,
        backgroundColor: "#D1D5DB",
        marginVertical: 16,
      },
    });
frontend/app/auth/login.tsx modified+3 -1
frontend/app/auth/login.tsx
    import React, { useState, useEffect, useRef } from "react";
    import {
      View,
      StyleSheet,
      ScrollView,
                  />
                </Animated.View>
              </View>
    
              <View style={styles.header}>
  -             <Text style={[styles.title, { color: textColor }]}>
  +             <Text style={[styles.title, { color: textColor }]} testID="text-welcome">
                  Bem vindo de volta
                </Text>
                <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
                  Logue na sua conta nexo
                </Text>
                  value={password}
                  onChangeText={setPassword}
                  placeholder="Qual sua senha?"
                  error={errors.password}
                  showPasswordToggle
  +               testID="input-password"
                />
    
                <Button
                  title="Entrar"
                  onPress={handleLogin}
                  loading={loading}
                  style={styles.loginButton}
  +               testID="button-login"
                />
    
                <Link
                  href="/auth/forgot-password"
                  style={StyleSheet.flatten([styles.link, { color: tintColor }])}
      },
      footerText: {
        fontSize: 14,
      },
    });
frontend/app/entry/mood-components.tsx modified+3 -2
frontend/app/entry/mood-components.tsx
    import React from "react";
    import { View, ScrollView, Pressable, StyleSheet } from "react-native";
    import { Text } from "@/components/ui/Text";
    import { router } from "expo-router";
    import { Ionicons } from "@expo/vector-icons";
      const handleDone = () => {
        router.back();
      };
    
      return (
  -     <View style={styles.container}>
  +     <View style={styles.container} testID="screen-mood-components">
          {/* Header */}
          <View style={styles.header}>
            <Pressable onPress={() => router.back()} hitSlop={8}>
              <Ionicons name="close" size={24} color={Theme.colors.text} />
            </Pressable>
            <Text style={styles.headerTitle}>Adicionar estados</Text>
  -         <Pressable onPress={handleDone} hitSlop={8}>
  +         <Pressable onPress={handleDone} hitSlop={8} testID="header-done">
              <Text style={styles.headerAction}>Pronto</Text>
            </Pressable>
          </View>
    
          <ScrollView
                  {available.map((def) => (
                    <Card key={def.id} style={styles.availableItem}>
                      <Pressable
                        onPress={() => addComponent(def.id)}
                        style={styles.availableItemInternalWrapper}
  +                     testID={`component-${def.id}`}
                      >
                        <Row gap={8} style={styles.availableInner}>
                          <View
                            style={[styles.dot, { backgroundColor: def.color }]}
                          />
        fontSize: Theme.typography.bodyMd.fontSize,
        fontWeight: "500",
        color: Theme.colors.light.text,
      },
    });
frontend/components/ui/Button.tsx modified+10 
frontend/components/ui/Button.tsx
    import React from 'react';
    import {
      TouchableOpacity,
      StyleSheet,
      ActivityIndicator,
      TextStyle,
    } from 'react-native';
    import { Text } from '@/components/ui/Text';
    import { useThemeColor } from '@/hooks/use-theme-color';
    
  + function toTestId(title: string): string {
  +   return title
  +     .normalize('NFD')
  +     .replace(/[\u0300-\u036f]/g, '')
  +     .toLowerCase()
  +     .replace(/[^a-z0-9]+/g, '-')
  +     .replace(/^-+|-+$/g, '');
  + }
  + 
    interface ButtonProps extends TouchableOpacityProps {
      title: string;
      variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'dashed' | 'danger';
      size?: 'small' | 'medium' | 'large';
      loading?: boolean;
        }
      };
    
      return (
        <TouchableOpacity
  +       testID={props.testID ?? `button-${toTestId(title)}`}
          style={[
            styles.button,
            {
              backgroundColor: getBackgroundColor(),
              borderWidth: getBorderWidth(),
      },
      text: {
        fontWeight: '600',
      },
    });
frontend/components/ui/Cards.tsx modified+3 
frontend/components/ui/Cards.tsx
    import React from 'react';
    import {
      View,
      StyleSheet,
      Pressable,
    interface CardProps {
      children: React.ReactNode;
      onPress?: () => void;
      variant?: 'default' | 'highlighted';
      style?: ViewStyle;
  +   testID?: string;
    }
    
    export const Card: React.FC<CardProps> = ({
      children,
      onPress,
      variant = 'default',
      style,
  +   testID,
    }) => {
      const isHighlighted = variant === 'highlighted';
    
      const surfaceColor = useThemeColor({}, 'surface');
      const cardBorderColor = useThemeColor({}, 'cardBorder');
    
      return (
        <Pressable
          onPress={onPress}
          disabled={!onPress}
  +       testID={testID}
          style={({ pressed }) => [
            styles.card,
            pressed && onPress && {
              opacity: 0.8,
            },
            {text.replace(/\s+/g, ' ').trim()}
          </Text>
        </View>
      )
    }
frontend/components/ui/EmojiSelectors.tsx modified+2 
frontend/components/ui/EmojiSelectors.tsx
    import React from "react";
    import {
      View,
      Pressable,
      StyleSheet,
            return (
              <View key={item.id} style={styles.itemWrapper}>
                <Pressable
                  onPress={() => !disabled && onSelect(item.id)}
                  disabled={disabled}
  +               testID={`mood-${item.id}`}
  +               accessibilityLabel={item.label}
                  style={({ pressed }) => [
                    styles.itemButton,
                    isSelected && styles.itemButtonActive,
                    pressed && !disabled && { opacity: 0.7 },
                    disabled && { opacity: 0.5 },
            );
          })}
        </View>
      );
    };
frontend/components/ui/Input.tsx modified+13 
frontend/components/ui/Input.tsx
    import React, { useState } from 'react';
    import {
      TextInput,
      TextInputProps,
      StyleSheet,
    } from 'react-native';
    import { Text } from '@/components/ui/Text';
    import { useThemeColor } from '@/hooks/use-theme-color';
    import { Ionicons } from '@expo/vector-icons';
    
  + function toTestId(label: string): string {
  +   return label
  +     .normalize('NFD')
  +     .replace(/[\u0300-\u036f]/g, '')
  +     .toLowerCase()
  +     .replace(/[^a-z0-9]+/g, '-')
  +     .replace(/^-+|-+$/g, '');
  + }
  + 
    type InputVariant = 'default' | 'ghost' | 'darkGhost';
    
    interface BaseInputProps {
      label?: string;
      error?: string;
        inputStyle
      } = useInputStyles(variant, error, showPasswordToggle);
    
      const keyboardType = type === 'email' ? 'email-address' : 'default';
      const secureTextEntry = type === 'password' && !showPassword;
  +   const testID = props.testID ?? (label ? `input-${toTestId(label)}` : undefined);
    
      return (
        <View style={styles.container}>
          {label && (
            <Label text={label} />
          )}
          <View style={styles.inputContainer}>
            <TextInput
              key={`${type}-${showPassword}`}
  +           testID={testID}
              style={[styles.input, inputStyle, style]}
              placeholderTextColor={placeholderColor}
              keyboardType={keyboardType}
              secureTextEntry={secureTextEntry}
              autoCapitalize={type === 'email' ? 'none' : props.autoCapitalize}
        inputStyle
      } = useInputStyles(variant, error);
    
      const minHeight = minRows * 24;
      const maxHeight = maxRows ? maxRows * 24 : undefined;
  +   const testID = props.testID ?? (label ? `input-${toTestId(label)}` : undefined);
    
      return (
        <View style={styles.container}>
          {label && (
            <Label text={label} />
          )}
          <TextInput
  +         testID={testID}
            style={[
              styles.textArea,
              inputStyle,
              { minHeight, maxHeight },
              style,
      errorText: {
        fontSize: 12,
        marginTop: 4,
      },
    });
frontend/components/ui/Sections.tsx modified+4 -1
frontend/components/ui/Sections.tsx
    import React from 'react';
    import {
      View,
      StyleSheet,
      Pressable,
    };
    
    interface SectionHeaderProps {
      title: string;
      subtitle?: string;
  +   info?: string;
      actionLabel?: string;
      onActionPress?: () => void;
      style?: ViewStyle;
      variant?: 'default' | 'subtle';
  +   testID?: string;
    }
    
    // XXX: A Section must either have a label as a pill/informative thing
    // or it should be a link
    export const SectionHeader: React.FC<SectionHeaderProps> = ({
      info,
      actionLabel,
      onActionPress,
      variant,
      style,
  +   testID,
    }) => {
      const textColor = useThemeColor({}, 'text');
      const tintColor = useThemeColor({}, 'tint');
      const textSecondaryColor = useThemeColor({}, 'textSecondary')
    
    
      // TODO: Rework these when we finally have chips/badges
      return (
        <View style={[styles.headerContainer, style]}>
          <Between>
  -         <Text style={styles.title}>
  +         <Text style={styles.title} testID={testID}>
              {title}
            </Text>
    
            {info && !actionLabel && (
              <Text>
          )}
        </View>
      );
    };
    
frontend/e2e/README.md added+107 
/dev/null → frontend/e2e/README.md
  + # Mobile E2E (Maestro on a physical Android device)
  + 
  + Smoke coverage for the core journey: **login → register a mood → logout**. Runs
  + on a real Android device over `adb` (no emulator), against a dev build of the
  + app talking to the normal local API
  + 
  + ## What you need
  + 
  + 1. **API up, with the seeded user.**: the app points at whichever API
  +    `EXPO_PUBLIC_API_BASE_URL` names
  + 
  +    ```sh
  +    docker compose up -d db valkey api
  +    cd api && npm run seed        # idempotent; creates e2e@example.com / e2e-password
  +    ```
  + 
  + 2. **Metro serving the dev build**, with the device-reachable API URL baked in
  +    (`EXPO_PUBLIC_*` is inlined at bundle time, so Metro must be started *after*
  +    `frontend/.env.local` is set: see `npm run test:e2e:env`)
  + 
  + 3. **The dev build installed** (`com.eletrotupi.orbit`) and the device visible in
  +    `adb devices`
  + 
  + 4. **Maestro** on `PATH` (`https://get.maestro.mobile.dev`)
  + 
  + ## Running
  + 
  + ```sh
  + cd frontend
  + npm run test:e2e          # adb prep + the tagged smoke flows
  + npm run test:e2e:env      # print the EXPO_PUBLIC_* values Metro needs
  + ```
  + 
  + A single flow, while iterating (a few minutes faster than the whole suite):
  + 
  + ```sh
  + cd frontend
  + maestro test e2e/mood.yaml \
  +   --env HOST_IP=$(ip route get 1 | awk '/src/{for(i=1;i<=NF;i++) if($i=="src"){print $(i+1);exit}}') \
  +   --env PORT=8081 --env E2E_EMAIL=e2e@example.com --env E2E_PASSWORD=e2e-password
  + ```
  + 
  + Three flows take roughly 8 minutes: every flow clears app state, so each one
  + pays for a cold bundle load and the dev-client startup dance
  + 
  + ## How the flows are structured
  + 
  + Every flow is **self-contained and order-independent**: Maestro runs them in an
  + arbitrary order, so none may assume another ran first. Each starts with:
  + 
  + ```yaml
  + - runFlow:
  +     file: helpers/_login.yaml
  + ```
  + 
  + and `helpers/_login.yaml` does the whole reset-and-authenticate: `clearState`
  + => deep-link the dev build => log in => dismiss the notification prompt. That
  + means `clearState` is what guarantees a logged-out start, which has three
  + consequences worth knowing:
  + 
  + - it resets **runtime permissions**, so the notification dialog shows up again
  +   and must be allowed (see copy matches below);
  + - it resets **expo-dev-client**, so its first-run overlays appear ("Continue",
  +   then the dev-menu panel's "Close");
  + - it discards the downloaded JS bundle, hence the cold start
  + 
  + The app is intentionally **not** launched with `exp://`: Expo Go owns that
  + scheme, and driving Expo Go while asserting on `com.eletrotupi.orbit` will fail
  + with "element not found" everywhere. The dev build owns
  + `orbit://expo-development-client/?url=...`, kinda hacky but I don't care
  + 
  + ## testID convention
  + 
  + `id`s are English even though the UI is pt-BR. Flows only touch screens that
  + pass an explicit `testID`
  + 
  + Auto-derived fallbacks exist when a screen passes nothing: `Button` →
  + `button-<slug(title)>`, `Input`/`TextArea` → `input-<slug(label)>`,
  + `MoodSelector` → `mood-<id>`. The slug util lives in `Button.tsx` / `Input.tsx`
  + (NFD strip, lowercase, kebab-style)
  + 
  + Every flow file: **including subflows** — must declare `appId:
  + com.eletrotupi.orbit` in its config section. Maestro 2.x requires it per file;
  + the workspace `.maestro/config.yaml` cannot supply it
  + 
  + ## The unavoidable copy matches
  + 
  + A handful of strings cannot be reached by `testID` because they belong to the
  + OS or to dev tooling. These are deliberate, and the only ones a flow may assert
  + on:
  + 
  + | Where | Selector | Why |
  + | --- | --- | --- |
  + | Logout confirm `Alert` | `^Sair$` with `index: 1` | RN native dialog, no ids, will be fixed eventually |
  + | History card annotation | `"e2e smoke register"` | the one *data* assertion; proves write-through |
  + | Notification permission | `com.android.permissioncontroller:id/permission_allow_button` | AOSP system dialog |
  + | expo-dev-client onboarding | `^Continue$` | dev tooling, not app UI |
  + | expo-dev-client dev menu | `^Close$` (content-desc) | dev tooling, not app UI |
  + 
  + Everything else is greeted via `testID`
  + 
  + ## Known gotchas
  + 
  + - **The formSheet opens at its half detent.** `entry/mood-components` uses
  +   `sheetInitialDetentIndex: 1` of `[0.25, 0.5, 1]`, so only the first rows of
  +   the component list are mounted
  + - The soft keyboard covers `button-login`; the flow calls `hideKeyboard` first
frontend/e2e/debug-mood-components.yaml added+37 
/dev/null → frontend/e2e/debug-mood-components.yaml
  + # Debug helper (NOT part of the smoke suite): isolates the "add a mood
  + # component" interaction to reproduce the auto-navigation issue observed on
  + # 2026-09-15 (see docs/STACK.md). Run directly:
  + #   maestro test frontend/e2e/debug-mood-components.yaml
  + appId: com.eletrotupi.orbit
  + name: Debug — mood components
  + ---
  + - runFlow:
  +     file: helpers/_login.yaml
  + - tapOn:
  +     id: mood-great
  + - tapOn:
  +     id: button-save-mood
  + - extendedWaitUntil:
  +     visible:
  +       id: text-status-prefix
  +     timeout: 30000
  + - scrollUntilVisible:
  +     element:
  +       id: button-add-mood-components
  +     direction: DOWN
  + - tapOn:
  +     id: button-add-mood-components
  + - extendedWaitUntil:
  +     visible:
  +       id: screen-mood-components
  +     timeout: 15000
  + - tapOn:
  +     id: component-joy
  + # If the app pops back to the entry screen here, `screen-mood-components`
  + # disappears this wait fails fast and pinpoints the regression
  + - extendedWaitUntil:
  +     visible:
  +       id: screen-mood-components
  +     timeout: 10000
  + - assertVisible:
  +     id: header-done
frontend/e2e/helpers/_login.yaml added+42 
/dev/null → frontend/e2e/helpers/_login.yaml
  + appId: com.eletrotupi.orbit
  + ---
  + # Self-contained login: every flow starts from a clean, logged-out app so the
  + # suite is order-independent (Maestro runs the flows in an arbitrary order)
  + - clearState
  + - openLink: orbit://expo-development-client/?url=http%3A%2F%2F${HOST_IP}%3A${PORT}
  + # clearState resets expo-dev-client itself, so its first-run overlays can show
  + # up before the JS app loads: the "developer menu" intro ("Continue") and then
  + # the dev-menu panel ("Close"). Both are dev tooling, not app UI, two more
  + # unavoidable copy matches; both optional so they cost nothing when absent
  + - waitForAnimationToEnd:
  +     timeout: 5000
  + - tapOn:
  +     text: "^Continue$"
  +     optional: true
  + - tapOn:
  +     text: "^Close$"
  +     optional: true
  + - extendedWaitUntil:
  +     visible:
  +       id: text-welcome
  +     timeout: 90000
  + - tapOn:
  +     id: input-email
  + - inputText: ${E2E_EMAIL}
  + - tapOn:
  +     id: input-password
  + - inputText: ${E2E_PASSWORD}
  + # The soft keyboard covers the login button; without this the tap misses
  + - hideKeyboard
  + - tapOn:
  +     id: button-login
  + # clearState resets runtime permissions, so the app asks for notifications
  + # after login. Allow it, otherwise the system dialog blocks the next step.
  + # System dialog, so no testID; the AOSP resource-id is the stable selector
  + - tapOn:
  +     id: com.android.permissioncontroller:id/permission_allow_button
  +     optional: true
  + - extendedWaitUntil:
  +     visible:
  +       id: text-welcome-quick-register
  +     timeout: 15000
frontend/e2e/login.yaml added+9 
/dev/null → frontend/e2e/login.yaml
  + appId: com.eletrotupi.orbit
  + name: Smoke — Login
  + tags:
  +   - smoke
  + ---
  + - runFlow:
  +     file: helpers/_login.yaml
  + - assertVisible:
  +     id: card-quick-register
frontend/e2e/logout.yaml added+26 
/dev/null → frontend/e2e/logout.yaml
  + appId: com.eletrotupi.orbit
  + name: Smoke — Logout
  + tags:
  +   - smoke
  + ---
  + - runFlow:
  +     file: helpers/_login.yaml
  + - tapOn:
  +     id: tab-settings
  + - scrollUntilVisible:
  +     element:
  +       id: button-logout
  +     direction: DOWN
  + - tapOn:
  +     id: button-logout
  + # RN Alert renders a native system dialog, the only screen that can't expose
  + # testIDs. These two text matches are a deliberate, unavoidable exception
  + # TODO: Fix that to use some other, more custom (and pretty) confirm dialog
  + - assertVisible: "Tem certeza que quer sair?"
  + - tapOn:
  +     text: "^Sair$"
  +     index: 1
  + - extendedWaitUntil:
  +     visible:
  +       id: text-welcome
  +     timeout: 15000
frontend/e2e/mood.yaml added+59 
/dev/null → frontend/e2e/mood.yaml
  + appId: com.eletrotupi.orbit
  + name: Smoke — Mood entry
  + tags:
  +   - smoke
  + ---
  + - runFlow:
  +     file: helpers/_login.yaml
  + - tapOn:
  +     id: mood-great
  + - tapOn:
  +     id: button-save-mood
  + - extendedWaitUntil:
  +     visible:
  +       id: text-status-prefix
  +     timeout: 30000
  + # NOTE: if `screen-mood-components` times out below, the app is likely
  + # auto-navigating back to the entry screen right after this push — see
  + # docs/STACK.md "Known issues" (investigated with hierarchy dumps).
  + - scrollUntilVisible:
  +     element:
  +       id: button-add-mood-components
  +     direction: DOWN
  + - tapOn:
  +     id: button-add-mood-components
  + - extendedWaitUntil:
  +     visible:
  +       id: screen-mood-components
  +     timeout: 15000
  + # The sheet opens at its half detent and the component list scrolls, so only the
  + # first rows are mounted
  + - tapOn:
  +     id: component-joy
  + - tapOn:
  +     id: header-done
  + - tapOn:
  +     id: input-notes
  + - inputText: "e2e smoke register"
  + - hideKeyboard
  + - tapOn:
  +     id: button-save-entry
  + - extendedWaitUntil:
  +     visible:
  +       id: text-mood-saved
  +     timeout: 30000
  + - tapOn:
  +     id: button-conclude
  + - extendedWaitUntil:
  +     visible:
  +       id: text-welcome-quick-register
  +     timeout: 15000
  + - tapOn:
  +     id: tab-history
  + - extendedWaitUntil:
  +     visible:
  +       id: history-list
  +     timeout: 15000
  + # Only content (data) assertion in the suite: checks the annotation we typed
  + # persisted on the history card. UI chrome is greeted via testIDs only
  + - assertVisible: "e2e smoke register"
frontend/package.json modified+1 -3
frontend/package.json
    {
      "name": "orbit",
      "main": "expo-router/entry",
      "version": "0.0.0",
      "scripts": {
        "reset-project": "node ./scripts/reset-project.js",
        "android": "expo run:android",
        "lint": "expo lint",
        "ios": "expo run:ios",
        "test:e2e": "bash scripts/e2e.sh test",
  -     "test:e2e:up": "bash scripts/e2e.sh up",
  -     "test:e2e:down": "bash scripts/e2e.sh down",
  -     "test:e2e:all": "bash scripts/e2e.sh all"
  +     "test:e2e:env": "bash scripts/e2e.sh print-env"
      },
      "dependencies": {
        "@expo-google-fonts/inter": "^0.4.2",
        "@expo/vector-icons": "^15.0.3",
        "@react-native-async-storage/async-storage": "2.2.0",
        "eslint-config-expo": "~57.0.2",
        "typescript": "~6.0.3"
      },
      "private": true
    }
frontend/scripts/e2e.sh added+122 
/dev/null → frontend/scripts/e2e.sh
  + #!/usr/bin/env bash
  + #
  + # E2E harness for the nexo frontend: Maestro flows on a physical Android
  + # device over adb (no emulator)
  + #
  + # The app talks to whatever API `EXPO_PUBLIC_API_BASE_URL` points at, so there is
  + # no second API service to boot here: bring the normal stack up and point Metro
  + # at it:
  + #
  + #   docker compose up -d db valkey api
  + #   cd api && npm run seed                  # known e2e user (idempotent)
  + #   cd frontend && npx expo start           # with .env.local set (see print-env)
  + #
  + # Usage: e2e.sh [test|print-env]
  + #   test       prep the device (adb) and run the tagged Maestro flows
  + #   print-env  print the EXPO_PUBLIC_* vars to set before `expo start`
  + #
  + # Optional env: HOST_IP (LAN IP of this machine) is auto-detected when unset
  + set -euo pipefail
  + 
  + ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
  + FRONTEND="$ROOT/frontend"
  + 
  + # The app under test: the dev build (`eas build --profile development`)
  + APP_ID="${APP_ID:-com.eletrotupi.orbit}"
  + EXPO_PORT="${EXPO_PORT:-8081}"
  + E2E_EMAIL="${E2E_EMAIL:-e2e@example.com}"
  + E2E_PASSWORD="${E2E_PASSWORD:-e2e-password}"
  + 
  + die() { echo "e2e: $*" >&2; exit 1; }
  + 
  + detect_host_ip() {
  +   if [[ -n "${HOST_IP:-}" ]]; then
  +     echo "$HOST_IP"
  +     return
  +   fi
  + 
  +   local ip=""
  +   ip="$(ip route get 1 2>/dev/null | awk '/src/{for (i=1;i<=NF;i++) if ($i=="src") {print $(i+1); exit}}')"
  + 
  +   [[ -z "$ip" ]] && ip="$(hostname -I 2>/dev/null | awk '{print $1}')"
  +   [[ -z "$ip" ]] && die "could not detect LAN IP; export HOST_IP=<lan-ip>"
  + 
  +   echo "$ip"
  + }
  + 
  + adb_prepare() {
  +   command -v adb >/dev/null || die "adb not found; install android-tools"
  +   echo "e2e: waiting for an Android device (up to 15s)..."
  + 
  +   local i state=""
  + 
  +   for i in $(seq 1 15); do
  +     state="$(adb get-state 2>/dev/null)"
  +     [[ "$state" == "device" ]] && break
  +     sleep 1
  +   done
  + 
  +   if [[ "$state" != "device" ]]; then
  +     adb devices >&2 || true
  +     die "no Android device attached. Connect one over USB/wireless debugging (or set ANDROID_SERIAL when several are connected) and re-run"
  +   fi
  + 
  +   echo "e2e: adb devices:"
  + 
  +   adb devices
  + 
  +   # No `pm clear` here: each flow starts with Maestro `clearState`, which needs no
  +   # host-side help, and clearing here only re-triggered the expo-dev-client
  +   # first-run overlays. Granting the runtime permission is still worth it:
  +   # clearState resets it and the app asks for notifications right after login
  +   adb shell pm grant "$APP_ID" android.permission.POST_NOTIFICATIONS >/dev/null 2>&1 || true
  +   # Disable animations for speed and stability
  + 
  +   adb shell settings put global window_animation_scale 0 >/dev/null
  +   adb shell settings put global transition_animation_scale 0 >/dev/null
  +   adb shell settings put global animator_duration_scale 0 >/dev/null
  + }
  + 
  + run_maestro() {
  +   command -v maestro >/dev/null || die "maestro not found; install via https://get.maestro.mobile.dev"
  +   local host_ip
  +   host_ip="$(detect_host_ip)"
  + 
  +   (
  +     cd "$FRONTEND"
  +     maestro test e2e \
  +       --include-tags=smoke \
  +       --env HOST_IP="$host_ip" \
  +       --env PORT="$EXPO_PORT" \
  +       --env E2E_EMAIL="$E2E_EMAIL" \
  +       --env E2E_PASSWORD="$E2E_PASSWORD"
  +   )
  + }
  + 
  + print_env() {
  +   local host_ip
  +   host_ip="$(detect_host_ip)"
  + 
  +   cat <<EOF
  + Put this in frontend/.env.local (gitignored) before starting Metro:
  + 
  +   EXPO_PUBLIC_API_BASE_URL=http://$host_ip:3000
  +   EXPO_PUBLIC_TOKEN_KEY=orbit-jwt
  + 
  +   npx expo start --port $EXPO_PORT
  + EOF
  + }
  + 
  + case "${1:-}" in
  +   test)
  +     adb_prepare
  +     run_maestro
  +     ;;
  +   print-env)
  +     print_env
  +     ;;
  +   *)
  +     echo "usage: $0 [test|print-env]" >&2
  +     exit 1
  +     ;;
  + esac