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: "0xd05AfA87A599b8AD8Cff71b1eC7129e3Edfe08b9",
     payouts: [mockPayout],
     description: ""
 }

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

@@ -0,0 +1,110 @@
+import "@testing-library/jest-dom";
+import { screen, fireEvent } from "@testing-library/react";
+import { Wallet } from "@/types/wallet";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import CashoutAddress from "@/components/cards/wallet/CashoutAddress";
+import { mockUser } from "@__mocks__/fixtures/user";
+import { mockWallet } from "@__mocks__/fixtures/wallet";
+import { KYCSTATUS, openVerificationModal } from "@/store/feature/kyc.slice";
+import { useDispatch } from "@/hooks/useTypedDispatch";
+
+jest.mock("@/hooks/useTypedDispatch.ts", () => ({
+  useDispatch: jest.fn(),
+}));
+
+const walletMock: Wallet = {
+  ...mockWallet,
+  title: "Test Wallet",
+  token: "BTC",
+  balance: 100,
+  description: "Test Wallet Description",
+  payouts: [],
+};
+
+jest.mock("@/store/feature/kyc.slice", () => {
+  const actual = jest.requireActual("@/store/feature/kyc.slice");
+  return {
+    ...actual,
+    openVerificationModal: jest.fn(),
+  };
+});
+
+const mockUserStore = {
+  user: {
+    data: mockUser,
+    userBalance: null,
+    balance: null,
+    walletAddresses: null,
+    token: null,
+    referrals: null,
+    fetchingUserLoading: false,
+    filteredUsers: null,
+  },
+};
+
+const verifiedUserStore = {
+  user: {
+    data: {
+      ...mockUser,
+      kycStatus: KYCSTATUS.VERIFIED,
+    },
+    userBalance: null,
+    balance: null,
+    walletAddresses: null,
+    token: null,
+    referrals: null,
+    fetchingUserLoading: false,
+    filteredUsers: null,
+  },
+};
+const address = walletMock.address ? walletMock.address.match(/.{1,4}/g) : null;
+
+describe("CashoutAddress component", () => {
+  let setShowEditModal: () => void;
+  let setShowPayoutModal: () => void;
+  const mockDispatch = jest.fn();
+
+  beforeEach(() => {
+    setShowEditModal = jest.fn();
+    setShowPayoutModal = jest.fn();
+    (useDispatch as jest.Mock).mockReturnValue(mockDispatch);
+  });
+
+  test("renders CashoutAddress component correctly with given props when cashable is true and there's address", () => {
+    renderWithRedux(<CashoutAddress wallet={walletMock} setShowEditModal={setShowEditModal} disabled={false} setShowPayoutModal={setShowPayoutModal} />, mockUserStore);
+    expect(screen.getByTestId("cashoutAddressId")).toBeInTheDocument();
+    address?.forEach((text) => {
+      expect(screen.getByText(text)).toBeInTheDocument();
+    });
+    expect(screen.getByText("profile.wallets.address-change")).toBeInTheDocument();
+  });
+
+  it("Renders wallet description when there is no address", () => {
+    renderWithRedux(
+      <CashoutAddress wallet={{ ...walletMock, address: "" }} setShowEditModal={setShowEditModal} disabled={false} setShowPayoutModal={setShowPayoutModal} />,
+      mockUserStore
+    );
+    expect(screen.getByText(walletMock.description)).toBeInTheDocument();
+    expect(screen.getByText("profile.wallets.address-set")).toBeInTheDocument();
+  });
+
+  it("triggers cashout for verified user", () => {
+    renderWithRedux(<CashoutAddress wallet={walletMock} setShowEditModal={setShowEditModal} disabled={false} setShowPayoutModal={setShowPayoutModal} />, verifiedUserStore);
+    fireEvent.click(screen.getByText("profile.wallets.cash-out"));
+    expect(setShowPayoutModal).toHaveBeenCalledWith(true);
+  });
+
+  it("Should trigger KYC verification for non-verified user", () => {
+    renderWithRedux(<CashoutAddress wallet={walletMock} setShowEditModal={setShowEditModal} disabled={false} setShowPayoutModal={setShowPayoutModal} />, mockUserStore);
+    fireEvent.click(screen.getByText("profile.wallets.cash-out"));
+    expect(openVerificationModal).toHaveBeenCalled();
+  });
+
+  it("Should trigger edit address modal", () => {
+    renderWithRedux(<CashoutAddress wallet={walletMock} setShowEditModal={setShowEditModal} disabled={false} setShowPayoutModal={setShowPayoutModal} />, verifiedUserStore);
+    fireEvent.click(screen.getByText("profile.wallets.address-change"));
+    expect(setShowEditModal).toHaveBeenCalledWith(true);
+    expect(mockDispatch).toHaveBeenCalled();
+  });
+
+});

__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 <div>Edit address component</div>;
+});
+
+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 },
 });