test: add reusable transition group tests

Author: edison1105

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

@@ -369,6 +369,44 @@ describe('vapor transition-group', () => {
     expect(calls).toContain('afterEnter')
   })
 
+  test(
+    'reusable transition group',
+    async () => {
+      const btnSelector = '.reusable-transition-group > button'
+      const containerSelector = '.reusable-transition-group > div'
+
+      expect(await html(containerSelector)).toBe(
+        `<div class="test">a</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test">c</div>`,
+      )
+
+      expect(
+        (await transitionStart(btnSelector, containerSelector)).innerHTML,
+      ).toBe(
+        `<div class="test group-enter-from group-enter-active">d</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test group-move" style="">a</div>` +
+          `<div class="test group-leave-from group-leave-active group-move" style="">c</div>`,
+      )
+
+      await nextFrame()
+      expect(await html(containerSelector)).toBe(
+        `<div class="test group-enter-active group-enter-to">d</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test group-move" style="">a</div>` +
+          `<div class="test group-leave-active group-move group-leave-to" style="">c</div>`,
+      )
+      await transitionFinish(duration * 2)
+      expect(await html(containerSelector)).toBe(
+        `<div class="test">d</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test" style="">a</div>`,
+      )
+    },
+    E2E_TIMEOUT,
+  )
+
   test('interop: render vdom component', async () => {
     const btnSelector = '.interop > button'
     const containerSelector = '.interop > div'

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

@@ -1,6 +1,7 @@
 <script setup vapor>
 import { ref } from 'vue'
 import VdomComp from './components/VdomComp.vue'
+import MyTransitionGroup from './components/MyTransitionGroup.vue'
 
 const items = ref(['a', 'b', 'c'])
 const enterClick = () => items.value.push('d', 'e')
@@ -108,6 +109,14 @@ const interopClick = () => (items.value = ['b', 'c', 'd'])
         </transition-group>
       </div>
     </div>
+    <div class="reusable-transition-group">
+      <button @click="moveClick">reusable button</button>
+      <div>
+        <MyTransitionGroup name="group">
+          <div v-for="item in items" :key="item" class="test">{{ item }}</div>
+        </MyTransitionGroup>
+      </div>
+    </div>
     <div class="interop">
       <button @click="interopClick">interop button</button>
       <div>

packages-private/vapor-e2e-test/transition-group/components/MyTransitionGroup.vue

@@ -0,0 +1,7 @@
+<script setup vapor></script>
+
+<template>
+  <TransitionGroup>
+    <slot />
+  </TransitionGroup>
+</template>