test(runtime-vapor): cover vapor component moves in vdom TransitionGroup

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

@@ -196,6 +196,44 @@ describe('vdom transition', () => {
     },
     E2E_TIMEOUT,
   )
+
+  test('keyed vapor component move after key change', async () => {
+    const btnSelector = '.trans-group-vapor-component-move > button'
+    const containerSelector = '.trans-group-vapor-component-move > div'
+
+    await expect
+      .element(css(containerSelector))
+      .toContainHTML(
+        `<div class="item-wrapper">` +
+          `<div class="item closed" id="item-1"><div class="item-inner">item 1</div></div>` +
+          `<div class="item closed" id="item-2"><div class="item-inner">item 2</div></div>` +
+          `</div>`,
+      )
+
+    click(btnSelector)
+    await nextTick()
+    await nextFrame()
+
+    await expect
+      .element(css(containerSelector))
+      .toContainHTML(
+        `<div class="item-wrapper">` +
+          `<div class="item closed group-leave-from group-leave-active" id="item-1"><div class="item-inner">item 1</div></div>` +
+          `<div class="item opened group-enter-from group-enter-active" id="item-1"><div class="item-inner">item 1</div></div>` +
+          `<div class="item closed group-move" id="item-2" style=""><div class="item-inner">item 2</div></div>` +
+          `</div>`,
+      )
+
+    await transitionFinish()
+    await expect
+      .element(css(containerSelector))
+      .toContainHTML(
+        `<div class="item-wrapper">` +
+          `<div class="item opened" id="item-1"><div class="item-inner">item 1</div></div>` +
+          `<div class="item closed" id="item-2" style=""><div class="item-inner">item 2</div></div>` +
+          `</div>`,
+      )
+  })
 })
 
 describe('vdom transition-group', () => {

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

@@ -4,6 +4,7 @@ import VaporComp from './components/VaporComp.vue'
 import VaporCompA from '../transition/components/VaporCompA.vue'
 import VdomComp from '../transition/components/VdomComp.vue'
 import VaporSlot from '../transition/components/VaporSlot.vue'
+import VdomTransitionGroup from './components/VdomTransitionGroup.vue'
 
 const msg = ref('hello')
 const passSlot = ref(true)
@@ -67,5 +68,6 @@ const enterClick = () => items.value.push('d', 'e')
         </transition-group>
       </div>
     </div>
+    <VdomTransitionGroup />
   </div>
 </template>

packages-private/vapor-e2e-test/interop/components/VdomTransitionGroup.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import VaporExpandingItem from '../../transition-group/components/VaporExpandingItem.vue'
+
+const items = ref(
+  [...Array(2)].map((_, i) => ({
+    id: i + 1,
+    isOpened: false,
+  })),
+)
+
+function toggleExpansion() {
+  items.value[0].isOpened = !items.value[0].isOpened
+}
+</script>
+
+<template>
+  <div class="trans-group-vapor-component-move">
+    <button @click="toggleExpansion">toggle expansion of first element</button>
+    <div>
+      <transition-group name="group" tag="div" class="item-wrapper">
+        <VaporExpandingItem
+          v-for="i in items"
+          :key="`${i.id}-${i.isOpened ? 'true' : 'false'}`"
+          :id="i.id"
+          :is-opened="i.isOpened"
+        />
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<style>
+.item-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  width: 430px;
+}
+
+.group-move,
+.group-enter-active,
+.group-leave-active {
+  transition: all 50ms cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.group-leave-active {
+  position: absolute;
+}
+</style>