From 09c5b7b8d7c1d2ec830c0eecdaa02320d4d3be69 Mon Sep 17 00:00:00 2001 From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Date: Thu, 4 Apr 2024 17:45:44 +0100 Subject: [PATCH] Add performance tests to debug menu run them with playwright and grab analytics --- .../e2e/tests/test-performance.spec.ts | 35 +++++++ packages/state/api/api.json | 4 +- .../DebugMenu/DefaultDebugMenuContent.tsx | 92 ++++++++++++++++++- 3 files changed, 127 insertions(+), 4 deletions(-) create mode 100644 apps/examples/e2e/tests/test-performance.spec.ts diff --git a/apps/examples/e2e/tests/test-performance.spec.ts b/apps/examples/e2e/tests/test-performance.spec.ts new file mode 100644 index 000000000..3595a6a2c --- /dev/null +++ b/apps/examples/e2e/tests/test-performance.spec.ts @@ -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) + }) +}) diff --git a/packages/state/api/api.json b/packages/state/api/api.json index fc6d8c913..6b0f0291a 100644 --- a/packages/state/api/api.json +++ b/packages/state/api/api.json @@ -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", diff --git a/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx b/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx index 68b69382a..b5515e8ff 100644 --- a/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx @@ -1,6 +1,8 @@ import { DebugFlag, Editor, + PageRecordType, + TLPageId, TLShapePartial, createShapeId, debugFlags, @@ -168,6 +170,14 @@ export function DefaultDebugMenuContent() { setError(true)} label={'Throw error'} /> + + panningTest(editor)} + /> + zoomTest(editor)} /> + @@ -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) +}