openpencil/tests/e2e/code/mobile-panel.spec.ts
Danila Poyarkov d90e640e89
perf(app): defer inactive Code panel generation (#514)
* perf(app): defer inactive Code panel generation

- Skip JSX serialization and syntax highlighting while the Code tab is hidden

- Restore code generation when desktop or mobile users activate the tab

- Cover large Design-tab selections without hidden Code-panel work

* test(app): cover deferred Code panel updates

- Keep mobile JSX generation inactive while the drawer is closed

- Measure the complete two-frame inactive selection flow

- Verify mobile Code output refreshes when the drawer reopens
2026-08-14 14:24:10 +03:00

34 lines
1.2 KiB
TypeScript

import { test, expect, useEditorSetup } from '#tests/e2e/fixtures'
const editor = useEditorSetup()
test.use({ viewport: { width: 390, height: 844 } })
test('closed mobile Code drawer defers JSX until reopened', async () => {
await editor.page.evaluate(() => {
const store = window.openPencil?.getStore?.()
if (!store) throw new Error('OpenPencil store not initialized')
const frameId = store.createShape('FRAME', 0, 0, 100, 100)
store.select([frameId])
})
await editor.page.getByTestId('mobile-ribbon-code').click()
await expect(editor.page.getByTestId('code-panel')).toBeVisible()
await editor.page.getByTestId('mobile-ribbon-code').click()
await expect
.poll(() => editor.page.evaluate(() => window.openPencil?.getStore?.().state.mobileDrawerSnap))
.toBe('closed')
await editor.page.evaluate(() => {
const store = window.openPencil?.getStore?.()
if (!store) throw new Error('OpenPencil store not initialized')
store.clearSelection()
const rectangleId = store.createShape('RECTANGLE', 120, 0, 100, 100)
store.select([rectangleId])
})
await editor.page.getByTestId('mobile-ribbon-code').click()
await expect(editor.page.getByTestId('code-panel')).toContainText('Rectangle')
})