drive/docs/virtualization-testing.md

Virtualization Testing Guide

This guide explains how to test the virtualization of the DirectoryContentTable component with large datasets.

Quick Start

The app includes a dev-mode-only toggle to switch between the real and mock table. No code changes needed!

1. Enable Dev Mode: Make sure you're running in development mode (bun dev or npm run dev)

2. Toggle Mock Table:

   • Look for the "Mock: OFF/ON" button in the directory page header
   • Click it to toggle between real and mock data
   • The toggle state persists in localStorage

3. Adjust Test Parameters (optional): Edit apps/drive-web/src/directories/directory-page/mock-directory-content-table.tsx:

   const TOTAL_ITEMS = 10_000      // Total number of items to simulate
   const ITEMS_PER_PAGE = 100      // Items per page (for pagination)
   const NETWORK_DELAY_MS = 50     // Simulated network delay in milliseconds
   

How It Works

• The DirectoryContentTableWrapper component automatically handles switching between real and mock tables
• Uses Jotai's atomWithStorage to persist the toggle state in localStorage
• The mock table code is completely tree-shaken in production builds
• No page reload needed - switching is instant

Test Configuration

You can adjust these parameters in mock-directory-content-table.tsx:

• TOTAL_ITEMS: Total number of items to simulate (default: 10,000)

  • Try: 1,000 for quick tests, 50,000+ for stress testing

• ITEMS_PER_PAGE: Number of items per page (default: 100)

  • This simulates pagination behavior

• NETWORK_DELAY_MS: Simulated network delay (default: 50ms)

  • Set to 0 for instant loading, higher values to test loading states

What to Test

1. Scroll Performance: Scroll through the list and verify smooth scrolling
2. Infinite Loading: Scroll to the bottom and verify more items load automatically
3. Selection: Select multiple items and verify performance
4. Virtualization Stats: Check the browser console for virtualization metrics
5. Memory Usage: Monitor browser DevTools to ensure memory stays reasonable

Debugging

The mock table component includes:

• A debug banner showing current stats (total items, rendered rows)
• Console logging of virtualization metrics (check browser console)
• Visual indicators for rendered vs total items

Implementation Details

Files

• apps/drive-web/src/directories/directory-page/directory-content-table-wrapper.tsx

  • Wrapper component that conditionally loads real or mock table
  • Uses Jotai atoms for state management
  • Exports mockTableAtom for toggle components

• apps/drive-web/src/directories/directory-page/mock-directory-content-table.tsx

  • Mock table component with all utilities inlined
  • Generates mock data matching API behavior (directories first, then files)
  • Includes virtualization stats logging

Utilities

The mock-directory-content-table.tsx file includes all utilities inlined:

• generateMockDirectoryItems(): Generate mock data
• createMockDirectoryContentQuery(): Create a mock infinite query
• logVirtualizationStats(): Log virtualization metrics

All utilities are defined within the same file for convenience.

Example Test Scenarios

Small Dataset (1,000 items)

const TOTAL_ITEMS = 1_000
const ITEMS_PER_PAGE = 100

Medium Dataset (10,000 items)

const TOTAL_ITEMS = 10_000
const ITEMS_PER_PAGE = 100

Large Dataset (100,000 items)

const TOTAL_ITEMS = 100_000
const ITEMS_PER_PAGE = 200

Stress Test (1,000,000 items)

const TOTAL_ITEMS = 1_000_000
const ITEMS_PER_PAGE = 500

Production Safety

• The mock table code is completely excluded from production builds
• Vite's static analysis removes all dev-mode code paths
• The toggle button only appears in development mode
• No performance impact on production bundles