feat: stub transition and transition group

Author: lmiller1990

src/mount.ts

@@ -353,7 +353,8 @@ export function mount(
   if (global.stubs || options?.shallow) {
     stubComponents(global.stubs, options?.shallow)
   } else {
-    transformVNodeArgs()
+    // still apply default stub of Transition and Transition Group
+    stubComponents()
   }
 
   // mount the app!

src/stubs.ts

@@ -1,5 +1,7 @@
 import {
   transformVNodeArgs,
+  Transition,
+  TransitionGroup,
   h,
   ComponentPublicInstance,
   Slots,
@@ -34,6 +36,14 @@ const createStub = ({ name, props }: StubOptions): ComponentOptions => {
   return defineComponent({ name: name || anonName, render, props })
 }
 
+const createTransitionStub = ({ props }: StubOptions): ComponentOptions => {
+  const render = (ctx: ComponentPublicInstance) => {
+    return h('transition-stub', {}, ctx.$slots)
+  }
+
+  return defineComponent({ name: 'transition-stub', render, props })
+}
+
 const resolveComponentStubByName = (
   componentName: string,
   stubs: Record<any, any>
@@ -82,6 +92,10 @@ export function stubComponents(
     // 1. a HTML tag (div, span...)
     // 2. An object of component options, such as { name: 'foo', render: [Function], props: {...} }
     // Depending what it is, we do different things.
+    if (type === Transition || type === TransitionGroup) {
+      return [createTransitionStub({ props: undefined }), undefined, children]
+    }
+
     if (
       isHTMLElement(type) ||
       isCommentOrFragment(type) ||

src/utils/isElementVisible.ts

@@ -4,10 +4,13 @@
  * Licensed under the MIT License.
  */
 
-type StylableElement = HTMLElement | SVGElement
+function isStyleVisible<T extends Element>(element: T) {
+  if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
+    return false
+  }
 
-function isStyleVisible<T extends StylableElement>(element: T) {
   const { display, visibility, opacity } = element.style
+
   return (
     display !== 'none' &&
     visibility !== 'hidden' &&
@@ -16,14 +19,14 @@ function isStyleVisible<T extends StylableElement>(element: T) {
   )
 }
 
-function isAttributeVisible<T extends StylableElement>(element: T) {
+function isAttributeVisible<T extends Element>(element: T) {
   return (
     !element.hasAttribute('hidden') &&
     (element.nodeName === 'DETAILS' ? element.hasAttribute('open') : true)
   )
 }
 
-export function isElementVisible<T extends StylableElement>(element: T) {
+export function isElementVisible<T extends Element>(element: T) {
   return (
     element.nodeName !== '#comment' &&
     isStyleVisible(element) &&

tests/isVisible.spec.ts

@@ -45,4 +45,65 @@ describe('isVisible', () => {
     await wrapper.find('button').trigger('click')
     expect(wrapper.find('span').isVisible()).toBe(false)
   })
+
+  it('handles transitions', async () => {
+    const Comp = {
+      template: `
+        <button @click="show = false" />
+        <transition name="fade">
+          <span class="item" v-show="show">
+            Content
+          </span>
+        </transition>
+      `,
+      data() {
+        return {
+          show: true
+        }
+      }
+    }
+    const wrapper = mount(Comp, {})
+
+    expect(wrapper.find('span').isVisible()).toBe(true)
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.find('span').isVisible()).toBe(false)
+  })
+
+  it('handles transition-group', async () => {
+    const Comp = {
+      template: `
+        <div id="list-demo">
+          <button @click="add" id="add">Add</button>
+          <button @click="remove" id="remove">Remove</button>
+          <transition-group name="list" tag="p">
+            <span v-for="item in items" :key="item" class="list-item">
+              Item: {{ item }}
+            </span>
+          </transition-group>
+        </div>
+      `,
+      methods: {
+        add() {
+          this.items.push(2)
+        },
+        remove() {
+          this.items.splice(1) // back to [1]
+        }
+      },
+      data() {
+        return {
+          items: [1]
+        }
+      }
+    }
+    const wrapper = mount(Comp)
+
+    expect(wrapper.html()).toContain('Item: 1')
+    await wrapper.find('#add').trigger('click')
+    expect(wrapper.html()).toContain('Item: 1')
+    expect(wrapper.html()).toContain('Item: 2')
+    await wrapper.find('#remove').trigger('click')
+    expect(wrapper.html()).toContain('Item: 1')
+    expect(wrapper.html()).not.toContain('Item: 2')
+  })
 })