root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

test: add more tests

This commit is contained in:
daiwei 2025-03-13 11:55:31 +08:00
parent 1540002f32
commit 055ca98701
3 changed files with 197 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
packages-private/vapor-e2e-test/__tests__/transition.spec.ts
View File

@ -214,8 +214,141 @@ describe('vapor transition', () => {
},
E2E_TIMEOUT,
)
test.todo('transition events without appear', async () => {}, E2E_TIMEOUT)
test.todo('events with arguments', async () => {}, E2E_TIMEOUT)
test(
'transition events without appear',
async () => {
const btnSelector = '.if-events-without-appear > button'
const containerSelector = '.if-events-without-appear > div'
const childSelector = `${containerSelector} > div`
expect(await html(containerSelector)).toBe(
'<div class="test">content</div>',
)
// leave
expect(
(await transitionStart(btnSelector, childSelector)).classNames,
).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
let calls = await page().evaluate(() => {
return (window as any).getCalls('withOutAppear')
})
expect(calls).toStrictEqual(['beforeLeave', 'onLeave'])
await nextFrame()
expect(await classList(childSelector)).toStrictEqual([
'test',
'test-leave-active',
'test-leave-to',
])
expect(
await page().evaluate(() => {
return (window as any).getCalls('withOutAppear')
}),
).not.contain('afterLeave')
await transitionFinish()
expect(await html(containerSelector)).toBe('')
expect(
await page().evaluate(() => {
return (window as any).getCalls('withOutAppear')
}),
).toStrictEqual(['beforeLeave', 'onLeave', 'afterLeave'])
await page().evaluate(() => {
;(window as any).resetCalls('withOutAppear')
})
// enter
expect(
(await transitionStart(btnSelector, childSelector)).classNames,
).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
calls = await page().evaluate(() => {
return (window as any).getCalls('withOutAppear')
})
expect(calls).toStrictEqual(['beforeEnter', 'onEnter'])
await nextFrame()
expect(await classList(childSelector)).toStrictEqual([
'test',
'test-enter-active',
'test-enter-to',
])
expect(
await page().evaluate(() => {
return (window as any).getCalls('withOutAppear')
}),
).not.contain('afterEnter')
await transitionFinish()
expect(await html(containerSelector)).toBe(
'<div class="test">content</div>',
)
expect(
await page().evaluate(() => {
return (window as any).getCalls('withOutAppear')
}),
).toStrictEqual(['beforeEnter', 'onEnter', 'afterEnter'])
},
E2E_TIMEOUT,
)
test(
'events with arguments',
async () => {
const btnSelector = '.if-events-with-args > button'
const containerSelector = '.if-events-with-args > div'
const childSelector = `${containerSelector} > div`
expect(await html(containerSelector)).toBe(
'<div class="test">content</div>',
)
// leave
await click(btnSelector)
let calls = await page().evaluate(() => {
return (window as any).getCalls('withArgs')
})
expect(calls).toStrictEqual(['beforeLeave', 'onLeave'])
expect(await classList(childSelector)).toStrictEqual([
'test',
'before-leave',
'leave',
])
await timeout(200 + buffer)
calls = await page().evaluate(() => {
return (window as any).getCalls('withArgs')
})
expect(calls).toStrictEqual(['beforeLeave', 'onLeave', 'afterLeave'])
expect(await html(containerSelector)).toBe('')
await page().evaluate(() => {
;(window as any).resetCalls('withArgs')
})
// enter
await click(btnSelector)
calls = await page().evaluate(() => {
return (window as any).getCalls('withArgs')
})
expect(calls).toStrictEqual(['beforeEnter', 'onEnter'])
expect(await classList(childSelector)).toStrictEqual([
'test',
'before-enter',
'enter',
])
await timeout(200 + buffer)
calls = await page().evaluate(() => {
return (window as any).getCalls('withArgs')
})
expect(calls).toStrictEqual(['beforeEnter', 'onEnter', 'afterEnter'])
expect(await html(containerSelector)).toBe(
'<div class="test before-enter enter after-enter">content</div>',
)
},
E2E_TIMEOUT,
)
test.todo('onEnterCancelled', async () => {}, E2E_TIMEOUT)
test.todo('transition on appear', async () => {}, E2E_TIMEOUT)
test.todo('transition events with appear', async () => {}, E2E_TIMEOUT)
@ -353,11 +486,11 @@ describe('vapor transition', () => {
await nextFrame()
expect(await isVisible(containerSelector)).toBe(true)
const calls = await page().evaluate(() => {
return (window as any).calls
})
expect(calls).toStrictEqual([
expect(
await page().evaluate(() => {
return (window as any).getCalls('basic')
}),
).toStrictEqual([
'beforeAppear',
'onAppear',
'afterAppear',

76
packages-private/vapor-e2e-test/transition/App.vue
View File

@ -4,8 +4,13 @@ const show = ref(true)
const toggle = ref(true)
const count = ref(0)
const calls = []
window.calls = calls
let calls = {
basic: [],
withOutAppear: [],
withArgs: []
}
window.getCalls = (key) => calls[key]
window.resetCalls = (key) => calls[key] = []
import VaporCompA from './components/VaporCompA.vue'
import VaporCompB from './components/VaporCompB.vue'
@ -47,14 +52,8 @@ const name = ref('test')
</div>
<div class="if-custom-classes">
<div>
<transition
enter-from-class="hello-from"
enter-active-class="hello-active"
enter-to-class="hello-to"
leave-from-class="bye-from"
leave-active-class="bye-active"
leave-to-class="bye-to"
>
<transition enter-from-class="hello-from" enter-active-class="hello-active" enter-to-class="hello-to"
leave-from-class="bye-from" leave-active-class="bye-active" leave-to-class="bye-to">
<div v-if="toggle" class="test">content</div>
</transition>
</div>
@ -69,6 +68,44 @@ const name = ref('test')
<button class="toggle" @click="toggle = !toggle">button</button>
<button class="change" @click="name = 'changed'">{{ name }}</button>
</div>
<div class="if-events-without-appear">
<div>
<transition name="test" @before-enter="() => calls.withOutAppear.push('beforeEnter')"
@enter="() => calls.withOutAppear.push('onEnter')" @after-enter="() => calls.withOutAppear.push('afterEnter')"
@beforeLeave="() => calls.withOutAppear.push('beforeLeave')"
@leave="() => calls.withOutAppear.push('onLeave')" @afterLeave="() => calls.withOutAppear.push('afterLeave')">
<div v-if="toggle" class="test">content</div>
</transition>
</div>
<button @click="toggle = !toggle">button</button>
</div>
<div class="if-events-with-args">
<div id="container">
<transition :css="false" name="test" @before-enter="(el) => {
calls.withArgs.push('beforeEnter');
el.classList.add('before-enter')
}" @enter="(el, done) => {
calls.withArgs.push('onEnter');
el.classList.add('enter')
setTimeout(done, 200)
}" @after-enter="(el) => {
calls.withArgs.push('afterEnter');
el.classList.add('after-enter')
}" @before-leave="(el) => {
calls.withArgs.push('beforeLeave');
el.classList.add('before-leave')
}" @leave="(el, done) => {
calls.withArgs.push('onLeave');
el.classList.add('leave')
setTimeout(done, 200)
}" @after-leave="() => {
calls.withArgs.push('afterLeave');
}">
<div v-if="toggle" class="test">content</div>
</transition>
</div>
<button id="toggleBtn" @click="toggle = !toggle">button</button>
</div>
<div class="vshow">
<button @click="show = !show">Show</button>
@ -78,18 +115,11 @@ const name = ref('test')
</div>
<div class="vif">
<button @click="toggle = !toggle">Toggle</button>
<Transition
appear
@beforeEnter="() => calls.push('beforeEnter')"
@enter="() => calls.push('onEnter')"
@afterEnter="() => calls.push('afterEnter')"
@beforeLeave="() => calls.push('beforeLeave')"
@leave="() => calls.push('onLeave')"
@afterLeave="() => calls.push('afterLeave')"
@beforeAppear="() => calls.push('beforeAppear')"
@appear="() => calls.push('onAppear')"
@afterAppear="() => calls.push('afterAppear')"
>
<Transition appear @beforeEnter="() => calls.basic.push('beforeEnter')" @enter="() => calls.basic.push('onEnter')"
@afterEnter="() => calls.basic.push('afterEnter')" @beforeLeave="() => calls.basic.push('beforeLeave')"
@leave="() => calls.basic.push('onLeave')" @afterLeave="() => calls.basic.push('afterLeave')"
@beforeAppear="() => calls.basic.push('beforeAppear')" @appear="() => calls.basic.push('onAppear')"
@afterAppear="() => calls.basic.push('afterAppear')">
<h1 v-if="toggle">vIf</h1>
</Transition>
</div>
@ -152,7 +182,7 @@ const name = ref('test')
}
</style>
<style>
.transition-container > div {
.transition-container>div {
padding: 15px;
border: 1px solid #f7f7f7;
margin-top: 15px;

5
packages/compiler-vapor/src/generators/component.ts
View File

@ -134,7 +134,10 @@ function processInlineHandlers(
const isMemberExp = isMemberExpression(value, context.options)
// cache inline handlers (fn expression or inline statement)
if (!isMemberExp) {
const name = getUniqueHandlerName(context, `_on_${prop.key.content}`)
const name = getUniqueHandlerName(
context,
`_on_${prop.key.content.replace(/-/g, '_')}`,
)
handlers.push({ name, value })
ids[name] = null
// replace the original prop value with the handler name