chore(cross): fix CGN e2e tests (#5917)

## Short description
This PR fixes CGN E2E tests.

> [!warning]
> This PR depends on
pagopa/io-dev-api-server#395

> [!tip]
> [![Run e2e
tests](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml/badge.svg?branch=cross-e2e-cgn)](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml)

ts/features/bonus/cgn/__e2e__/cgn00.e2e.ts

@@ -13,8 +13,12 @@ describe("CGN", () => {
 
   it("When the user want to start activation from bonus list, it should complete activation", async () => {
     await element(by.text(I18n.t("global.navigator.wallet"))).tap();
-    await element(by.id("walletAddNewPaymentMethodTestId")).tap();
-    await element(by.id("bonusNameTestId")).tap();
+    const plusButton = element(by.id("walletAddNewPaymentMethodTestId"));
+    await waitFor(plusButton).toBeVisible().withTimeout(e2eWaitRenderTimeout);
+    await plusButton.tap();
+    const cgnButton = element(by.id("bonusNameTestId"));
+    await waitFor(cgnButton).toBeVisible().withTimeout(e2eWaitRenderTimeout);
+    await cgnButton.tap();
     const cgnBonusItem = element(by.id(`AvailableBonusItem-${ID_CGN_TYPE}`));
     await waitFor(cgnBonusItem).toBeVisible().withTimeout(e2eWaitRenderTimeout);
     await cgnBonusItem.tap();

ts/features/bonus/cgn/__e2e__/cgn02.e2e.ts

@@ -3,7 +3,6 @@ import { ensureLoggedIn } from "../../../../__e2e__/utils";
 import I18n from "../../../../i18n";
 import { activateCGNBonusSuccess, deactivateCGNCardIfNeeded } from "./utils";
 const CGN_TITLE = "Carta Giovani Nazionale";
-const SERVICES_LIST = "services-list";
 
 describe("CGN", () => {
   beforeEach(async () => {
@@ -15,16 +14,11 @@ describe("CGN", () => {
   it("When the user want to start activation from service detail, it should complete activation", async () => {
     await element(by.text(I18n.t("global.navigator.services"))).tap();
 
-    await waitFor(element(by.id(SERVICES_LIST)))
+    await waitFor(element(by.text(CGN_TITLE)))
       .toBeVisible()
       .withTimeout(e2eWaitRenderTimeout);
 
-    await waitFor(element(by.id(CGN_TITLE)))
-      .toBeVisible()
-      .whileElement(by.id(SERVICES_LIST))
-      .scroll(300, "down");
-
-    await element(by.id(CGN_TITLE)).tap();
+    await element(by.text(CGN_TITLE)).tap();
     const startActivationCta = element(by.id("service-activate-bonus-button"));
     await waitFor(startActivationCta)
       .toBeVisible()

ts/features/bonus/cgn/__e2e__/utils.ts

@@ -18,24 +18,21 @@ export const activateCGNBonusSuccess = async () => {
   // Go to bonus details
   await element(by.id("cgnConfirmButtonTestId")).tap();
 
-  // wait for unsubscribe cta
-  const scrollView = element(by.id("CGNCardDetailsScrollView"));
-
   // The section has a loading spinner on top of
   // everything so we must wait for it to disappear
-  await waitFor(scrollView)
-    .toBeVisible()
-    .withTimeout(2 * e2eWaitRenderTimeout);
-
-  // make sure to scroll to bottom, otherwise in small devices the element will not be visible nor tappable
-  await scrollView.scrollTo("bottom");
-
   const unsubscribeCgnCta = element(
     by.id("service-cgn-deactivate-bonus-button")
   );
   await waitFor(unsubscribeCgnCta)
     .toBeVisible()
-    .withTimeout(e2eWaitRenderTimeout);
+    .whileElement(by.id("CGNCardDetailsScrollView"))
+    .scroll(150, "down", NaN, 0.8)
+    .catch(async _ => {
+      await waitFor(unsubscribeCgnCta)
+        .toBeVisible()
+        .withTimeout(e2eWaitRenderTimeout);
+    });
+
   // unsubscribe
   await unsubscribeCgnCta.tap();
 

ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx

@@ -53,7 +53,7 @@ const CgnUnsubscribe = () => {
       accessibilityLabel={I18n.t("bonus.cgn.cta.deactivateBonus")}
       variant="danger"
       label={I18n.t("bonus.cgn.cta.deactivateBonus")}
-      testID="cgnDeactivateBonusTestId"
+      testID="service-cgn-deactivate-bonus-button"
       onPress={requestUnsubscription}
       icon="trashcan"
     />

ts/features/bonus/cgn/screens/CgnDetailScreen.tsx

@@ -210,6 +210,7 @@ const CgnDetailScreen = (props: Props): React.ReactElement => {
             snapToOffsets={[0, headerHeight]}
             snapToEnd={false}
             decelerationRate="normal"
+            testID={"CGNCardDetailsScrollView"}
           >
             <View
               style={{ height: 260, backgroundColor: HEADER_BACKGROUND_COLOR }}