import Vue from 'vue'
describe('Options data', () => {
it('should proxy and be reactive', done => {
const data = { msg: 'foo' }
const vm = new Vue({
data,
template: '
{{ msg }}
'
}).$mount()
expect(vm.$data).toEqual({ msg: 'foo' })
expect(vm.$data).toBe(data)
data.msg = 'bar'
waitForUpdate(() => {
expect(vm.$el.textContent).toBe('bar')
}).then(done)
})
it('should merge data properly', () => {
const Test = Vue.extend({
data () {
return { a: 1 }
}
})
let vm = new Test({
data: { b: 2 }
})
expect(vm.a).toBe(1)
expect(vm.b).toBe(2)
// no instance data
vm = new Test()
expect(vm.a).toBe(1)
// no child-val
const Extended = Test.extend({})
vm = new Extended()
expect(vm.a).toBe(1)
// recursively merge objects
const WithObject = Vue.extend({
data () {
return {
obj: {
a: 1
}
}
}
})
vm = new WithObject({
data: {
obj: {
b: 2
}
}
})
expect(vm.obj.a).toBe(1)
expect(vm.obj.b).toBe(2)
})
it('should warn non-function during extend', () => {
Vue.extend({
data: { msg: 'foo' }
})
expect('The "data" option should be a function').toHaveBeenWarned()
})
it('should warn non object return', () => {
new Vue({
data () {}
})
expect('data functions should return an object').toHaveBeenWarned()
})
it('should warn replacing root $data', () => {
const vm = new Vue({
data: {}
})
vm.$data = {}
expect('Avoid replacing instance root $data').toHaveBeenWarned()
})
it('should have access to props', () => {
const Test = {
props: ['a'],
render () {},
data () {
return {
b: this.a
}
}
}
const vm = new Vue({
template: ``,
components: { Test }
}).$mount()
expect(vm.$refs.test.b).toBe(1)
})
it('should have access to methods', () => {
const vm = new Vue({
methods: {
get () {
return { a: 1 }
}
},
data () {
return this.get()
}
})
expect(vm.a).toBe(1)
})
})