Skip to content

test: cover AccountScreen refresh state and ConnectScreen wallet options - #286

Open
Adeolu01 wants to merge 1 commit into
Sorokit:mainfrom
Adeolu01:fix/199-account-connect-sidebar-tests
Open

test: cover AccountScreen refresh state and ConnectScreen wallet options#286
Adeolu01 wants to merge 1 commit into
Sorokit:mainfrom
Adeolu01:fix/199-account-connect-sidebar-tests

Conversation

@Adeolu01

Copy link
Copy Markdown

closes #199

Summary

This PR closes the test-coverage gaps called out in #199 for the AccountScreen refresh flow and the ConnectScreen wallet/onboarding UI, adding the small pieces of behaviour those tests depend on so the coverage is meaningful.

While scoping the work I confirmed that two of the three gaps in the issue are already covered on main:

  • Sidebar localStorage read-on-mount, write-on-navigate, and the default-to-wallet case are already tested in src/components/Sidebar.test.tsx.
  • The Friendbot link for testnet with zero balances is already tested in src/components/BalanceList.test.tsx (the link is rendered by BalanceList, which AccountScreen composes).

The remaining behaviour described in the issue did not yet exist in the codebase, so this PR adds it and tests it.

Changes

AccountScreen (#81)

  • Track a lastUpdated timestamp that is set only after refreshAccount() resolves, and render a "Last updated ..." label next to the refresh control.
  • Tests:
    • refresh button is absent when disconnected and present when connected
    • refresh button is disabled and aria-busy while isLoadingAccount is true, and enabled otherwise
    • clicking refresh calls refreshAccount
    • no timestamp is shown initially; the "Last updated" label appears only after the refresh promise resolves

ConnectScreen (#82)

  • Render a "Supported wallets" strip listing the wallets exposed by the connector, each with an accessible logo (role="img" + aria-label).
  • Add a collapsible "New to Stellar?" onboarding section using a native <details>/<summary>.
  • Hide the hero image on small viewports via hidden sm:block.
  • Tests:
    • a logo and label render for each supported wallet
    • the <details> element is in the DOM, is collapsed by default, and expands on summary click
    • the hero image carries the responsive hide class

No production dependencies were added; the tests use the existing @testing-library/react + Vitest setup already used across the suite.

Verification

  • npx tsc -p tsconfig.app.json --noEmit passes.
  • eslint passes on all changed files.
  • npm test output below. All 32 tests in the three targeted files pass. The single failing test (SorokitProvider > memoizes the context value across parent re-renders) is pre-existing on main and unrelated to this change (verified by running it on a clean main).
Full npm test output
 RUN  v3.2.6 C:/Users/USER/Documents/adeolu/ui
 ❯ src/context/SorokitProvider.test.tsx (7 tests | 1 failed) 742ms
   × SorokitProvider > memoizes the context value across parent re-renders 118ms
 ✓ src/components/SorobanInvokeButton.test.tsx (10 tests) 1338ms
 ✓ src/components/SorobanPanel.test.tsx (7 tests) 1717ms
 ✓ src/components/QRCode.test.tsx (11 tests) 1316ms
 ✓ src/components/ui/Button.test.tsx (17 tests) 1593ms
 ✓ src/components/ErrorBoundary.test.tsx (8 tests) 1734ms
 ✓ src/__tests__/payment-flow.test.tsx (1 test) 1954ms
   ✓ Payment Flow Integration > submits payment with correct destination, amount, and source  1945ms
 ✓ src/components/FeeEstimator.test.tsx (8 tests) 2136ms
 ✓ src/components/ContractEventFeed.test.tsx (9 tests) 2343ms
 ✓ src/screens/ConnectScreen.test.tsx (11 tests) 2204ms
 ✓ src/components/TransactionPanel.test.tsx (7 tests) 2973ms
 ✓ src/screens/AccountScreen.test.tsx (8 tests) 2504ms
 ✓ src/screens/NetworkScreen.test.tsx (7 tests) 2375ms
 ✓ src/components/Sidebar.test.tsx (13 tests) 3159ms
 ✓ src/screens/WalletScreen.test.tsx (2 tests) 2641ms
 ✓ src/components/TransactionHistory.test.tsx (8 tests) 4182ms
 ✓ src/components/AddressDisplay.test.tsx (9 tests) 3682ms
 ✓ src/components/ClaimableBalanceCard.test.tsx (4 tests) 1458ms
 ✓ src/components/AssetBadge.test.tsx (14 tests) 486ms
 ✓ src/components/NetworkBanner.test.tsx (10 tests) 839ms
 ✓ src/components/ui/Skeleton.test.tsx (12 tests) 427ms
 ✓ src/components/ui/Input.test.tsx (13 tests) 1555ms
 ✓ src/components/BalanceList.test.tsx (11 tests) 1279ms
 ✓ src/components/ui/Card.test.tsx (6 tests) 323ms
 ✓ src/components/TopBar.test.tsx (9 tests) 1510ms
 ✓ src/lib/mock-client.test.ts (4 tests) 54ms
 ✓ src/context/useSorokit.test.tsx (2 tests) 255ms
 ✓ src/components/ui/Badge.test.tsx (4 tests) 304ms
 ✓ src/App.test.tsx (2 tests) 199ms
 ✓ src/lib/__tests__/mock-client.test.ts (14 tests) 41ms
 ✓ src/lib/__tests__/adapter.test.ts (6 tests) 19ms
 ✓ src/__tests__/wallet-flow.test.tsx (1 test) 1207ms
   ✓ Wallet Connect Flow Integration > connects wallet, displays account, and disconnects  1199ms
 ✓ src/components/wallet-flow.test.tsx (1 test) 967ms
   ✓ Wallet flow integration > connects, shows account, then opens modal on wallet click  960ms
 ✓ src/components/AccountCard.test.tsx (7 tests) 414ms
 ✓ src/screens/SorobanScreen.test.tsx (5 tests) 652ms
 ✓ src/screens/TransactionsScreen.test.tsx (5 tests) 643ms
 ✓ src/__tests__/build.test.ts (4 tests) 12ms
 ✓ src/lib/utils.test.ts (10 tests) 24ms
 ✓ src/components/payment-flow.test.tsx (1 test) 1058ms
   ✓ TransactionPanel integration > submits payment with correct payload  1050ms
 ✓ src/components/WalletConnectButton.test.tsx (5 tests) 1056ms
 ✓ src/components/NetworkSwitcher.test.tsx (5 tests) 1026ms
 ✓ src/components/TxRow.test.tsx (2 tests) 259ms
 ✓ src/components/exports.test.ts (1 test) 13ms
 ✓ src/__tests__/exports.test.ts (2 tests) 8ms

 Test Files  1 failed | 43 passed (44)
      Tests  1 failed | 302 passed (303)

Acceptance criteria

  • AccountScreen refresh state tests pass
  • ConnectScreen wallet options and collapsible section tests pass
  • Sidebar localStorage persistence tests pass (already covered on main)
  • All tests pass with npm test (excluding the pre-existing, unrelated SorokitProvider memoization failure)

adeolu
@
test(screens): cover AccountScreen refresh state and ConnectScreen wallet options

Add the AccountScreen refresh loading/last-updated behaviour and the
ConnectScreen supported-wallet and onboarding UI that the coverage in Sorokit#199
depends on, then test both.

AccountScreen:
- track a last-updated timestamp that is set once refreshAccount resolves
- test the refresh button disabled/aria-busy state while isLoadingAccount
- test that the timestamp only appears after a refresh completes

ConnectScreen:
- render supported wallet options with accessible logos
- add a collapsible "New to Stellar?" onboarding section
- hide the hero image on small viewports (hidden sm:block)
- test wallet options, collapsible expand, and the responsive hero class
@
@drips-wave

drips-wave Bot commented Jul 24, 2026

Copy link
Copy Markdown

@Adeolu01 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

@Just-Bamford

Copy link
Copy Markdown
Collaborator

@Adeolu01 Well done, kindly resolve the conflicts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

test: AccountScreen refresh loading state and timestamp, ConnectScreen wallet options and collapsible section, Sidebar localStorage

2 participants