Merge pull request #62 from jotel-dev/#52-test-transactionpanel-validation-paths-addressdisplay-keyboard-focus-mock-client-determinism-and-invalid-network

#52 test transactionpanel validation paths addressdisplay keyboard focus mock client determinism and invalid network

Author: k-deejah

src/components/AddressDisplay.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeAll } from "vitest";
+import { AddressDisplay } from "./AddressDisplay";
+
+// Mock navigator.clipboard safely in JSDOM
+const mockWriteText = vi.fn().mockResolvedValue(undefined);
+beforeAll(() => {
+  Object.defineProperty(navigator, "clipboard", {
+    value: {
+      writeText: mockWriteText,
+    },
+    configurable: true,
+    writable: true,
+  });
+});
+
+describe("AddressDisplay", () => {
+  const address = "GBAMQXTQ7IQKPZXJKZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQQQQ";
+
+  it("renders truncated address and copy button in tab order with correct aria-label", async () => {
+    render(<AddressDisplay address={address} />);
+
+    // Confirm address text is present (truncated format)
+    expect(screen.getByText("GBAMQXTQ...ZJQQQQ")).toBeInTheDocument();
+
+    // Confirm copy button exists with aria-label
+    const copyBtn = screen.getByRole("button", { name: "Copy address" });
+    expect(copyBtn).toBeInTheDocument();
+
+    // Confirm it is focusable (in tab order)
+    expect(copyBtn).not.toHaveAttribute("tabindex", "-1");
+
+    // Click to copy and verify clipboard call
+    await act(async () => {
+      fireEvent.click(copyBtn);
+    });
+    expect(mockWriteText).toHaveBeenCalledWith(address);
+
+    // Verify aria-label changes to "Address copied" after copy
+    expect(screen.getByRole("button", { name: "Address copied" })).toBeInTheDocument();
+
+    // Wait for the state to reset back to "Copy address"
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Copy address" })).toBeInTheDocument();
+    }, { timeout: 2500 });
+  });
+
+  it("verifies copy button has visibility class (opacity-50 base opacity)", () => {
+    render(<AddressDisplay address={address} />);
+
+    const copyBtn = screen.getByRole("button", { name: "Copy address" });
+
+    // Expect base opacity-50 for visibility (not opacity-0)
+    expect(copyBtn.className).toContain("opacity-50");
+    expect(copyBtn.className).not.toContain("opacity-0");
+  });
+});

src/components/TransactionPanel.test.tsx

@@ -130,4 +130,47 @@ describe("TransactionPanel", () => {
     expect(await screen.findByText("Transaction failed")).toBeInTheDocument();
     expect(screen.getByText("Wallet not connected")).toBeInTheDocument();
   });
+
+  it("shows self-payment warning error if destination is equal to source address", async () => {
+    (useSorokit as any).mockReturnValue({
+      address: "GCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC",
+      isConnected: true,
+    });
+
+    render(<TransactionPanel />);
+
+    const destInput = screen.getByLabelText("Destination Address");
+    const amountInput = screen.getByLabelText("Amount (XLM)");
+    const submitBtn = screen.getByRole("button", { name: "Send Payment" });
+
+    // Type source address as destination address
+    fireEvent.change(destInput, { target: { value: "GCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" } });
+    fireEvent.change(amountInput, { target: { value: "10" } });
+
+    // Self-payment error should be displayed
+    expect(screen.getByText("Cannot send to self")).toBeInTheDocument();
+    expect(submitBtn).toBeDisabled();
+  });
+
+  it("shows error for amount below minimum threshold", async () => {
+    render(<TransactionPanel />);
+
+    const destInput = screen.getByLabelText("Destination Address");
+    const amountInput = screen.getByLabelText("Amount (XLM)");
+    const submitBtn = screen.getByRole("button", { name: "Send Payment" });
+
+    const validDest = "GCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC";
+    fireEvent.change(destInput, { target: { value: validDest } });
+
+    // Type amount below 0.0000001
+    fireEvent.change(amountInput, { target: { value: "0.00000005" } });
+
+    expect(screen.getByText("Amount must be at least 0.0000001 XLM")).toBeInTheDocument();
+    expect(submitBtn).toBeDisabled();
+
+    // Type valid amount
+    fireEvent.change(amountInput, { target: { value: "0.0000001" } });
+    expect(screen.queryByText("Amount must be at least 0.0000001 XLM")).not.toBeInTheDocument();
+    expect(submitBtn).not.toBeDisabled();
+  });
 });

src/components/TransactionPanel.tsx

@@ -17,17 +17,23 @@ export function TransactionPanel() {
   const [dest, setDest] = useState("");
   const [destDirty, setDestDirty] = useState(false);
   const [amount, setAmount] = useState("");
+  const [amountDirty, setAmountDirty] = useState(false);
   const [memo, setMemo] = useState("");
   const [state, setState] = useState<State>("idle");
   const [result, setResult] = useState<TxResult | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const isDestValid = /^G[A-Z2-7]{55}$/.test(dest.trim());
+  const isSelfPayment = dest.trim() === address;
+  const parsedAmount = parseFloat(amount);
+  const isAmountValid = !isNaN(parsedAmount) && parsedAmount >= 0.0000001;
+
   const canSubmit =
     isConnected &&
     isDestValid &&
-    amount.trim() &&
-    parseFloat(amount) > 0;
+    !isSelfPayment &&
+    amount.trim() !== "" &&
+    isAmountValid;
 
   async function submit(e: React.FormEvent) {
     e.preventDefault();
@@ -59,6 +65,7 @@ export function TransactionPanel() {
       setAmount("");
       setMemo("");
       setDestDirty(false);
+      setAmountDirty(false);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Unknown error");
       setState("error");
@@ -144,7 +151,15 @@ export function TransactionPanel() {
                 setDest(e.target.value);
                 setDestDirty(true);
               }}
-              error={destDirty && !isDestValid ? "Invalid Stellar address" : undefined}
+              error={
+                destDirty
+                  ? !isDestValid
+                    ? "Invalid Stellar address"
+                    : isSelfPayment
+                    ? "Cannot send to self"
+                    : undefined
+                  : undefined
+              }
               disabled={state === "loading"}
             />
             <Input
@@ -154,7 +169,21 @@ export function TransactionPanel() {
               min="0.0000001"
               step="0.0000001"
               value={amount}
-              onChange={(e) => setAmount(e.target.value)}
+              onChange={(e) => {
+                setAmount(e.target.value);
+                setAmountDirty(true);
+              }}
+              error={
+                amountDirty
+                  ? amount.trim() === ""
+                    ? "Amount is required"
+                    : isNaN(parsedAmount) || parsedAmount <= 0
+                    ? "Amount must be greater than 0"
+                    : parsedAmount < 0.0000001
+                    ? "Amount must be at least 0.0000001 XLM"
+                    : undefined
+                  : undefined
+              }
               disabled={state === "loading"}
             />
             <Input
@@ -178,6 +207,7 @@ export function TransactionPanel() {
               setResult(null);
               setError(null);
               setDestDirty(false);
+              setAmountDirty(false);
             }}
           >
             New Transaction

src/lib/mock-client.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from "vitest";
+
+describe("mock-client", () => {
+  it("verifies MOCK_ADDRESS is a valid Stellar address format", async () => {
+    // Dynamically import to ensure fresh or standard load
+    const { createMockClient } = await import("./mock-client");
+    const client = createMockClient();
+    const addressRes = await client.wallet.connect();
+    const address = addressRes.data?.address;
+
+    expect(address).toBeDefined();
+    expect(address).toMatch(/^G[A-Z2-7]{55}$/);
+  });
+
+  it("verifies switchNetwork returns an error for invalid networks", async () => {
+    const { createMockClient } = await import("./mock-client");
+    const client = createMockClient();
+
+    const res = await client.network.switchNetwork("invalid" as any);
+    expect(res.data).toBeNull();
+    expect(res.error).toBe("Invalid network: invalid");
+  });
+
+  it("verifies two separate imports produce identical MOCK_HISTORY transaction hashes (determinism)", async () => {
+    // First import and fetch history
+    const mod1 = await import("./mock-client");
+    const client1 = mod1.createMockClient();
+    const res1 = await client1.transaction.getHistory("address", 1, 10);
+    const hashes1 = res1.data?.map(tx => tx.hash);
+
+    // Reset modules and re-import
+    vi.resetModules();
+
+    const mod2 = await import("./mock-client");
+    const client2 = mod2.createMockClient();
+    const res2 = await client2.transaction.getHistory("address", 1, 10);
+    const hashes2 = res2.data?.map(tx => tx.hash);
+
+    expect(hashes1).toEqual(hashes2);
+  });
+});

src/lib/mock-client.ts

@@ -14,12 +14,17 @@ import type {
 } from "./client";
 
 const delay = (ms: number) => new Promise((r) => setTimeout(r, ms));
-const randHex = (len: number) =>
-  Array.from({ length: len }, () =>
-    Math.floor(Math.random() * 16).toString(16),
-  ).join("");
+let seedState = 123456789;
+const randHex = (len: number) => {
+  let result = "";
+  for (let i = 0; i < len; i++) {
+    seedState = (seedState * 1664525 + 1013904223) % 4294967296;
+    result += (seedState % 16).toString(16);
+  }
+  return result;
+};
 
-const MOCK_ADDRESS = "GBAMQXTQ7IQKPZXJKZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQ";
+const MOCK_ADDRESS = "GBAMQXTQ7IQKPZXJKZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQZJQQQQ";
 
 const MOCK_BALANCES: Balance[] = [
   { asset: "XLM", balance: "1042.5000000", assetType: "native" },
@@ -48,10 +53,10 @@ const MOCK_ACCOUNT: AccountData = {
 const MOCK_HISTORY: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
   hash: randHex(64),
   ledger: 48291034 - i * 12,
-  createdAt: new Date(Date.now() - i * 3600000).toISOString(),
+  createdAt: new Date(1782248400000 - i * 3600000).toISOString(),
   successful: i !== 3 && i !== 11,
-  operationCount: Math.floor(Math.random() * 3) + 1,
-  feePaid: (100 + Math.floor(Math.random() * 400)).toString(),
+  operationCount: (i % 3) + 1,
+  feePaid: (100 + (i % 4) * 100).toString(),
   memo: i % 4 === 0 ? `memo-${i}` : undefined,
 }));
 
@@ -77,9 +82,9 @@ const MOCK_EVENTS: ContractEvent[] = Array.from({ length: 8 }, (_, i) => ({
   contractId: "CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM",
   type: ["transfer", "mint", "burn", "approve"][i % 4],
   ledger: 48291035 - i * 5,
-  createdAt: new Date(Date.now() - i * 600000).toISOString(),
+  createdAt: new Date(1782248400000 - i * 600000).toISOString(),
   topics: [`topic_${i}_a`, `topic_${i}_b`],
-  value: { amount: (Math.random() * 1000).toFixed(7), from: MOCK_ADDRESS },
+  value: { amount: ((i + 1) * 12.3456789).toFixed(7), from: MOCK_ADDRESS },
 }));
 
 const NETWORKS: Record<string, NetworkInfo> = {
@@ -207,7 +212,10 @@ export function createMockClient(): SorokitClient {
       },
       switchNetwork: async (name) => {
         await delay(600);
-        currentNetwork = NETWORKS[name] ?? NETWORKS.testnet;
+        if (!NETWORKS[name]) {
+          return { data: null, error: `Invalid network: ${name}` };
+        }
+        currentNetwork = NETWORKS[name];
         return { data: currentNetwork, error: null };
       },
     },