Skip to content

Commit fc821a2

Browse files
authored
fix: transition does not add classes to child components (#423)
1 parent 12f3e5a commit fc821a2

File tree

2 files changed

+32
-22
lines changed

2 files changed

+32
-22
lines changed

Diff for: src/components/TransitionStub.js

+1-17
Original file line numberDiff line numberDiff line change
@@ -44,22 +44,6 @@ export const camelize = (str: string): string => {
4444
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
4545
}
4646

47-
function extractTransitionData (comp: Component): Object {
48-
const data = {}
49-
const options = comp.$options
50-
// props
51-
for (const key in options.propsData) {
52-
data[key] = comp[key]
53-
}
54-
// events.
55-
// extract listeners and pass them directly to the transition methods
56-
const listeners: ?Object = options._parentListeners
57-
for (const key in listeners) {
58-
data[camelize(key)] = listeners[key]
59-
}
60-
return data
61-
}
62-
6347
function hasParentTransition (vnode: VNode): ?boolean {
6448
while ((vnode = vnode.parent)) {
6549
if (vnode.data.transition) {
@@ -125,7 +109,7 @@ export default {
125109
? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
126110
: child.key
127111

128-
const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)
112+
const data: Object = (child.data || (child.data = {}))
129113
const oldRawChild: ?VNode = this._vnode
130114
const oldChild: ?VNode = getRealChild(oldRawChild)
131115
if (child.data.directives && child.data.directives.some(d => d.name === 'show')) {

Diff for: test/specs/components/TransitionStub.spec.js

+31-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import ComponentWithTransition from '~resources/components/component-with-transition.vue'
22
import TransitionStub from '~src/components/TransitionStub'
3-
import { mount } from '~vue-test-utils'
3+
import { describeWithShallowAndMount } from '~resources/test-utils'
44

5-
describe('TransitionStub', () => {
5+
describeWithShallowAndMount('TransitionStub', (mountingMethod) => {
66
it('update synchronously when used as stubs for Transition', () => {
7-
const wrapper = mount(ComponentWithTransition, {
7+
const wrapper = mountingMethod(ComponentWithTransition, {
88
stubs: {
99
'transition': TransitionStub
1010
}
@@ -14,6 +14,32 @@ describe('TransitionStub', () => {
1414
expect(wrapper.text()).contains('b')
1515
})
1616

17+
it('does not add v-leave class to children', () => {
18+
const TestComponent = {
19+
template: `
20+
<div>
21+
<transition name="expand">
22+
<nav v-show="isShown" />
23+
</transition>
24+
<button @click="isShown = !isShown" />
25+
</div>
26+
`,
27+
data: () => ({
28+
isShown: false
29+
})
30+
}
31+
const wrapper = mountingMethod(TestComponent, {
32+
stubs: {
33+
'transition': TransitionStub
34+
}
35+
})
36+
expect(wrapper.find('nav').visible()).to.equal(false)
37+
wrapper.find('button').trigger('click')
38+
expect(wrapper.find('nav').visible()).to.equal(true)
39+
wrapper.find('button').trigger('click')
40+
expect(wrapper.find('nav').visible()).to.equal(false)
41+
})
42+
1743
it('logs error when has multiple children', () => {
1844
const TestComponent = {
1945
template: `
@@ -22,7 +48,7 @@ describe('TransitionStub', () => {
2248
}
2349
const msg = '[vue-test-utils]: <transition> can only be used on a single element. Use <transition-group> for lists.'
2450
const error = sinon.stub(console, 'error')
25-
mount(TestComponent, {
51+
mountingMethod(TestComponent, {
2652
stubs: {
2753
'transition': TransitionStub
2854
}
@@ -47,7 +73,7 @@ describe('TransitionStub', () => {
4773
}
4874
}
4975
}
50-
const wrapper = mount(TestComponent, {
76+
const wrapper = mountingMethod(TestComponent, {
5177
stubs: {
5278
'transition': TransitionStub
5379
}

0 commit comments

Comments
 (0)