wip: fix tests

diff --git a/packages-private/vapor-e2e-test/__tests__/transition.spec.ts b/packages-private/vapor-e2e-test/__tests__/transition.spec.ts
index 05e39fa5dfce5f960e0c76a62c6a59e3616d35b7..e532e5eed3eb2dc5c1c7766f4483634b734f5a51 100644 (file)
--- a/packages-private/vapor-e2e-test/__tests__/transition.spec.ts
+++ b/packages-private/vapor-e2e-test/__tests__/transition.spec.ts
@@ -32,11 +32,8 @@ describe('vapor transition', () => {
     await page().waitForSelector('#app')
   })
 
-  const classWhenTransitionStart = async (
-    btnSelector: string,
-    containerSelector: string,
-  ) => {
-    return page().evaluate(
+  const transitionStart = (btnSelector: string, containerSelector: string) =>
+    page().evaluate(
       ([btnSel, containerSel]) => {
         ;(document.querySelector(btnSel) as HTMLElement)!.click()
         return Promise.resolve().then(() => {
@@ -49,7 +46,28 @@ describe('vapor transition', () => {
       },
       [btnSelector, containerSelector],
     )
-  }
+
+  const waitForElement = (
+    selector: string,
+    text: string,
+    classNames: string[], // if empty, check for no classes
+    timeout = 2000,
+  ) =>
+    page().waitForFunction(
+      (sel, expectedText, expectedClasses) => {
+        const el = document.querySelector(sel)!
+        const hasClasses =
+          expectedClasses.length === 0
+            ? el.classList.length === 0
+            : expectedClasses.every(c => el.classList.contains(c))
+        const hasText = el?.textContent?.includes(expectedText)
+        return !!el && hasClasses && hasText
+      },
+      { timeout },
+      selector,
+      text,
+      classNames,
+    )
 
   test(
     'should work with v-show',
@@ -61,8 +79,7 @@ describe('vapor transition', () => {
 
       // leave
       expect(
-        (await classWhenTransitionStart(btnSelector, containerSelector))
-          .classNames,
+        (await transitionStart(btnSelector, containerSelector)).classNames,
       ).toStrictEqual(['v-leave-from', 'v-leave-active'])
 
       await nextFrame()
@@ -77,8 +94,7 @@ describe('vapor transition', () => {
 
       // enter
       expect(
-        (await classWhenTransitionStart(btnSelector, containerSelector))
-          .classNames,
+        (await transitionStart(btnSelector, containerSelector)).classNames,
       ).toStrictEqual(['v-enter-from', 'v-enter-active'])
 
       await nextFrame()
@@ -108,8 +124,7 @@ describe('vapor transition', () => {
 
       // leave
       expect(
-        (await classWhenTransitionStart(btnSelector, containerSelector))
-          .classNames,
+        (await transitionStart(btnSelector, containerSelector)).classNames,
       ).toStrictEqual(['v-leave-from', 'v-leave-active'])
 
       await nextFrame()
@@ -124,8 +139,7 @@ describe('vapor transition', () => {
 
       // enter
       expect(
-        (await classWhenTransitionStart(btnSelector, containerSelector))
-          .classNames,
+        (await transitionStart(btnSelector, containerSelector)).classNames,
       ).toStrictEqual(['v-enter-from', 'v-enter-active'])
 
       await nextFrame()
@@ -151,8 +165,7 @@ describe('vapor transition', () => {
 
       // change key
       expect(
-        (await classWhenTransitionStart(btnSelector, containerSelector))
-          .classNames,
+        (await transitionStart(btnSelector, containerSelector)).classNames,
       ).toStrictEqual(['v-leave-from', 'v-leave-active'])
 
       await nextFrame()
@@ -167,8 +180,7 @@ describe('vapor transition', () => {
 
       // change key again
       expect(
-        (await classWhenTransitionStart(btnSelector, containerSelector))
-          .classNames,
+        (await transitionStart(btnSelector, containerSelector)).classNames,
       ).toStrictEqual(['v-leave-from', 'v-leave-active'])
 
       await nextFrame()
@@ -189,13 +201,14 @@ describe('vapor transition', () => {
     async () => {
       const btnSelector = '.out-in > button'
       const containerSelector = '.out-in > div'
+      const childSelector = `${containerSelector} > div`
 
       expect(await html(containerSelector)).toBe(`<div>vapor compB</div>`)
 
       // compB -> compA
+      // compB leave
       expect(
-        (await classWhenTransitionStart(btnSelector, containerSelector))
-          .innerHTML,
+        (await transitionStart(btnSelector, containerSelector)).innerHTML,
       ).toBe(`<div class="fade-leave-from fade-leave-active">vapor compB</div>`)
 
       await nextFrame()
@@ -203,10 +216,11 @@ describe('vapor transition', () => {
         `<div class="fade-leave-active fade-leave-to">vapor compB</div>`,
       )
 
-      await page().waitForSelector(`${containerSelector} > div.fade-enter-from`)
-      expect(await html(containerSelector)).toBe(
-        `<div class="fade-enter-from fade-enter-active">vapor compA</div>`,
-      )
+      // compA enter
+      await waitForElement(childSelector, 'vapor compA', [
+        'fade-enter-from',
+        'fade-enter-active',
+      ])
 
       await nextFrame()
       expect(await html(containerSelector)).toBe(
@@ -220,9 +234,9 @@ describe('vapor transition', () => {
       )
 
       // compA -> compB
+      // compA leave
       expect(
-        (await classWhenTransitionStart(btnSelector, containerSelector))
-          .innerHTML,
+        (await transitionStart(btnSelector, containerSelector)).innerHTML,
       ).toBe(`<div class="fade-leave-from fade-leave-active">vapor compA</div>`)
 
       await nextFrame()
@@ -230,14 +244,18 @@ describe('vapor transition', () => {
         `<div class="fade-leave-active fade-leave-to">vapor compA</div>`,
       )
 
-      await transitionFinish()
+      // compB enter
+      await waitForElement(childSelector, 'vapor compB', [
+        'fade-enter-from',
+        'fade-enter-active',
+      ])
+
       await nextFrame()
       expect(await html(containerSelector)).toBe(
         `<div class="fade-enter-active fade-enter-to">vapor compB</div>`,
       )
 
       await transitionFinish()
-      await nextFrame()
       expect(await html(containerSelector)).toBe(
         `<div class="">vapor compB</div>`,
       )
@@ -245,20 +263,19 @@ describe('vapor transition', () => {
     E2E_TIMEOUT,
   )
 
-  test.todo(
+  test(
     'should work with in-out mode',
     async () => {
       const btnSelector = '.in-out > button'
       const containerSelector = '.in-out > div'
+      const childSelector = `${containerSelector} > div`
 
       expect(await html(containerSelector)).toBe(`<div>vapor compB</div>`)
 
       // compA enter
-      const { innerHTML } = await classWhenTransitionStart(
-        btnSelector,
-        containerSelector,
-      )
-      expect(innerHTML).toBe(
+      expect(
+        (await transitionStart(btnSelector, containerSelector)).innerHTML,
+      ).toBe(
         `<div>vapor compB</div><div class="fade-enter-from fade-enter-active">vapor compA</div>`,
       )
 
@@ -267,15 +284,11 @@ describe('vapor transition', () => {
         `<div>vapor compB</div><div class="fade-enter-active fade-enter-to">vapor compA</div>`,
       )
 
-      await transitionFinish()
-      expect(await html(containerSelector)).toBe(
-        `<div>vapor compB</div><div class="">vapor compA</div>`,
-      )
-
       // compB leave
-      expect(await html(containerSelector)).toBe(
-        `<div class="fade-leave-from fade-leave-active">vapor compB</div><div class="">vapor compA</div>`,
-      )
+      await waitForElement(childSelector, 'vapor compB', [
+        'fade-leave-from',
+        'fade-leave-active',
+      ])
 
       await nextFrame()
       expect(await html(containerSelector)).toBe(
@@ -283,7 +296,6 @@ describe('vapor transition', () => {
       )
 
       await transitionFinish()
-      await nextFrame()
       expect(await html(containerSelector)).toBe(
         `<div class="">vapor compA</div>`,
       )

diff --git a/packages-private/vapor-e2e-test/transition/App.vue b/packages-private/vapor-e2e-test/transition/App.vue
index 3166f274d1bf8bae2d999259b37f520cc1548c24..8d4d31f7bcdf509299b076c30361326364a6b5f7 100644 (file)
--- a/packages-private/vapor-e2e-test/transition/App.vue
+++ b/packages-private/vapor-e2e-test/transition/App.vue
@@ -6,7 +6,7 @@ const count = ref(0)
 
 import VaporCompA from './components/VaporCompA.vue'
 import VaporCompB from './components/VaporCompB.vue'
-const activeComponent = shallowRef(VaporCompA)
+const activeComponent = shallowRef(VaporCompB)
 function toggleComponent() {
   activeComponent.value =
     activeComponent.value === VaporCompA ? VaporCompB : VaporCompA

diff --git a/packages-private/vapor-e2e-test/transition/components/VaporCompA.vue b/packages-private/vapor-e2e-test/transition/components/VaporCompA.vue
index c22f3b6bbc5ee10d440165cd8fe736be971ddd40..40b09eaf45b4e0a19bc88acc9ced2d463cdba4e4 100644 (file)
--- a/packages-private/vapor-e2e-test/transition/components/VaporCompA.vue
+++ b/packages-private/vapor-e2e-test/transition/components/VaporCompA.vue
@@ -1,5 +1,5 @@
 <script vapor>
-const msg = 'vapor compB'
+const msg = 'vapor compA'
 </script>
 <template>
   <div>{{ msg }}</div>

diff --git a/packages-private/vapor-e2e-test/transition/components/VaporCompB.vue b/packages-private/vapor-e2e-test/transition/components/VaporCompB.vue
index 40b09eaf45b4e0a19bc88acc9ced2d463cdba4e4..c22f3b6bbc5ee10d440165cd8fe736be971ddd40 100644 (file)
--- a/packages-private/vapor-e2e-test/transition/components/VaporCompB.vue
+++ b/packages-private/vapor-e2e-test/transition/components/VaporCompB.vue
@@ -1,5 +1,5 @@
 <script vapor>
-const msg = 'vapor compA'
+const msg = 'vapor compB'
 </script>
 <template>
   <div>{{ msg }}</div>