Merge pull request #57 from Sam-Rytech/fix-issues-20-21

test: add coverage for components and utils and fix claim error bug (#20, #21)

Author: k-deejah

package.json

@@ -27,7 +27,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "@hugeicons/core-free-icons": "^4.1.2",

src/components/AccountCard.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { AccountCard } from "./AccountCard";
+import { useSorokit } from "@/context/useSorokit";
+
+vi.mock("@/context/useSorokit", () => ({
+  useSorokit: vi.fn(),
+}));
+
+describe("AccountCard", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders a skeleton during loading", () => {
+    (useSorokit as any).mockReturnValue({
+      address: "GABC",
+      account: null,
+      isLoadingAccount: true,
+    });
+
+    const { container } = render(<AccountCard />);
+    // Skeleton renders when isLoadingAccount is true. We can check for a div with animate-pulse
+    // The skeleton from ui/Skeleton uses animate-pulse. Wait, the actual Skeleton component wasn't mocked.
+    // It's just a div.
+    expect(container.querySelectorAll(".animate-pulse")).toBeTruthy();
+    expect(screen.queryByText("Sequence")).not.toBeInTheDocument();
+  });
+
+  it("renders account fields after load", () => {
+    (useSorokit as any).mockReturnValue({
+      address: "GABC",
+      account: {
+        sequence: "123456",
+        subentryCount: 2,
+      },
+      isLoadingAccount: false,
+    });
+
+    render(<AccountCard />);
+    
+    expect(screen.getByText("Sequence")).toBeInTheDocument();
+    expect(screen.getByText("123456")).toBeInTheDocument();
+    expect(screen.getByText("Subentries")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+
+  it("returns null when no address is present", () => {
+    (useSorokit as any).mockReturnValue({
+      address: null,
+      account: null,
+      isLoadingAccount: false,
+    });
+
+    const { container } = render(<AccountCard />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

src/components/ClaimableBalanceCard.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { ClaimableBalanceCard } from "./ClaimableBalanceCard";
+import { getClient } from "@/lib/client";
+import { useSorokit } from "@/context/useSorokit";
+
+vi.mock("@/context/useSorokit", () => ({
+  useSorokit: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  getClient: vi.fn(),
+}));
+
+describe("ClaimableBalanceCard", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders an error message and re-enables button on claim failure, shows Claimed badge on success", async () => {
+    (useSorokit as any).mockReturnValue({
+      address: "GABC123",
+      isConnected: true,
+    });
+
+    const mockClaimBalance = vi.fn()
+      .mockResolvedValueOnce({ data: null, error: "Network error" }) // Failure first
+      .mockResolvedValueOnce({ data: { hash: "tx123" }, error: null }); // Success second
+
+    const mockGetClaimableBalances = vi.fn().mockResolvedValue({
+      data: [
+        {
+          id: "cb1",
+          asset: "XLM:GABC",
+          amount: "10.0",
+          sponsor: "GDEF",
+          claimants: [],
+        },
+      ],
+      error: null,
+    });
+
+    (getClient as any).mockReturnValue({
+      account: {
+        getClaimableBalances: mockGetClaimableBalances,
+        claimBalance: mockClaimBalance,
+      },
+    });
+
+    render(<ClaimableBalanceCard />);
+
+    // Wait for the balance to load
+    expect(await screen.findByText("10")).toBeInTheDocument();
+
+    const claimButton = screen.getByRole("button", { name: "Claim" });
+    
+    // Simulate first click: Failure
+    fireEvent.click(claimButton);
+    
+    // Wait for error to show up
+    expect(await screen.findByText("Network error")).toBeInTheDocument();
+    expect(claimButton).not.toBeDisabled(); // Should re-enable
+
+    // Simulate second click: Success
+    fireEvent.click(claimButton);
+    
+    // Wait for "Claimed" badge
+    expect(await screen.findByText("Claimed")).toBeInTheDocument();
+    
+    // Button should be gone after claim
+    expect(screen.queryByRole("button", { name: "Claim" })).not.toBeInTheDocument();
+    // Error should be gone
+    expect(screen.queryByText("Network error")).not.toBeInTheDocument();
+  });
+});

src/components/ClaimableBalanceCard.tsx

@@ -19,11 +19,11 @@ function BalanceRow({ cb }: { cb: ClaimableBalance }) {
     setClaimError(null);
     try {
       const { error } = await getClient().account.claimBalance(cb.id);
-      if (error) {
+      if (!error) {
+        setClaimed(true);
+      } else {
         setClaimError(error);
-        return;
       }
-      setClaimed(true);
     } finally {
       setClaiming(false);
     }
@@ -59,11 +59,14 @@ function BalanceRow({ cb }: { cb: ClaimableBalance }) {
             size="sm"
             loading={claiming}
             onClick={handleClaim}
+            className="shrink-0"
           >
             Claim
           </Button>
           {claimError && (
-            <p className="text-[12px] text-red text-right">{claimError}</p>
+            <span className="text-[10px] text-red max-w-[150px] text-right truncate">
+              {claimError}
+            </span>
           )}
         </div>
       )}

src/components/ErrorBoundary.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ErrorBoundary } from "./ErrorBoundary";
+
+const ThrowError = () => {
+  throw new Error("Test error!");
+};
+
+describe("ErrorBoundary", () => {
+  it("renders custom fallback prop and passes error and reset function", () => {
+    const fallbackSpy = vi.fn().mockImplementation((error, reset) => (
+      <div>
+        <p>Custom Fallback</p>
+        <p>{error.message}</p>
+        <button onClick={reset}>Reset Custom</button>
+      </div>
+    ));
+
+    // Suppress console.error for expected thrown error
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary fallback={fallbackSpy}>
+        <ThrowError />
+      </ErrorBoundary>
+    );
+
+    expect(fallbackSpy).toHaveBeenCalled();
+    expect(screen.getByText("Custom Fallback")).toBeInTheDocument();
+    expect(screen.getByText("Test error!")).toBeInTheDocument();
+
+    const resetBtn = screen.getByText("Reset Custom");
+    expect(resetBtn).toBeInTheDocument();
+
+    // Reset should be callable and reset the error state (though it will just throw again because we still render ThrowError)
+    // but we can verify it doesn't crash.
+    fireEvent.click(resetBtn);
+
+    consoleSpy.mockRestore();
+  });
+});

src/components/TransactionPanel.test.tsx

@@ -0,0 +1,83 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { TransactionPanel } from "./TransactionPanel";
+import { getClient } from "@/lib/client";
+import { useSorokit } from "@/context/useSorokit";
+
+vi.mock("@/context/useSorokit", () => ({
+  useSorokit: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  getClient: vi.fn(),
+}));
+
+describe("TransactionPanel", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useSorokit as any).mockReturnValue({
+      address: "GABC",
+      isConnected: true,
+    });
+  });
+
+  it("handles loading, success, and error states", async () => {
+    const mockSubmit = vi.fn().mockImplementation(() => {
+      return new Promise(resolve => {
+        setTimeout(() => resolve({ data: { hash: "txhash123", ledger: 100 }, error: null }), 50);
+      });
+    });
+
+    (getClient as any).mockReturnValue({
+      transaction: {
+        submit: mockSubmit,
+      },
+    });
+
+    render(<TransactionPanel />);
+
+    const destInput = screen.getByLabelText("Destination Address");
+    const amountInput = screen.getByLabelText("Amount (XLM)");
+    const submitBtn = screen.getByRole("button", { name: "Send Payment" });
+
+    fireEvent.change(destInput, { target: { value: "GDEF" } });
+    fireEvent.change(amountInput, { target: { value: "10" } });
+
+    // Submit and check loading state
+    fireEvent.click(submitBtn);
+    expect(submitBtn).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Submitting…" })).toBeInTheDocument();
+
+    // Check success state
+    expect(await screen.findByText("Transaction submitted")).toBeInTheDocument();
+    expect(screen.getByText("Ledger #100")).toBeInTheDocument();
+    expect(screen.getByText("txhash123")).toBeInTheDocument();
+
+    // Test "New Transaction" button resets state
+    const newTxBtn = screen.getByRole("button", { name: "New Transaction" });
+    fireEvent.click(newTxBtn);
+
+    expect(screen.getByLabelText("Destination Address")).toHaveValue("");
+    expect(screen.getByLabelText("Amount (XLM)")).toHaveValue(null);
+  });
+
+  it("handles error state", async () => {
+    const mockSubmit = vi.fn().mockResolvedValue({ data: null, error: "Insufficient balance" });
+
+    (getClient as any).mockReturnValue({
+      transaction: {
+        submit: mockSubmit,
+      },
+    });
+
+    render(<TransactionPanel />);
+
+    fireEvent.change(screen.getByLabelText("Destination Address"), { target: { value: "GDEF" } });
+    fireEvent.change(screen.getByLabelText("Amount (XLM)"), { target: { value: "10" } });
+    
+    fireEvent.click(screen.getByRole("button", { name: "Send Payment" }));
+
+    expect(await screen.findByText("Transaction failed")).toBeInTheDocument();
+    expect(screen.getByText("Insufficient balance")).toBeInTheDocument();
+  });
+});