mirror
/
Tldraw
kopia lustrzana https://github.com/Tldraw/Tldraw
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Add performance tests to debug menu run them with playwright and grab analytics

taha/perf-testing
Taha 2024-04-04 17:45:44 +01:00
rodzic 0161ec796e
commit 09c5b7b8d7
3 zmienionych plików z 127 dodań i 4 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

35
apps/examples/e2e/tests/test-performance.spec.ts 100644
Wyświetl plik

@ -0,0 +1,35 @@
import { setup } from '../shared-e2e'
import test from './fixtures/fixtures'
test.describe('Performance test', () => {
test.beforeEach(setup)
test.only('Get panning performance metrics', async ({ page, isMobile }) => {
test.skip(isMobile, 'no debug menu on mobile')
const debugMenuButton = page.getByTitle('Debug menu')
const panningTestMenuItem = page.getByTitle('Panning test')
await debugMenuButton.click()
const session = await page.context().newCDPSession(page)
await session.send('Performance.enable')
// Wait for the panning test to complete
await panningTestMenuItem.click()
await page.waitForTimeout(5000)
console.log('=============CDP Performance Metrics===============')
const performanceMetrics = await session.send('Performance.getMetrics')
console.log(performanceMetrics.metrics)
})
test.only('Get zooming performance metrics', async ({ page, isMobile }) => {
test.skip(isMobile, 'no debug menu on mobile')
const debugMenuButton = page.getByTitle('Debug menu')
const zoomTestMenuItem = page.getByTitle('Zoom test')
await debugMenuButton.click()
const session = await page.context().newCDPSession(page)
await session.send('Performance.enable')
// Wait for the zoom test to complete
await zoomTestMenuItem.click()
await page.waitForTimeout(5000)
console.log('=============CDP Performance Metrics===============')
const performanceMetrics = await session.send('Performance.getMetrics')
console.log(performanceMetrics.metrics)
})
})

4
packages/state/api/api.json
Wyświetl plik

@ -2387,7 +2387,7 @@
},
{
"kind": "Content",
"text": "Value | (() => Value)"
"text": "(() => Value) | Value"
},
{
"kind": "Content",
@ -2813,7 +2813,7 @@
},
{
"kind": "Content",
"text": "undefined | any[]"
"text": "any[] | undefined"
},
{
"kind": "Content",

92
packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx
Wyświetl plik

@ -1,6 +1,8 @@
import {
DebugFlag,
Editor,
PageRecordType,
TLPageId,
TLShapePartial,
createShapeId,
debugFlags,
@ -168,6 +170,14 @@ export function DefaultDebugMenuContent() {
<TldrawUiMenuItem id="throw-error" onSelect={() => setError(true)} label={'Throw error'} />
<TldrawUiMenuItem id="hard-reset" onSelect={hardResetEditor} label={'Hard reset'} />
</TldrawUiMenuGroup>
<TldrawUiMenuGroup id="performance">
<TldrawUiMenuItem
id="panning"
label={'Panning test'}
onSelect={() => panningTest(editor)}
/>
<TldrawUiMenuItem id="zoom" label={'Zoom test'} onSelect={() => zoomTest(editor)} />
</TldrawUiMenuGroup>
<TldrawUiMenuGroup id="flags">
<DebugFlags />
<FeatureFlags />
@ -280,7 +290,7 @@ const DebugFlagToggle = track(function DebugFlagToggle({
let t = 0
function createNShapes(editor: Editor, n: number) {
function createNShapes(editor: Editor, n: number, offset = 0) {
const shapesToCreate: TLShapePartial[] = Array(n)
const cols = Math.floor(Math.sqrt(n))
@ -289,7 +299,7 @@ function createNShapes(editor: Editor, n: number) {
shapesToCreate[i] = {
id: createShapeId('box' + t),
type: 'geo',
x: (i % cols) * 132,
x: (i % cols) * 132 + offset,
y: Math.floor(i / cols) * 132,
}
}
@ -298,3 +308,81 @@ function createNShapes(editor: Editor, n: number) {
editor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id))
})
}
function panningTest(editor: Editor) {
const newPageId = setupPage(editor)
createNShapes(editor, 1000)
createNShapes(editor, 1000, 4100)
editor.selectNone()
setTimeout(() => {
editor.zoomIn(editor.getViewportPageCenter(), { duration: 1000 })
setTimeout(() => {
editor.setCamera({ x: -4000, y: -1000 }, { duration: 1000 })
setTimeout(() => {
editor.setCamera({ x: -5000, y: -2000 }, { duration: 1000 })
setTimeout(() => {
editor.setCamera({ x: -600, y: -3000 }, { duration: 1000 })
setTimeout(() => {
editor.setCamera({ x: -7000, y: -2000 }, { duration: 1000 })
removePage(editor, newPageId)
}, 1000)
}, 1000)
}, 1000)
}, 1000)
}, 1000)
}
function zoomTest(editor: Editor) {
const newPageId = setupPage(editor)
createNShapes(editor, 1000)
createNShapes(editor, 1000, 4100)
editor.selectNone()
editor.setCamera({ x: -3500, y: -1400 })
setTimeout(() => {
editor.zoomIn(editor.getViewportScreenCenter(), { duration: 1000 })
setTimeout(() => {
editor.zoomIn(editor.getViewportScreenCenter(), { duration: 1000 })
setTimeout(() => {
editor.zoomOut(editor.getViewportScreenCenter(), { duration: 1000 })
setTimeout(() => {
editor.zoomOut(editor.getViewportScreenCenter(), { duration: 1000 })
setTimeout(() => {
editor.zoomOut(editor.getViewportScreenCenter(), { duration: 1000 })
setTimeout(() => {
editor.zoomOut(editor.getViewportScreenCenter(), { duration: 1000 })
setTimeout(() => {
editor.zoomOut(editor.getViewportScreenCenter(), { duration: 1000 })
removePage(editor, newPageId)
}, 1000)
}, 1000)
}, 1000)
}, 1000)
}, 1000)
}, 1000)
}, 1000)
}
const setupPage = (editor: Editor) => {
const pages = editor.getPages()
const perfPageExists = pages.filter((p) => p.name === 'performance').length > 0
if (perfPageExists) {
editor.deletePage(pages.find((p) => p.name === 'performance')!.id)
}
const newPageId = PageRecordType.createId()
editor.createPage({ name: 'performance', id: newPageId })
editor.setCurrentPage(newPageId)
return newPageId
}
const removePage = (editor: Editor, id: TLPageId) => {
// a little delay to make it easier to see in the performance tab
setTimeout(() => {
editor.deletePage(id)
}, 2000)
}