fix(IT Wallet): [SIW-1806] Fix state inconsistencies in wallet home s…

…creen (#6532)

ts/features/itwallet/common/components/ItwEidLifecycleAlert.tsx

@@ -54,6 +54,7 @@ export const ItwEidLifecycleAlert = ({
       ComponentProps<typeof Alert>
     > = {
       valid: {
+        testID: "itwEidLifecycleAlertTestID_valid",
         variant: "success",
         content: I18n.t(
           "features.itWallet.presentation.bottomSheets.eidInfo.alert.valid",
@@ -65,6 +66,7 @@ export const ItwEidLifecycleAlert = ({
         )
       },
       jwtExpiring: {
+        testID: "itwEidLifecycleAlertTestID_jwtExpiring",
         variant: "warning",
         content: I18n.t(
           "features.itWallet.presentation.bottomSheets.eidInfo.alert.expiring",
@@ -74,6 +76,7 @@ export const ItwEidLifecycleAlert = ({
         )
       },
       jwtExpired: {
+        testID: "itwEidLifecycleAlertTestID_jwtExpired",
         variant: "error",
         content: I18n.t(
           "features.itWallet.presentation.bottomSheets.eidInfo.alert.expired"
@@ -82,7 +85,7 @@ export const ItwEidLifecycleAlert = ({
     };
 
     return (
-      <View style={{ marginBottom: 16 }}>
+      <View style={{ marginBottom: 16 }} testID={`itwEidLifecycleAlertTestID`}>
         <Alert {...alertProps[eidStatus]} />
       </View>
     );

ts/features/itwallet/common/components/ItwWalletReadyBanner.tsx

@@ -1,23 +1,16 @@
-import React from "react";
 import { Banner } from "@pagopa/io-app-design-system";
+import React from "react";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
-import { ITW_ROUTES } from "../../navigation/routes";
 import { useIOSelector } from "../../../../store/hooks";
-import {
-  itwCredentialsEidStatusSelector,
-  itwIsWalletEmptySelector
-} from "../../credentials/store/selectors";
-import { itwLifecycleIsValidSelector } from "../../lifecycle/store/selectors";
+import { ITW_ROUTES } from "../../navigation/routes";
+import { itwShouldRenderWalletReadyBannerSelector } from "../store/selectors";
 
 export const ItwWalletReadyBanner = () => {
-  const isItwValid = useIOSelector(itwLifecycleIsValidSelector);
-  const eidStatus = useIOSelector(itwCredentialsEidStatusSelector);
-  const isWalletEmpty = useIOSelector(itwIsWalletEmptySelector);
-
   const navigation = useIONavigation();
+  const shouldRender = useIOSelector(itwShouldRenderWalletReadyBannerSelector);
 
-  if (!isItwValid || eidStatus === "jwtExpired" || !isWalletEmpty) {
+  if (!shouldRender) {
     return null;
   }
 

ts/features/itwallet/common/components/discoveryBanner/ItwDiscoveryBannerStandalone.tsx

@@ -18,7 +18,7 @@ export const ItwDiscoveryBannerStandalone = () => {
   }
 
   return (
-    <View style={styles.wrapper}>
+    <View style={styles.wrapper} testID="itwDiscoveryBannerStandaloneTestID">
       <ItwDiscoveryBanner ignoreMargins={true} closable={false} />
     </View>
   );

ts/features/itwallet/common/components/discoveryBanner/__tests__/ItwDiscoveryBanner.test.tsx

@@ -1,110 +1,30 @@
-import * as O from "fp-ts/lib/Option";
 import _ from "lodash";
-import * as React from "react";
-import { createStore } from "redux";
 import configureMockStore from "redux-mock-store";
-import { ToolEnum } from "../../../../../../../definitions/content/AssistanceToolConfig";
-import { Config } from "../../../../../../../definitions/content/Config";
 import ROUTES from "../../../../../../navigation/routes";
 import { applicationChangeState } from "../../../../../../store/actions/application";
 import { appReducer } from "../../../../../../store/reducers";
-import { RemoteConfigState } from "../../../../../../store/reducers/backendStatus/remoteConfig";
 import { GlobalState } from "../../../../../../store/reducers/types";
 import { renderScreenWithNavigationStoreContext } from "../../../../../../utils/testWrapper";
-import { ItwLifecycleState } from "../../../../lifecycle/store/reducers";
 import { ItwDiscoveryBanner } from "../ItwDiscoveryBanner";
-import { ItwDiscoveryBannerStandalone } from "../ItwDiscoveryBannerStandalone";
-
-type RenderOptions = {
-  isItwValid?: boolean;
-  isItwEnabled?: boolean;
-};
 
 describe("ItwDiscoveryBanner", () => {
-  const globalState = appReducer(undefined, applicationChangeState("active"));
-  const component = renderScreenWithNavigationStoreContext<GlobalState>(
-    () => <ItwDiscoveryBanner />,
-    ROUTES.WALLET_HOME,
-    {},
-    createStore(appReducer, globalState as any)
-  );
   it("should match snapshot", () => {
+    const { component } = renderComponent();
     expect(component.toJSON()).toMatchSnapshot();
   });
 });
 
-describe("ItwDiscoveryBannerStandalone", () => {
-  it("should render the banner", () => {
-    const {
-      component: { queryByTestId }
-    } = renderComponent({});
-    expect(queryByTestId("itwDiscoveryBannerTestID")).not.toBeNull();
-  });
-
-  it("should match snapshot", () => {
-    const { component } = renderComponent({});
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-
-  test.each([
-    { isItwEnabled: false },
-    { isItwValid: true }
-  ] as ReadonlyArray<RenderOptions>)(
-    "should not render the banner if %p",
-    options => {
-      const {
-        component: { queryByTestId }
-      } = renderComponent(options);
-      expect(queryByTestId("itwDiscoveryBannerTestID")).toBeNull();
-    }
-  );
-});
-
-const renderComponent = ({
-  isItwEnabled = true,
-  isItwValid = false
-}: RenderOptions) => {
+const renderComponent = () => {
   const globalState = appReducer(undefined, applicationChangeState("active"));
 
   const mockStore = configureMockStore<GlobalState>();
   const store: ReturnType<typeof mockStore> = mockStore(
-    _.merge(undefined, globalState, {
-      features: {
-        itWallet: isItwValid
-          ? {
-              lifecycle: ItwLifecycleState.ITW_LIFECYCLE_VALID,
-              issuance: { integrityKeyTag: O.some("key-tag") },
-              credentials: { eid: O.some({}) }
-            }
-          : {
-              lifecycle: ItwLifecycleState.ITW_LIFECYCLE_INSTALLED
-            }
-      },
-      remoteConfig: O.some({
-        itw: {
-          enabled: isItwEnabled,
-          min_app_version: {
-            android: "0.0.0.0",
-            ios: "0.0.0.0"
-          }
-        },
-        assistanceTool: { tool: ToolEnum.none },
-        cgn: { enabled: true },
-        newPaymentSection: {
-          enabled: false,
-          min_app_version: {
-            android: "0.0.0.0",
-            ios: "0.0.0.0"
-          }
-        },
-        fims: { enabled: true }
-      } as Config) as RemoteConfigState
-    } as GlobalState)
+    _.merge(undefined, globalState, globalState as GlobalState)
   );
 
   return {
     component: renderScreenWithNavigationStoreContext<GlobalState>(
-      ItwDiscoveryBannerStandalone,
+      ItwDiscoveryBanner,
       ROUTES.WALLET_HOME,
       {},
       store

ts/features/itwallet/common/components/discoveryBanner/__tests__/ItwDiscoveryBannerStandalone.test.tsx

@@ -0,0 +1,41 @@
+import configureMockStore from "redux-mock-store";
+import ROUTES from "../../../../../../navigation/routes";
+import { applicationChangeState } from "../../../../../../store/actions/application";
+import { appReducer } from "../../../../../../store/reducers";
+import { GlobalState } from "../../../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../../utils/testWrapper";
+import * as selectors from "../../../store/selectors";
+import { ItwDiscoveryBannerStandalone } from "../ItwDiscoveryBannerStandalone";
+
+describe("ItwDiscoveryBannerStandalone", () => {
+  test.each([true, false] as ReadonlyArray<boolean>)(
+    "should match snapshot when isItwDiscoveryBannerRenderable is %p",
+    isItwDiscoveryBannerRenderable => {
+      jest
+        .spyOn(selectors, "isItwDiscoveryBannerRenderableSelector")
+        .mockImplementation(() => isItwDiscoveryBannerRenderable);
+
+      const { component } = renderComponent();
+      expect(component.toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+const renderComponent = () => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore(
+    globalState as GlobalState
+  );
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      ItwDiscoveryBannerStandalone,
+      ROUTES.WALLET_HOME,
+      {},
+      store
+    ),
+    store
+  };
+};