test(e2e): stabilize vapor e2e transition

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

@@ -6,6 +6,14 @@ import { expect } from 'vitest'
 import { startE2ETestServer } from './server'
 const { page, html, transitionStart, waitForInnerHTML } = setupPuppeteer()
 
+const appearTransitionStart = (containerSelector: string) =>
+  page().evaluate(selector => {
+    ;(window as any).setAppear()
+    return Promise.resolve().then(
+      () => (document.querySelector(selector) as HTMLElement)!.innerHTML,
+    )
+  }, containerSelector)
+
 function toSlug(value: string) {
   return value
     .trim()
@@ -278,12 +286,8 @@ describe('vapor transition-group', () => {
 
       expect(await html('.appear')).toBe(`<button>appear button</button>`)
 
-      await page().evaluate(() => {
-        return (window as any).setAppear()
-      })
-
       // appear
-      expect(await html(containerSelector)).toBe(
+      expect(await appearTransitionStart(containerSelector)).toBe(
         `<div class="test test-appear-from test-appear-active">a</div>` +
           `<div class="test test-appear-from test-appear-active">b</div>` +
           `<div class="test test-appear-from test-appear-active">c</div>`,
@@ -411,12 +415,8 @@ describe('vapor transition-group', () => {
 
     expect(await html('.events')).toBe(`<button>events button</button>`)
 
-    await page().evaluate(() => {
-      return (window as any).setAppear()
-    })
-
     // appear
-    expect(await html(containerSelector)).toBe(
+    expect(await appearTransitionStart(containerSelector)).toBe(
       `<div class="test test-appear-from test-appear-active">a</div>` +
         `<div class="test test-appear-from test-appear-active">b</div>` +
         `<div class="test test-appear-from test-appear-active">c</div>`,

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

@@ -1843,9 +1843,9 @@ describe('vapor transition', () => {
           `<div class="v-enter-active v-enter-to">1</div><div class="v-enter-from v-enter-active">2</div>`,
         )
 
-        await click(btnSelector)
-        await waitForInnerHTML(
-          containerSelector,
+        expect(
+          (await transitionStart(btnSelector, containerSelector)).innerHTML,
+        ).toBe(
           `<div class="v-enter-from v-enter-active">2</div><div class="v-enter-from v-enter-active">1</div>`,
         )
 
@@ -1855,9 +1855,9 @@ describe('vapor transition', () => {
         )
         await waitForInnerHTML(containerSelector, `<div class="">1</div>`)
 
-        await click(btnSelector)
-        await waitForInnerHTML(
-          containerSelector,
+        expect(
+          (await transitionStart(btnSelector, containerSelector)).innerHTML,
+        ).toBe(
           `<div class="">1</div><div class="v-enter-from v-enter-active">2</div>`,
         )
         await waitForInnerHTML(