test(vapor-e2e): port #12091 prevent-enter-when-leaving transition case

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

@@ -959,6 +959,31 @@ describe('vapor transition', () => {
       },
       E2E_TIMEOUT,
     )
+
+    test(
+      'prevent enter when leaving',
+      async () => {
+        const sectionSelector = '.if-prevent-enter-when-leaving'
+        const btnSelector = `${sectionSelector} > button`
+        const containerSelector = `${sectionSelector} .container`
+
+        await click(btnSelector)
+        await waitForInnerHTML(containerSelector, '')
+        await nextTick()
+
+        const calls = await page().evaluate(() => {
+          return (window as any).getCalls('preventEnterWhenLeaving')
+        })
+        expect(calls).toStrictEqual([
+          'beforeEnter',
+          'beforeLeave',
+          'leave',
+          'afterLeave',
+        ])
+        expect(await html(containerSelector)).toBe('')
+      },
+      E2E_TIMEOUT,
+    )
   })
 
   describe('transition with KeepAlive', () => {

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

@@ -40,6 +40,7 @@ let calls = {
   withAppear: [],
   cssFalse: [],
   ifInOut: [],
+  preventEnterWhenLeaving: [],
 
   show: [],
   showLeaveCancel: [],
@@ -52,6 +53,22 @@ let calls = {
 window.getCalls = key => calls[key]
 window.resetCalls = key => (calls[key] = [])
 
+const preventEnterToggle = ref(false)
+const preventEnterVisible = ref(true)
+const togglePreventEnter = () => {
+  preventEnterToggle.value = !preventEnterToggle.value
+  if (preventEnterToggle.value) {
+    preventEnterVisible.value = true
+  }
+}
+
+const PreventEnterComp = defineVaporComponent({
+  setup() {
+    preventEnterVisible.value = false
+    return []
+  },
+})
+
 const activeComponent = shallowRef(VaporCompB)
 function toggleComponent() {
   activeComponent.value =
@@ -550,6 +567,36 @@ const Comp2 = defineVaporComponent({
       </div>
       <button @click="changeViewInOut">button</button>
     </div>
+    <div class="if-prevent-enter-when-leaving">
+      <div class="content" v-if="preventEnterToggle">
+        <div class="container">
+          <transition
+            appear
+            @before-enter="
+              () => calls.preventEnterWhenLeaving.push('beforeEnter')
+            "
+            @enter="() => calls.preventEnterWhenLeaving.push('enter')"
+            @enter-cancelled="
+              () => calls.preventEnterWhenLeaving.push('enterCancelled')
+            "
+            @after-enter="
+              () => calls.preventEnterWhenLeaving.push('afterEnter')
+            "
+            @before-leave="
+              () => calls.preventEnterWhenLeaving.push('beforeLeave')
+            "
+            @leave="() => calls.preventEnterWhenLeaving.push('leave')"
+            @after-leave="
+              () => calls.preventEnterWhenLeaving.push('afterLeave')
+            "
+          >
+            <div v-if="preventEnterVisible">content</div>
+          </transition>
+        </div>
+        <PreventEnterComp />
+      </div>
+      <button @click="togglePreventEnter">button</button>
+    </div>
     <!-- work with vif end -->
 
     <!-- work with vshow  -->