* 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
34 lines
1.2 KiB
TypeScript
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')
|
|
})
|