From 4f42a6edf4cf712d7b39aa35f2cc0d18c9859414 Mon Sep 17 00:00:00 2001
From: Allen Ayodeji James <allenzeereeh@gmail.com>
Date: Sun, 27 Sep 2026 14:05:17 +0100
Subject: [PATCH] test: add coverage for error boundaries and virtual stream
 list (#748, #747, #746, #745)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#748 - components/error-boundary/section-error-boundary.tsx
Added assertions to the existing SectionErrorBoundary suite: a thrown
child's fallback renders while sibling nav/footer content elsewhere on the
page keeps rendering (the boundary doesn't take down the page), and
captureError is called with the section_render:<name> operation tag.

#747 - components/error-boundary/page-error-boundary.tsx
Added assertions to the existing PageErrorBoundary suite: the full-screen
fallback exposes both the "Go to dashboard" link (href=/app) and the
"Reload page" button, and captureError is called with the page_render
operation tag.

#746 - components/error-boundary/component-error-boundary.tsx
Added assertions to the existing ComponentErrorBoundary suite: the
fallback renders in place of a thrown child without crashing sibling
content, and captureError is called with the component_render:<label>
operation tag.

Discrepancy vs. issue descriptions (#748/#747/#746): all three boundaries
already had a component test suite (__tests__/components/error-boundary.test.tsx,
added in a prior PR) covering the "renders fallback on throw" and retry
behavior, contrary to the issues' "no test coverage" premise. Rather than
duplicate that suite, this change extends it with the specific assertions
each issue called for that weren't yet covered: the captureError call and,
for the page boundary, the dashboard link/reload button.

#745 - components/streams/virtual-stream-list.tsx
New test file __tests__/components/streams/virtual-stream-list.test.tsx.
Covers the flat-list path (all given streams render, empty input renders
nothing, loading shows skeletons) and the virtualized path for 60 streams
(crosses the 50-item VIRTUALIZATION_THRESHOLD): asserts only a windowed
subset of rows mounts rather than all 60.

jsdom reports 0 for both offsetHeight and getBoundingClientRect(), which
@tanstack/virtual-core and this component's measureElement callback both
treat as "nothing is visible" (zero rows render). The virtualized tests
locally stub HTMLElement.prototype.offsetHeight (viewport size) and
Element.prototype.getBoundingClientRect (per-row measured size) for the
scroll container to produce a stable, non-empty visible window; no such
mocking convention previously existed in the repo.

Verified via `npx vitest run`: both files pass in full (16 and 5 tests
respectively). A full-suite run shows 11 pre-existing failing test files
unrelated to this change (dashboard.test.tsx, hero.test.tsx, navbar.test.tsx,
etc.) — left untouched per scope.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 __tests__/components/error-boundary.test.tsx  |  81 ++++++++++
 .../streams/virtual-stream-list.test.tsx      | 145 ++++++++++++++++++
 2 files changed, 226 insertions(+)
 create mode 100644 __tests__/components/streams/virtual-stream-list.test.tsx

diff --git a/__tests__/components/error-boundary.test.tsx b/__tests__/components/error-boundary.test.tsx
index 4614f5f..9466422 100644
--- a/__tests__/components/error-boundary.test.tsx
+++ b/__tests__/components/error-boundary.test.tsx
@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { ComponentErrorBoundary } from '@/components/error-boundary/component-error-boundary'
 import { PageErrorBoundary } from '@/components/error-boundary/page-error-boundary'
 import { SectionErrorBoundary } from '@/components/error-boundary/section-error-boundary'
+import { captureError } from '@/lib/sentry'
 
 vi.mock('@/lib/sentry', () => ({ captureError: vi.fn() }))
 
@@ -26,6 +27,7 @@ function Safe() {
 let consoleErrorSpy: ReturnType<typeof vi.spyOn>
 beforeEach(() => {
   consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+  vi.mocked(captureError).mockClear()
 })
 afterEach(() => {
   consoleErrorSpy.mockRestore()
@@ -51,6 +53,32 @@ describe('ComponentErrorBoundary', () => {
     expect(screen.queryByText('all good')).not.toBeInTheDocument()
   })
 
+  it('renders its fallback instead of crashing the surrounding tree when a child throws', () => {
+    render(
+      <div>
+        <span>sibling content</span>
+        <ComponentErrorBoundary label="widget">
+          <Boom />
+        </ComponentErrorBoundary>
+      </div>,
+    )
+    expect(screen.getByText('sibling content')).toBeInTheDocument()
+    expect(screen.getByText('Failed to render widget')).toBeInTheDocument()
+  })
+
+  it('reports the thrown error to captureError with the component label', () => {
+    render(
+      <ComponentErrorBoundary label="widget">
+        <Boom />
+      </ComponentErrorBoundary>,
+    )
+    expect(captureError).toHaveBeenCalledTimes(1)
+    expect(captureError).toHaveBeenCalledWith(
+      expect.objectContaining({ message: 'boom' }),
+      expect.objectContaining({ operation: 'component_render:widget' }),
+    )
+  })
+
   it('clears the error state and re-renders children on retry', () => {
     let shouldThrow = true
     function Flaky() {
@@ -92,6 +120,34 @@ describe('SectionErrorBoundary', () => {
     expect(screen.getByText('Stream list failed to load')).toBeInTheDocument()
   })
 
+  it('renders the section fallback without taking down the surrounding page', () => {
+    render(
+      <div>
+        <nav>site navigation</nav>
+        <SectionErrorBoundary sectionName="Stream list">
+          <Boom />
+        </SectionErrorBoundary>
+        <footer>page footer</footer>
+      </div>,
+    )
+    expect(screen.getByText('site navigation')).toBeInTheDocument()
+    expect(screen.getByText('page footer')).toBeInTheDocument()
+    expect(screen.getByText('Stream list failed to load')).toBeInTheDocument()
+  })
+
+  it('reports the thrown error to captureError with the section name', () => {
+    render(
+      <SectionErrorBoundary sectionName="Stream list">
+        <Boom />
+      </SectionErrorBoundary>,
+    )
+    expect(captureError).toHaveBeenCalledTimes(1)
+    expect(captureError).toHaveBeenCalledWith(
+      expect.objectContaining({ message: 'boom' }),
+      expect.objectContaining({ operation: 'section_render:Stream list' }),
+    )
+  })
+
   it('clears the error state and re-renders children on retry', () => {
     let shouldThrow = true
     function Flaky() {
@@ -154,6 +210,31 @@ describe('PageErrorBoundary', () => {
     expect(screen.getByText('boom')).toBeInTheDocument()
   })
 
+  it('renders a full-screen fallback with a dashboard link and a reload button', () => {
+    render(
+      <PageErrorBoundary>
+        <Boom />
+      </PageErrorBoundary>,
+    )
+    const dashboardLink = screen.getByRole('link', { name: 'Go to dashboard' })
+    expect(dashboardLink).toBeInTheDocument()
+    expect(dashboardLink).toHaveAttribute('href', '/app')
+    expect(screen.getByRole('button', { name: 'Reload page' })).toBeInTheDocument()
+  })
+
+  it('reports the thrown error to captureError', () => {
+    render(
+      <PageErrorBoundary>
+        <Boom />
+      </PageErrorBoundary>,
+    )
+    expect(captureError).toHaveBeenCalledTimes(1)
+    expect(captureError).toHaveBeenCalledWith(
+      expect.objectContaining({ message: 'boom' }),
+      expect.objectContaining({ operation: 'page_render' }),
+    )
+  })
+
   it('clears the error state and re-renders children when "Try again" is clicked', () => {
     let shouldThrow = true
     function Flaky() {
diff --git a/__tests__/components/streams/virtual-stream-list.test.tsx b/__tests__/components/streams/virtual-stream-list.test.tsx
new file mode 100644
index 0000000..565897c
--- /dev/null
+++ b/__tests__/components/streams/virtual-stream-list.test.tsx
@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { VirtualStreamList } from '@/components/streams/virtual-stream-list'
+import type { StreamData } from '@/types/stream'
+
+// Same mocking convention as stream-card.test.tsx: VirtualStreamList renders
+// real StreamCard rows, so its Next.js/router and wallet dependencies need
+// the same lightweight stand-ins.
+vi.mock('next/link', () => ({
+  default: ({ href, children, ...props }: any) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+vi.mock('@/hooks/use-now', () => ({ useNow: vi.fn(() => 1_700_050_000) }))
+vi.mock('@/hooks/use-wallet', () => ({ useWallet: vi.fn(() => ({ address: 'GSENDER111' })) }))
+
+const TOKEN = { address: 'CUSDC', symbol: 'USDC', decimals: 7 }
+const NOW = 1_700_050_000
+
+function makeStream(id: string, overrides?: Partial<StreamData>): StreamData {
+  return {
+    id,
+    sender: 'GSENDER111',
+    recipient: 'GRCPT222',
+    token: TOKEN,
+    depositedAmount: 100_000_000n,
+    withdrawnAmount: 0n,
+    startTime: BigInt(NOW - 3600),
+    endTime: BigInt(NOW + 3600),
+    cliffTime: BigInt(NOW - 3600),
+    cliffAmount: 0n,
+    amountPerSecond: 27_777n,
+    linearAmount: 100_000_000n,
+    duration: 7200n,
+    cancelled: false,
+    ...overrides,
+  }
+}
+
+function linksFor(container: HTMLElement) {
+  return Array.from(container.querySelectorAll('a[href^="/app/stream/"]'))
+}
+
+describe('VirtualStreamList — small lists (flat rendering)', () => {
+  it('renders every given stream when below the virtualization threshold', () => {
+    const streams = [makeStream('stream-0'), makeStream('stream-1'), makeStream('stream-2')]
+    const { container } = render(<VirtualStreamList streams={streams} />)
+
+    expect(container.querySelector('[data-testid="stream-list-flat"]')).toBeInTheDocument()
+    const links = linksFor(container)
+    expect(links).toHaveLength(3)
+    expect(container.querySelector('a[href="/app/stream/stream-0"]')).toBeInTheDocument()
+    expect(container.querySelector('a[href="/app/stream/stream-1"]')).toBeInTheDocument()
+    expect(container.querySelector('a[href="/app/stream/stream-2"]')).toBeInTheDocument()
+  })
+
+  it('renders nothing when given an empty stream list', () => {
+    const { container } = render(<VirtualStreamList streams={[]} />)
+
+    expect(linksFor(container)).toHaveLength(0)
+    expect(screen.queryAllByRole('link')).toHaveLength(0)
+  })
+
+  it('renders loading skeletons instead of stream cards when loading', () => {
+    const { container } = render(<VirtualStreamList streams={[]} loading skeletonCount={2} />)
+
+    expect(container.querySelector('[data-testid="stream-list-skeleton"]')).toBeInTheDocument()
+    expect(linksFor(container)).toHaveLength(0)
+  })
+})
+
+describe('VirtualStreamList — large lists (virtualized rendering)', () => {
+  // 60 streams crosses VIRTUALIZATION_THRESHOLD (50), switching the component
+  // over to the @tanstack/react-virtual code path.
+  const manyStreams = Array.from({ length: 60 }, (_, i) => makeStream(`stream-${i}`))
+
+  // jsdom never computes real layout: every element reports 0 for both
+  // `offsetHeight` and `getBoundingClientRect()`. @tanstack/virtual-core
+  // treats a zero-height viewport as "nothing is visible yet" and renders
+  // zero rows (see `calculateRange` in @tanstack/virtual-core's
+  // `Virtualizer`), and `VirtualStreamList`'s `measureElement` callback
+  // (`element.getBoundingClientRect().height`) would otherwise collapse
+  // every row's measured height to 0 as soon as it mounts. Stub both so a
+  // realistic, stable window of rows actually renders.
+  const originalOffsetHeight = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    'offsetHeight',
+  )
+  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect
+
+  beforeEach(() => {
+    // Scroll container viewport height (read via `offsetHeight`).
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: 800,
+    })
+    // Per-row measured height (read via `getBoundingClientRect().height`) —
+    // matches ESTIMATED_CARD_HEIGHT so the dynamic remeasurement pass
+    // doesn't shift rows away from their estimated positions.
+    Element.prototype.getBoundingClientRect = function () {
+      return {
+        width: 300,
+        height: 160,
+        top: 0,
+        left: 0,
+        right: 300,
+        bottom: 160,
+        x: 0,
+        y: 0,
+        toJSON() {},
+      } as DOMRect
+    }
+  })
+
+  afterEach(() => {
+    if (originalOffsetHeight) {
+      Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight)
+    }
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect
+  })
+
+  it('switches to the virtualized container', () => {
+    const { container } = render(<VirtualStreamList streams={manyStreams} />)
+    expect(container.querySelector('[data-testid="stream-list-virtual"]')).toBeInTheDocument()
+  })
+
+  it('renders only the visible window of streams, not the full list', () => {
+    const { container } = render(<VirtualStreamList streams={manyStreams} />)
+
+    const links = linksFor(container)
+    // jsdom reports a zero-height scroll container, so the virtualizer's
+    // visible range collapses to the first row plus its overscan buffer —
+    // far fewer than all 60 rows are ever mounted.
+    expect(links.length).toBeGreaterThan(0)
+    expect(links.length).toBeLessThan(manyStreams.length)
+
+    // The first stream (top of the window) is always rendered...
+    expect(container.querySelector('a[href="/app/stream/stream-0"]')).toBeInTheDocument()
+    // ...while a stream far outside the window is not.
+    expect(container.querySelector('a[href="/app/stream/stream-59"]')).not.toBeInTheDocument()
+  })
+})