TimandGitHub
56ac2f6989
* tests(mobile): add E2E tests for Connect Signer flow
Add Maestro E2E infrastructure and happy-path test for the WalletConnect-based signer import flow. Includes a mock
WalletConnectContext override, external e2e state store, TestCtrls setup buttons, and a success-path test covering signer list verification, name validation, and post-import assertions.
* test(mobile): enhance E2E tests for Connect Signer validation
Update the connect-signer-success.yml to improve validation checks for the name input field. Ensure the continue button is disabled when the name is empty or exceeds 20 characters, and re-enable it upon valid input. This enhances the robustness of the E2E tests for the Connect Signer flow.
* test(mobile): enhance E2E tests for signer details verification
Update connect-signer-success.yml to include additional assertions for the imported signer's details page. New tests verify the visibility of the wallet icon, connected status badge, and the remove signer button, ensuring comprehensive validation of the signer details in the Connect Signer flow.
* test(mobile): add E2E test for non-owner Connect Signer flow
Introduce a new test case in connect-signer-not-owner.yml to validate the error handling when a non-owner attempts to connect a wallet. The test verifies the visibility of error messages and the transition to the owner state, enhancing the robustness of the Connect Signer flow. Additionally, update TestCtrls and connectSignerSetup to support the new test scenario.
* docs(mobile): update README with environment variable configuration for Maestro tests
Add a new section detailing the required environment variables for running Maestro E2E tests, including descriptions and default values for iOS and Android configurations. This enhances clarity for developers setting up their testing environment.
* fix(mobile): improve type safety in WalletConnect E2E context
- Make `instance` prop optional since it's unused in the E2E mock
- Replace unsafe `{} as unknown` return in sign() with a thrown error
* tests(mobile): derive test constants from mock data in connectSignerSetup
- Get OWNER_ADDRESS from mockedActiveSafeInfo.owners[0] instead of hardcoding
- Replace external URL wallet icon with inline base64 1x1 PNG
* tests(mobile): add error handling to WalletConnect E2E state listeners
Extract notifyListeners() helper that catches per-listener errors,
preventing a single throwing listener from breaking state propagation.
5.9 KiB
Safe{Mobile} app 📱
This project is now part of the @safe-global/safe-wallet monorepo! The monorepo setup allows centralized management
of multiple
applications and shared libraries. This workspace (apps/mobile) contains the Safe Mobile App.
You can run commands for this workspace in two ways:
- From the root of the monorepo using
yarn workspacecommands - From within the
apps/mobiledirectory
Prerequisites
In the addition to the monorepo prerequisites, the mobile app requires the following:
- Expo CLI
- iOS/Android Development Tools
- Maestro if you want to run E2E tests
You can follow the expo documentation to install the CLI and set up your development environment.
Follow the Maestro documentation to install the tool for E2E testing.
Setup the project
- Install all dependencies from the root of the monorepo:
yarn install
Running the app
There is a .env.example file in the root of the mobile app. Create a .env.local file and paste the contents of the .env.example
file into it and set the correct values for the environment variables.
For local development you need to place the google-services.json and GoogleService-Info.plist files in the root of
the mobile app.
If you use EAS to manage your environement variables you can issue the
eas env:pull
command. This will pull the variables from your eas project and place them in the .env.local file.
Running on iOS
From the root of the monorepo:
yarn workspace @safe-global/mobile start:ios
Or directly from the apps/mobile directory:
yarn start:ios
Note
From now on for brevity we will only show the command to run from the root of the monorepo. You can always run the command from the
apps/mobiledirectory you just need to omit theworkspace @safe-global/mobile.
Running on Android
From the root of the monorepo:
yarn workspace @safe-global/mobile start:android
How to open the custom devtools menu
The app supports Redux, RTK Query, and React DevTools. To access these tools:
- Run the app.
- In the terminal where the Expo server is running, press
Shift + M. - Select the desired DevTools option for debugging. Happy debugging! 👨💻👩💻
Running the Storybook
Running in the browser
Run the storybook command from the root:
yarn workspace @safe-global/mobile storybook:web
Running on a mobile device
To run the storybook on a mobile device:
yarn workspace @safe-global/mobile storybook:[ios|android]
To View stories press i on iOS or a on Android.
How to run the E2E Tests
We use Maestro for E2E testing. Before running tests, install Maestro following the documentation for your OS.
Configure env variables
Maestro tests rely on environment variables that must be set before running tests. The
app-start.yml utility provides sensible defaults when variables are unset, but Maestro Studio does not read defaults from YAML files, so you must pass them explicitly.
| Variable | Description | iOS (production) | iOS (dev) | Android (production) | Android (dev) |
|---|---|---|---|---|---|
APP_ID |
Bundle / package identifier of the installed app | global.safe.mobileapp.ios |
global.safe.mobileapp.ios.dev |
global.safe.mobileapp |
global.safe.mobileapp.dev |
IS_DEV_MODE |
Set to "true" to dismiss dev-only dialogs on start |
false (default) |
true |
false (default) |
true |
SKIP_CLEAN_START |
Set to "true" to preserve app state between tests (used in suites) |
false (default) |
Tip
When
APP_IDis not set,app-start.ymldefaults to the production bundle ID for the current platform. If you built the app withAPP_VARIANT=development, you must pass the dev bundle ID or Maestro will hang at the "Launch app" step because it cannot find the app.
Run a dev build and E2E tests
To build the app for tests:
For iOS:
yarn workspace @safe-global/mobile e2e:metro-ios
For Android:
yarn workspace @safe-global/mobile e2e:metro-android
These commands include .e2e.ts|.e2e.tsx files for mocking services or adding test-specific code.
Run the tests
In a second terminal run:
yarn workspace @safe-global/mobile e2e:run
Use Maestro Studio to write tests
To write tests with Maestro Studio, run:
maestro studio
Export the generated YAML file to the e2e folder and include it in the test suite.
Running E2E tests in CI
To run tests in CI, add the eas-build-ios:build-and-maestro-test label to a PR. This triggers the Expo CI pipeline to
execute the tests.
Unit tests
We use Jest and the React Native Testing Library for unit, component, and hook tests.
Run tests:
yarn workspace @safe-global/mobile test
Run in watch mode:
yarn workspace @safe-global/mobile test:watch
Check coverage:
yarn workspace @safe-global/mobile test
Navigate to the coverage folder and open index.html in your browser.
Running ESLint & Prettier
This project uses ESLint, Prettier, and TypeScript for linting and formatting.
Run linting from the root:
yarn workspace @safe-global/mobile lint
This command validates files with TypeScript, ESLint, and Prettier configurations.