feat: wallet card test

__mocks__/fixtures/wallet.ts

@@ -18,7 +18,7 @@ export const mockWallet: Wallet = {
     balance: 0,
     user_id: mockUser.id,
     token: "ICP",
-    address: "",
+    address: "0xd0 5AfA 87A5 99b8 AD8C ff71 b1eC 7129 e3Ed fe08 b9",
     payouts: [mockPayout],
     description: ""
 }

__tests__/components/cards/wallet/Overview.test.tsx

@@ -0,0 +1,22 @@
+import Overview from "@/components/cards/wallet/Overview";
+import { mockWallet } from "@__mocks__/fixtures/wallet";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+const wallet = {
+  ...mockWallet,
+  title: "some title",
+};
+
+describe("Overview component", () => {
+  it("Should render Overview component and all the required elements with props value", () => {
+    render(<Overview wallet={wallet} />);
+    expect(screen.getByTestId("overviewId")).toBeInTheDocument();
+     expect(screen.getByText(wallet.title)).toBeInTheDocument();
+     expect(screen.getByText("profile.wallets.balance")).toBeInTheDocument();
+     expect(screen.getByTestId("currencyId")).toBeInTheDocument();
+     expect(screen.getByTestId("coin")).toBeInTheDocument();
+     expect(screen.getByTestId("tag")).toBeInTheDocument();
+  });
+
+});

__tests__/components/cards/wallet/WalletHint.test.tsx

@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { Wallet } from "@/types/wallet";
+import WalletHint from "@/components/cards/wallet/WalletHint";
+import { mockWallet } from "@__mocks__/fixtures/wallet";
+
+const wallet: Wallet = {
+  ...mockWallet,
+  payouts: [
+    { amount: 100, token: "ETH" },
+    { amount: 200, token: "BTC" },
+  ],
+};
+
+describe("WalletHint component", () => {
+  it("should render WalletHint component with the correct number of Hint components", () => {
+    render(<WalletHint wallet={wallet} />);
+    const textElements = screen.getAllByText("profile.wallet.payout.text");
+    expect(textElements).toHaveLength(wallet.payouts.length);
+  });
+
+  it("renders the correct number of Hint components", () => {
+    render(<WalletHint wallet={wallet} />);
+    const hints = screen.getAllByText("profile.wallet.payout.text");
+    expect(hints).toHaveLength(wallet.payouts.length);
+  });
+
+  it("renders Currency components with correct values", () => {
+    render(<WalletHint wallet={wallet} />);
+    const currencyElements = screen.getAllByTestId("currencyId");
+    expect(currencyElements).toHaveLength(wallet.payouts.length);
+    wallet.payouts.forEach((payout, index) => {
+      const element = currencyElements[index];
+      expect(element).toHaveTextContent(new RegExp(`${payout.token}`));
+    });
+  });
+});

__tests__/components/cards/wallet/indext.test.tsx

@@ -0,0 +1,24 @@
+import CardsWallet from "@/components/cards/wallet";
+import "@testing-library/jest-dom";
+import { mockWallet } from "@__mocks__/fixtures/wallet";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+
+// use the actual component when it is done tested
+jest.mock("@/components/sections/profile/modals/EditAddress", () => {
+  return <h1>hello</h1>;
+});
+
+jest.mock("@/hooks/useTypedDispatch.ts", () => ({
+  useDispatch: jest.fn(),
+}));
+
+describe("Wallet card component", () => {
+  it("renders the wallet component with all the children", () => {
+    renderWithRedux(<CardsWallet wallet={mockWallet} disabled={false} />);
+    expect(screen.getByTestId("cardWalletId")).toBeInTheDocument();
+    expect(screen.getByTestId("overviewId")).toBeInTheDocument();
+    expect(screen.getByTestId("cashoutAddressId")).toBeInTheDocument();
+    expect(screen.queryByText("profile.wallet.payout.text")).not.toBeNull();
+  });
+});

jest.config.js

@@ -28,6 +28,7 @@ const config = {
     "react-markdown": "<rootDir>/__mocks__/react-markdown.tsx",
     [`^(${esModules})-.*`]: "<rootDir>/__mocks__/plugin.ts",
     unified: "<rootDir>/__mocks__/unified.ts",
+    "^@/(.*)$": "<rootDir>/src/$1",
   },
 };
 

jest.polyfills.js

@@ -21,6 +21,7 @@ Object.defineProperties(globalThis, {
 
 const { Blob, File } = require("node:buffer");
 const { fetch, Headers, FormData, Request, Response } = require("undici");
+const { clearImmediate } = require("node:timers");
 
 Object.defineProperties(globalThis, {
   fetch: { value: fetch, writable: true },
@@ -30,4 +31,5 @@ Object.defineProperties(globalThis, {
   FormData: { value: FormData },
   Request: { value: Request },
   Response: { value: Response },
+  clearImmediate: { value: clearImmediate },
 });

src/components/cards/wallet/CashoutAddress.tsx

@@ -0,0 +1,96 @@
+import ArrowButton from "@/components/ui/button/Arrow";
+import { useTranslation } from "next-i18next";
+import { useDispatch } from "@/hooks/useTypedDispatch";
+import { setCurrentWallet } from "@/store/feature/user/wallets.slice";
+import { toggleBodyScrolling } from "@/store/feature/ui.slice";
+import { useSelector } from "@/hooks/useTypedSelector";
+import { openVerificationModal } from "@/store/feature/kyc.slice";
+import { Wallet } from "@/types/wallet";
+import { useCallback, useMemo } from "react";
+
+interface CashoutAddressProps {
+  wallet: Wallet;
+  setShowEditModal: (show: boolean) => void;
+  disabled: boolean;
+  setShowPayoutModal: (show: boolean) => void;
+  testId?:string
+}
+
+export default function CashoutAddress({ wallet, setShowEditModal, disabled, setShowPayoutModal, testId='cashoutAddressId' }: CashoutAddressProps) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const user = useSelector((state) => state.user.data);
+  const isKycVerified = user?.kycStatus === "VERIFIED";
+  const address = useMemo(() => (wallet.address ? wallet.address.match(/.{1,4}/g) : null), [wallet.address]);
+  const cashable = useMemo(() => String(wallet.token).toUpperCase() !== "DAC", [wallet.token]);
+
+
+  const triggerEditAddress = useCallback(() => {
+    dispatch(setCurrentWallet(wallet));
+    setShowEditModal(true);
+    dispatch(toggleBodyScrolling(true));
+  }, [dispatch, setShowEditModal, wallet]);
+
+  const triggerCashout = useCallback(() => {
+    setShowPayoutModal(true);
+    dispatch(toggleBodyScrolling(true));
+  }, [setShowPayoutModal, dispatch]);
+
+  const triggerKYCVerification = useCallback(() => {
+    dispatch(
+      openVerificationModal({
+        description: t("kyc.payout.reason"),
+        completedActionText: t("kyc.payout.button.completed"),
+        completedAction: () => {
+          triggerCashout();
+        },
+      })
+    );
+  }, [dispatch, t, triggerCashout]);
+  const cashout = () => {
+    if (!isKycVerified) return triggerKYCVerification();
+    triggerCashout();
+  };
+  return (
+    <div className="px-7 pt-6 flex-1 pb-24 lg:pb-24" data-testId={testId}>
+      {cashable ? (
+        <div className="text-sm text-gray-700">
+          {address ? (
+            <p className="leading-5 text-sm flex gap-x-2 gap-y-1 flex-wrap font-mono font-normal">
+              {address.map((part, k) => (
+                <span key={`address-${k}`} className="mr-2">
+                  {part}
+                </span>
+              ))}
+            </p>
+          ) : (
+            <p>{wallet.description}</p>
+          )}
+          <div className="text-gray-700 text-sm mt-3">
+            <span className="cursor-pointer hover:underline" onClick={triggerEditAddress}>
+              {address ? t("profile.wallets.address-change") : t("profile.wallets.address-set")}
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div className="prose">
+          <p
+            dangerouslySetInnerHTML={{
+              __html: t("profile.wallets.uncashable", {
+                token: `${wallet.title}`,
+                link: "https://discord.gg/5yDZvVnpQQ",
+              }),
+            }}
+          />
+        </div>
+      )}
+      {cashable && (
+        <div className="right-2 absolute bottom-2 mt-5">
+          <ArrowButton disabled={!wallet.balance || !wallet.address || disabled} variant="outline-primary" minWidthClass="min-w-40" onClick={cashout}>
+            {t("profile.wallets.cash-out")}
+          </ArrowButton>
+        </div>
+      )}
+    </div>
+  );
+}