From 0860f77fc2d824a0405ba9424129a755f212df6f Mon Sep 17 00:00:00 2001 From: Simone Date: Mon, 1 Mar 2021 18:17:09 +0100 Subject: [PATCH] chore(Bonus Pagamenti Digitali): [#176842973] Add tests for the CoBadge components (#2826) * [#176842973] fix InternationalCircuitIconsBar naming * [#176842973] add InternationalCircuitIconsBar test * [#176842973] fix optional prop * [#176842973] add BancomatInformation component tests * [#176842973] renaming folder * [#176842973] add test * [#176842973] add CoBadgeChooseType tests * [#176842973] add missing test in BaseCoBadgeCard component * [#176842973] remove component wrapper Co-authored-by: Fabrizio --- ...r.tsx => InternationalCircuitIconsBar.tsx} | 16 ++-- .../InternationalCircuitIconsBar.test.tsx | 13 +++ .../bancomat/screen/BancomatInformation.tsx | 8 +- .../__tests__/BancomatInformation.test.tsx | 61 ++++++++++++++ .../utils/bancomatInformationBottomSheet.tsx | 2 +- .../cobadge/component/BaseCoBadgeCard.tsx | 5 +- .../BaseCobadgeCard.test.tsx | 19 ++++- .../CobadgeWalletPreview.test.tsx | 0 .../cobadge/screens/CoBadgeChooseType.tsx | 4 +- .../__tests__/CoBadgeChooseType.test.tsx | 83 +++++++++++++++++++ .../searchBank/SearchStartComponent.tsx | 2 +- 11 files changed, 198 insertions(+), 15 deletions(-) rename ts/components/wallet/{InternationalCircuitIconBar.tsx => InternationalCircuitIconsBar.tsx} (64%) create mode 100644 ts/components/wallet/__test__/InternationalCircuitIconsBar.test.tsx create mode 100644 ts/features/wallet/bancomat/screen/__tests__/BancomatInformation.test.tsx rename ts/features/wallet/cobadge/component/{__test__ => __tests__}/BaseCobadgeCard.test.tsx (87%) rename ts/features/wallet/cobadge/component/{__test__ => __tests__}/CobadgeWalletPreview.test.tsx (100%) create mode 100644 ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx diff --git a/ts/components/wallet/InternationalCircuitIconBar.tsx b/ts/components/wallet/InternationalCircuitIconsBar.tsx similarity index 64% rename from ts/components/wallet/InternationalCircuitIconBar.tsx rename to ts/components/wallet/InternationalCircuitIconsBar.tsx index 02ad5ddfd90..d744d30e6a7 100644 --- a/ts/components/wallet/InternationalCircuitIconBar.tsx +++ b/ts/components/wallet/InternationalCircuitIconsBar.tsx @@ -19,16 +19,20 @@ const styles = StyleSheet.create({ }); const InternationalCircuitIconsBar: React.FunctionComponent = () => ( - - + + - + - + - + - + ); diff --git a/ts/components/wallet/__test__/InternationalCircuitIconsBar.test.tsx b/ts/components/wallet/__test__/InternationalCircuitIconsBar.test.tsx new file mode 100644 index 00000000000..eaa534f0500 --- /dev/null +++ b/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(); + + expect(component.queryByTestId(circuit)).not.toBeNull(); + }) + ); +}); diff --git a/ts/features/wallet/bancomat/screen/BancomatInformation.tsx b/ts/features/wallet/bancomat/screen/BancomatInformation.tsx index ab780fc0759..168fb20b599 100644 --- a/ts/features/wallet/bancomat/screen/BancomatInformation.tsx +++ b/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 & @@ -42,7 +42,7 @@ const styles = StyleSheet.create({ const BancomatInformation: React.FunctionComponent = props => { const { present } = bancomatInformationBottomSheet(props.onAddPaymentMethod); return ( - +

{I18n.t("wallet.bancomat.details.debit.title")}

= props => { size={24} color={IOColors.blue} onPress={present} + testID={"noticeIconFont"} /> @@ -62,6 +63,7 @@ const BancomatInformation: React.FunctionComponent = props => { props.onAddPaymentMethod?.(); }} onPressWithGestureHandler={true} + testID={"addPaymentMethodButton"} > diff --git a/ts/features/wallet/bancomat/screen/__tests__/BancomatInformation.test.tsx b/ts/features/wallet/bancomat/screen/__tests__/BancomatInformation.test.tsx new file mode 100644 index 00000000000..16c8958f036 --- /dev/null +++ b/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 = mockStore(); + return render( + + + + ); +}; diff --git a/ts/features/wallet/bancomat/utils/bancomatInformationBottomSheet.tsx b/ts/features/wallet/bancomat/utils/bancomatInformationBottomSheet.tsx index d2947cbf1f0..c0ba8868df0 100644 --- a/ts/features/wallet/bancomat/utils/bancomatInformationBottomSheet.tsx +++ b/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"; diff --git a/ts/features/wallet/cobadge/component/BaseCoBadgeCard.tsx b/ts/features/wallet/cobadge/component/BaseCoBadgeCard.tsx index 7f4a7466ff6..ee43b3fe1f1 100644 --- a/ts/features/wallet/cobadge/component/BaseCoBadgeCard.tsx +++ b/ts/features/wallet/cobadge/component/BaseCoBadgeCard.tsx @@ -94,7 +94,10 @@ const BaseCoBadgeCard: React.FunctionComponent = (props: Props) => { /> )} {props.blocked && ( - +
{I18n.t("global.badges.blocked")}
 )} diff --git a/ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx b/ts/features/wallet/cobadge/component/__tests__/BaseCobadgeCard.test.tsx similarity index 87% rename from ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx rename to ts/features/wallet/cobadge/component/__tests__/BaseCobadgeCard.test.tsx index 7f0f3b26d09..ce90a2fb154 100644 --- a/ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx +++ b/ts/features/wallet/cobadge/component/__tests__/BaseCobadgeCard.test.tsx @@ -70,6 +70,21 @@ 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 = ( @@ -77,7 +92,8 @@ const getComponent = ( brandLogo: ImageSourcePropType, abi: Abi, caption?: string, - expiringDate?: Date + expiringDate?: Date, + blocked?: boolean ) => render( @@ -86,6 +102,7 @@ const getComponent = ( caption={caption} expiringDate={expiringDate} abi={abi} + blocked={blocked} /> ); diff --git a/ts/features/wallet/cobadge/component/__test__/CobadgeWalletPreview.test.tsx b/ts/features/wallet/cobadge/component/__tests__/CobadgeWalletPreview.test.tsx similarity index 100% rename from ts/features/wallet/cobadge/component/__test__/CobadgeWalletPreview.test.tsx rename to ts/features/wallet/cobadge/component/__tests__/CobadgeWalletPreview.test.tsx diff --git a/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx b/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx index 068d34a1cda..33faba0e823 100644 --- a/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx +++ b/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx @@ -62,6 +62,7 @@ const renderListItem = (cardPathItem: ListRenderItemInfo) => ( @@ -124,7 +125,7 @@ const CoBadgeChooseType = (props: Props): React.ReactElement => { headerTitle={I18n.t("wallet.onboarding.coBadge.headerTitle")} contextualHelp={emptyContextualHelp} > - +

{I18n.t("wallet.onboarding.coBadge.chooseType.title")}

@@ -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 diff --git a/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx b/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx new file mode 100644 index 00000000000..380d992ead7 --- /dev/null +++ b/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(); + const store: ReturnType = mockStore({ + ...globalState + } as GlobalState); + + return { + component: renderScreenFakeNavRedux( + CoBadgeChooseType, + ROUTES.WALLET_BPAY_DETAIL, + { abi, legacyAddCreditCardBack }, + store + ), + store + }; +}; diff --git a/ts/features/wallet/onboarding/common/searchBank/SearchStartComponent.tsx b/ts/features/wallet/onboarding/common/searchBank/SearchStartComponent.tsx index adac30d25ab..0796ad68e42 100644 --- a/ts/features/wallet/onboarding/common/searchBank/SearchStartComponent.tsx +++ b/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;