chore(Bonus Pagamenti Digitali): [#176842973] Add tests for the CoBadge components

ts/components/wallet/InternationalCircuitIconBar.tsx → ts/components/wallet/InternationalCircuitIconsBar.tsx

@@ -19,16 +19,20 @@ const styles = StyleSheet.create({
 });
 
 const InternationalCircuitIconsBar: React.FunctionComponent = () => (
-  <View style={styles.row}>
-    <Image source={maestro} style={styles.brandLogo} />
+  <View style={styles.row} testID={"internationalCircuitIconsBar"}>
+    <Image source={maestro} style={styles.brandLogo} testID={"maestro"} />
     <View hspacer={true} />
-    <Image source={mastercard} style={styles.brandLogo} />
+    <Image source={mastercard} style={styles.brandLogo} testID={"mastercard"} />
     <View hspacer={true} />
-    <Image source={visa} style={styles.brandLogo} />
+    <Image source={visa} style={styles.brandLogo} testID={"visa"} />
     <View hspacer={true} />
-    <Image source={visaElectron} style={styles.brandLogo} />
+    <Image
+      source={visaElectron}
+      style={styles.brandLogo}
+      testID={"visaElectron"}
+    />
     <View hspacer={true} />
-    <Image source={vpay} style={styles.brandLogo} />
+    <Image source={vpay} style={styles.brandLogo} testID={"vPay"} />
   </View>
 );
 

ts/components/wallet/__test__/InternationalCircuitIconsBar.test.tsx

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react-native";
+import * as React from "react";
+import InternationalCircuitIconsBar from "../InternationalCircuitIconsBar";
+
+describe("InternationalCircuitIconBar component", () => {
+  ["maestro", "mastercard", "visa", "visaElectron", "vPay"].map(circuit =>
+    it(`should show the ${circuit} icon`, () => {
+      const component = render(<InternationalCircuitIconsBar />);
+
+      expect(component.queryByTestId(circuit)).not.toBeNull();
+    })
+  );
+});

ts/features/wallet/bancomat/screen/BancomatInformation.tsx

@@ -8,13 +8,13 @@ import { H3 } from "../../../../components/core/typography/H3";
 import { Label } from "../../../../components/core/typography/Label";
 import { IOColors } from "../../../../components/core/variables/IOColors";
 import IconFont from "../../../../components/ui/IconFont";
-import InternationalCircuitIconsBar from "../../../../components/wallet/InternationalCircuitIconBar";
+import InternationalCircuitIconsBar from "../../../../components/wallet/InternationalCircuitIconsBar";
 import I18n from "../../../../i18n";
 import { GlobalState } from "../../../../store/reducers/types";
 import bancomatInformationBottomSheet from "../utils/bancomatInformationBottomSheet";
 
 type OwnProps = {
-  onAddPaymentMethod?: () => void;
+  onAddPaymentMethod: () => void;
 };
 
 type Props = ReturnType<typeof mapDispatchToProps> &
@@ -42,14 +42,15 @@ const styles = StyleSheet.create({
 const BancomatInformation: React.FunctionComponent<Props> = props => {
   const { present } = bancomatInformationBottomSheet(props.onAddPaymentMethod);
   return (
-    <View>
+    <View testID={"bancomatInformation"}>
       <View style={styles.titleContainer}>
         <H3>{I18n.t("wallet.bancomat.details.debit.title")}</H3>
         <IconFont
           name={"io-info"}
           size={24}
           color={IOColors.blue}
           onPress={present}
+          testID={"noticeIconFont"}
         />
       </View>
       <View spacer={true} />
@@ -62,6 +63,7 @@ const BancomatInformation: React.FunctionComponent<Props> = props => {
           props.onAddPaymentMethod?.();
         }}
         onPressWithGestureHandler={true}
+        testID={"addPaymentMethodButton"}
       >
         <Label>{I18n.t("wallet.bancomat.details.debit.addCta")}</Label>
       </ButtonDefaultOpacity>

ts/features/wallet/bancomat/screen/__tests__/BancomatInformation.test.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, render } from "@testing-library/react-native";
+import * as React from "react";
+import { Provider } from "react-redux";
+import configureMockStore from "redux-mock-store";
+import BancomatInformation from "../BancomatInformation";
+
+const mockPresentFn = jest.fn();
+jest.mock("../../utils/bancomatInformationBottomSheet", () => ({
+  __esModule: true,
+  default: () => ({ present: mockPresentFn })
+}));
+
+describe("BancomatInformation component", () => {
+  it("should show the InternationalCircuitIconsBar", () => {
+    const onAddPaymentMethod = jest.fn();
+    const component = getComponent(onAddPaymentMethod);
+    const internationalCircuitIconsBar = component.queryByTestId(
+      "internationalCircuitIconsBar"
+    );
+
+    expect(internationalCircuitIconsBar).not.toBeNull();
+  });
+
+  it("should call the present function when click on notice icon", () => {
+    const onAddPaymentMethod = jest.fn();
+    const component = getComponent(onAddPaymentMethod);
+    const ioNoticeIcon = component.queryByTestId("noticeIconFont");
+
+    expect(ioNoticeIcon).not.toBeNull();
+
+    if (ioNoticeIcon !== null) {
+      fireEvent.press(ioNoticeIcon);
+      expect(mockPresentFn).toHaveBeenCalledTimes(1);
+    }
+  });
+  it("should call the onAddPaymentMethod function when click on addPaymentMethod button", () => {
+    const onAddPaymentMethod = jest.fn();
+    const component = getComponent(onAddPaymentMethod);
+    const addPaymentMethodButton = component.queryByTestId(
+      "addPaymentMethodButton"
+    );
+
+    expect(addPaymentMethodButton).not.toBeNull();
+
+    if (addPaymentMethodButton !== null) {
+      fireEvent.press(addPaymentMethodButton);
+      expect(onAddPaymentMethod).toHaveBeenCalledTimes(1);
+    }
+  });
+});
+
+const getComponent = (onAddPaymentMethod: () => void) => {
+  const mockStore = configureMockStore();
+
+  const store: ReturnType<typeof mockStore> = mockStore();
+  return render(
+    <Provider store={store}>
+      <BancomatInformation onAddPaymentMethod={onAddPaymentMethod} />
+    </Provider>
+  );
+};

ts/features/wallet/bancomat/utils/bancomatInformationBottomSheet.tsx

@@ -6,7 +6,7 @@ import {
   bottomSheetContent,
   useIOBottomSheetRaw
 } from "../../../../utils/bottomSheet";
-import InternationalCircuitIconsBar from "../../../../components/wallet/InternationalCircuitIconBar";
+import InternationalCircuitIconsBar from "../../../../components/wallet/InternationalCircuitIconsBar";
 import ButtonDefaultOpacity from "../../../../components/ButtonDefaultOpacity";
 import { Label } from "../../../../components/core/typography/Label";
 import { IOColors } from "../../../../components/core/variables/IOColors";

ts/features/wallet/cobadge/component/BaseCoBadgeCard.tsx

@@ -94,7 +94,10 @@ const BaseCoBadgeCard: React.FunctionComponent<Props> = (props: Props) => {
               />
             )}
             {props.blocked && (
-              <Badge style={[styles.badgeInfo, styles.badgeInfoExpired]}>
+              <Badge
+                style={[styles.badgeInfo, styles.badgeInfoExpired]}
+                testID={"blockedBadge"}
+              >
                 <H5 color="red">{I18n.t("global.badges.blocked")}</H5>
               </Badge>
             )}

ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx → ts/features/wallet/cobadge/component/__tests__/BaseCobadgeCard.test.tsx

@@ -70,14 +70,30 @@ describe("CoBadgeWalletPreview component", () => {
     expect(caption).not.toBeNull();
     expect(caption).toHaveTextContent(aCaption);
   });
+
+  it("should show the blocked badge if is blocked prop is true", () => {
+    jest.spyOn(hooks, "useImageResize").mockReturnValue(none);
+    const component = getComponent(
+      store,
+      aBrandLogo,
+      anAbiLogo,
+      aCaption,
+      anexpiringDateNotExpired,
+      true
+    );
+    const blockedBadge = component.queryByTestId("blockedBadge");
+
+    expect(blockedBadge).not.toBeNull();
+  });
 });
 
 const getComponent = (
   store: Store<unknown>,
   brandLogo: ImageSourcePropType,
   abi: Abi,
   caption?: string,
-  expiringDate?: Date
+  expiringDate?: Date,
+  blocked?: boolean
 ) =>
   render(
     <Provider store={store}>
@@ -86,6 +102,7 @@ const getComponent = (
         caption={caption}
         expiringDate={expiringDate}
         abi={abi}
+        blocked={blocked}
       />
     </Provider>
   );

ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx

@@ -62,6 +62,7 @@ const renderListItem = (cardPathItem: ListRenderItemInfo<IAddCardPath>) => (
   <ListItem
     onPress={cardPathItem.item.onPress}
     first={cardPathItem.index === 0}
+    testID={`${cardPathItem.item.path}Item`}
   >
     <View style={styles.flexColumn}>
       <View style={styles.row}>
@@ -124,7 +125,7 @@ const CoBadgeChooseType = (props: Props): React.ReactElement => {
       headerTitle={I18n.t("wallet.onboarding.coBadge.headerTitle")}
       contextualHelp={emptyContextualHelp}
     >
-      <SafeAreaView style={IOStyles.flex}>
+      <SafeAreaView style={IOStyles.flex} testID="coBadgeChooseType">
         <Content style={IOStyles.flex}>
           <H1>{I18n.t("wallet.onboarding.coBadge.chooseType.title")}</H1>
           <View spacer={true} />
@@ -162,7 +163,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   addCoBadge: (abi: string | undefined) => dispatch(walletAddCoBadgeStart(abi)),
   addCreditCard: (popScreenNumber: number = 0) => {
     navigateBack(popScreenNumber, dispatch);
-
     dispatch(
       navigateToWalletAddCreditCard({
         inPayment: none

ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx

@@ -0,0 +1,83 @@
+import { fireEvent } from "@testing-library/react-native";
+import { none } from "fp-ts/lib/Option";
+import { NavigationActions, NavigationParams } from "react-navigation";
+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 { renderScreenFakeNavRedux } from "../../../../../../utils/testWrapper";
+import WALLET_ONBOARDING_COBADGE_ROUTES from "../../navigation/routes";
+import CoBadgeChooseType from "../CoBadgeChooseType";
+
+jest.mock("react-native-share", () => ({
+  open: jest.fn()
+}));
+describe("CoBadgeChooseType component", () => {
+  beforeEach(() => jest.useFakeTimers());
+  it("should dispatch navigateToWalletAddCreditCard action if press the enabled item", () => {
+    const { component, store } = getComponent(undefined, 1);
+    const enabledItem = component.queryByTestId("enabledItem");
+
+    expect(component).not.toBeNull();
+    expect(enabledItem).not.toBeNull();
+
+    const expectedPayload = [
+      {
+        type: NavigationActions.BACK,
+        key: undefined
+      },
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: ROUTES.WALLET_ADD_CARD,
+        params: { inPayment: none }
+      }
+    ];
+
+    if (enabledItem) {
+      fireEvent.press(enabledItem);
+      expect(store.getActions()).toEqual(expectedPayload);
+    }
+  });
+  it("should dispatch walletAddCoBadgeStart action if press disabled or unknown item", () => {
+    const anAbi = "1234";
+    const { component, store } = getComponent(anAbi, 1);
+    const disabledItem = component.queryByTestId("disabledItem");
+    const unknownItem = component.queryByTestId("unknownItem");
+
+    expect(disabledItem).not.toBeNull();
+    expect(unknownItem).not.toBeNull();
+
+    const expectedPayload = {
+      type: WALLET_ONBOARDING_COBADGE_ROUTES.START,
+      payload: anAbi
+    };
+    if (disabledItem) {
+      fireEvent.press(disabledItem);
+      expect(store.getActions()).toEqual([expectedPayload]);
+    }
+    if (unknownItem) {
+      fireEvent.press(unknownItem);
+      expect(store.getActions()).toEqual([expectedPayload, expectedPayload]);
+    }
+  });
+});
+
+const getComponent = (abi?: string, legacyAddCreditCardBack?: number) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore({
+    ...globalState
+  } as GlobalState);
+
+  return {
+    component: renderScreenFakeNavRedux<GlobalState, NavigationParams>(
+      CoBadgeChooseType,
+      ROUTES.WALLET_BPAY_DETAIL,
+      { abi, legacyAddCreditCardBack },
+      store
+    ),
+    store
+  };
+};

ts/features/wallet/onboarding/common/searchBank/SearchStartComponent.tsx

@@ -5,7 +5,7 @@ import { Body } from "../../../../../components/core/typography/Body";
 import { H1 } from "../../../../../components/core/typography/H1";
 import { H4 } from "../../../../../components/core/typography/H4";
 import { Link } from "../../../../../components/core/typography/Link";
-import InternationalCircuitIconsBar from "../../../../../components/wallet/InternationalCircuitIconBar";
+import InternationalCircuitIconsBar from "../../../../../components/wallet/InternationalCircuitIconsBar";
 
 type Props = {
   openTosModal: () => void;