fix: transition does not add classes to child components (#423)

vuejs · Feb 11, 2018 · fc821a2 · fc821a2
1 parent 12f3e5a
commit fc821a2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/src/components/TransitionStub.js b/src/components/TransitionStub.js
@@ -44,22 +44,6 @@ export const camelize = (str: string): string => {
   return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
 }
 
-function extractTransitionData (comp: Component): Object {
-  const data = {}
-  const options = comp.$options
-  // props
-  for (const key in options.propsData) {
-    data[key] = comp[key]
-  }
-  // events.
-  // extract listeners and pass them directly to the transition methods
-  const listeners: ?Object = options._parentListeners
-  for (const key in listeners) {
-    data[camelize(key)] = listeners[key]
-  }
-  return data
-}
-
 function hasParentTransition (vnode: VNode): ?boolean {
   while ((vnode = vnode.parent)) {
     if (vnode.data.transition) {
@@ -125,7 +109,7 @@ export default {
         ? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
         : child.key
 
-    const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)
+    const data: Object = (child.data || (child.data = {}))
     const oldRawChild: ?VNode = this._vnode
     const oldChild: ?VNode = getRealChild(oldRawChild)
     if (child.data.directives && child.data.directives.some(d => d.name === 'show')) {

diff --git a/test/specs/components/TransitionStub.spec.js b/test/specs/components/TransitionStub.spec.js
@@ -1,10 +1,10 @@
 import ComponentWithTransition from '~resources/components/component-with-transition.vue'
 import TransitionStub from '~src/components/TransitionStub'
-import { mount } from '~vue-test-utils'
+import { describeWithShallowAndMount } from '~resources/test-utils'
 
-describe('TransitionStub', () => {
+describeWithShallowAndMount('TransitionStub', (mountingMethod) => {
   it('update synchronously when used as stubs for Transition', () => {
-    const wrapper = mount(ComponentWithTransition, {
+    const wrapper = mountingMethod(ComponentWithTransition, {
       stubs: {
         'transition': TransitionStub
       }
@@ -14,6 +14,32 @@ describe('TransitionStub', () => {
     expect(wrapper.text()).contains('b')
   })
 
+  it('does not add v-leave class to children', () => {
+    const TestComponent = {
+      template: `
+    <div>
+      <transition name="expand">
+        <nav v-show="isShown" />
+      </transition>
+      <button @click="isShown = !isShown" />
+    </div>
+    `,
+      data: () => ({
+        isShown: false
+      })
+    }
+    const wrapper = mountingMethod(TestComponent, {
+      stubs: {
+        'transition': TransitionStub
+      }
+    })
+    expect(wrapper.find('nav').visible()).to.equal(false)
+    wrapper.find('button').trigger('click')
+    expect(wrapper.find('nav').visible()).to.equal(true)
+    wrapper.find('button').trigger('click')
+    expect(wrapper.find('nav').visible()).to.equal(false)
+  })
+
   it('logs error when has multiple children', () => {
     const TestComponent = {
       template: `
@@ -22,7 +48,7 @@ describe('TransitionStub', () => {
     }
     const msg = '[vue-test-utils]: <transition> can only be used on a single element. Use <transition-group> for lists.'
     const error = sinon.stub(console, 'error')
-    mount(TestComponent, {
+    mountingMethod(TestComponent, {
       stubs: {
         'transition': TransitionStub
       }
@@ -47,7 +73,7 @@ describe('TransitionStub', () => {
         }
       }
     }
-    const wrapper = mount(TestComponent, {
+    const wrapper = mountingMethod(TestComponent, {
       stubs: {
         'transition': TransitionStub
       }