diff --git a/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts b/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts index a3069d1ae..734c9fde1 100644 --- a/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts +++ b/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts @@ -6,10 +6,10 @@ import { import connect from 'connect' import sirv from 'sirv' import { ports } from '../utils' +import { nextTick } from 'vue' +const { page, click, text, enterValue, html } = setupPuppeteer() describe('vdom / vapor interop', () => { - const { page, click, text, enterValue } = setupPuppeteer() - let server: any const port = ports.vdomInterop beforeAll(() => { @@ -19,6 +19,12 @@ describe('vdom / vapor interop', () => { process.on('SIGTERM', () => server && server.close()) }) + beforeEach(async () => { + const baseUrl = `http://localhost:${port}/interop/` + await page().goto(baseUrl) + await page().waitForSelector('#app') + }) + afterAll(() => { server.close() }) @@ -26,9 +32,6 @@ describe('vdom / vapor interop', () => { test( 'should work', async () => { - const baseUrl = `http://localhost:${port}/interop/` - await page().goto(baseUrl) - expect(await text('.vapor > h2')).toContain('Vapor component in VDOM') expect(await text('.vapor-prop')).toContain('hello') @@ -82,4 +85,33 @@ describe('vdom / vapor interop', () => { }, E2E_TIMEOUT, ) + + describe('teleport', () => { + const testSelector = '.teleport' + test('render vapor component', async () => { + const targetSelector = `${testSelector} .teleport-target` + const containerSelector = `${testSelector} .render-vapor-comp` + const buttonSelector = `${containerSelector} button` + + // teleport is disabled by default + expect(await html(containerSelector)).toBe( + `
vapor comp
`, + ) + expect(await html(targetSelector)).toBe('') + + // disabled -> enabled + await click(buttonSelector) + await nextTick() + expect(await html(containerSelector)).toBe(``) + expect(await html(targetSelector)).toBe('
vapor comp
') + + // enabled -> disabled + await click(buttonSelector) + await nextTick() + expect(await html(containerSelector)).toBe( + `
vapor comp
`, + ) + expect(await html(targetSelector)).toBe('') + }) + }) }) diff --git a/packages-private/vapor-e2e-test/interop/App.vue b/packages-private/vapor-e2e-test/interop/App.vue index 772a6989d..dcdd5f99a 100644 --- a/packages-private/vapor-e2e-test/interop/App.vue +++ b/packages-private/vapor-e2e-test/interop/App.vue @@ -1,9 +1,11 @@ diff --git a/packages-private/vapor-e2e-test/interop/components/SimpleVaporComp.vue b/packages-private/vapor-e2e-test/interop/components/SimpleVaporComp.vue new file mode 100644 index 000000000..d2d7be568 --- /dev/null +++ b/packages-private/vapor-e2e-test/interop/components/SimpleVaporComp.vue @@ -0,0 +1,6 @@ + + diff --git a/packages-private/vapor-e2e-test/interop/VaporComp.vue b/packages-private/vapor-e2e-test/interop/components/VaporComp.vue similarity index 100% rename from packages-private/vapor-e2e-test/interop/VaporComp.vue rename to packages-private/vapor-e2e-test/interop/components/VaporComp.vue diff --git a/packages-private/vapor-e2e-test/interop/VdomComp.vue b/packages-private/vapor-e2e-test/interop/components/VdomComp.vue similarity index 100% rename from packages-private/vapor-e2e-test/interop/VdomComp.vue rename to packages-private/vapor-e2e-test/interop/components/VdomComp.vue