remove Connect device as it's not in the scope of add account + add i…

…ntegration tests on device selection

apps/ledger-live-mobile/src/components/BleDevicePairingFlow/index.tsx

@@ -11,6 +11,7 @@ import type { BleDevicePairingProps } from "./BleDevicePairing";
 import { track } from "~/analytics";
 import { NavigationHeaderBackButton } from "../NavigationHeaderBackButton";
 import { NavigationHeaderCloseButton } from "../NavigationHeaderCloseButton";
+import { Text } from "@ledgerhq/native-ui";
 
 const TIMEOUT_AFTER_PAIRED_MS = 2000;
 

apps/ledger-live-mobile/src/components/SelectDevice2/Item.tsx

@@ -43,6 +43,7 @@ const Item = ({ device, onPress }: Props) => {
     <Touchable
       onPress={() => onPress(device)}
       touchableTestID={"device-item-" + device.deviceId}
+      testID={"device-item-" + device.deviceId}
       accessibilityRole="button"
     >
       <Flex

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/ScanDeviceAccounts/components/ScanDeviceAccountsFooter.tsx

@@ -1,6 +1,6 @@
 import { AddAccountSupportLink } from "@ledgerhq/live-wallet/addAccounts";
 import React, { useEffect, useMemo, useRef } from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, Easing } from "react-native";
 import { Trans } from "react-i18next";
 import IconPause from "~/icons/Pause";
 import Button from "~/components/Button";
@@ -19,6 +19,12 @@ type FooterProps = {
 };
 
 const ANIMATION_DURATION = 200;
+const ANIMATION_DELAY = 125;
+const commonAnimatedProps = {
+  duration: ANIMATION_DURATION,
+  useNativeDriver: true,
+  easing: Easing.in(Easing.cubic),
+};
 
 const ScanDeviceAccountsFooter = ({
   isDisabled,
@@ -38,22 +44,19 @@ const ScanDeviceAccountsFooter = ({
     const animationTiemout = setTimeout(() => {
       Animated.parallel([
         Animated.timing(translateY, {
+          ...commonAnimatedProps,
           toValue: 0,
-          duration: ANIMATION_DURATION,
-          useNativeDriver: true,
         }),
         Animated.timing(opacity, {
+          ...commonAnimatedProps,
           toValue: 1,
-          duration: ANIMATION_DURATION,
-          useNativeDriver: true,
         }),
         Animated.timing(scale, {
+          ...commonAnimatedProps,
           toValue: 1,
-          duration: ANIMATION_DURATION,
-          useNativeDriver: true,
         }),
       ]).start();
-    }, 125);
+    }, ANIMATION_DELAY);
     return () => {
       clearTimeout(animationTiemout);
     };

apps/ledger-live-mobile/src/newArch/features/DeviceSelection/Navigator.tsx

@@ -3,16 +3,13 @@ import { Platform } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useTheme } from "styled-components/native";
 import { useTranslation } from "react-i18next";
-import { NavigationProp, useRoute } from "@react-navigation/native";
+import { useRoute } from "@react-navigation/native";
 import { ScreenName } from "~/const";
 import { getStackNavigatorConfig } from "~/navigation/navigatorConfig";
 import { track } from "~/analytics";
 import SelectDevice, {
   addAccountsSelectDeviceHeaderOptions,
 } from "LLM/features/DeviceSelection/screens/SelectDevice";
-import ConnectDevice, {
-  connectDeviceHeaderOptions,
-} from "LLM/features/DeviceSelection/screens/ConnectDevice";
 import StepHeader from "~/components/StepHeader";
 import { NavigationHeaderCloseButtonAdvanced } from "~/components/NavigationHeaderCloseButton";
 import { DeviceSelectionNavigatorParamsList } from "./types";
@@ -37,14 +34,6 @@ export default function Navigator() {
     [colors, onClose],
   );
 
-  const onConnectDeviceBack = useCallback((navigation: NavigationProp<Record<string, unknown>>) => {
-    track("button_clicked", {
-      button: "Back arrow",
-      page: ScreenName.ConnectDevice,
-    });
-    navigation.goBack();
-  }, []);
-
   return (
     <Stack.Navigator
       screenOptions={{
@@ -71,23 +60,7 @@ export default function Navigator() {
         initialParams={route.params}
       />
 
-      {/* Select / Connect Device */}
-      <Stack.Screen
-        name={ScreenName.ConnectDevice}
-        component={ConnectDevice}
-        options={({ navigation }) => ({
-          headerTitle: () => (
-            <StepHeader
-              subtitle={t("transfer.receive.stepperHeader.range", {
-                currentStep: "2",
-                totalSteps: 3,
-              })}
-              title={t("transfer.receive.stepperHeader.connectDevice")}
-            />
-          ),
-          ...connectDeviceHeaderOptions(() => onConnectDeviceBack(navigation)),
-        })}
-      />
+      {/*Connect Device : Only for receive flow context it will be re-added & adjusted in https://ledgerhq.atlassian.net/browse/LIVE-14726 */}
     </Stack.Navigator>
   );
 }

apps/ledger-live-mobile/src/newArch/features/DeviceSelection/__integrations__/deviceSelection.integration.test.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { render, screen } from "@tests/test-renderer";
+import DeviceSelectionNavigator from "../Navigator";
+import { useRoute, useNavigation } from "@react-navigation/native";
+import { discoverDevices } from "@ledgerhq/live-common/hw/index";
+import { DeviceModelId } from "@ledgerhq/types-devices";
+import { of } from "rxjs";
+
+const MockUseRoute = useRoute as jest.Mock;
+const mockNavigate = jest.fn();
+const mockDiscoverDevices = discoverDevices as jest.Mock;
+
+(useNavigation as jest.Mock).mockReturnValue({
+  navigate: mockNavigate,
+  addListener: jest.fn(),
+});
+
+jest.mock("@ledgerhq/live-common/deposit/index", () => ({
+  useGroupedCurrenciesByProvider: jest.fn(),
+}));
+
+jest.mock("@react-navigation/native", () => ({
+  ...jest.requireActual("@react-navigation/native"),
+  useRoute: jest.fn(),
+  useNavigation: jest.fn(),
+}));
+
+jest.mock("@ledgerhq/live-common/hw/index", () => ({
+  ...jest.requireActual("@ledgerhq/live-common/hw/index"),
+  discoverDevices: jest.fn(),
+}));
+
+describe("Device Selection feature integration test", () => {
+  beforeAll(() => {
+    MockUseRoute.mockReturnValue({
+      params: {
+        context: "addAccounts",
+        currency: {
+          type: "CryptoCurrency",
+          id: "bitcoin",
+          ticker: "BTC",
+          name: "Bitcoin",
+          family: "bitcoin",
+          color: "#ffae35",
+          decimals: 8,
+          managerAppName: "Bitcoin",
+        },
+      },
+    });
+  });
+  it("should render a device connection screen when no device is installed", () => {
+    mockDiscoverDevices.mockReturnValue(of({}));
+    render(<DeviceSelectionNavigator />);
+
+    const screenTitle = screen.getByText(/Connect device/i);
+    const listHeader = screen.getByText(/Devices/i);
+    const stepIndicator = screen.getByText(/Step 2 of 3/i);
+    const addDevuceCTA = screen.getByText(/Add a Ledger/i);
+    const bottomText = screen.getByText(/Need a new Ledger?/i);
+    const buyNowCTA = screen.getByText(/Buy now?/i);
+
+    [listHeader, screenTitle, stepIndicator, addDevuceCTA, bottomText, buyNowCTA].forEach(
+      element => {
+        expect(element).toBeOnTheScreen();
+      },
+    );
+  });
+
+  it("should render a device selection screen when a device is installed", () => {
+    mockDiscoverDevices.mockReturnValue(
+      of({
+        type: "add",
+        id: "usb|1",
+        name: "Ledger Stax device",
+        deviceModel: { id: DeviceModelId.stax },
+        wired: true,
+      }),
+    );
+    render(<DeviceSelectionNavigator />);
+    const deviceCTA = screen.getByTestId("device-item-usb|1");
+    const notConnectedText = screen.getByText(/connected/i);
+    const addDevuceCTA = screen.queryByText(/Add a Ledger/i);
+    const bottomText = screen.getByText(/Need a new Ledger?/i);
+    const buyNowCTA = screen.getByText(/Buy now?/i);
+
+    [deviceCTA, notConnectedText, bottomText, buyNowCTA].forEach(element => {
+      expect(element).toBeOnTheScreen();
+    });
+    expect(addDevuceCTA).not.toBeOnTheScreen();
+  });
+});