|
| 1 | +import { expect, test } from './fixtures' |
| 2 | +import type { Page } from '@playwright/test' |
| 3 | + |
| 4 | +async function getRenderCount(page: Page): Promise<number> { |
| 5 | + return page.evaluate(() => (window as any).__RENDER_COUNT__?.current ?? 0) |
| 6 | +} |
| 7 | + |
| 8 | +async function collectScrollFPS( |
| 9 | + page: Page, |
| 10 | + scrollSteps: number, |
| 11 | + stepPx: number, |
| 12 | +): Promise<{ fps: number; elapsed: number; renderCount: number }> { |
| 13 | + const rendersBefore = await getRenderCount(page) |
| 14 | + |
| 15 | + const result = await page.evaluate( |
| 16 | + ([steps, px]) => { |
| 17 | + return new Promise<{ fps: number; elapsed: number }>((resolve) => { |
| 18 | + const container = document.querySelector('#scroll-container')! |
| 19 | + let frames = 0 |
| 20 | + let step = 0 |
| 21 | + const start = performance.now() |
| 22 | + |
| 23 | + function tick() { |
| 24 | + container.scrollTop += px |
| 25 | + frames++ |
| 26 | + step++ |
| 27 | + if (step < steps) { |
| 28 | + requestAnimationFrame(tick) |
| 29 | + } else { |
| 30 | + // Wait one extra frame for final paint |
| 31 | + requestAnimationFrame(() => { |
| 32 | + const elapsed = performance.now() - start |
| 33 | + resolve({ fps: (frames / elapsed) * 1000, elapsed }) |
| 34 | + }) |
| 35 | + } |
| 36 | + } |
| 37 | + |
| 38 | + requestAnimationFrame(tick) |
| 39 | + }) |
| 40 | + }, |
| 41 | + [scrollSteps, stepPx] as const, |
| 42 | + ) |
| 43 | + |
| 44 | + const rendersAfter = await getRenderCount(page) |
| 45 | + |
| 46 | + return { |
| 47 | + ...result, |
| 48 | + renderCount: rendersAfter - rendersBefore, |
| 49 | + } |
| 50 | +} |
| 51 | + |
| 52 | +test.describe('performance comparison', () => { |
| 53 | + test('initial render time', async ({ page, hookVariant }) => { |
| 54 | + await page.goto('/perf/') |
| 55 | + |
| 56 | + // Wait for the initial render measurement to be recorded |
| 57 | + await page.waitForFunction( |
| 58 | + () => performance.getEntriesByName('initial-render').length > 0, |
| 59 | + ) |
| 60 | + |
| 61 | + const duration = await page.evaluate( |
| 62 | + () => performance.getEntriesByName('initial-render')[0].duration, |
| 63 | + ) |
| 64 | + |
| 65 | + const renders = await getRenderCount(page) |
| 66 | + |
| 67 | + console.log( |
| 68 | + `[${hookVariant}] Initial render: ${duration.toFixed(1)}ms, renders: ${renders}`, |
| 69 | + ) |
| 70 | + |
| 71 | + // Sanity check — initial render should be under 500ms |
| 72 | + expect(duration).toBeLessThan(500) |
| 73 | + }) |
| 74 | + |
| 75 | + test('continuous scroll performance (200 frames × 100px)', async ({ |
| 76 | + page, |
| 77 | + hookVariant, |
| 78 | + }) => { |
| 79 | + await page.goto('/perf/') |
| 80 | + await page.waitForTimeout(500) // settle |
| 81 | + |
| 82 | + const { fps, elapsed, renderCount } = await collectScrollFPS(page, 200, 100) |
| 83 | + |
| 84 | + console.log( |
| 85 | + `[${hookVariant}] Scroll 200×100px: ${fps.toFixed(1)} fps, ${elapsed.toFixed(0)}ms, ${renderCount} renders`, |
| 86 | + ) |
| 87 | + |
| 88 | + // Should maintain at least 30 fps |
| 89 | + expect(fps).toBeGreaterThan(30) |
| 90 | + }) |
| 91 | + |
| 92 | + test('rapid small scroll performance (500 frames × 20px)', async ({ |
| 93 | + page, |
| 94 | + hookVariant, |
| 95 | + }) => { |
| 96 | + await page.goto('/perf/') |
| 97 | + await page.waitForTimeout(500) |
| 98 | + |
| 99 | + const { fps, elapsed, renderCount } = await collectScrollFPS(page, 500, 20) |
| 100 | + |
| 101 | + console.log( |
| 102 | + `[${hookVariant}] Scroll 500×20px: ${fps.toFixed(1)} fps, ${elapsed.toFixed(0)}ms, ${renderCount} renders`, |
| 103 | + ) |
| 104 | + |
| 105 | + expect(fps).toBeGreaterThan(30) |
| 106 | + }) |
| 107 | + |
| 108 | + test('scrollToIndex render count', async ({ page, hookVariant }) => { |
| 109 | + await page.goto('/perf/') |
| 110 | + await page.waitForTimeout(500) |
| 111 | + |
| 112 | + const rendersBefore = await getRenderCount(page) |
| 113 | + |
| 114 | + await page.click('#scroll-to-5000') |
| 115 | + await page.waitForTimeout(2000) // wait for convergence |
| 116 | + |
| 117 | + await expect(page.locator('[data-testid="item-5000"]')).toBeVisible() |
| 118 | + |
| 119 | + const rendersAfter = await getRenderCount(page) |
| 120 | + const scrollRenders = rendersAfter - rendersBefore |
| 121 | + |
| 122 | + console.log( |
| 123 | + `[${hookVariant}] scrollToIndex(5000): ${scrollRenders} renders`, |
| 124 | + ) |
| 125 | + |
| 126 | + // Experimental should use fewer renders (DOM mutations vs React re-renders) |
| 127 | + // Just recording — no hard assertion, the value is informational |
| 128 | + }) |
| 129 | + |
| 130 | + test('scrollToIndex round-trip render count', async ({ |
| 131 | + page, |
| 132 | + hookVariant, |
| 133 | + }) => { |
| 134 | + await page.goto('/perf/') |
| 135 | + await page.waitForTimeout(500) |
| 136 | + |
| 137 | + const rendersBefore = await getRenderCount(page) |
| 138 | + |
| 139 | + // Scroll to end |
| 140 | + await page.click('#scroll-to-9999') |
| 141 | + await page.waitForTimeout(2000) |
| 142 | + await expect(page.locator('[data-testid="item-9999"]')).toBeVisible() |
| 143 | + |
| 144 | + // Scroll back to start |
| 145 | + await page.click('#scroll-to-0') |
| 146 | + await page.waitForTimeout(2000) |
| 147 | + await expect(page.locator('[data-testid="item-0"]')).toBeVisible() |
| 148 | + |
| 149 | + const rendersAfter = await getRenderCount(page) |
| 150 | + const totalRenders = rendersAfter - rendersBefore |
| 151 | + |
| 152 | + console.log( |
| 153 | + `[${hookVariant}] scrollToIndex round-trip (9999→0): ${totalRenders} renders`, |
| 154 | + ) |
| 155 | + }) |
| 156 | +}) |
0 commit comments