Testing Strategy: Gluestack UI Migration

Status: Active - use for Phase 1-5 validation.

Overview

This document outlines how we validate the react-native-paper to Gluestack UI migration across all mobile apps. We want functional parity, no regressions, and predictable builds on Expo SDK 54.

Test Layers

1) Unit Tests (Jest + jest-expo)

• Use jest-expo for React Native tests.
• Prefer --runInBand to reduce memory pressure.
• Reference harness: docs/internal/testing/react-native-jest-harness.md.

Commands:

pnpm nx run teetime-mobile:test:unit --runInBand
pnpm nx run teetime-country-club:test:unit --runInBand
pnpm nx run scl-mobile:test:unit --runInBand
pnpm nx run messaging_mobile:test:unit --runInBand

If memory is tight:

NODE_OPTIONS=--max_old_space_size=6144 pnpm nx run <app>:test:unit --runInBand

2) Component Tests

• Use @testing-library/react-native for new Gluestack wrapper components.
• Co-locate tests with components in libs/ui/gluestack-ui and the legacy auth screens/hooks under libs/mobile-auth/src/lib/legacy.

3) Storybook Catalog (Planned)

• Build a Storybook catalog for @digiwedge/gluestack-ui and key business screens to support visual QA and stakeholder review.
• Stories live beside components as <Name>.stories.tsx and should include interactive props (states, loading, error, disabled).
• Track progress in docs/epics/gluestack-migration/storybook-plan.md.

4) Integration Tests (App Flows)

• Validate navigation, modals, and form flows inside the app.
• Target areas with the highest Paper usage first: IconButton, Button, TextInput, Menu/Dialog, Auth flows.

Overlay QA Checklist (Manual or Smoke)

• Modal: open/close, backdrop press, hardware back (Android), focus/scroll lock.
• Dialog: dismissable vs non-dismissable behavior, action buttons.
• Menu: anchor positioning, close on select, disabled items.
• Popover/Tooltip: anchor hover/press, placement, close on click.
• Toast: variants render, auto-hide timing, manual dismiss.

5) Visual Regression

• Capture before/after screenshots for key screens per app.
• Use the Maestro flow screenshot step or manual device captures.
• Keep a checklist in this doc (see matrix below).

6) E2E (Maestro)

Detox has been replaced with Maestro for lighter-weight mobile e2e testing.

Local Testing

# Requires connected device or emulator with app installed
pnpm nx run teetime-mobile-e2e:test
pnpm nx run teetime-country-club-e2e:test
pnpm nx run scl-mobile-e2e:test
pnpm nx run messaging_mobile-e2e:test

CI Without Devices

SKIP_MAESTRO=1 pnpm nx run teetime-mobile-e2e:test

Maestro Smoke Flows

Each app has a smoke flow that launches the app and takes a screenshot:

App	Flow Path	App ID
teetime-mobile	apps/teetime/teetime-mobile/maestro/smoke.yaml	com.digiwedge.teetime
teetime-country-club	apps/teetime/teetime-country-club/maestro/smoke.yaml	com.digiwedge.teetime.countryclub
scl-mobile	apps/scl/scl-mobile/maestro/smoke.yaml	com.digiwedge.scl
messaging_mobile	apps/messaging/messaging_mobile/maestro/smoke.yaml	com.digiwedge.messaging

K8s CI Setup (Pending)

To run Maestro in Kubernetes with Android emulators:

1. Enable nested virtualization on Hyper-V host:

   Stop-VM -Name "kub-ctn-01"
   Set-VMProcessor -VMName "kub-ctn-01" -ExposeVirtualizationExtensions $true
   Start-VM -Name "kub-ctn-01"

2. Install KVM on K8s nodes:

   sudo apt update && sudo apt install -y qemu-kvm
   ls -la /dev/kvm  # Verify

3. Deploy Android emulator pod with privileged access to /dev/kvm

Status: ⏳ Pending - nested virtualization not yet enabled on K8s nodes.

Pre-Migration Baseline

• Screenshot key screens for each app.
• Record bundle size and startup time (TTI) for each app.
• Capture any existing visual quirks to avoid chasing false positives.

Post-Migration Validation

• All unit tests pass.
• Screens look identical or intentionally improved.
• No console errors or warnings on launch.
• Bundle size at or below baseline.
• TTI at or below baseline.
• Storybook coverage for primitives/forms/overlays/feedback.
• FPS/animation spot-checks completed on dev clients.

Screen Coverage Matrix

Screen	teetime-mobile	teetime-cc	scl-mobile	messaging
Login	[ ]	[ ]	[ ]	[ ]
Signup	[ ]	[ ]	[ ]	[ ]
Home	[ ]	[ ]	[ ]	[ ]
Profile	[ ]	[ ]	[ ]	[ ]
Settings	[ ]	[ ]	[ ]	[ ]
Booking	[ ]	[ ]	N/A	N/A
Buddies	[ ]	[ ]	N/A	N/A

Notes

• If a test fails due to NativeWind transforms, keep the Babel test toggle that disables nativewind/babel for Jest runs.
• Use the existing mocks under tools/mocks/ for RN/Expo modules.