test: add utility and env test coverage (Tier 1)

.env.test

@@ -0,0 +1,7 @@
+# Test environment variables for Vitest
+PUBLIC_APP_NAME=dAppBooster Test
+PUBLIC_NATIVE_TOKEN_ADDRESS=0x0000000000000000000000000000000000000000
+PUBLIC_WALLETCONNECT_PROJECT_ID=test-project-id
+PUBLIC_SUBGRAPHS_API_KEY=test-api-key
+PUBLIC_SUBGRAPHS_CHAINS_RESOURCE_IDS=1:test:test-resource-id
+PUBLIC_SUBGRAPHS_ENVIRONMENT=production

.gitignore

@@ -43,3 +43,4 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.worktrees

setupTests.ts

@@ -4,6 +4,20 @@ import { afterEach, expect } from 'vitest'
 
 expect.extend(matchers)
 
+// 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.
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  class ResizeObserver {
+    // biome-ignore lint/suspicious/noExplicitAny: stub for jsdom test environment
+    observe(_target: any) {}
+    // biome-ignore lint/suspicious/noExplicitAny: stub for jsdom test environment
+    unobserve(_target: any) {}
+    disconnect() {}
+  }
+  // @ts-expect-error ResizeObserver is not in the Node/jsdom type definitions
+  globalThis.ResizeObserver = ResizeObserver
+}
+
 afterEach(() => {
   cleanup()
 })

src/components/pageComponents/NotFound404.test.tsx

@@ -0,0 +1,22 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import NotFound404 from './NotFound404'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: vi.fn(() => vi.fn()),
+}))
+
+describe('NotFound404', () => {
+  it('renders 404 title and message', () => {
+    render(
+      <ChakraProvider value={system}>
+        <NotFound404 />
+      </ChakraProvider>,
+    )
+    expect(screen.getByText('404 - Not Found')).toBeDefined()
+    expect(screen.getByRole('button', { name: 'Home' })).toBeDefined()
+  })
+})

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

@@ -0,0 +1,17 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import connectWallet from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@/src/providers/Web3Provider', () => ({
+  ConnectWalletButton: () => <button type="button">Connect Wallet</button>,
+}))
+
+describe('ConnectWallet demo', () => {
+  it('renders the connect wallet button', () => {
+    render(<ChakraProvider value={system}>{connectWallet.demo}</ChakraProvider>)
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
+  })
+})

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

@@ -0,0 +1,20 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ensName from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('wagmi', () => ({
+  useEnsName: vi.fn(() => ({ data: undefined, error: undefined, status: 'pending' })),
+}))
+
+describe('EnsName demo', () => {
+  it('renders the ENS name search interface', () => {
+    render(<ChakraProvider value={system}>{ensName.demo}</ChakraProvider>)
+    expect(screen.getByText('Find ENS name')).toBeDefined()
+    expect(
+      screen.getByPlaceholderText('Enter an address or select one from the dropdown'),
+    ).toBeDefined()
+  })
+})

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

@@ -0,0 +1,28 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import hashHandling from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => ({
+    isWalletConnected: false,
+    walletChainId: undefined,
+  })),
+}))
+
+vi.mock('@/src/utils/hash', () => {
+  const mockFn = vi.fn(() => Promise.resolve(null))
+  return {
+    default: mockFn,
+    detectHash: mockFn,
+  }
+})
+
+describe('HashHandling demo', () => {
+  it('renders the hash input field', () => {
+    render(<ChakraProvider value={system}>{hashHandling.demo}</ChakraProvider>)
+    expect(screen.getByPlaceholderText(/address|hash/i)).toBeDefined()
+  })
+})

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

@@ -0,0 +1,27 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import signMessage from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => ({
+    isWalletConnected: false,
+    isWalletSynced: false,
+    walletChainId: undefined,
+    appChainId: 11155420,
+    switchChain: vi.fn(),
+  })),
+}))
+
+vi.mock('@/src/providers/Web3Provider', () => ({
+  ConnectWalletButton: () => <button type="button">Connect Wallet</button>,
+}))
+
+describe('SignMessage demo', () => {
+  it('renders connect wallet fallback when wallet not connected', () => {
+    render(<ChakraProvider value={system}>{signMessage.demo}</ChakraProvider>)
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
+  })
+})

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

@@ -0,0 +1,23 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import switchNetwork from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => ({
+    isWalletConnected: false,
+  })),
+}))
+
+vi.mock('@/src/providers/Web3Provider', () => ({
+  ConnectWalletButton: () => <button type="button">Connect Wallet</button>,
+}))
+
+describe('SwitchNetwork demo', () => {
+  it('renders connect wallet button when wallet not connected', () => {
+    render(<ChakraProvider value={system}>{switchNetwork.demo}</ChakraProvider>)
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
+  })
+})

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

@@ -0,0 +1,20 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import tokenDropdown from './index'
+
+const system = createSystem(defaultConfig)
+
+// Mock the shared component to avoid its deep dependency chain
+// (TokenSelect uses withSuspenseAndRetry, useTokenLists, useTokens, etc.)
+vi.mock('@/src/components/sharedComponents/TokenDropdown', () => ({
+  default: () => <div data-testid="token-dropdown-mock">Token Dropdown</div>,
+}))
+
+describe('TokenDropdown demo', () => {
+  it('renders the token dropdown container', () => {
+    render(<ChakraProvider value={system}>{tokenDropdown.demo}</ChakraProvider>)
+    expect(screen.getByText('Search and select a token')).toBeDefined()
+    expect(screen.getByTestId('token-dropdown-mock')).toBeDefined()
+  })
+})

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

@@ -0,0 +1,49 @@
+import { createMockWeb3Status, renderWithProviders } from '@/src/test-utils'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import tokenInput from './index'
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => createMockWeb3Status()),
+}))
+
+vi.mock('@/src/hooks/useTokenLists', () => ({
+  useTokenLists: vi.fn(() => ({
+    tokens: [],
+    tokensByChainId: {},
+    tokensByAddress: {},
+    tokensBySymbol: {},
+  })),
+}))
+
+vi.mock('@/src/hooks/useTokenSearch', () => ({
+  useTokenSearch: vi.fn(() => ({
+    searchResult: [],
+  })),
+}))
+
+vi.mock('@/src/components/sharedComponents/TokenInput/useTokenInput', () => ({
+  useTokenInput: vi.fn(() => ({
+    amount: 0n,
+    setAmount: vi.fn(),
+    amountError: null,
+    setAmountError: vi.fn(),
+    balance: 0n,
+    balanceError: null,
+    isLoadingBalance: false,
+    selectedToken: undefined,
+    setTokenSelected: vi.fn(),
+  })),
+}))
+
+describe('TokenInput demo', () => {
+  it('renders the token input container', () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    renderWithProviders(
+      <QueryClientProvider client={queryClient}>{tokenInput.demo}</QueryClientProvider>,
+    )
+    // The mode dropdown should be visible
+    expect(screen.getByText('Single token')).toBeDefined()
+  })
+})

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

@@ -0,0 +1,19 @@
+import { createMockWeb3Status, renderWithProviders } from '@/src/test-utils'
+import { screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import transactionButton from './index'
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => createMockWeb3Status({ appChainId: 11155420 })),
+}))
+
+vi.mock('@/src/providers/Web3Provider', () => ({
+  ConnectWalletButton: () => <button type="button">Connect Wallet</button>,
+}))
+
+describe('TransactionButton demo', () => {
+  it('renders connect wallet fallback when wallet not connected', () => {
+    renderWithProviders(transactionButton.demo)
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
+  })
+})

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

@@ -0,0 +1,21 @@
+import { renderWithProviders } from '@/src/test-utils'
+import { screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { Home } from './index'
+
+// Mock sub-components that pull in Web3 dependencies to keep this a pure structural test
+vi.mock('@/src/components/pageComponents/home/Examples', () => ({
+  default: () => <section data-testid="examples">Examples</section>,
+}))
+
+vi.mock('@/src/components/pageComponents/home/Welcome', () => ({
+  default: () => <section data-testid="welcome">Welcome</section>,
+}))
+
+describe('Home', () => {
+  it('renders Welcome and Examples sections', () => {
+    renderWithProviders(<Home />)
+    expect(screen.getByTestId('welcome')).toBeDefined()
+    expect(screen.getByTestId('examples')).toBeDefined()
+  })
+})