diff --git a/packages/vue/__tests__/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts similarity index 98% rename from packages/vue/__tests__/Transition.spec.ts rename to packages/vue/__tests__/e2e/Transition.spec.ts index c2418790be7..7f1d3dee587 100644 --- a/packages/vue/__tests__/Transition.spec.ts +++ b/packages/vue/__tests__/e2e/Transition.spec.ts @@ -21,15 +21,30 @@ describe('e2e: Transition', () => { }) }) - 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({ @@ -83,7 +98,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'named transition', async () => { await page().evaluate(() => { @@ -139,7 +154,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'custom transition classes', async () => { await page().evaluate(() => { @@ -200,7 +215,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'transition with dynamic name', async () => { await page().evaluate(() => { @@ -262,7 +277,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'transition events without appear', async () => { const beforeLeaveSpy = vi.fn() @@ -366,7 +381,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'events with arguments', async () => { const beforeLeaveSpy = vi.fn() @@ -482,7 +497,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test('onEnterCancelled', async () => { + runTest('onEnterCancelled', async () => { const enterCancelledSpy = vi.fn() await page().exposeFunction('enterCancelledSpy', enterCancelledSpy) @@ -544,7 +559,7 @@ describe('e2e: Transition', () => { expect(await html('#container')).toBe('') }) - test( + runTest( 'transition on appear', async () => { const appearClass = await page().evaluate(async () => { @@ -620,7 +635,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'transition events with appear', async () => { const onLeaveSpy = vi.fn() @@ -768,7 +783,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'css: false', async () => { const onBeforeEnterSpy = vi.fn() @@ -846,7 +861,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'no transition detected', async () => { await page().evaluate(() => { @@ -888,7 +903,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'animations', async () => { await page().evaluate(() => { @@ -940,7 +955,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'explicit transition type', async () => { await page().evaluate(() => { @@ -1010,7 +1025,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'transition on SVG elements', async () => { await page().evaluate(() => { @@ -1081,7 +1096,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'custom transition higher-order component', async () => { await page().evaluate(() => { @@ -1138,7 +1153,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'transition on child components with empty root node', async () => { await page().evaluate(() => { @@ -1217,7 +1232,7 @@ describe('e2e: Transition', () => { describe('transition with Suspense', () => { // #1583 - test( + runTest( 'async component transition inside Suspense', async () => { const onLeaveSpy = vi.fn() @@ -1311,7 +1326,7 @@ describe('e2e: Transition', () => { ) // #1689 - test( + runTest( 'static node transition inside Suspense', async () => { await page().evaluate(() => { @@ -1369,7 +1384,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'out-in mode with Suspense', async () => { const onLeaveSpy = vi.fn() @@ -1436,7 +1451,7 @@ describe('e2e: Transition', () => { ) // #3963 - test( + runTest( 'Suspense fallback should work with transition', async () => { await page().evaluate(() => { @@ -1500,7 +1515,7 @@ describe('e2e: Transition', () => { }) describe('transition with v-show', () => { - test( + runTest( 'named transition with v-show', async () => { await page().evaluate(() => { @@ -1559,7 +1574,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'transition events with v-show', async () => { const beforeLeaveSpy = vi.fn() @@ -1665,7 +1680,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'onLeaveCancelled (v-show only)', async () => { const onLeaveCancelledSpy = vi.fn() @@ -1727,7 +1742,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'transition on appear with v-show', async () => { const beforeEnterSpy = vi.fn() @@ -1833,7 +1848,7 @@ describe('e2e: Transition', () => { ) // #4845 - test( + runTest( 'transition events should not call onEnter with v-show false', async () => { const beforeEnterSpy = vi.fn() @@ -1907,7 +1922,7 @@ describe('e2e: Transition', () => { }) describe('explicit durations', () => { - test( + runTest( 'single value', async () => { await page().evaluate(duration => { @@ -1963,7 +1978,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'enter with explicit durations', async () => { await page().evaluate(duration => { @@ -2019,7 +2034,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'leave with explicit durations', async () => { await page().evaluate(duration => { @@ -2075,7 +2090,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'separate enter and leave', async () => { await page().evaluate(duration => { @@ -2134,7 +2149,7 @@ describe('e2e: Transition', () => { E2E_TIMEOUT ) - test( + runTest( 'warn invalid durations', async () => { createApp({ @@ -2172,7 +2187,7 @@ describe('e2e: Transition', () => { ) }) - test('warn when used on multiple elements', async () => { + runTest('warn when used on multiple elements', async () => { createApp({ render() { return h(Transition, null, { @@ -2185,7 +2200,7 @@ describe('e2e: Transition', () => { ).toHaveBeenWarned() }) - test('warn when invalid transition mode', () => { + runTest('warn when invalid transition mode', () => { createApp({ template: `
@@ -2199,7 +2214,7 @@ describe('e2e: Transition', () => { }) // #3227 - test(`HOC w/ merged hooks`, async () => { + runTest(`HOC w/ merged hooks`, async () => { const innerSpy = vi.fn() const outerSpy = vi.fn() @@ -2238,7 +2253,7 @@ describe('e2e: Transition', () => { expect(root.innerHTML).toBe(``) }) - test( + runTest( 'should work with dev root fragment', async () => { await page().evaluate(() => { diff --git a/packages/vue/__tests__/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts similarity index 96% rename from packages/vue/__tests__/TransitionGroup.spec.ts rename to packages/vue/__tests__/e2e/TransitionGroup.spec.ts index a78f3912412..b5fe838af79 100644 --- a/packages/vue/__tests__/TransitionGroup.spec.ts +++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts @@ -20,12 +20,25 @@ describe('e2e: TransitionGroup', () => { 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(() => { @@ -79,7 +92,7 @@ describe('e2e: TransitionGroup', () => { E2E_TIMEOUT ) - test( + runTest( 'leave', async () => { await page().evaluate(() => { @@ -123,7 +136,7 @@ describe('e2e: TransitionGroup', () => { E2E_TIMEOUT ) - test( + runTest( 'enter + leave', async () => { await page().evaluate(() => { @@ -173,7 +186,7 @@ describe('e2e: TransitionGroup', () => { E2E_TIMEOUT ) - test( + runTest( 'appear', async () => { const appearHtml = await page().evaluate(() => { @@ -248,7 +261,7 @@ describe('e2e: TransitionGroup', () => { E2E_TIMEOUT ) - test( + runTest( 'move', async () => { await page().evaluate(() => { @@ -298,7 +311,7 @@ describe('e2e: TransitionGroup', () => { E2E_TIMEOUT ) - test( + runTest( 'dynamic name', async () => { await page().evaluate(() => { @@ -357,7 +370,7 @@ describe('e2e: TransitionGroup', () => { E2E_TIMEOUT ) - test( + runTest( 'events', async () => { const onLeaveSpy = vi.fn() @@ -494,7 +507,7 @@ describe('e2e: TransitionGroup', () => { E2E_TIMEOUT ) - test('warn unkeyed children', () => { + runTest('warn unkeyed children', () => { createApp({ template: ` diff --git a/packages/vue/examples/__tests__/commits.mock.ts b/packages/vue/__tests__/e2e/commits.mock.ts similarity index 100% rename from packages/vue/examples/__tests__/commits.mock.ts rename to packages/vue/__tests__/e2e/commits.mock.ts diff --git a/packages/vue/examples/__tests__/commits.spec.ts b/packages/vue/__tests__/e2e/commits.spec.ts similarity index 94% rename from packages/vue/examples/__tests__/commits.spec.ts rename to packages/vue/__tests__/e2e/commits.spec.ts index 52e2fda755f..1fe26bac2f1 100644 --- a/packages/vue/examples/__tests__/commits.spec.ts +++ b/packages/vue/__tests__/e2e/commits.spec.ts @@ -1,5 +1,5 @@ import path from 'path' -import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils' +import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils' import mocks from './commits.mock' describe('e2e: commits', () => { @@ -8,7 +8,7 @@ describe('e2e: commits', () => { async function testCommits(apiType: 'classic' | 'composition') { const baseUrl = `file://${path.resolve( __dirname, - `../${apiType}/commits.html` + `../../examples/${apiType}/commits.html` )}` // intercept and mock the response to avoid hitting the actual API diff --git a/packages/vue/__tests__/e2eUtils.ts b/packages/vue/__tests__/e2e/e2eUtils.ts similarity index 100% rename from packages/vue/__tests__/e2eUtils.ts rename to packages/vue/__tests__/e2e/e2eUtils.ts diff --git a/packages/vue/examples/__tests__/grid.spec.ts b/packages/vue/__tests__/e2e/grid.spec.ts similarity index 97% rename from packages/vue/examples/__tests__/grid.spec.ts rename to packages/vue/__tests__/e2e/grid.spec.ts index c73044cee2d..728804e0b50 100644 --- a/packages/vue/examples/__tests__/grid.spec.ts +++ b/packages/vue/__tests__/e2e/grid.spec.ts @@ -1,5 +1,5 @@ import path from 'path' -import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils' +import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils' interface TableData { name: string @@ -24,7 +24,7 @@ describe('e2e: grid', () => { async function testGrid(apiType: 'classic' | 'composition') { const baseUrl = `file://${path.resolve( __dirname, - `../${apiType}/grid.html` + `../../examples/${apiType}/grid.html` )}` await page().goto(baseUrl) diff --git a/packages/vue/examples/__tests__/markdown.spec.ts b/packages/vue/__tests__/e2e/markdown.spec.ts similarity index 89% rename from packages/vue/examples/__tests__/markdown.spec.ts rename to packages/vue/__tests__/e2e/markdown.spec.ts index 35df22a2570..56c570e198f 100644 --- a/packages/vue/examples/__tests__/markdown.spec.ts +++ b/packages/vue/__tests__/e2e/markdown.spec.ts @@ -1,9 +1,5 @@ import path from 'path' -import { - setupPuppeteer, - expectByPolling, - E2E_TIMEOUT -} from '../../__tests__/e2eUtils' +import { setupPuppeteer, expectByPolling, E2E_TIMEOUT } from './e2eUtils' describe('e2e: markdown', () => { const { page, isVisible, value, html } = setupPuppeteer() @@ -11,7 +7,7 @@ describe('e2e: markdown', () => { async function testMarkdown(apiType: 'classic' | 'composition') { const baseUrl = `file://${path.resolve( __dirname, - `../${apiType}/markdown.html#test` + `../../examples/${apiType}/markdown.html#test` )}` await page().goto(baseUrl) diff --git a/packages/vue/examples/__tests__/svg.spec.ts b/packages/vue/__tests__/e2e/svg.spec.ts similarity index 97% rename from packages/vue/examples/__tests__/svg.spec.ts rename to packages/vue/__tests__/e2e/svg.spec.ts index 6754d63030c..09b5be81a91 100644 --- a/packages/vue/examples/__tests__/svg.spec.ts +++ b/packages/vue/__tests__/e2e/svg.spec.ts @@ -1,5 +1,5 @@ import path from 'path' -import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils' +import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils' declare const globalStats: { label: string @@ -73,7 +73,7 @@ describe('e2e: svg', () => { async function testSvg(apiType: 'classic' | 'composition') { const baseUrl = `file://${path.resolve( __dirname, - `../${apiType}/svg.html` + `../../examples/${apiType}/svg.html` )}` await page().goto(baseUrl) diff --git a/packages/vue/examples/__tests__/todomvc.spec.ts b/packages/vue/__tests__/e2e/todomvc.spec.ts similarity index 98% rename from packages/vue/examples/__tests__/todomvc.spec.ts rename to packages/vue/__tests__/e2e/todomvc.spec.ts index f6f1b05e576..668f9d33390 100644 --- a/packages/vue/examples/__tests__/todomvc.spec.ts +++ b/packages/vue/__tests__/e2e/todomvc.spec.ts @@ -1,5 +1,5 @@ import path from 'path' -import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils' +import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils' describe('e2e: todomvc', () => { const { @@ -26,7 +26,7 @@ describe('e2e: todomvc', () => { async function testTodomvc(apiType: 'classic' | 'composition') { const baseUrl = `file://${path.resolve( __dirname, - `../${apiType}/todomvc.html` + `../../examples/${apiType}/todomvc.html` )}` await page().goto(baseUrl) diff --git a/packages/vue/__tests__/transition.html b/packages/vue/__tests__/e2e/transition.html similarity index 95% rename from packages/vue/__tests__/transition.html rename to packages/vue/__tests__/e2e/transition.html index 51553064554..2a794234103 100644 --- a/packages/vue/__tests__/transition.html +++ b/packages/vue/__tests__/e2e/transition.html @@ -1,4 +1,4 @@ - +