test: add more tests

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

@@ -903,128 +903,353 @@ describe('vapor transition', () => {
     )
   })
 
+  describe.todo('transition with KeepAlive', () => {})
+  describe.todo('transition with Suspense', () => {})
+  describe.todo('transition with Teleport', () => {})
+
   describe('transition with v-show', () => {
-    test.todo('named transition with v-show', async () => {}, E2E_TIMEOUT)
+    test(
-    test.todo('transition events with v-show', async () => {}, E2E_TIMEOUT)
+      'named transition with v-show',
-    test.todo('onLeaveCancelled (v-show only)', async () => {}, E2E_TIMEOUT)
+      async () => {
-    test.todo('transition on appear with v-show', async () => {}, E2E_TIMEOUT)
+        const btnSelector = '.show-named > button'
+        const containerSelector = '.show-named > div'
+        const childSelector = `${containerSelector} > div`
+
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+        expect(await isVisible(childSelector)).toBe(true)
+
+        // leave
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+        await transitionFinish()
+        expect(await isVisible(childSelector)).toBe(false)
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          '<div class="test" style="">content</div>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
+
+    test(
+      'transition events with v-show',
+      async () => {
+        const btnSelector = '.show-events > button'
+        const containerSelector = '.show-events > 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('show')
+        })
+        expect(calls).toStrictEqual(['beforeLeave', 'onLeave'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('show')
+        })
+        expect(calls).not.contain('afterLeave')
+        await transitionFinish()
+        expect(await isVisible(childSelector)).toBe(false)
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('show')
+        })
+        expect(calls).toStrictEqual(['beforeLeave', 'onLeave', 'afterLeave'])
+
+        // clear calls
+        await page().evaluate(() => {
+          ;(window as any).resetCalls('show')
+        })
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('show')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter'])
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          '<div class="test" style="">content</div>',
+        )
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('show')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter', 'afterEnter'])
+      },
+      E2E_TIMEOUT,
+    )
+
+    test(
+      'onLeaveCancelled (v-show only)',
+      async () => {
+        const btnSelector = '.show-leave-cancelled > button'
+        const containerSelector = '.show-leave-cancelled > 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'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+
+        // cancel (enter)
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls('showLeaveCancel')
+        })
+        expect(calls).toStrictEqual(['leaveCancelled'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        await transitionFinish()
+        expect(await isVisible(childSelector)).toBe(true)
+      },
+      E2E_TIMEOUT,
+    )
+
+    test.todo(
+      'transition on appear with v-show',
+      async () => {
+        const btnSelector = '.show-appear > button'
+        const containerSelector = '.show-appear > div'
+        const childSelector = `${containerSelector} > div`
+      },
+      E2E_TIMEOUT,
+    )
+
     test.todo(
       'transition events should not call onEnter with v-show false',
       async () => {},
       E2E_TIMEOUT,
     )
+
     test.todo('transition on appear with v-show', async () => {}, E2E_TIMEOUT)
   })
 
   describe('explicit durations', () => {
-    test.todo('single value', async () => {}, E2E_TIMEOUT)
+    test(
-    test.todo('enter with explicit durations', async () => {}, E2E_TIMEOUT)
+      'single value',
-    test.todo('leave with explicit durations', async () => {}, E2E_TIMEOUT)
+      async () => {
-    test.todo('separate enter and leave', async () => {}, E2E_TIMEOUT)
+        const btnSelector = '.duration-single-value > button'
-    test.todo('warn invalid durations', async () => {}, E2E_TIMEOUT)
+        const containerSelector = '.duration-single-value > 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'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+        await transitionFinish(duration * 2)
+        expect(await html(containerSelector)).toBe('')
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        await transitionFinish(duration * 2)
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
+
+    test(
+      'enter with explicit durations',
+      async () => {
+        const btnSelector = '.duration-enter > button'
+        const containerSelector = '.duration-enter > 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'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe('')
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        await transitionFinish(duration * 2)
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
+
+    test(
+      'leave with explicit durations',
+      async () => {
+        const btnSelector = '.duration-leave > button'
+        const containerSelector = '.duration-leave > 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'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+        await transitionFinish(duration * 2)
+        expect(await html(containerSelector)).toBe('')
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
+
+    test(
+      'separate enter and leave',
+      async () => {
+        const btnSelector = '.duration-enter-leave > button'
+        const containerSelector = '.duration-enter-leave > 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'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+        await transitionFinish(duration * 2)
+        expect(await html(containerSelector)).toBe('')
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        await transitionFinish(duration * 4)
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+      },
+      E2E_TIMEOUT,
+    )
   })
 
-  test(
-    'should work with v-show',
-    async () => {
-      const btnSelector = '.vshow > button'
-      const containerSelector = '.vshow > h1'
-
-      expect(await text(containerSelector)).toContain('vShow')
-
-      // leave
-      expect(
-        (await transitionStart(btnSelector, containerSelector)).classNames,
-      ).toStrictEqual(['v-leave-from', 'v-leave-active'])
-
-      await nextFrame()
-      expect(await classList(containerSelector)).toStrictEqual([
-        'v-leave-active',
-        'v-leave-to',
-      ])
-
-      await transitionFinish()
-      await nextFrame()
-      expect(await isVisible(containerSelector)).toBe(false)
-
-      // enter
-      expect(
-        (await transitionStart(btnSelector, containerSelector)).classNames,
-      ).toStrictEqual(['v-enter-from', 'v-enter-active'])
-
-      await nextFrame()
-      expect(await classList(containerSelector)).toStrictEqual([
-        'v-enter-active',
-        'v-enter-to',
-      ])
-
-      await transitionFinish()
-      await nextFrame()
-      expect(await isVisible(containerSelector)).toBe(true)
-    },
-    E2E_TIMEOUT,
-  )
-
-  test(
-    'should work with v-if + appear',
-    async () => {
-      const btnSelector = '.vif > button'
-      const containerSelector = '.vif > h1'
-
-      // appear
-      expect(await classList(containerSelector)).contains('v-enter-active')
-      expect(await text(containerSelector)).toContain('vIf')
-      await transitionFinish()
-
-      // leave
-      await nextFrame()
-      expect(
-        (await transitionStart(btnSelector, containerSelector)).classNames,
-      ).toStrictEqual(['v-leave-from', 'v-leave-active'])
-
-      await nextFrame()
-      expect(await classList(containerSelector)).toStrictEqual([
-        'v-leave-active',
-        'v-leave-to',
-      ])
-
-      await transitionFinish()
-      expect(await count(containerSelector)).toBe(0)
-
-      // enter
-      expect(
-        (await transitionStart(btnSelector, containerSelector)).classNames,
-      ).toStrictEqual(['v-enter-from', 'v-enter-active'])
-
-      await nextFrame()
-      expect(await classList(containerSelector)).toStrictEqual([
-        'v-enter-active',
-        'v-enter-to',
-      ])
-
-      await transitionFinish()
-      await nextFrame()
-      expect(await isVisible(containerSelector)).toBe(true)
-
-      expect(
-        await page().evaluate(() => {
-          return (window as any).getCalls('basic')
-        }),
-      ).toStrictEqual([
-        'beforeAppear',
-        'onAppear',
-        'afterAppear',
-        'beforeLeave',
-        'onLeave',
-        'afterLeave',
-        'beforeEnter',
-        'onEnter',
-        'afterEnter',
-      ])
-    },
-    E2E_TIMEOUT,
-  )
-
   test(
     'should work with keyed element',
     async () => {

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

@@ -13,6 +13,7 @@ const toggle = ref(true)
 const count = ref(0)
 
 const timeout = (fn, time) => setTimeout(fn, time)
+const duration = typeof process !== 'undefined' && process.env.CI ? 200 : 50
 
 let calls = {
   basic: [],
@@ -22,6 +23,10 @@ let calls = {
   withAppear: [],
   cssFalse: [],
   ifInOut: [],
+
+  show: [],
+  showLeaveCancel: [],
+  showAppear: [],
 }
 window.getCalls = key => calls[key]
 window.resetCalls = key => (calls[key] = [])
@@ -88,6 +93,7 @@ function changeViewInOut() {
 
 <template>
   <div class="transition-container">
+    <!-- work with vif  -->
     <div class="if-basic">
       <div>
         <transition>
@@ -337,36 +343,111 @@ function changeViewInOut() {
       </div>
       <button @click="changeViewInOut">button</button>
     </div>
+    <!-- work with vif end -->
 
-    <div class="vshow">
+    <!-- work with vshow  -->
-      <button @click="show = !show">Show</button>
+    <div class="show-named">
-      <Transition>
+      <div>
-        <h1 v-show="show">vShow</h1>
+        <transition name="test">
-      </Transition>
+          <div v-show="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
     </div>
-    <div class="vif">
+    <div class="show-events">
-      <button @click="toggle = !toggle">Toggle</button>
+      <div>
-      <Transition
+        <transition
-        appear
+          name="test"
-        @beforeEnter="() => calls.basic.push('beforeEnter')"
+          @beforeEnter="() => calls.show.push('beforeEnter')"
-        @enter="() => calls.basic.push('onEnter')"
+          @enter="() => calls.show.push('onEnter')"
-        @afterEnter="() => calls.basic.push('afterEnter')"
+          @afterEnter="() => calls.show.push('afterEnter')"
-        @beforeLeave="() => calls.basic.push('beforeLeave')"
+          @beforeLeave="() => calls.show.push('beforeLeave')"
-        @leave="() => calls.basic.push('onLeave')"
+          @leave="() => calls.show.push('onLeave')"
-        @afterLeave="() => calls.basic.push('afterLeave')"
+          @afterLeave="() => calls.show.push('afterLeave')"
-        @beforeAppear="() => calls.basic.push('beforeAppear')"
+        >
-        @appear="() => calls.basic.push('onAppear')"
+          <div v-show="toggle" class="test">content</div>
-        @afterAppear="() => calls.basic.push('afterAppear')"
+        </transition>
-      >
+      </div>
-        <h1 v-if="toggle">vIf</h1>
+      <button @click="toggle = !toggle">button</button>
-      </Transition>
     </div>
+    <div class="show-leave-cancelled">
+      <div>
+        <transition
+          name="test"
+          @leave-cancelled="() => calls.showLeaveCancel.push('leaveCancelled')"
+        >
+          <div v-show="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">leave cancelled</button>
+    </div>
+    <div class="show-appear">
+      <div>
+        <transition
+          name="test"
+          appear
+          appear-from-class="test-appear-from"
+          appear-to-class="test-appear-to"
+          appear-active-class="test-appear-active"
+          @beforeEnter="() => calls.showAppear.push('beforeEnter')"
+          @enter="() => calls.showAppear.push('onEnter')"
+          @afterEnter="() => calls.showAppear.push('afterEnter')"
+        >
+          <div v-show="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
+    </div>
+    <!-- work with vshow end -->
+
+    <!-- explicit durations -->
+    <div class="duration-single-value">
+      <div>
+        <transition name="test" :duration="duration * 2">
+          <div v-if="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
+    </div>
+    <div class="duration-enter">
+      <div>
+        <transition name="test" :duration="{ enter: duration * 2 }">
+          <div v-if="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
+    </div>
+    <div class="duration-leave">
+      <div>
+        <transition name="test" :duration="{ leave: duration * 2 }">
+          <div v-if="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
+    </div>
+    <div class="duration-enter-leave">
+      <div>
+        <transition
+          name="test"
+          :duration="{ enter: duration * 4, leave: duration * 2 }"
+        >
+          <div v-if="toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
+    </div>
+    <!-- explicit durations end -->
+
+    <!-- keyed fragment -->
     <div class="keyed">
       <button @click="count++">inc</button>
       <Transition>
         <h1 style="position: absolute" :key="count">{{ count }}</h1>
       </Transition>
     </div>
+    <!-- keyed fragment end -->
+
+    <!-- mode -->
     <div class="out-in">
       <button @click="toggleComponent">toggle out-in</button>
       <div>
@@ -383,6 +464,9 @@ function changeViewInOut() {
         </Transition>
       </div>
     </div>
+    <!-- mode end -->
+
+    <!-- vdom interop -->
     <div class="vdom">
       <button @click="toggleVdom = !toggleVdom">toggle vdom component</button>
       <div>
@@ -412,6 +496,7 @@ function changeViewInOut() {
         </Transition>
       </div>
     </div>
+    <!-- vdom interop end -->
   </div>
 </template>
 <style>