-
Notifications
You must be signed in to change notification settings - Fork 672
/
setData.spec.js
135 lines (123 loc) · 3.98 KB
/
setData.spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import { compileToFunctions } from 'vue-template-compiler'
import ComponentWithVIf from '~resources/components/component-with-v-if.vue'
import ComponentWithWatch from '~resources/components/component-with-watch.vue'
import {
describeWithShallowAndMount,
vueVersion
} from '~resources/utils'
describeWithShallowAndMount('setData', (mountingMethod) => {
let info
beforeEach(() => {
info = sinon.stub(console, 'info')
})
afterEach(() => {
info.restore()
})
it('sets component data and updates nested vm nodes when called on Vue instance', () => {
const wrapper = mountingMethod(ComponentWithVIf)
expect(wrapper.findAll('.child.ready').length).to.equal(0)
wrapper.setData({ ready: true })
expect(wrapper.findAll('.child.ready').length).to.equal(1)
})
it('keeps element in sync with vnode', () => {
const Component = {
template: '<div class="some-class" v-if="show">A custom component!</div>',
data () {
return {
show: false
}
}
}
const wrapper = mountingMethod(Component)
wrapper.setData({ show: true })
expect(wrapper.element).to.equal(wrapper.vm.$el)
expect(wrapper.hasClass('some-class')).to.be.true
})
it('runs watch function when data is updated', () => {
const wrapper = mountingMethod(ComponentWithWatch)
const data1 = 'testest'
wrapper.setData({ data1 })
expect(wrapper.vm.data2).to.equal(data1)
})
it('runs watch function after all props are updated', () => {
const wrapper = mountingMethod(ComponentWithWatch)
const data1 = 'testest'
wrapper.setData({ data2: 'newProp', data1 })
expect(info.args[1][0]).to.equal(data1)
})
it('throws error if node is not a Vue instance', () => {
const message = 'wrapper.setData() can only be called on a Vue instance'
const compiled = compileToFunctions('<div><p></p></div>')
const wrapper = mountingMethod(compiled)
const p = wrapper.find('p')
expect(() => p.setData({ ready: true })).throw(Error, message)
})
it('throws error when called on functional vnode', () => {
const AFunctionalComponent = {
render: (h, context) => h('div', context.prop1),
functional: true
}
const message = '[vue-test-utils]: wrapper.setData() canot be called on a functional component'
const fn = () => mountingMethod(AFunctionalComponent).setData({ data1: 'data' })
expect(fn).to.throw().with.property('message', message)
// find on functional components isn't supported in Vue < 2.3
if (vueVersion < 2.3) {
return
}
const TestComponent = {
template: '<div><a-functional-component /></div>',
components: {
AFunctionalComponent
}
}
const fn2 = () => mountingMethod(TestComponent).find(AFunctionalComponent).setData({ data1: 'data' })
expect(fn2).to.throw().with.property('message', message)
})
it('updates watchers if computed is updated', () => {
const TestComponent = {
template: `
<em>{{ computedText }}</em>
`,
data () {
return {
text: '',
basket: []
}
},
computed: {
computedText () {
return this.text
}
},
watch: {
text () {
this.basket.push(this.computedText)
}
}
}
const wrapper = mountingMethod(TestComponent)
wrapper.setData({ text: 'hello' })
expect(wrapper.vm.basket[0]).to.equal('hello')
})
it('should update watchers correctly', () => {
const TestComponent = {
template: `
<div>
<div v-if="!message">There is no message yet</div>
<div v-else>{{ reversedMessage }}</div>
</div>
`,
data: () => ({
message: 'egassem'
}),
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
}
const wrapper = mountingMethod(TestComponent)
wrapper.setData({ message: null })
expect(wrapper.text()).to.equal('There is no message yet')
})
})