Skip to content

test: add component test coverage (Tier 4)#418

Merged
gabitoesmiapodo merged 2 commits intotest/utilsfrom
test/components
Mar 25, 2026
Merged

test: add component test coverage (Tier 4)#418
gabitoesmiapodo merged 2 commits intotest/utilsfrom
test/components

Conversation

@gabitoesmiapodo
Copy link
Collaborator

Summary

  • Adds tests for TokenLogo (image rendering, fallback, color generation)
  • Adds tests for TransactionButton (wallet gate, chain mismatch, pending state, onMined)
  • Adds tests for SwitchNetwork (chain selector, menu items, disabled state)
  • Adds tests for WalletStatusVerifier and withWalletStatusVerifier HOC
  • Adds tests for suspenseWrapper (withSuspense, withSuspenseAndRetry including retry flow)

Test plan

  • pnpm test passes on this branch
  • Chakra UI v3 Menu items tested via click-to-open pattern (items not in DOM when closed)
  • Suspense retry test uses persistent object state flag compatible with React 19 concurrent rendering

Copilot AI review requested due to automatic review settings March 23, 2026 21:18
@vercel
Copy link

vercel bot commented Mar 23, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
components.dappbooster Ready Ready Preview, Comment Mar 24, 2026 0:04am
demo.dappbooster Ready Ready Preview Mar 24, 2026 0:04am
docs.dappbooster Ready Ready Preview, Comment Mar 24, 2026 0:04am

Request Review

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR expands Tier 4 component/unit test coverage across shared UI components and utility wrappers, and adjusts the global test setup to support Chakra UI menu/popover behavior in jsdom.

Changes:

  • Added test suites for withSuspense / withSuspenseAndRetry, including retry/reset flow behavior.
  • Added component tests for WalletStatusVerifier, TransactionButton, SwitchNetwork, and TokenLogo covering key UI states and fallbacks.
  • Updated setupTests.ts to provide a ResizeObserver mock required by Chakra/@floating-ui in jsdom.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/utils/suspenseWrapper.test.tsx Verifies suspense + error boundary rendering and retry/reset behavior with React Query integration.
src/components/sharedComponents/WalletStatusVerifier.test.tsx Covers connected/disconnected and wrong-chain gating for the verifier and its HOC.
src/components/sharedComponents/TransactionButton.test.tsx Covers wallet gating, chain mismatch, pending label state, and onMined callback behavior.
src/components/sharedComponents/TokenLogo.test.tsx Covers logo rendering, error fallback to placeholder, sizing, and IPFS URL conversion.
src/components/sharedComponents/SwitchNetwork.test.tsx Covers chain label display, disabled trigger behavior, and menu item rendering after open.
setupTests.ts Adds a ResizeObserver mock to support Chakra menus/popovers in jsdom.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

New tests for shared components and utilities:
- TokenLogo: img src/alt/size, IPFS URL conversion, placeholder on error
- TransactionButton: wallet states, pending label, onMined callback
- SwitchNetwork: network display, disabled state, menu item rendering
- WalletStatusVerifier: connect fallback, wrong chain, synced renders children
- withWalletStatusVerifier HOC: fallback and pass-through behavior
- withSuspense/withSuspenseAndRetry: Suspense fallback, error message, retry

Also adds:
- ResizeObserver mock to setupTests.ts (required by @floating-ui in jsdom)
- .env.test and src/test-utils.tsx (shared test utilities from tier 1)
- setupTests.ts: replace vi.fn() ResizeObserver with a real class guarded
  by a conditional check — vi.restoreAllMocks() can no longer clear it
- suspenseWrapper.test.tsx: restore only the console.error spy in afterEach
  instead of vi.restoreAllMocks() which would wipe the ResizeObserver polyfill
- TransactionButton.test.tsx: make useWaitForTransactionReceipt mock hash-aware
  so it only returns the receipt when called with the expected hash
Comment on lines +7 to +8
// ResizeObserver is not implemented in jsdom but required by @floating-ui (Chakra menus/popovers).
// Use a real class rather than vi.fn() so vi.restoreAllMocks() in test files cannot clear it.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀

Base automatically changed from test/hooks to test/utils March 25, 2026 18:48
@gabitoesmiapodo gabitoesmiapodo merged commit 9d1aff7 into test/utils Mar 25, 2026
6 checks passed
@gabitoesmiapodo gabitoesmiapodo deleted the test/components branch March 25, 2026 18:49
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.

3 participants