wip: add tests

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

@@ -55,11 +55,11 @@ describe('vapor transition', () => {
   ) =>
     page().waitForFunction(
       (sel, expectedText, expectedClasses) => {
-        const el = document.querySelector(sel)!
+        const el = document.querySelector(sel)
         const hasClasses =
           expectedClasses.length === 0
-            ? el.classList.length === 0
-            : expectedClasses.every(c => el.classList.contains(c))
+            ? el?.classList.length === 0
+            : expectedClasses.every(c => el?.classList.contains(c))
         const hasText = el?.textContent?.includes(expectedText)
         return !!el && hasClasses && hasText
       },
@@ -120,9 +120,9 @@ describe('vapor transition', () => {
       expect(await classList(containerSelector)).contains('v-enter-active')
       expect(await text(containerSelector)).toContain('vIf')
       await transitionFinish()
-      await nextFrame()
 
       // leave
+      await nextFrame()
       expect(
         (await transitionStart(btnSelector, containerSelector)).classNames,
       ).toStrictEqual(['v-leave-from', 'v-leave-active'])
@@ -134,7 +134,6 @@ describe('vapor transition', () => {
       ])
 
       await transitionFinish()
-      await nextFrame()
       expect(await count(containerSelector)).toBe(0)
 
       // enter
@@ -151,6 +150,22 @@ describe('vapor transition', () => {
       await transitionFinish()
       await nextFrame()
       expect(await isVisible(containerSelector)).toBe(true)
+
+      const calls = await page().evaluate(() => {
+        return (window as any).calls
+      })
+
+      expect(calls).toStrictEqual([
+        'beforeAppear',
+        'onEnter',
+        'afterAppear',
+        'beforeLeave',
+        'onLeave',
+        'afterLeave',
+        'beforeEnter',
+        'onEnter',
+        'afterEnter',
+      ])
     },
     E2E_TIMEOUT,
   )
@@ -303,14 +318,182 @@ describe('vapor transition', () => {
     E2E_TIMEOUT,
   )
 
-  test.todo('transition hooks', async () => {}, E2E_TIMEOUT)
-
+  // tests for using vdom component in createVaporApp + vaporInteropPlugin
   describe('interop', () => {
-    test.todo('interop: render vdom component', async () => {}, E2E_TIMEOUT)
+    test(
+      'render vdom component',
+      async () => {
+        const btnSelector = '.vdom > button'
+        const containerSelector = '.vdom > div'
+
+        expect(await html(containerSelector)).toBe(`<div>vdom comp</div>`)
+
+        // comp leave
+        expect(
+          (await transitionStart(btnSelector, containerSelector)).innerHTML,
+        ).toBe(`<div class="v-leave-from v-leave-active">vdom comp</div>`)
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="v-leave-active v-leave-to">vdom comp</div>`,
+        )
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(``)
+
+        // comp enter
+        expect(
+          (await transitionStart(btnSelector, containerSelector)).innerHTML,
+        ).toBe(`<div class="v-enter-from v-enter-active">vdom comp</div>`)
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="v-enter-active v-enter-to">vdom comp</div>`,
+        )
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          `<div class="">vdom comp</div>`,
+        )
+      },
+      E2E_TIMEOUT,
+    )
 
-    test.todo(
-      'interop: switch between vdom/vapor component',
-      async () => {},
+    test(
+      'switch between vdom/vapor component (out-in mode)',
+      async () => {
+        const btnSelector = '.vdom-vapor-out-in > button'
+        const containerSelector = '.vdom-vapor-out-in > div'
+        const childSelector = `${containerSelector} > div`
+
+        expect(await html(containerSelector)).toBe(`<div>vdom comp</div>`)
+
+        // switch to vapor comp
+        // vdom comp leave
+        expect(
+          (await transitionStart(btnSelector, containerSelector)).innerHTML,
+        ).toBe(`<div class="fade-leave-from fade-leave-active">vdom comp</div>`)
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="fade-leave-active fade-leave-to">vdom comp</div>`,
+        )
+
+        // vapor comp enter
+        await waitForElement(childSelector, 'vapor compA', [
+          'fade-enter-from',
+          'fade-enter-active',
+        ])
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="fade-enter-active fade-enter-to">vapor compA</div>`,
+        )
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          `<div class="">vapor compA</div>`,
+        )
+
+        // switch to vdom comp
+        // vapor comp leave
+        expect(
+          (await transitionStart(btnSelector, containerSelector)).innerHTML,
+        ).toBe(
+          `<div class="fade-leave-from fade-leave-active">vapor compA</div>`,
+        )
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="fade-leave-active fade-leave-to">vapor compA</div>`,
+        )
+
+        // vdom comp enter
+        await waitForElement(childSelector, 'vdom comp', [
+          'fade-enter-from',
+          'fade-enter-active',
+        ])
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="fade-enter-active fade-enter-to">vdom comp</div>`,
+        )
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          `<div class="">vdom comp</div>`,
+        )
+      },
+      E2E_TIMEOUT,
+    )
+
+    test(
+      'switch between vdom/vapor component (in-out mode)',
+      async () => {
+        const btnSelector = '.vdom-vapor-in-out > button'
+        const containerSelector = '.vdom-vapor-in-out > div'
+        const childSelector = `${containerSelector} > div`
+
+        expect(await html(containerSelector)).toBe(`<div>vapor compA</div>`)
+
+        // switch to vdom comp
+        // vdom comp enter
+        expect(
+          (await transitionStart(btnSelector, containerSelector)).innerHTML,
+        ).toBe(
+          `<div>vapor compA</div><div class="fade-enter-from fade-enter-active">vdom comp</div>`,
+        )
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div>vapor compA</div><div class="fade-enter-active fade-enter-to">vdom comp</div>`,
+        )
+
+        // vapor comp leave
+        await waitForElement(childSelector, 'vapor compA', [
+          'fade-leave-from',
+          'fade-leave-active',
+        ])
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="fade-leave-active fade-leave-to">vapor compA</div><div class="">vdom comp</div>`,
+        )
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          `<div class="">vdom comp</div>`,
+        )
+
+        // switch to vapor comp
+        // vapor comp enter
+        expect(
+          (await transitionStart(btnSelector, containerSelector)).innerHTML,
+        ).toBe(
+          `<div class="">vdom comp</div><div class="fade-enter-from fade-enter-active">vapor compA</div>`,
+        )
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="">vdom comp</div><div class="fade-enter-active fade-enter-to">vapor compA</div>`,
+        )
+
+        // vdom comp leave
+        await waitForElement(childSelector, 'vdom comp', [
+          'fade-leave-from',
+          'fade-leave-active',
+        ])
+
+        await nextFrame()
+        expect(await html(containerSelector)).toBe(
+          `<div class="fade-leave-active fade-leave-to">vdom comp</div><div class="">vapor compA</div>`,
+        )
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          `<div class="">vapor compA</div>`,
+        )
+      },
       E2E_TIMEOUT,
     )
   })

packages-private/vapor-e2e-test/transition/App.vue

@@ -4,6 +4,9 @@ const show = ref(true)
 const toggle = ref(true)
 const count = ref(0)
 
+const calls = []
+window.calls = calls
+
 import VaporCompA from './components/VaporCompA.vue'
 import VaporCompB from './components/VaporCompB.vue'
 const activeComponent = shallowRef(VaporCompB)
@@ -11,6 +14,15 @@ function toggleComponent() {
   activeComponent.value =
     activeComponent.value === VaporCompA ? VaporCompB : VaporCompA
 }
+
+const toggleVdom = ref(true)
+import VDomComp from './components/VdomComp.vue'
+
+const interopComponent = shallowRef(VDomComp)
+function toggleInteropComponent() {
+  interopComponent.value =
+    interopComponent.value === VaporCompA ? VDomComp : VaporCompA
+}
 </script>
 
 <template>
@@ -22,7 +34,11 @@ function toggleComponent() {
   </div>
   <div class="vif">
     <button @click="toggle = !toggle">Toggle</button>
-    <Transition appear>
+    <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')">
       <h1 v-if="toggle">vIf</h1>
     </Transition>
   </div>
@@ -48,6 +64,31 @@ function toggleComponent() {
       </Transition>
     </div>
   </div>
+  <div class="vdom">
+    <button @click="toggleVdom = !toggleVdom">toggle vdom component</button>
+    <div>
+      <Transition>
+        <VDomComp v-if="toggleVdom" />
+      </Transition>
+    </div>
+  </div>
+  <div class="vdom-vapor-out-in">
+    <button @click="toggleInteropComponent">switch between vdom/vapor component out-in mode</button>
+    <div>
+      <Transition name="fade" mode="out-in">
+        <component :is="interopComponent"></component>
+      </Transition>
+    </div>
+  </div>
+  <div class="vdom-vapor-in-out">
+    <button @click="toggleVdom = !toggleVdom">switch between vdom/vapor component in-out mode</button>
+    <div>
+      <Transition name="fade" mode="in-out">
+        <VaporCompA v-if="toggleVdom" />
+        <VDomComp v-else></VDomComp>
+      </Transition>
+    </div>
+  </div>
 </template>
 <style>
 .keyed {

packages-private/vapor-e2e-test/transition/components/VdomComp.vue

@@ -0,0 +1,6 @@
+<script setup>
+const msg = 'vdom comp'
+</script>
+<template>
+    <div>{{ msg }}</div>
+</template>

packages-private/vapor-e2e-test/transition/main.ts

@@ -1,5 +1,5 @@
-import { createVaporApp } from 'vue'
+import { createVaporApp, vaporInteropPlugin } from 'vue'
 import App from './App.vue'
 import './style.css'
 
-createVaporApp(App).mount('#app')
+createVaporApp(App).use(vaporInteropPlugin).mount('#app')