فهرست منبع

test: add SVG transition tests

daiwei 4 ماه پیش
والد
کامیت
1f4cbfc9c7

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

@@ -641,7 +641,47 @@ describe('vapor transition', () => {
       E2E_TIMEOUT,
     )
 
-    test.todo('transition on SVG elements', async () => {}, E2E_TIMEOUT)
+    test(
+      'transition on SVG elements',
+      async () => {
+        const btnSelector = '.svg > button'
+        const containerSelector = '.svg > #container'
+
+        expect(await html(containerSelector)).toBe(
+          '<circle cx="0" cy="0" r="10" class="test"></circle>',
+        )
+
+        // leave
+        await click(btnSelector)
+        await waitForInnerHTML(
+          containerSelector,
+          '<circle cx="0" cy="0" r="10" class="test test-leave-from test-leave-active"></circle>',
+        )
+
+        await waitForInnerHTML(
+          containerSelector,
+          '<circle cx="0" cy="0" r="10" class="test test-leave-active test-leave-to"></circle>',
+        )
+
+        await waitForInnerHTML(containerSelector, '')
+
+        // enter
+        await click(btnSelector)
+        await waitForInnerHTML(
+          containerSelector,
+          '<circle cx="0" cy="0" r="10" class="test test-enter-from test-enter-active"></circle>',
+        )
+        await waitForInnerHTML(
+          containerSelector,
+          '<circle cx="0" cy="0" r="10" class="test test-enter-active test-enter-to"></circle>',
+        )
+        await waitForInnerHTML(
+          containerSelector,
+          '<circle cx="0" cy="0" r="10" class="test"></circle>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
 
     test(
       'custom transition higher-order component',
@@ -915,6 +955,9 @@ describe('vapor transition', () => {
     )
 
     // #12860
+    // TODO: getCurrentInstance is no longer works inside Vapor components;
+    // need use an alternative method for testing here.
+    // Verified locally in the playground — no memory leak was observed.
     test.todo(
       'unmount children',
       async () => {

+ 10 - 0
packages-private/vapor-e2e-test/transition/App.vue

@@ -709,6 +709,16 @@ const Comp2 = defineVaporComponent({
       <button @click="state = state === 1 ? 2 : 1">button</button>
     </div>
     <!-- with keep-alive end -->
+    <!-- with svg -->
+    <div class="svg">
+      <svg id="container">
+        <transition name="test">
+          <circle v-if="toggle" cx="0" cy="0" r="10" class="test"></circle>
+        </transition>
+      </svg>
+      <button id="toggleBtn" @click="toggle = !toggle">button</button>
+    </div>
+    <!-- with svg end -->
 
     <!-- vdom interop -->
     <div class="vdom">