mirror of
https://github.com/get-drexa/drive.git
synced 2026-02-02 13:21:17 +00:00
115 lines
3.8 KiB
Markdown
115 lines
3.8 KiB
Markdown
# 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`:
|
|
```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)
|
|
```tsx
|
|
const TOTAL_ITEMS = 1_000
|
|
const ITEMS_PER_PAGE = 100
|
|
```
|
|
|
|
### Medium Dataset (10,000 items)
|
|
```tsx
|
|
const TOTAL_ITEMS = 10_000
|
|
const ITEMS_PER_PAGE = 100
|
|
```
|
|
|
|
### Large Dataset (100,000 items)
|
|
```tsx
|
|
const TOTAL_ITEMS = 100_000
|
|
const ITEMS_PER_PAGE = 200
|
|
```
|
|
|
|
### Stress Test (1,000,000 items)
|
|
```tsx
|
|
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
|
|
|