})
})
- beforeEach(async () => {
- await page().goto(baseUrl)
- await page().waitForSelector('#app')
- })
+ // beforeEach(async () => {
+ // await page().goto(baseUrl)
+ // await page().waitForSelector('#app')
+ // })
- describe('transition with v-if', () => {
+ // workaround for https://github.com/vitest-dev/vitest/issues/2756
+ function runTest(desc: string, runner: any, timeout?: number) {
test(
+ desc,
+ async () => {
+ await page().goto(baseUrl)
+ await page().waitForSelector('#app')
+ await runner()
+ },
+ timeout
+ )
+ }
+
+ describe('transition with v-if', () => {
+ runTest(
'basic transition',
async () => {
+ await page().goto(baseUrl)
+ await page().waitForSelector('#app')
await page().evaluate(() => {
const { createApp, ref } = (window as any).Vue
createApp({
E2E_TIMEOUT
)
- test(
+ runTest(
'named transition',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'custom transition classes',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'transition with dynamic name',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'transition events without appear',
async () => {
const beforeLeaveSpy = vi.fn()
E2E_TIMEOUT
)
- test(
+ runTest(
'events with arguments',
async () => {
const beforeLeaveSpy = vi.fn()
E2E_TIMEOUT
)
- test('onEnterCancelled', async () => {
+ runTest('onEnterCancelled', async () => {
const enterCancelledSpy = vi.fn()
await page().exposeFunction('enterCancelledSpy', enterCancelledSpy)
expect(await html('#container')).toBe('<!--v-if-->')
})
- test(
+ runTest(
'transition on appear',
async () => {
const appearClass = await page().evaluate(async () => {
E2E_TIMEOUT
)
- test(
+ runTest(
'transition events with appear',
async () => {
const onLeaveSpy = vi.fn()
E2E_TIMEOUT
)
- test(
+ runTest(
'css: false',
async () => {
const onBeforeEnterSpy = vi.fn()
E2E_TIMEOUT
)
- test(
+ runTest(
'no transition detected',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'animations',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'explicit transition type',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'transition on SVG elements',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'custom transition higher-order component',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'transition on child components with empty root node',
async () => {
await page().evaluate(() => {
describe('transition with Suspense', () => {
// #1583
- test(
+ runTest(
'async component transition inside Suspense',
async () => {
const onLeaveSpy = vi.fn()
)
// #1689
- test(
+ runTest(
'static node transition inside Suspense',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'out-in mode with Suspense',
async () => {
const onLeaveSpy = vi.fn()
)
// #3963
- test(
+ runTest(
'Suspense fallback should work with transition',
async () => {
await page().evaluate(() => {
})
describe('transition with v-show', () => {
- test(
+ runTest(
'named transition with v-show',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'transition events with v-show',
async () => {
const beforeLeaveSpy = vi.fn()
E2E_TIMEOUT
)
- test(
+ runTest(
'onLeaveCancelled (v-show only)',
async () => {
const onLeaveCancelledSpy = vi.fn()
E2E_TIMEOUT
)
- test(
+ runTest(
'transition on appear with v-show',
async () => {
const beforeEnterSpy = vi.fn()
)
// #4845
- test(
+ runTest(
'transition events should not call onEnter with v-show false',
async () => {
const beforeEnterSpy = vi.fn()
})
describe('explicit durations', () => {
- test(
+ runTest(
'single value',
async () => {
await page().evaluate(duration => {
E2E_TIMEOUT
)
- test(
+ runTest(
'enter with explicit durations',
async () => {
await page().evaluate(duration => {
E2E_TIMEOUT
)
- test(
+ runTest(
'leave with explicit durations',
async () => {
await page().evaluate(duration => {
E2E_TIMEOUT
)
- test(
+ runTest(
'separate enter and leave',
async () => {
await page().evaluate(duration => {
E2E_TIMEOUT
)
- test(
+ runTest(
'warn invalid durations',
async () => {
createApp({
)
})
- test('warn when used on multiple elements', async () => {
+ runTest('warn when used on multiple elements', async () => {
createApp({
render() {
return h(Transition, null, {
).toHaveBeenWarned()
})
- test('warn when invalid transition mode', () => {
+ runTest('warn when invalid transition mode', () => {
createApp({
template: `
<div id="container">
})
// #3227
- test(`HOC w/ merged hooks`, async () => {
+ runTest(`HOC w/ merged hooks`, async () => {
const innerSpy = vi.fn()
const outerSpy = vi.fn()
expect(root.innerHTML).toBe(`<!---->`)
})
- test(
+ runTest(
'should work with dev root fragment',
async () => {
await page().evaluate(() => {
const transitionFinish = (time = duration) => timeout(time + buffer)
- beforeEach(async () => {
- await page().goto(baseUrl)
- await page().waitForSelector('#app')
- })
+ // beforeEach(async () => {
+ // await page().goto(baseUrl)
+ // await page().waitForSelector('#app')
+ // })
+
+ // workaround for https://github.com/vitest-dev/vitest/issues/2756
+ function runTest(desc: string, runner: any, timeout?: number) {
+ test(
+ desc,
+ async () => {
+ await page().goto(baseUrl)
+ await page().waitForSelector('#app')
+ await runner()
+ },
+ timeout
+ )
+ }
- test(
+ runTest(
'enter',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'leave',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'enter + leave',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'appear',
async () => {
const appearHtml = await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'move',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'dynamic name',
async () => {
await page().evaluate(() => {
E2E_TIMEOUT
)
- test(
+ runTest(
'events',
async () => {
const onLeaveSpy = vi.fn()
E2E_TIMEOUT
)
- test('warn unkeyed children', () => {
+ runTest('warn unkeyed children', () => {
createApp({
template: `
<transition-group name="test">