From 1e6a2a95ed68d0136211f045f3477347587d4d8f Mon Sep 17 00:00:00 2001 From: Simone Date: Fri, 12 Feb 2021 11:24:08 +0100 Subject: [PATCH 1/9] [#176842973] fix InternationalCircuitIconsBar naming --- ...nBar.tsx => InternationalCircuitIconsBar.tsx} | 16 ++++++++++------ .../bancomat/screen/BancomatInformation.tsx | 2 +- .../utils/bancomatInformationBottomSheet.tsx | 2 +- .../common/searchBank/SearchStartComponent.tsx | 2 +- 4 files changed, 13 insertions(+), 9 deletions(-) rename ts/components/wallet/{InternationalCircuitIconBar.tsx => InternationalCircuitIconsBar.tsx} (64%) 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/features/wallet/bancomat/screen/BancomatInformation.tsx b/ts/features/wallet/bancomat/screen/BancomatInformation.tsx index b7f1076d989..77d7ef73462 100644 --- a/ts/features/wallet/bancomat/screen/BancomatInformation.tsx +++ b/ts/features/wallet/bancomat/screen/BancomatInformation.tsx @@ -8,7 +8,7 @@ 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"; 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/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; From 42c2c3a0913a78bd1e17d455845a123129b5c663 Mon Sep 17 00:00:00 2001 From: Simone Date: Fri, 12 Feb 2021 11:24:40 +0100 Subject: [PATCH 2/9] [#176842973] add InternationalCircuitIconsBar test --- .../__test__/InternationalCircuitIconsBar.test.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 ts/components/wallet/__test__/InternationalCircuitIconsBar.test.tsx 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(); + }) + ); +}); From cba986b6b248479f8513d6aeeb26867bc9e81ddd Mon Sep 17 00:00:00 2001 From: Simone Date: Fri, 12 Feb 2021 12:14:06 +0100 Subject: [PATCH 3/9] [#176842973] fix optional prop --- ts/features/wallet/bancomat/screen/BancomatInformation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ts/features/wallet/bancomat/screen/BancomatInformation.tsx b/ts/features/wallet/bancomat/screen/BancomatInformation.tsx index 77d7ef73462..a8f165f15ba 100644 --- a/ts/features/wallet/bancomat/screen/BancomatInformation.tsx +++ b/ts/features/wallet/bancomat/screen/BancomatInformation.tsx @@ -14,7 +14,7 @@ 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")}

Date: Fri, 12 Feb 2021 12:46:18 +0100 Subject: [PATCH 4/9] [#176842973] add BancomatInformation component tests --- .../bancomat/screen/BancomatInformation.tsx | 2 + .../__test__/BancomatInformation.test.tsx | 61 +++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 ts/features/wallet/bancomat/screen/__test__/BancomatInformation.test.tsx diff --git a/ts/features/wallet/bancomat/screen/BancomatInformation.tsx b/ts/features/wallet/bancomat/screen/BancomatInformation.tsx index a8f165f15ba..16f5d9d5a03 100644 --- a/ts/features/wallet/bancomat/screen/BancomatInformation.tsx +++ b/ts/features/wallet/bancomat/screen/BancomatInformation.tsx @@ -50,6 +50,7 @@ const BancomatInformation: React.FunctionComponent = 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/__test__/BancomatInformation.test.tsx b/ts/features/wallet/bancomat/screen/__test__/BancomatInformation.test.tsx new file mode 100644 index 00000000000..16c8958f036 --- /dev/null +++ b/ts/features/wallet/bancomat/screen/__test__/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( + + + + ); +}; From 807554e0d3c2de1e87fbf8984346c0a551901adf Mon Sep 17 00:00:00 2001 From: Simone Date: Fri, 12 Feb 2021 13:04:09 +0100 Subject: [PATCH 5/9] [#176842973] renaming folder --- .../screen/{__test__ => __tests__}/BancomatInformation.test.tsx | 0 .../component/{__test__ => __tests__}/BaseCobadgeCard.test.tsx | 0 .../{__test__ => __tests__}/CobadgeWalletPreview.test.tsx | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename ts/features/wallet/bancomat/screen/{__test__ => __tests__}/BancomatInformation.test.tsx (100%) rename ts/features/wallet/cobadge/component/{__test__ => __tests__}/BaseCobadgeCard.test.tsx (100%) rename ts/features/wallet/cobadge/component/{__test__ => __tests__}/CobadgeWalletPreview.test.tsx (100%) diff --git a/ts/features/wallet/bancomat/screen/__test__/BancomatInformation.test.tsx b/ts/features/wallet/bancomat/screen/__tests__/BancomatInformation.test.tsx similarity index 100% rename from ts/features/wallet/bancomat/screen/__test__/BancomatInformation.test.tsx rename to ts/features/wallet/bancomat/screen/__tests__/BancomatInformation.test.tsx diff --git a/ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx b/ts/features/wallet/cobadge/component/__tests__/BaseCobadgeCard.test.tsx similarity index 100% rename from ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx rename to ts/features/wallet/cobadge/component/__tests__/BaseCobadgeCard.test.tsx 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 From be3dacd3267e3a4f1232b3bc27d8303016bcd95e Mon Sep 17 00:00:00 2001 From: Simone Date: Fri, 12 Feb 2021 14:34:31 +0100 Subject: [PATCH 6/9] [#176842973] add test --- .../cobadge/screens/CoBadgeChooseType.tsx | 4 ++-- .../screens/__tests__/CoBadgeChooseType.test.tsx | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.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..7eeba140c99 --- /dev/null +++ b/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx @@ -0,0 +1,16 @@ +import { render } from "@testing-library/react-native"; +import * as React from "react"; +import { Provider } from "react-redux"; +import configureMockStore from "redux-mock-store"; +import CoBadgeChooseType from "../CoBadgeChooseType"; + +const getComponent = (onAddPaymentMethod: () => void) => { + const mockStore = configureMockStore(); + + const store: ReturnType = mockStore(); + return render( + + + + ); +}; From 969610048694f617ccab0fc28bf62cf3fbf3d18d Mon Sep 17 00:00:00 2001 From: Simone Date: Mon, 15 Feb 2021 11:54:48 +0100 Subject: [PATCH 7/9] [#176842973] add CoBadgeChooseType tests --- .../__tests__/CoBadgeChooseType.test.tsx | 91 +++++++++++++++++-- 1 file changed, 82 insertions(+), 9 deletions(-) diff --git a/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx b/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx index 7eeba140c99..97af4420d37 100644 --- a/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx +++ b/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx @@ -1,16 +1,89 @@ -import { render } from "@testing-library/react-native"; +import { fireEvent } from "@testing-library/react-native"; +import { none } from "fp-ts/lib/Option"; import * as React from "react"; -import { Provider } from "react-redux"; +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"; -const getComponent = (onAddPaymentMethod: () => void) => { - const mockStore = configureMockStore(); +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"); - const store: ReturnType = mockStore(); - return render( - - - + 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 ToBeTested: React.FunctionComponent> = (props: React.ComponentProps) => ( + ); + const mockStore = configureMockStore(); + const store: ReturnType = mockStore({ + ...globalState + } as GlobalState); + + return { + component: renderScreenFakeNavRedux( + ToBeTested, + ROUTES.WALLET_BPAY_DETAIL, + { abi, legacyAddCreditCardBack }, + store + ), + store + }; }; From cd1d74957e243537d198a527ddf315e62f8f9724 Mon Sep 17 00:00:00 2001 From: Simone Date: Mon, 15 Feb 2021 12:00:45 +0100 Subject: [PATCH 8/9] [#176842973] add missing test in BaseCoBadgeCard component --- .../cobadge/component/BaseCoBadgeCard.tsx | 5 ++++- .../__tests__/BaseCobadgeCard.test.tsx | 19 ++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) 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/__tests__/BaseCobadgeCard.test.tsx b/ts/features/wallet/cobadge/component/__tests__/BaseCobadgeCard.test.tsx index 7f0f3b26d09..ce90a2fb154 100644 --- a/ts/features/wallet/cobadge/component/__tests__/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} /> ); From 379f26794018acbb79154c85e4ac019d3e498697 Mon Sep 17 00:00:00 2001 From: Simone Date: Mon, 1 Mar 2021 18:11:42 +0100 Subject: [PATCH 9/9] [#176842973] remove component wrapper --- .../cobadge/screens/__tests__/CoBadgeChooseType.test.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx b/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx index 97af4420d37..380d992ead7 100644 --- a/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx +++ b/ts/features/wallet/onboarding/cobadge/screens/__tests__/CoBadgeChooseType.test.tsx @@ -1,6 +1,5 @@ import { fireEvent } from "@testing-library/react-native"; import { none } from "fp-ts/lib/Option"; -import * as React from "react"; import { NavigationActions, NavigationParams } from "react-navigation"; import configureMockStore from "redux-mock-store"; import ROUTES from "../../../../../../navigation/routes"; @@ -67,11 +66,6 @@ describe("CoBadgeChooseType component", () => { const getComponent = (abi?: string, legacyAddCreditCardBack?: number) => { const globalState = appReducer(undefined, applicationChangeState("active")); - const ToBeTested: React.FunctionComponent> = (props: React.ComponentProps) => ( - - ); const mockStore = configureMockStore(); const store: ReturnType = mockStore({ ...globalState @@ -79,7 +73,7 @@ const getComponent = (abi?: string, legacyAddCreditCardBack?: number) => { return { component: renderScreenFakeNavRedux( - ToBeTested, + CoBadgeChooseType, ROUTES.WALLET_BPAY_DETAIL, { abi, legacyAddCreditCardBack }, store