mirror of https://github.com/vuejs/core.git
test(e2e): add memory leak test for cached text vnodes
This commit is contained in:
parent
4cb6a4f797
commit
163ee956cb
|
@ -0,0 +1,85 @@
|
|||
import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
|
||||
import path from 'node:path'
|
||||
|
||||
const { page, html, click } = setupPuppeteer()
|
||||
|
||||
beforeEach(async () => {
|
||||
await page().setContent(`<div id="app"></div>`)
|
||||
await page().addScriptTag({
|
||||
path: path.resolve(__dirname, '../../dist/vue.global.js'),
|
||||
})
|
||||
})
|
||||
|
||||
describe('not leaking', async () => {
|
||||
// #13661
|
||||
test(
|
||||
'cached text vnodes should not retaining detached DOM nodes',
|
||||
async () => {
|
||||
const client = await page().createCDPSession()
|
||||
await page().evaluate(async () => {
|
||||
const { createApp, ref } = (window as any).Vue
|
||||
createApp({
|
||||
components: {
|
||||
Comp1: {
|
||||
template: `
|
||||
<h1><slot></slot></h1>
|
||||
<div>{{ test.length }}</div>
|
||||
`,
|
||||
setup() {
|
||||
const test = ref([...Array(3000)].map((_, i) => ({ i })))
|
||||
// @ts-expect-error
|
||||
window.__REF__ = new WeakRef(test)
|
||||
|
||||
return { test }
|
||||
},
|
||||
},
|
||||
Comp2: {
|
||||
template: `<h2>comp2</h2>`,
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<button id="toggleBtn" @click="click">button</button>
|
||||
<Comp1 v-if="toggle">
|
||||
<div>
|
||||
<Comp2/>
|
||||
text node
|
||||
</div>
|
||||
</Comp1>
|
||||
`,
|
||||
setup() {
|
||||
const toggle = ref(true)
|
||||
const click = () => (toggle.value = !toggle.value)
|
||||
return { toggle, click }
|
||||
},
|
||||
}).mount('#app')
|
||||
})
|
||||
|
||||
expect(await html('#app')).toBe(
|
||||
`<button id="toggleBtn">button</button>` +
|
||||
`<h1>` +
|
||||
`<div>` +
|
||||
`<h2>comp2</h2>` +
|
||||
` text node ` +
|
||||
`</div>` +
|
||||
`</h1>` +
|
||||
`<div>3000</div>`,
|
||||
)
|
||||
|
||||
await click('#toggleBtn')
|
||||
expect(await html('#app')).toBe(
|
||||
`<button id="toggleBtn">button</button><!--v-if-->`,
|
||||
)
|
||||
|
||||
const isCollected = async () =>
|
||||
// @ts-expect-error
|
||||
await page().evaluate(() => window.__REF__.deref() === undefined)
|
||||
|
||||
while ((await isCollected()) === false) {
|
||||
await client.send('HeapProfiler.collectGarbage')
|
||||
}
|
||||
|
||||
expect(await isCollected()).toBe(true)
|
||||
},
|
||||
E2E_TIMEOUT,
|
||||
)
|
||||
})
|
Loading…
Reference in New Issue