test(WalletConnectButton): add tests for all three render states and click handlers (#600)

[jotel-dev]

Description

Overview

This pull request adds complete, end-to-end unit test coverage for the WalletConnectButton component (src/components/WalletConnectButton.tsx) using React Testing Library and Vitest.

Previously, WalletConnectButton had gaps in test coverage across its three distinct lifecycle render states:

1. Disconnected State (isConnected: false, isConnecting: false)
2. Connecting State (isConnecting: true)
3. Connected State (isConnected: true, address: "...")

Motivation & Problem Solved

1. Zero State Regression Prevention: Ensure all three render states remain stable and visually/functionally accurate under all SorokitProvider state transitions.
2. Address Truncation Verification: Ensure the address pill properly receives, formats, and displays truncated Stellar public keys / Soroban contract IDs via truncateAddress() from src/lib/utils.ts.
3. onOpenModal Prop Handler & Fallback Behavior: Provide test verification for the click handler on the connected address pill. When onOpenModal is provided (e.g., wired via TopBar to trigger the AccountSidebar), the callback fires as expected. When onOpenModal is omitted (undefined), the component gracefully toggles the internal disconnect dropdown without throwing runtime errors or crashing.
4. Connecting Indicator Validation: Verify that when isConnecting is active, the button renders the "Connecting…" label, sets aria-busy="true", disables interaction, and displays the .animate-spin loading spinner alongside the screen-reader accessible "Loading" text.
5. Inline Error Banner & Disconnect Lifecycle: Ensure inline error messages render with a clear button calling clearError(), handle isDisconnecting loading spinners, and ensure stale error banners reset upon successful reconnection.

---

Key Changes Implemented

• src/components/WalletConnectButton.test.tsx:
  • Disconnected State Suite:
    • renders 'Connect Wallet' text when not connected: Confirms both role query and text rendering.
    • opens the wallet connect modal on click: Tests interaction with the button to ensure WalletConnectModal opens.
    • triggers connectWallet from context when a wallet is selected in the modal: End-to-end verification that choosing a wallet option (e.g. Freighter) triggers connectWallet() from context.
  • Connecting State Suite:
    • renders button text showing 'Connecting…' when connecting: Confirms button label changes when isConnecting: true.
    • renders loading indicator and spinner while isConnecting is true: Checks aria-busy="true", disabled state, screen-reader "Loading" text, and .animate-spin spinner element.
  • Connected State Suite:
    • renders truncated wallet address in the pill using truncateAddress(): Validates that the rendered text matches truncateAddress(fullAddress) ("GABC12...WXYZ") within the [data-address] container.
    • renders connected state with correct aria-label and green indicator dot: Confirms the .bg-green indicator dot and accessible aria-label="Wallet connected: <address>. Click to manage.".
    • calls onOpenModal when address pill is clicked and the prop is provided: Validates the onOpenModal callback execution upon pill click.
    • does not crash and toggles dropdown when address pill is clicked without onOpenModal: Confirms safe fallback behavior and dropdown toggle with the Disconnect action.
  • Error & Disconnect Handling Suite:
    • renders inline error message and handles clearError: Tests inline error display and dismiss button.
    • renders disconnect loading state when isDisconnecting is true: Validates "Disconnecting…" copy and button disabled state.
    • clears the error banner after a successful connect clears the error: Validates re-render behavior when state transitions from error to connected.

---

Related Issues

Closes #600

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Test coverage / Regression tests
• Documentation update

---

Testing

Automated Test Execution

• Executed Vitest test runner targeting src/components/WalletConnectButton.test.tsx:

npx vitest run src/components/WalletConnectButton.test.tsx

[drips-wave]

@jotel-dev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits