chore: [IOBP-833] Sorting algorithms for PSP bundles

ts/features/payments/checkout/components/WalletPspListSkeleton.tsx

@@ -9,13 +9,13 @@ import { View } from "react-native";
 import Placeholder from "rn-placeholder";
 
 export const WalletPspListSkeleton = () => (
-  <>
+  <View testID="wallet-psp-list-skeleton">
     <PspSkeleton showFeatured />
     <Divider />
     <PspSkeleton />
     <Divider />
     <PspSkeleton />
-  </>
+  </View>
 );
 
 type PspSkeletonProps = {

ts/features/payments/checkout/hooks/___tests___/useSortPspBottomSheet.test.tsx

@@ -0,0 +1,77 @@
+import { fireEvent, render } from "@testing-library/react-native";
+import React from "react";
+import { Button, Text } from "react-native";
+import { WalletPaymentPspSortType } from "../../types";
+import { useSortPspBottomSheet } from "../useSortPspBottomSheet";
+
+// Mock bottom sheet hook
+jest.mock("../../../../../utils/hooks/bottomSheet", () => ({
+  useIOBottomSheetAutoresizableModal: jest.fn().mockReturnValue({
+    isVisible: false,
+    show: jest.fn(),
+    hide: jest.fn()
+  })
+}));
+
+// Test component to render and use the hook
+const ComponentWithPspBottomSheet = ({
+  onSortChange
+}: {
+  onSortChange: (sortType: WalletPaymentPspSortType) => void;
+}) => {
+  const { sortType, dismiss, present } = useSortPspBottomSheet({
+    onSortChange
+  });
+
+  return (
+    <>
+      <Text testID="current-sort-type">{sortType}</Text>
+      <Button title="Show" onPress={present} testID="show-button" />
+      <Button title="Hide" onPress={dismiss} testID="hide-button" />
+      <Button
+        title="Change to Name Sort"
+        onPress={() => onSortChange("name")}
+        testID="change-sort-button"
+      />
+    </>
+  );
+};
+
+describe("useSortPspBottomSheet", () => {
+  it("should initialize sortType to 'default'", () => {
+    const onSortChangeMock = jest.fn();
+    const { getByTestId } = render(
+      <ComponentWithPspBottomSheet onSortChange={onSortChangeMock} />
+    );
+
+    expect(getByTestId("current-sort-type").children[0]).toBe("default");
+  });
+
+  it("should update sortType and call onSortChange when handleChangeSort is called", () => {
+    const onSortChangeMock = jest.fn();
+    const { getByTestId } = render(
+      <ComponentWithPspBottomSheet onSortChange={onSortChangeMock} />
+    );
+
+    // Trigger the sort change
+    fireEvent.press(getByTestId("change-sort-button"));
+    expect(onSortChangeMock).toHaveBeenCalledWith("name");
+  });
+
+  it("should call show and hide methods for the bottom sheet modal", () => {
+    const onSortChangeMock = jest.fn();
+    const { getByTestId } = render(
+      <ComponentWithPspBottomSheet onSortChange={onSortChangeMock} />
+    );
+
+    const showButton = getByTestId("show-button");
+    const hideButton = getByTestId("hide-button");
+
+    // Trigger show and hide methods
+    fireEvent.press(showButton);
+    fireEvent.press(hideButton);
+
+    expect(showButton).toBeTruthy();
+    expect(hideButton).toBeTruthy();
+  });
+});

ts/features/payments/checkout/hooks/useSortPspBottomSheet.tsx

@@ -33,9 +33,9 @@ const useSortPspBottomSheet = ({
   const [sortType, setSortType] =
     React.useState<WalletPaymentPspSortType>("default");
 
-  const handleChangeSort = (sortType: WalletPaymentPspSortType) => {
-    setSortType(sortType);
-    onSortChange(sortType);
+  const handleChangeSort = (currentSortCriteria: WalletPaymentPspSortType) => {
+    setSortType(currentSortCriteria);
+    onSortChange(currentSortCriteria);
   };
 
   const getModalContent = () => (

ts/features/payments/checkout/screens/WalletPaymentPickPspScreen.tsx

@@ -189,9 +189,11 @@ const WalletPaymentPickPspScreen = () => {
 
   return (
     <GradientScrollView
+      testID="wallet-payment-pick-psp-screen"
       primaryActionProps={
         canContinue
           ? {
+              testID: "wallet-payment-pick-psp-continue-button",
               label: I18n.t("wallet.payment.psp.continueButton"),
               accessibilityLabel: I18n.t("wallet.payment.psp.continueButton"),
               onPress: handleContinue,
@@ -202,15 +204,16 @@ const WalletPaymentPickPspScreen = () => {
       }
     >
       <SelectPspHeadingContent />
-      {!isLoading && (
+      {isLoading ? (
+        <WalletPspListSkeleton />
+      ) : (
         <RadioGroup<string>
           onPress={handlePspSelection}
           type="radioListItemWithAmount"
           selectedItem={pspSelected?.idBundle}
           items={getRadioItemsFromPspList(sortedPspList, showFeaturedPsp)}
         />
       )}
-      {isLoading && <WalletPspListSkeleton />}
       {sortPspBottomSheet}
     </GradientScrollView>
   );

ts/features/payments/checkout/screens/___tests___/WalletPaymentPickPspScreen.test.tsx

@@ -0,0 +1,176 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { fireEvent } from "@testing-library/react-native";
+import * as O from "fp-ts/lib/Option";
+import React from "react";
+import { Store } from "redux";
+import configureMockStore from "redux-mock-store";
+import I18n from "../../../../../i18n";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { PaymentsCheckoutRoutes } from "../../navigation/routes";
+import { selectPaymentPspAction } from "../../store/actions/orchestration";
+import { PaymentsCheckoutState } from "../../store/reducers";
+import { WalletPaymentStepEnum } from "../../types";
+import { WalletPaymentPickPspScreen } from "../WalletPaymentPickPspScreen";
+
+describe("WalletPaymentPickPspScreen", () => {
+  const mockStore = configureMockStore<GlobalState>();
+
+  const checkout: PaymentsCheckoutState = {
+    currentStep: WalletPaymentStepEnum.PICK_PSP,
+    pspList: pot.someLoading([
+      {
+        id: "test"
+      }
+    ]),
+    paymentDetails: pot.none,
+    userWallets: pot.none,
+    recentUsedPaymentMethod: pot.none,
+    allPaymentMethods: pot.none,
+    selectedWallet: O.none,
+    selectedPaymentMethod: O.none,
+    selectedPsp: O.none,
+    transaction: pot.none,
+    authorizationUrl: pot.none
+  };
+
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const state = {
+    ...globalState,
+    features: {
+      ...globalState.features,
+      payments: {
+        ...globalState.features.payments,
+        checkout
+      }
+    }
+  };
+
+  const renderPspScreen = (store: Store<GlobalState>) =>
+    renderScreenWithNavigationStoreContext<GlobalState>(
+      () => <WalletPaymentPickPspScreen />,
+      PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_MAKE,
+      {},
+      store
+    );
+
+  it("should render the screen", () => {
+    const store: ReturnType<typeof mockStore> = mockStore(state);
+    const { getByTestId } = renderPspScreen(store);
+    expect(getByTestId("wallet-payment-pick-psp-screen")).toBeDefined();
+  });
+
+  it("should render with skeleton", () => {
+    const store: ReturnType<typeof mockStore> = mockStore({
+      ...state,
+      features: {
+        ...state.features,
+        payments: {
+          ...state.features.payments,
+          checkout: {
+            ...checkout,
+            pspList: pot.someLoading([])
+          }
+        }
+      }
+    });
+    const { getByTestId } = renderPspScreen(store);
+    expect(getByTestId("wallet-psp-list-skeleton")).toBeDefined();
+  });
+
+  it("should render the screen with the continue button disabled", () => {
+    const store: ReturnType<typeof mockStore> = mockStore(state);
+    const { getByTestId, queryByText } = renderPspScreen(store);
+    expect(getByTestId("wallet-payment-pick-psp-screen")).toBeDefined();
+    expect(queryByText("wallet-payment-pick-psp-continue-button")).toBeNull();
+  });
+
+  it("should render the screen with the continue button enabled", () => {
+    const store: ReturnType<typeof mockStore> = mockStore({
+      ...state,
+      features: {
+        ...state.features,
+        payments: {
+          ...state.features.payments,
+          checkout: {
+            ...checkout,
+            selectedPsp: O.some({
+              id: "test"
+            })
+          }
+        }
+      }
+    });
+    const { getByTestId } = renderPspScreen(store);
+    expect(getByTestId("wallet-payment-pick-psp-screen")).toBeDefined();
+    expect(
+      getByTestId("wallet-payment-pick-psp-continue-button")
+    ).toBeDefined();
+  });
+
+  it("should show bottom sheet", () => {
+    const store: ReturnType<typeof mockStore> = mockStore(state);
+    const { getByText } = renderPspScreen(store);
+    fireEvent.press(getByText(I18n.t("wallet.payment.psp.pspTitle")));
+    expect(
+      getByText(I18n.t("wallet.payment.psp.sortBottomSheet.default"))
+    ).toBeDefined();
+  });
+
+  it("should sort by amount", () => {
+    const store: ReturnType<typeof mockStore> = mockStore(state);
+    const { getByText } = renderPspScreen(store);
+    fireEvent.press(getByText(I18n.t("wallet.payment.psp.pspTitle")));
+    fireEvent.press(
+      getByText(I18n.t("wallet.payment.psp.sortBottomSheet.amount"))
+    );
+    expect(
+      getByText(I18n.t("wallet.payment.psp.sortBottomSheet.amount"))
+    ).toBeDefined();
+  });
+
+  it("should sort by name", () => {
+    const store: ReturnType<typeof mockStore> = mockStore(state);
+    const { getByText } = renderPspScreen(store);
+    fireEvent.press(getByText(I18n.t("wallet.payment.psp.pspTitle")));
+    fireEvent.press(
+      getByText(I18n.t("wallet.payment.psp.sortBottomSheet.name"))
+    );
+    expect(
+      getByText(I18n.t("wallet.payment.psp.sortBottomSheet.name"))
+    ).toBeDefined();
+  });
+
+  it("should select a PSP", () => {
+    const store: ReturnType<typeof mockStore> = mockStore({
+      ...state,
+      features: {
+        ...state.features,
+        payments: {
+          ...state.features.payments,
+          checkout: {
+            ...checkout,
+            pspList: pot.some([
+              {
+                idBundle: "test",
+                pspBusinessName: "Test PSP",
+                taxPayerFee: 100
+              }
+            ])
+          }
+        }
+      }
+    });
+    const { getByText } = renderPspScreen(store);
+    fireEvent.press(getByText("Test PSP"));
+    expect(store.getActions()).toContainEqual(
+      selectPaymentPspAction({
+        idBundle: "test",
+        pspBusinessName: "Test PSP",
+        taxPayerFee: 100
+      })
+    );
+  });
+});