4eb3449b0c
* fix(app): keep a closing tab's canvas off the next document Tab components read the editor through useEditorStore, which resolves to whichever tab is active at each call. When a tab closed, the next tab became active before the closing canvas finished, so the canvas registered its renderers with that document and its cleanup removed them from the wrong one. Every closed document's renderers, WebGL canvases, and detached editor DOM stayed in the remaining tab: about 1,200 DOM nodes, 320 listeners, and 2.5 MB of heap per open and close in a production build. EditorWorkspace now provides its tab's store to app components as it already did for the SDK's useEditor, and useEditorStore returns it inside the tab. App-level menus, shortcuts, and services outside any tab keep following the active tab. Over eight open and close cycles, DOM nodes, listeners, and the remaining tab's renderers stay flat. * fix(app): bind the workspace itself to its tab's store Vue resolves an injection from the parent, so EditorWorkspace could not inject the store it provides and its own template kept following the active tab, reading the next document while its tab closed. It now takes its tab's store directly. * refactor(app): pass the workspace its tab as a prop EditorWorkspace read the active tab once during setup and relied on WorkspaceView keying it by tab to keep that choice. WorkspaceView now passes the tab, the workspace uses its store directly, and provides it to the components below, so the binding is explicit in the template. * test: keep the light-page setup from leaving documents unsaved CanvasHelper switches a fresh document to Figma's light page so canvas specs draw on it in the dark theme. Setting the page color counts as an edit, so every spec's document started unsaved, and closing a tab asked to save changes nobody made: both tab-close specs hit that dialog. The store now exposes markDocumentSaved, which reload and save already use, and the helper takes the light page as the saved state. * test: wait for a closing menu before opening the next one A menu stays in the page while it animates out, and a click on a menubar trigger then is lost, so menu specs failed depending on which tests ran before them. They now open menus through one helper that waits for the previous menu to go and for the named menu to appear. * test: configure storage through the current settings form Storage settings moved the connection fields behind the provider row and save them with one Save button, so the workspace spec timed out looking for an Endpoint field that was not shown.
84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test'
|
|
|
|
import type * as AppTabs from '@/app/tabs'
|
|
|
|
import { CanvasHelper } from '#tests/helpers/canvas'
|
|
import { testPath } from '#tests/helpers/paths'
|
|
|
|
const FIXTURE = 'gold-preview.fig'
|
|
|
|
async function openFixtureInNewTab(page: Page) {
|
|
await page.evaluate(async (fixture) => {
|
|
const tabsURL = '/src/app/tabs/index.ts'
|
|
const tabs: typeof AppTabs = await import(tabsURL)
|
|
const response = await fetch(`/__fixtures/${fixture}`)
|
|
await tabs.openFileInNewTab(new File([await response.arrayBuffer()], fixture))
|
|
}, FIXTURE)
|
|
await expect
|
|
.poll(() =>
|
|
page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
return Boolean(store && store.graph.nodes.size > 100 && !store.state.preparation)
|
|
})
|
|
)
|
|
.toBe(true)
|
|
}
|
|
|
|
function activeTabRenderers(page: Page) {
|
|
return page.evaluate(async () => {
|
|
const tabsURL = '/src/app/tabs/index.ts'
|
|
const tabs: typeof AppTabs = await import(tabsURL)
|
|
return tabs.getActiveStore().canvasRenderers.length
|
|
})
|
|
}
|
|
|
|
// A closed tab must release its document. CanvasKit's WebGL context table, an editor's global
|
|
// text measurer, store effects created during a component's setup, and app-level event
|
|
// subscriptions each kept every closed document alive: store, graph, canvas, and UI tree. A
|
|
// closing tab's canvas also registered its renderers with the tab that became active, which
|
|
// kept every closed canvas and its whole UI tree alive in the remaining document.
|
|
test('documents closed in tabs are released', async ({ page }) => {
|
|
test.setTimeout(90_000)
|
|
await page.route(`**/__fixtures/${FIXTURE}`, (route) =>
|
|
route.fulfill({ path: testPath('fixtures', FIXTURE) })
|
|
)
|
|
await page.goto('/?test')
|
|
await new CanvasHelper(page).waitForInit()
|
|
const cdp = await page.context().newCDPSession(page)
|
|
await page.evaluate(() => Reflect.set(window, '__closedGraphs', []))
|
|
|
|
// The first document replaces the empty startup tab and stays open while others close.
|
|
await openFixtureInNewTab(page)
|
|
await expect.poll(() => activeTabRenderers(page)).toBeGreaterThan(0)
|
|
const remainingRenderers = await activeTabRenderers(page)
|
|
|
|
for (let cycle = 0; cycle < 3; cycle++) {
|
|
await openFixtureInNewTab(page)
|
|
await page.evaluate(async () => {
|
|
const tabsURL = '/src/app/tabs/index.ts'
|
|
const tabs: typeof AppTabs = await import(tabsURL)
|
|
const store = tabs.getActiveStore()
|
|
const graphs = Reflect.get(window, '__closedGraphs') as WeakRef<object>[]
|
|
graphs.push(new WeakRef(store.graph))
|
|
await tabs.closeTab(tabs.getActiveTabId(), 'discard')
|
|
})
|
|
}
|
|
|
|
await expect
|
|
.poll(
|
|
async () => {
|
|
await cdp.send('HeapProfiler.collectGarbage')
|
|
return page.evaluate(
|
|
() =>
|
|
(Reflect.get(window, '__closedGraphs') as WeakRef<object>[]).filter((ref) =>
|
|
ref.deref()
|
|
).length
|
|
)
|
|
},
|
|
{ timeout: 15_000 }
|
|
)
|
|
.toBe(0)
|
|
// The remaining tab's canvas remounts when it becomes active again.
|
|
await expect.poll(() => activeTabRenderers(page)).toBe(remainingRenderers)
|
|
})
|