test(mobile): add e2e page object and specs for main navigation

Add MainNavigationPage with selectors for both Wallet 4.0 and legacy
navigation elements. Add spec files for W40 and legacy navigation flows
covering tab switching and destination page verification.

Note: W40 specs are blocked by a DetoxSync/BlurView crash on iOS
(NSNull __detox_sync_untrackAnimation) and require a fix before running.

LIVE-24697

chore(mobile): add changeset for e2e main navigation tests

LIVE-24697

Author: deepyjr

.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,7 +39,7 @@ export function LegacyTabNavigator({
         options={{
           headerShown: false,
           tabBarIcon: props => <PortfolioTabIcon {...props} />,
-          tabBarButtonTestID: "tab-bar-portfolio",
+          tabBarButtonTestID: LEGACY_TAB_TEST_IDS[NavigatorName.Portfolio],
         }}
         listeners={({ navigation }) => ({
           tabPress: e => {
@@ -54,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 => {
@@ -102,7 +111,7 @@ export function LegacyTabNavigator({
             tabBarIcon: props => (
               <TabIcon Icon={IconsLegacy.PlanetMedium} i18nKey="tabs.discover" {...props} />
             ),
-            tabBarButtonTestID: "tab-bar-discover",
+            tabBarButtonTestID: LEGACY_TAB_TEST_IDS[NavigatorName.Web3HubTab],
           }}
           listeners={({ navigation }) => ({
             tabPress: e => {
@@ -122,7 +131,7 @@ export function LegacyTabNavigator({
             tabBarIcon: props => (
               <TabIcon Icon={IconsLegacy.PlanetMedium} i18nKey="tabs.discover" {...props} />
             ),
-            tabBarButtonTestID: "tab-bar-discover",
+            tabBarButtonTestID: LEGACY_TAB_TEST_IDS[NavigatorName.Discover],
           }}
           listeners={({ navigation }) => ({
             tabPress: e => {
@@ -142,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/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 ? (

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();
   }