test: add demo page smoke tests (Tier 5) by gabitoesmiapodo · Pull Request #419 · BootNodeDev/dAppBooster

gabitoesmiapodo · 2026-03-23T21:18:24Z

Summary

Smoke tests for all demo page components (ConnectWallet, EnsName, HashHandling, SignMessage, SwitchNetwork, TransactionButton, TokenDropdown, TokenInput)
Smoke tests for NotFound404 and home page index
All Web3/wagmi hooks mocked at module level; no real wallet or network interaction

Test plan

pnpm test passes on this branch
Each demo verifies it renders without crashing
Components using withSuspenseAndRetry wrapped in QueryClientProvider in test setup

vercel · 2026-03-23T21:18:29Z

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

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

Copilot

Pull request overview

Adds Tier 5 smoke tests to ensure the home page, 404 page, and several demo components render without crashing by mocking Web3/wagmi dependencies at the module level.

Changes:

Added smoke test for the Home page rendering its main sections.
Added smoke tests for multiple demo components (ConnectWallet, EnsName, HashHandling, SignMessage, SwitchNetwork, TransactionButton, TokenDropdown, TokenInput).
Added smoke test for the NotFound404 page.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/components/pageComponents/home/index.test.tsx	Smoke test that Home renders Welcome + Examples (mocked).
src/components/pageComponents/home/Examples/demos/TransactionButton/index.test.tsx	Smoke test for TransactionButton demo with Web3 status + ConnectWalletButton mocked.
src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsx	Smoke test for TokenInput demo using QueryClientProvider and mocked token hooks.
src/components/pageComponents/home/Examples/demos/TokenDropdown/index.test.tsx	Smoke test for TokenDropdown demo with shared TokenDropdown mocked.
src/components/pageComponents/home/Examples/demos/SwitchNetwork/index.test.tsx	Smoke test for SwitchNetwork demo showing Connect Wallet fallback.
src/components/pageComponents/home/Examples/demos/SignMessage/index.test.tsx	Smoke test for SignMessage demo showing Connect Wallet fallback.
src/components/pageComponents/home/Examples/demos/HashHandling/index.test.tsx	Smoke test for HashHandling demo with hash detection mocked.
src/components/pageComponents/home/Examples/demos/EnsName/index.test.tsx	Smoke test for EnsName demo with wagmi useEnsName mocked.
src/components/pageComponents/home/Examples/demos/ConnectWallet/index.test.tsx	Smoke test for ConnectWallet demo with ConnectWalletButton mocked.
src/components/pageComponents/NotFound404.test.tsx	Smoke test for NotFound404 rendering title and Home button with router navigation mocked.

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

Copilot · 2026-03-23T21:21:51Z

src/components/pageComponents/home/Examples/demos/HashHandling/index.test.tsx

+vi.mock('@/src/utils/hash', () => ({
+  detectHash: vi.fn(() => Promise.resolve(null)),
+}))


The mock for @/src/utils/hash exports a named detectHash, but the code under test (HashInput) imports the module's default export (import detectHash from ...). If HashInput ever invokes detectHash during this smoke test, it will be undefined and throw. Update the mock to provide a default export (and optionally keep any named exports if needed).

Suggested change

vi.mock('@/src/utils/hash', () => ({

detectHash: vi.fn(() => Promise.resolve(null)),

}))

vi.mock('@/src/utils/hash', () => {

const mockDetectHash = vi.fn(() => Promise.resolve(null))

return {

default: mockDetectHash,

detectHash: mockDetectHash,

}

})

Fixed: mock factory now returns both default and named detectHash exports via a shared mock function.

Copilot

Pull request overview

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

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

Copilot · 2026-03-23T22:23:45Z

src/components/pageComponents/home/Examples/demos/TransactionButton/index.test.tsx

+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => ({
+    isWalletConnected: false,
+    isWalletSynced: false,
+    walletChainId: undefined,
+    appChainId: 11155420,
+    switchChain: vi.fn(),
+  })),
+}))


Consider using the existing createMockWeb3Status helper from src/test-utils.tsx for the useWeb3Status mock return value. It provides a complete, stable shape for the hook and reduces the risk of future runtime failures if WalletStatusVerifier (or other code on this render path) starts reading additional fields.

Fixed: switched to createMockWeb3Status({ appChainId: 11155420 }) from @/src/test-utils.

Copilot · 2026-03-23T22:23:45Z

src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsx

+vi.mock('@/src/components/sharedComponents/TokenInput/useTokenInput', () => ({
+  useTokenInput: vi.fn(() => ({
+    value: '',
+    token: undefined,
+    error: undefined,
+    onChange: vi.fn(),
+    onTokenSelect: vi.fn(),
+  })),
+}))


useTokenInput is mocked with a shape that doesn't match the real hook return (it should provide amount/setAmount, balance, selectedToken, etc.). TokenInput destructures these fields and passes amount (a bigint) into BigNumberInput, so the current mock will cause runtime errors during render (e.g., formatUnits on undefined). Update the mock to return the full useTokenInput shape with sensible defaults (e.g., amount: 0n, balance: 0n, isLoadingBalance: false, and stub setter fns).

Fixed: mock now returns the full useTokenInput shape — amount, setAmount, amountError, setAmountError, balance, balanceError, isLoadingBalance, selectedToken, setTokenSelected.

Copilot · 2026-03-23T22:23:45Z

src/components/pageComponents/home/index.test.tsx

+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { Home } from './index'
+
+const system = createSystem(defaultConfig)


Test setup is duplicating the Chakra createSystem(defaultConfig) + ChakraProvider wrapper that already exists in src/test-utils.tsx as renderWithProviders. Using the shared helper here would reduce repeated setup across the growing test suite and keep provider configuration consistent.

Fixed: replaced the inline ChakraProvider wrapper with renderWithProviders from @/src/test-utils.

Smoke tests for all demo page components to verify they render without crashing. Mocks external Web3 deps at module level. New test files: - home/index.test.tsx: Home renders Welcome + Examples sections - NotFound404.test.tsx: 404 page with mocked useNavigate - demos/ConnectWallet/index.test.tsx: mocked ConnectWalletButton - demos/EnsName/index.test.tsx: mocked useEnsName - demos/HashHandling/index.test.tsx: mocked useWeb3Status + detectHash - demos/SignMessage/index.test.tsx: shows fallback when wallet absent - demos/SwitchNetwork/index.test.tsx: shows fallback when wallet absent - demos/TransactionButton/index.test.tsx: shows fallback when wallet absent - demos/TokenDropdown/index.test.tsx: mocked BaseTokenDropdown - demos/TokenInput/index.test.tsx: mocked useTokenLists + useTokenSearch Also adds .env.test and src/test-utils.tsx (shared test utilities).

The module exports detectHash as a default export; the mock only provided a named export so HashInput would receive undefined and throw on invocation. Added both default and named exports to the mock factory.

- home/index.test.tsx: use renderWithProviders from test-utils - TransactionButton demo: use createMockWeb3Status for complete hook shape - TokenInput demo: fix useTokenInput mock to match the real hook return (amount/setAmount/amountError/balance/isLoadingBalance/selectedToken/setTokenSelected) and use renderWithProviders + createMockWeb3Status helpers

Copilot AI review requested due to automatic review settings March 23, 2026 21:18

gabitoesmiapodo mentioned this pull request Mar 23, 2026

feat: AI integration baseline #420

Open

5 tasks

Copilot started reviewing on behalf of gabitoesmiapodo March 23, 2026 21:18 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

gabitoesmiapodo force-pushed the test/components branch from 2ecd9f4 to b65a318 Compare March 23, 2026 22:03

gabitoesmiapodo force-pushed the test/demo-smoke branch from 88ed222 to 27b5511 Compare March 23, 2026 22:03

vercel bot deployed to Preview – components.dappbooster March 23, 2026 22:04 View deployment

vercel bot deployed to Preview – docs.dappbooster March 23, 2026 22:04 View deployment

vercel bot deployed to Preview – demo.dappbooster March 23, 2026 22:05 View deployment

gabitoesmiapodo force-pushed the test/components branch from b65a318 to 03b8d50 Compare March 23, 2026 22:17

gabitoesmiapodo force-pushed the test/demo-smoke branch from 27b5511 to 5d4e886 Compare March 23, 2026 22:17

vercel bot deployed to Preview – components.dappbooster March 23, 2026 22:18 View deployment

vercel bot deployed to Preview – docs.dappbooster March 23, 2026 22:18 View deployment

gabitoesmiapodo requested a review from Copilot March 23, 2026 22:18

vercel bot deployed to Preview – demo.dappbooster March 23, 2026 22:18 View deployment

Copilot started reviewing on behalf of gabitoesmiapodo March 23, 2026 22:19 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

gabitoesmiapodo force-pushed the test/components branch from 03b8d50 to 82f2f21 Compare March 23, 2026 23:25

gabitoesmiapodo force-pushed the test/demo-smoke branch from 5d4e886 to 5c9aa29 Compare March 23, 2026 23:25

vercel bot deployed to Preview – components.dappbooster March 23, 2026 23:25 View deployment

vercel bot deployed to Preview – docs.dappbooster March 23, 2026 23:25 View deployment

vercel bot deployed to Preview – demo.dappbooster March 23, 2026 23:26 View deployment

vercel bot deployed to Preview – docs.dappbooster March 24, 2026 00:00 View deployment

vercel bot deployed to Preview – components.dappbooster March 24, 2026 00:00 View deployment

vercel bot deployed to Preview – demo.dappbooster March 24, 2026 00:00 View deployment

gabitoesmiapodo force-pushed the test/components branch from 628a91a to 7b00d3b Compare March 24, 2026 00:03

gabitoesmiapodo added 3 commits March 23, 2026 21:03

test: fix detectHash mock in HashHandling smoke test

4fe5f28

The module exports detectHash as a default export; the mock only provided a named export so HashInput would receive undefined and throw on invocation. Added both default and named exports to the mock factory.

gabitoesmiapodo force-pushed the test/demo-smoke branch from 657ada0 to b0fe779 Compare March 24, 2026 00:03

vercel bot deployed to Preview – components.dappbooster March 24, 2026 00:03 View deployment

vercel bot deployed to Preview – docs.dappbooster March 24, 2026 00:03 View deployment

vercel bot deployed to Preview – demo.dappbooster March 24, 2026 00:04 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: add demo page smoke tests (Tier 5)#419

test: add demo page smoke tests (Tier 5)#419
gabitoesmiapodo wants to merge 3 commits intotest/componentsfrom
test/demo-smoke

gabitoesmiapodo commented Mar 23, 2026

Uh oh!

vercel bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

gabitoesmiapodo Mar 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

gabitoesmiapodo Mar 24, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

gabitoesmiapodo Mar 24, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

gabitoesmiapodo Mar 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-vi.mock('@/src/utils/hash', () => ({
-  detectHash: vi.fn(() => Promise.resolve(null)),
-}))
+vi.mock('@/src/utils/hash', () => {
+  const mockDetectHash = vi.fn(() => Promise.resolve(null))
+  return {
+    default: mockDetectHash,
+    detectHash: mockDetectHash,
+  }
+})

Conversation

gabitoesmiapodo commented Mar 23, 2026

Summary

Test plan

Uh oh!

vercel bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 23, 2026 •

edited

Loading