test: add more tests

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

@@ -214,8 +214,141 @@ describe('vapor transition', () => {
       },
       E2E_TIMEOUT,
     )
-    test.todo('transition events without appear', async () => {}, E2E_TIMEOUT)
+
-    test.todo('events with arguments', async () => {}, E2E_TIMEOUT)
+    test(
+      'transition events without appear',
+      async () => {
+        const btnSelector = '.if-events-without-appear > button'
+        const containerSelector = '.if-events-without-appear > div'
+        const childSelector = `${containerSelector} > div`
+
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+        // leave
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
+
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls('withOutAppear')
+        })
+        expect(calls).toStrictEqual(['beforeLeave', 'onLeave'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+
+        expect(
+          await page().evaluate(() => {
+            return (window as any).getCalls('withOutAppear')
+          }),
+        ).not.contain('afterLeave')
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe('')
+        expect(
+          await page().evaluate(() => {
+            return (window as any).getCalls('withOutAppear')
+          }),
+        ).toStrictEqual(['beforeLeave', 'onLeave', 'afterLeave'])
+
+        await page().evaluate(() => {
+          ;(window as any).resetCalls('withOutAppear')
+        })
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('withOutAppear')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        expect(
+          await page().evaluate(() => {
+            return (window as any).getCalls('withOutAppear')
+          }),
+        ).not.contain('afterEnter')
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+        expect(
+          await page().evaluate(() => {
+            return (window as any).getCalls('withOutAppear')
+          }),
+        ).toStrictEqual(['beforeEnter', 'onEnter', 'afterEnter'])
+      },
+      E2E_TIMEOUT,
+    )
+
+    test(
+      'events with arguments',
+      async () => {
+        const btnSelector = '.if-events-with-args > button'
+        const containerSelector = '.if-events-with-args > div'
+        const childSelector = `${containerSelector} > div`
+
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+
+        // leave
+        await click(btnSelector)
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls('withArgs')
+        })
+        expect(calls).toStrictEqual(['beforeLeave', 'onLeave'])
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'before-leave',
+          'leave',
+        ])
+
+        await timeout(200 + buffer)
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('withArgs')
+        })
+        expect(calls).toStrictEqual(['beforeLeave', 'onLeave', 'afterLeave'])
+        expect(await html(containerSelector)).toBe('')
+
+        await page().evaluate(() => {
+          ;(window as any).resetCalls('withArgs')
+        })
+
+        // enter
+        await click(btnSelector)
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('withArgs')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter'])
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'before-enter',
+          'enter',
+        ])
+
+        await timeout(200 + buffer)
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('withArgs')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter', 'afterEnter'])
+        expect(await html(containerSelector)).toBe(
+          '<div class="test before-enter enter after-enter">content</div>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
+
     test.todo('onEnterCancelled', async () => {}, E2E_TIMEOUT)
     test.todo('transition on appear', async () => {}, E2E_TIMEOUT)
     test.todo('transition events with appear', async () => {}, E2E_TIMEOUT)
@@ -353,11 +486,11 @@ describe('vapor transition', () => {
       await nextFrame()
       expect(await isVisible(containerSelector)).toBe(true)
 
-      const calls = await page().evaluate(() => {
+      expect(
-        return (window as any).calls
+        await page().evaluate(() => {
-      })
+          return (window as any).getCalls('basic')
-
+        }),
-      expect(calls).toStrictEqual([
+      ).toStrictEqual([
         'beforeAppear',
         'onAppear',
         'afterAppear',

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

@@ -4,8 +4,13 @@ const show = ref(true)
 const toggle = ref(true)
 const count = ref(0)
 
-const calls = []
+let calls = {
-window.calls = calls
+  basic: [],
+  withOutAppear: [],
+  withArgs: []
+}
+window.getCalls = (key) => calls[key]
+window.resetCalls = (key) => calls[key] = []
 
 import VaporCompA from './components/VaporCompA.vue'
 import VaporCompB from './components/VaporCompB.vue'
@@ -47,14 +52,8 @@ const name = ref('test')
     </div>
     <div class="if-custom-classes">
       <div>
-        <transition
+        <transition enter-from-class="hello-from" enter-active-class="hello-active" enter-to-class="hello-to"
-          enter-from-class="hello-from"
+          leave-from-class="bye-from" leave-active-class="bye-active" leave-to-class="bye-to">
-          enter-active-class="hello-active"
-          enter-to-class="hello-to"
-          leave-from-class="bye-from"
-          leave-active-class="bye-active"
-          leave-to-class="bye-to"
-        >
           <div v-if="toggle" class="test">content</div>
         </transition>
       </div>
@@ -69,6 +68,44 @@ const name = ref('test')
       <button class="toggle" @click="toggle = !toggle">button</button>
       <button class="change" @click="name = 'changed'">{{ name }}</button>
     </div>
+    <div class="if-events-without-appear">
+      <div>
+        <transition name="test" @before-enter="() => calls.withOutAppear.push('beforeEnter')"
+          @enter="() => calls.withOutAppear.push('onEnter')" @after-enter="() => calls.withOutAppear.push('afterEnter')"
+          @beforeLeave="() => calls.withOutAppear.push('beforeLeave')"
+          @leave="() => calls.withOutAppear.push('onLeave')" @afterLeave="() => calls.withOutAppear.push('afterLeave')">
+          <div v-if="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
+    </div>
+    <div class="if-events-with-args">
+      <div id="container">
+        <transition :css="false" name="test" @before-enter="(el) => {
+          calls.withArgs.push('beforeEnter');
+          el.classList.add('before-enter')
+        }" @enter="(el, done) => {
+          calls.withArgs.push('onEnter');
+          el.classList.add('enter')
+          setTimeout(done, 200)
+        }" @after-enter="(el) => {
+          calls.withArgs.push('afterEnter');
+          el.classList.add('after-enter')
+        }" @before-leave="(el) => {
+          calls.withArgs.push('beforeLeave');
+          el.classList.add('before-leave')
+        }" @leave="(el, done) => {
+          calls.withArgs.push('onLeave');
+          el.classList.add('leave')
+          setTimeout(done, 200)
+        }" @after-leave="() => {
+          calls.withArgs.push('afterLeave');
+        }">
+          <div v-if="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button id="toggleBtn" @click="toggle = !toggle">button</button>
+    </div>
 
     <div class="vshow">
       <button @click="show = !show">Show</button>
@@ -78,18 +115,11 @@ const name = ref('test')
     </div>
     <div class="vif">
       <button @click="toggle = !toggle">Toggle</button>
-      <Transition
+      <Transition appear @beforeEnter="() => calls.basic.push('beforeEnter')" @enter="() => calls.basic.push('onEnter')"
-        appear
+        @afterEnter="() => calls.basic.push('afterEnter')" @beforeLeave="() => calls.basic.push('beforeLeave')"
-        @beforeEnter="() => calls.push('beforeEnter')"
+        @leave="() => calls.basic.push('onLeave')" @afterLeave="() => calls.basic.push('afterLeave')"
-        @enter="() => calls.push('onEnter')"
+        @beforeAppear="() => calls.basic.push('beforeAppear')" @appear="() => calls.basic.push('onAppear')"
-        @afterEnter="() => calls.push('afterEnter')"
+        @afterAppear="() => calls.basic.push('afterAppear')">
-        @beforeLeave="() => calls.push('beforeLeave')"
-        @leave="() => calls.push('onLeave')"
-        @afterLeave="() => calls.push('afterLeave')"
-        @beforeAppear="() => calls.push('beforeAppear')"
-        @appear="() => calls.push('onAppear')"
-        @afterAppear="() => calls.push('afterAppear')"
-      >
         <h1 v-if="toggle">vIf</h1>
       </Transition>
     </div>
@@ -152,7 +182,7 @@ const name = ref('test')
 }
 </style>
 <style>
-.transition-container > div {
+.transition-container>div {
   padding: 15px;
   border: 1px solid #f7f7f7;
   margin-top: 15px;

packages/compiler-vapor/src/generators/component.ts

@@ -134,7 +134,10 @@ function processInlineHandlers(
         const isMemberExp = isMemberExpression(value, context.options)
         // cache inline handlers (fn expression or inline statement)
         if (!isMemberExp) {
-          const name = getUniqueHandlerName(context, `_on_${prop.key.content}`)
+          const name = getUniqueHandlerName(
+            context,
+            `_on_${prop.key.content.replace(/-/g, '_')}`,
+          )
           handlers.push({ name, value })
           ids[name] = null
           // replace the original prop value with the handler name