it('should accept context', function (done) {
var ctx = {}
_.nextTick(function () {
this.id = 1
}, ctx)
_.nextTick(function () {
expect(ctx.id).toBe(1)
done()
})
})
it('select persist non-selected on append', function (done) {
var vm = new Vue({
el: el,
data: {
test: null
},
replace: true,
template:
'<select v-model="test">' +
'<option>a</option>' +
'<option>b</option>' +
'<option>c</option>' +
'</select>'
})
_.nextTick(function () {
expect(vm.$el.value).toBe('')
expect(vm.$el.selectedIndex).toBe(-1)
vm.$remove()
vm.$appendTo(document.body)
_.nextTick(function () {
expect(vm.$el.value).toBe('')
expect(vm.$el.selectedIndex).toBe(-1)
done()
})
})
})
it('fragment loop', function (done) {
var vm = new Vue({
el: el,
template: '<template v-for="item in list"><p>{{item.a}}</p><p>{{item.a + 1}}</p></template>',
data: {
list: [
{ a: 1 },
{ a: 2 },
{ a: 3 }
]
}
})
assertMarkup()
vm.list.reverse()
_.nextTick(function () {
assertMarkup()
vm.list.splice(1, 1)
_.nextTick(function () {
assertMarkup()
vm.list.splice(1, 0, { a: 2 })
_.nextTick(function () {
assertMarkup()
done()
})
})
})
function assertMarkup () {
var markup = vm.list.map(function (item) {
return '<p>' + item.a + '</p><p>' + (item.a + 1) + '</p>'
}).join('')
expect(el.innerHTML).toBe(markup)
}
})
it('text with only write filter', function (done) {
var vm = new Vue({
el: el,
data: {
test: 'b'
},
filters: {
test: {
write: function (val) {
return val.toUpperCase()
}
}
},
template: '<input v-model="test | test">'
})
trigger(el.firstChild, 'focus')
el.firstChild.value = 'cc'
trigger(el.firstChild, 'input')
_.nextTick(function () {
expect(el.firstChild.value).toBe('cc')
expect(vm.test).toBe('CC')
trigger(el.firstChild, 'blur')
_.nextTick(function () {
expect(el.firstChild.value).toBe('CC')
expect(vm.test).toBe('CC')
done()
})
})
})
it('radio buttons', function (done) {
var vm = new Vue({
el: el,
data: {
test: '1'
},
template:
'<input type="radio" value="1" v-model="test" name="test" number>' +
'<input type="radio" value="2" v-model="test" name="test">'
})
expect(el.childNodes[0].checked).toBe(true)
expect(el.childNodes[1].checked).toBe(false)
vm.test = '2'
_.nextTick(function () {
expect(el.childNodes[0].checked).toBe(false)
expect(el.childNodes[1].checked).toBe(true)
el.childNodes[0].click()
expect(el.childNodes[0].checked).toBe(true)
expect(el.childNodes[1].checked).toBe(false)
expect(vm.test).toBe(1)
vm._directives[1]._teardown()
el.childNodes[1].click()
expect(vm.test).toBe(1)
done()
})
})
it('select + multiple', function (done) {
var vm = new Vue({
el: el,
data: {
test: [2] // test number soft equal
},
template:
'<select v-model="test" multiple>' +
'<option>1</option>' +
'<option>2</option>' +
'<option>3</option>' +
'</select>'
})
var opts = el.firstChild.options
expect(opts[0].selected).toBe(false)
expect(opts[1].selected).toBe(true)
expect(opts[2].selected).toBe(false)
vm.test = [1, '3'] // mix of number/string
_.nextTick(function () {
expect(opts[0].selected).toBe(true)
expect(opts[1].selected).toBe(false)
expect(opts[2].selected).toBe(true)
opts[0].selected = false
opts[1].selected = true
trigger(el.firstChild, 'change')
expect(vm.test[0]).toBe('2')
expect(vm.test[1]).toBe('3')
done()
})
})
it('radio expression', function (done) {
var vm = new Vue({
el: el,
data: {
test: false,
test2: 'string1',
expression1: 'string1',
expression2: 'string2'
},
template:
'<input type="radio" value="1" v-model="test" name="test" :value="true">' +
'<input type="radio" value="0" v-model="test" name="test" :value="false">' +
'<input type="radio" value="1" v-model="test2" name="test2" :value="expression1">' +
'<input type="radio" value="0" v-model="test2" name="test2" :value="expression2">'
})
expect(el.childNodes[0].checked).toBe(false)
expect(el.childNodes[1].checked).toBe(true)
expect(el.childNodes[2].checked).toBe(true)
expect(el.childNodes[3].checked).toBe(false)
_.nextTick(function () {
el.childNodes[0].click()
expect(vm.test).toBe(true)
el.childNodes[3].click()
expect(vm.test2).toBe('string2')
done()
})
})
it('update on bind value change', function (done) {
var vm = new Vue({
el: el,
template:
'<input type="radio" v-model="a" checked :value="b">' +
'<input type="radio" v-model="a" :value="c">',
data: {
a: 0,
b: 1,
c: 2
}
})
// should sync inline-checked value to a
expect(vm.a).toBe(1)
vm.b = 3
_.nextTick(function () {
expect(vm.a).toBe(3)
expect(el.firstChild.checked).toBe(true)
expect(el.lastChild.checked).toBe(false)
vm.a = 2
_.nextTick(function () {
expect(el.firstChild.checked).toBe(false)
expect(el.lastChild.checked).toBe(true)
done()
})
})
})
_.nextTick(function () {
vm.test = 'aTrueValue'
_.nextTick(function () {
expect(el.firstChild.checked).toBe(true)
done()
})
})
it('checkbox expression', function (done) {
var vm = new Vue({
el: el,
data: {
test: '',
expression1: 'aTrueValue',
expression2: 'aFalseValue'
},
template: '<input type="checkbox" v-model="test" :true-value="expression1" :false-value="expression2">'
})
expect(vm.test).toBe('')
el.firstChild.click()
expect(vm.test).toBe('aTrueValue')
expect(el.firstChild.checked).toBe(true)
el.firstChild.click()
expect(vm.test).toBe('aFalseValue')
expect(el.firstChild.checked).toBe(false)
_.nextTick(function () {
vm.test = 'aTrueValue'
_.nextTick(function () {
expect(el.firstChild.checked).toBe(true)
done()
})
})
})
it('track by $index', function (done) {
var vm = new Vue({
el: el,
data: {
items: [{a: 1}, {a: 2}]
},
template: '<div v-for="item in items" track-by="$index">{{$index}} {{item.a}}</div>'
})
assertMarkup()
var el1 = el.children[0]
var el2 = el.children[1]
vm.items = [{a: 3}, {a: 2}, {a: 1}]
_.nextTick(function () {
assertMarkup()
// should mutate the DOM in-place
expect(el.children[0]).toBe(el1)
expect(el.children[1]).toBe(el2)
done()
})
function assertMarkup () {
expect(el.innerHTML).toBe(vm.items.map(function (item, i) {
return '<div>' + i + ' ' + item.a + '</div>'
}).join(''))
}
})
it('should remove transcluded directives from parent when unlinking (v-if + component)', function (done) {
var vm = new Vue({
el: el,
template:
'<div v-if="ok">' +
'<test>{{test}}</test>' +
'</div>',
data: {
test: 'parent',
ok: true
},
components: {
test: {
template: '<slot></slot>'
}
}
})
expect(vm.$el.textContent).toBe('parent')
expect(vm._directives.length).toBe(3)
expect(vm.$children.length).toBe(1)
vm.ok = false
_.nextTick(function () {
expect(vm.$el.textContent).toBe('')
expect(vm._directives.length).toBe(1)
expect(vm.$children.length).toBe(0)
done()
})
})
it('switch between object-converted & array mode', function (done) {
var obj = {
a: { msg: 'foo' },
b: { msg: 'bar' }
}
var arr = [obj.b, obj.a]
var vm = new Vue({
el: el,
template: '<div v-for="item in obj">{{item.msg}}</div>',
data: {
obj: obj
}
})
expect(el.innerHTML).toBe(Object.keys(obj).map(function (key) {
return '<div>' + obj[key].msg + '</div>'
}).join(''))
vm.obj = arr
_.nextTick(function () {
expect(el.innerHTML).toBe('<div>bar</div><div>foo</div>')
// make sure it cleared the cache
expect(vm._directives[0].cache.a).toBeNull()
expect(vm._directives[0].cache.b).toBeNull()
done()
})
})
it('skip when no transition available', function (done) {
el.__v_trans = new Transition(el, 'test-no-trans', hooks, vm)
transition.applyTransition(el, 1, op, vm, cb)
expect(hooks.beforeEnter).toHaveBeenCalled()
expect(hooks.enter).toHaveBeenCalled()
_.nextTick(function () {
expect(op).toHaveBeenCalled()
expect(cb).toHaveBeenCalled()
expect(hooks.afterEnter).toHaveBeenCalled()
expect(el.classList.contains('test-no-trans-enter')).toBe(false)
// wait until transition.justEntered flag is off
setTimeout(function () {
transition.applyTransition(el, -1, op, vm, cb)
expect(hooks.beforeLeave).toHaveBeenCalled()
expect(hooks.leave).toHaveBeenCalled()
_.nextTick(function () {
expect(op.calls.count()).toBe(2)
expect(cb.calls.count()).toBe(2)
expect(hooks.afterLeave).toHaveBeenCalled()
expect(el.classList.contains('test-no-trans-leave')).toBe(false)
done()
})
}, 17)
})
})
it('text + compositionevents', function (done) {
var vm = new Vue({
el: el,
data: {
test: 'aaa',
test2: 'bbb'
},
template: '<input v-model="test"><input v-model="test2 | uppercase">'
})
var input = el.firstChild
var input2 = el.childNodes[1]
trigger(input, 'compositionstart')
trigger(input2, 'compositionstart')
input.value = input2.value = 'ccc'
// input before composition unlock should not call set
trigger(input, 'input')
trigger(input2, 'input')
expect(vm.test).toBe('aaa')
expect(vm.test2).toBe('bbb')
// after composition unlock it should work
trigger(input, 'compositionend')
trigger(input2, 'compositionend')
trigger(input, 'input')
trigger(input2, 'input')
expect(vm.test).toBe('ccc')
expect(vm.test2).toBe('ccc')
// IE complains about "unspecified error" when calling
// setSelectionRange() on an input element that's been
// removed from the DOM, so we wait until the
// selection range callback has fired to end this test.
_.nextTick(done)
})
it('checkbox + array model', function (done) {
var vm = new Vue({
el: el,
data: {
list: [1],
a: {}
},
template:
'<input type="checkbox" v-model="list" number value="1">' +
'<input type="checkbox" v-model="list" :value="a">'
})
expect(el.firstChild.checked).toBe(true)
expect(el.lastChild.checked).toBe(false)
el.firstChild.click()
expect(vm.list.length).toBe(0)
el.lastChild.click()
expect(vm.list.length).toBe(1)
expect(vm.list[0]).toBe(vm.a)
el.firstChild.click()
expect(vm.list.length).toBe(2)
expect(vm.list[1]).toBe(1)
vm.list = [vm.a]
_.nextTick(function () {
expect(el.firstChild.checked).toBe(false)
expect(el.lastChild.checked).toBe(true)
done()
})
})
it('support jQuery change event', function (done) {
// restore jQuery
jQuery = $
var vm = new Vue({
el: el,
data: {
test: 'b'
},
template: '<input v-model="test">'
})
expect(el.firstChild.value).toBe('b')
vm.test = 'a'
_.nextTick(function () {
expect(el.firstChild.value).toBe('a')
el.firstChild.value = 'c'
jQuery(el.firstChild).trigger('change')
expect(vm.test).toBe('c')
vm._directives[0]._teardown()
el.firstChild.value = 'd'
jQuery(el.firstChild).trigger('change')
expect(vm.test).toBe('c')
// unset jQuery
jQuery = null
done()
})
})
it('select', function (done) {
var vm = new Vue({
el: el,
data: {
test: 'b'
},
template:
'<select v-model="test">' +
'<option>a</option>' +
'<option>b</option>' +
'<option>c</option>' +
'</select>'
})
expect(vm.test).toBe('b')
expect(el.firstChild.value).toBe('b')
expect(el.firstChild.childNodes[1].selected).toBe(true)
vm.test = 'c'
_.nextTick(function () {
expect(el.firstChild.value).toBe('c')
expect(el.firstChild.childNodes[2].selected).toBe(true)
updateSelect(el.firstChild, 'a')
trigger(el.firstChild, 'change')
expect(vm.test).toBe('a')
done()
})
})
it('should not sync value on blur when parent fragment is removed', function (done) {
el.style.display = ''
var vm = new Vue({
el: el,
replace: false,
template:
'<form v-if="ok" @submit.prevent="save">' +
'<input v-model="msg">' +
'</form>',
data: {
ok: true,
msg: 'hi'
},
methods: {
save: function () {
this.ok = false
this.msg = ''
}
}
})
el.querySelector('input').focus()
trigger(el.querySelector('form'), 'submit')
_.nextTick(function () {
expect(vm.msg).toBe('')
done()
})
})
it('IE9 cut and delete', function (done) {
var ie9 = _.isIE9
_.isIE9 = true
var vm = new Vue({
el: el,
data: {
test: 'aaa'
},
template: '<input v-model="test">'
})
var input = el.firstChild
input.value = 'aa'
trigger(input, 'cut')
_.nextTick(function () {
expect(vm.test).toBe('aa')
input.value = 'a'
trigger(input, 'keyup', function (e) {
e.keyCode = 8
})
expect(vm.test).toBe('a')
// teardown
vm._directives[0]._teardown()
input.value = 'bbb'
trigger(input, 'keyup', function (e) {
e.keyCode = 8
})
expect(vm.test).toBe('a')
_.isIE9 = ie9
done()
})
})
_.nextTick(function () {
expect(vm.$els.testEl).toBeNull()
vm.ok = true
_.nextTick(function () {
expect(vm.$els.testEl.id).toBe('test')
done()
})
})
_.nextTick(function () {
vm.list = [vm.a]
_.nextTick(function () {
expect(el.firstChild.checked).toBe(false)
expect(el.lastChild.checked).toBe(true)
done()
})
})
_.nextTick(function () {
assertMarkup()
vm.list.splice(1, 0, { a: 2 })
_.nextTick(function () {
assertMarkup()
done()
})
})
_.nextTick(function () {
assertCalls(0, 1, 1, 1)
vm.trans = 'a'
vm.show = true
_.nextTick(function () {
assertCalls(1, 1, 1, 1)
done()
})
})
_.nextTick(function () {
expect(attachSpy.calls.count()).toBe(3)
expect(detachSpy.calls.count()).toBe(1)
vm.items = []
_.nextTick(function () {
expect(attachSpy.calls.count()).toBe(3)
expect(detachSpy.calls.count()).toBe(3)
done()
})
})
_.nextTick(function () {
expect(op).toHaveBeenCalled()
expect(cb).toHaveBeenCalled()
transition.applyTransition(el, -1, op, vm, cb)
_.nextTick(function () {
expect(op.calls.count()).toBe(2)
expect(cb.calls.count()).toBe(2)
done()
})
})
_.nextTick(function () {
expect(el.firstChild.value).toBe('cc')
expect(vm.test).toBe('CC')
trigger(el.firstChild, 'blur')
_.nextTick(function () {
expect(el.firstChild.value).toBe('CC')
expect(vm.test).toBe('CC')
done()
})
})
run: function (done) {
var self = this
var step = this.stack.shift()
if (!step) return done()
step.fn()
_.nextTick(function () {
step.cb()
self.run(done)
})
}
it('nested track by', function (done) {
var vm = new Vue({
el: el,
template:
'<div v-for="item in list" track-by="id">' +
'{{item.msg}}' +
'<div v-for="subItem in item.list" track-by="id">' +
'{{subItem.msg}}' +
'</div>' +
'</div>',
data: {
list: [
{ id: 1, msg: 'hi', list: [
{ id: 1, msg: 'hi foo' }
] },
{ id: 2, msg: 'bar', list: [] },
{ id: 3, msg: 'baz', list: [] }
]
}
})
assertMarkup()
var oldNodes = el.children
var oldInnerNodes = el.children[0].children
vm.list = [
{ id: 1, msg: 'baz', list: [
{ id: 1, msg: 'hi foo' },
{ id: 2, msg: 'hi bar' }
] },
{ id: 2, msg: 'qux', list: [] }
]
_.nextTick(function () {
assertMarkup()
// should reuse old frags!
var i = 2
while (i--) {
expect(el.children[i]).toBe(oldNodes[i])
}
expect(el.children[0].children[0]).toBe(oldInnerNodes[0])
done()
})
function assertMarkup () {
var markup = vm.list.map(function (item) {
var sublist = item.list.map(function (item) {
return '<div>' + item.msg + '</div>'
}).join('')
return '<div>' + item.msg + sublist + '</div>'
}).join('')
expect(el.innerHTML).toBe(markup)
}
})
_.nextTick(function () {
expect(vm.a).toBe(3)
expect(el.firstChild.checked).toBe(true)
expect(el.lastChild.checked).toBe(false)
vm.a = 2
_.nextTick(function () {
expect(el.firstChild.checked).toBe(false)
expect(el.lastChild.checked).toBe(true)
done()
})
})