test(mobile): add E2E tests for main navigation (Wallet 4.0 & legacy)

.changeset/add-e2e-main-navigation-tests.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Add E2E test infrastructure for main navigation (Wallet 4.0 and legacy)

apps/ledger-live-mobile/e2e/mocks/react-native-blur.js

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/**
+ * Mock for @sbaiahmed1/react-native-blur used during E2E (Detox) builds.
+ *
+ * BlurView's UIViewPropertyAnimator sets an NSNull delegate on CAAnimation,
+ * which crashes DetoxSync's animation tracking on iOS.
+ * Replacing native blur components with plain Views avoids the crash while
+ * keeping the rest of the UI intact.
+ */
+const React = require("react");
+const { View } = require("react-native");
+
+const passthrough = React.forwardRef((props, ref) => {
+  const { style, children } = props;
+  return React.createElement(View, { ref, style }, children);
+});
+
+passthrough.displayName = "BlurViewMock";
+
+module.exports = {
+  BlurView: passthrough,
+  VibrancyView: passthrough,
+  LiquidGlassView: passthrough,
+  LiquidGlassContainer: passthrough,
+  ProgressiveBlurView: passthrough,
+  BlurSwitch: passthrough,
+  default: passthrough,
+};

apps/ledger-live-mobile/rspack.config.mjs

@@ -109,6 +109,14 @@ const withRozeniteUrlFix = rozeniteConfig => {
   };
 };
 
+const isDetoxBuild = process.env.DETOX === "1" || (process.env.ENVFILE || "").includes("mock");
+
+const detoxAliases = isDetoxBuild
+  ? {
+      "@sbaiahmed1/react-native-blur": path.resolve(__dirname, "e2e/mocks/react-native-blur.js"),
+    }
+  : {};
+
 const hermesNonCompatibleDependencies = ["@polkadot/types-codec"];
 
 /**
@@ -140,6 +148,7 @@ export default withRozeniteUrlFix(
           modules: nodeModulesPaths,
           alias: {
             ...buildTsAlias(tsconfig.compilerOptions.paths),
+            ...detoxAliases,
             // Packages with malformed exports field (missing "." subpath) - resolve to browser entry
             "@aptos-labs/aptos-client": resolvePackageFile(
               "@aptos-labs/aptos-client",

apps/ledger-live-mobile/src/components/RootNavigator/MainNavigator/LegacyTabNavigator.tsx

@@ -12,6 +12,14 @@ import EarnLiveAppNavigator from "../EarnLiveAppNavigator";
 import { Tab } from "./tabNavigator";
 import type { LegacyTabNavigatorProps } from "./types";
 
+const LEGACY_TAB_TEST_IDS: Partial<Record<string, string>> = {
+  [NavigatorName.Portfolio]: "tab-bar-portfolio",
+  [NavigatorName.Earn]: "tab-bar-earn",
+  [NavigatorName.Web3HubTab]: "tab-bar-discover",
+  [NavigatorName.Discover]: "tab-bar-discover",
+  [NavigatorName.MyLedger]: "TabBarManager",
+};
+
 export function LegacyTabNavigator({
   tabBar,
   screenOptions,
@@ -31,6 +39,7 @@ export function LegacyTabNavigator({
         options={{
           headerShown: false,
           tabBarIcon: props => <PortfolioTabIcon {...props} />,
+          tabBarButtonTestID: LEGACY_TAB_TEST_IDS[NavigatorName.Portfolio],
         }}
         listeners={({ navigation }) => ({
           tabPress: e => {
@@ -53,10 +62,11 @@ export function LegacyTabNavigator({
             <TabIcon
               Icon={IconsLegacy.LendMedium}
               i18nKey={earnYieldLabel}
-              testID="tab-bar-earn"
+              testID={LEGACY_TAB_TEST_IDS[NavigatorName.Earn]}
               {...props}
             />
           ),
+          tabBarButtonTestID: LEGACY_TAB_TEST_IDS[NavigatorName.Earn],
         }}
         listeners={({ navigation }) => ({
           tabPress: e => {
@@ -101,6 +111,7 @@ export function LegacyTabNavigator({
             tabBarIcon: props => (
               <TabIcon Icon={IconsLegacy.PlanetMedium} i18nKey="tabs.discover" {...props} />
             ),
+            tabBarButtonTestID: LEGACY_TAB_TEST_IDS[NavigatorName.Web3HubTab],
           }}
           listeners={({ navigation }) => ({
             tabPress: e => {
@@ -120,6 +131,7 @@ export function LegacyTabNavigator({
             tabBarIcon: props => (
               <TabIcon Icon={IconsLegacy.PlanetMedium} i18nKey="tabs.discover" {...props} />
             ),
+            tabBarButtonTestID: LEGACY_TAB_TEST_IDS[NavigatorName.Discover],
           }}
           listeners={({ navigation }) => ({
             tabPress: e => {
@@ -139,7 +151,7 @@ export function LegacyTabNavigator({
         options={{
           headerShown: false,
           tabBarIcon: props => <ManagerTabIcon {...props} />,
-          tabBarButtonTestID: "TabBarManager",
+          tabBarButtonTestID: LEGACY_TAB_TEST_IDS[NavigatorName.MyLedger],
         }}
         listeners={({ navigation }) => ({
           tabPress: e => {

apps/ledger-live-mobile/src/mvvm/components/MainTabBar/MainTabBarView.tsx

@@ -22,6 +22,7 @@ export const MainTabBarView: React.FC<MainTabBarViewProps> = ({
 
   return (
     <Animated.View
+      testID="w40-tab-bar"
       entering={FadeInDown}
       exiting={FadeOutDown}
       pointerEvents="box-none"
@@ -50,6 +51,7 @@ export const MainTabBarView: React.FC<MainTabBarViewProps> = ({
             label={item.label}
             icon={item.icon}
             activeIcon={item.activeIcon}
+            testID={item.testID}
           />
         ))}
       </TabBar>

apps/ledger-live-mobile/src/mvvm/components/MainTabBar/types.ts

@@ -1,7 +1,10 @@
 import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
 import type { TabBarItemProps } from "@ledgerhq/lumen-ui-rnative";
 
-export type TabItemConfig = Pick<TabBarItemProps, "value" | "label" | "icon" | "activeIcon">;
+export type TabItemConfig = Pick<
+  TabBarItemProps,
+  "value" | "label" | "icon" | "activeIcon" | "testID"
+>;
 
 export interface MainTabBarViewProps {
   readonly activeRouteName: string;

apps/ledger-live-mobile/src/mvvm/components/MainTabBar/useMainTabBarViewModel.ts

@@ -31,6 +31,14 @@ const TAB_ICONS: Partial<Record<string, TabIconConfig>> = {
   [NavigatorName.Earn]: { icon: Chart5, activeIcon: Chart5Fill },
   [NavigatorName.CardTab]: { icon: CreditCard, activeIcon: CreditCardFill },
 };
+
+const TAB_TEST_IDS: Partial<Record<string, string>> = {
+  [NavigatorName.Portfolio]: "w40-tab-home",
+  [NavigatorName.Swap]: "w40-tab-swap",
+  [NavigatorName.Earn]: "w40-tab-earn",
+  [NavigatorName.CardTab]: "w40-tab-card",
+};
+
 export const useMainTabBarViewModel = ({
   state,
   navigation,
@@ -43,6 +51,7 @@ export const useMainTabBarViewModel = ({
       state.routes.map(route => ({
         value: route.name,
         label: t(LABELKEY_MAP[route.name] ?? route.name),
+        testID: TAB_TEST_IDS[route.name],
         ...TAB_ICONS[route.name],
       })),
     [state.routes, t],

apps/ledger-live-mobile/src/mvvm/features/Portfolio/screens/Portfolio/index.tsx

@@ -158,7 +158,7 @@ export const PortfolioScreen = ({ navigation }: NavigationProps) => {
     <>
       <CheckLanguageAvailability />
       <CheckTermOfUseUpdate />
-      <Animated.View style={{ flex: 1 }}>
+      <Animated.View testID="portfolio-screen" style={{ flex: 1 }}>
         <RefreshableCollapsibleHeaderFlatList
           data={data}
           renderItem={renderItem<React.JSX.Element>}

apps/ledger-live-mobile/src/screens/MyLedgerChooseDevice/wallet40HeaderOptions.tsx

@@ -2,8 +2,10 @@ import React from "react";
 import HeaderBackButton from "LLM/components/Navigation/HeaderBackButton";
 import HeaderTitle from "LLM/components/Navigation/HeaderTitle";
 
+export const HEADER_BACK_BUTTON_TEST_ID = "header-back-button";
+
 export const wallet40HeaderOptions = {
   headerShown: true,
   headerTitle: () => <HeaderTitle titleKey="manager.title" />,
-  headerLeft: () => <HeaderBackButton />,
+  headerLeft: () => <HeaderBackButton testID={HEADER_BACK_BUTTON_TEST_ID} />,
 };

apps/ledger-live-mobile/src/screens/PTX/Earn/EarnV2Webview/index.tsx

@@ -55,7 +55,7 @@ export const EarnV2Webview = ({
   };
 
   return (
-    <View style={{ flex: 1, overflow: "visible" }}>
+    <View testID="earn-screen" style={{ flex: 1, overflow: "visible" }}>
       {isPtxUiV2 && !hideMainNavigator && <EarnBackground scrollY={scrollY} />}
       <View style={{ flex: 1, zIndex: 1 }} pointerEvents="box-none">
         {manifest ? (

apps/ledger-live-mobile/src/screens/PTX/Earn/index.tsx

@@ -142,7 +142,7 @@ function Earn({ route }: Props) {
   /** V1: no background */
   if (manifest) {
     return (
-      <View style={{ flex: 1 }}>
+      <View testID="earn-screen" style={{ flex: 1 }}>
         <Container>
           <TrackScreen category="EarnDashboard" name="Earn" />
           <EarnWebview manifest={manifest} inputs={webviewInputs} />

apps/ledger-live-mobile/src/screens/Portfolio/index.tsx

@@ -252,7 +252,7 @@ function PortfolioScreen({ navigation }: NavigationProps) {
     <>
       <CheckLanguageAvailability />
       <CheckTermOfUseUpdate />
-      <Animated.View style={{ flex: 1 }}>
+      <Animated.View testID="portfolio-screen" style={{ flex: 1 }}>
         <RefreshableCollapsibleHeaderFlatList
           data={data}
           renderItem={renderItem<React.JSX.Element>}

e2e/mobile/page/index.ts

@@ -25,6 +25,7 @@ import StakePage from "./trade/stake.page";
 import SwapPage from "./trade/swap.page";
 import SwapLiveAppPage from "./liveApps/swapLiveApp";
 import WalletTabNavigatorPage from "./wallet/walletTabNavigator.page";
+import MainNavigationPage from "./wallet/mainNavigation.page";
 import CeloManageAssetsPage from "./trade/celoManageAssets.page";
 import TransferMenuDrawer from "./wallet/transferMenu.drawer";
 import BuySellPage from "./trade/buySell.page";
@@ -76,6 +77,7 @@ export class Application {
   private swapLiveAppInstance = lazyInit(SwapLiveAppPage);
   private swapPageInstance = lazyInit(SwapPage);
   private walletTabNavigatorPageInstance = lazyInit(WalletTabNavigatorPage);
+  private mainNavigationPageInstance = lazyInit(MainNavigationPage);
   private celoManageAssetsPageInstance = lazyInit(CeloManageAssetsPage);
   private TransferMenuDrawerInstance = lazyInit(TransferMenuDrawer);
   private buySellPageInstance = lazyInit(BuySellPage);
@@ -195,6 +197,10 @@ export class Application {
     return this.walletTabNavigatorPageInstance();
   }
 
+  public get mainNavigation() {
+    return this.mainNavigationPageInstance();
+  }
+
   public get celoManageAssets() {
     return this.celoManageAssetsPageInstance();
   }