|
|
@ -1,6 +1,17 @@ |
|
|
|
import Vue from 'vue' |
|
|
|
import { looseEqual } from 'shared/util' |
|
|
|
|
|
|
|
// Android 4.4 Chrome 30 has the bug that a multi-select option cannot be
|
|
|
|
// deseleted by setting its "selected" prop via JavaScript.
|
|
|
|
function hasMultiSelectBug () { |
|
|
|
var s = document.createElement('select') |
|
|
|
s.setAttribute('multiple', '') |
|
|
|
s.innerHTML = '<option>1</option>' |
|
|
|
s.options[0].selected = true |
|
|
|
s.options[0].selected = false |
|
|
|
return s.options[0].selected !== false |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* setting <select>'s value in IE9 doesn't work |
|
|
|
* we have to manually loop through the options |
|
|
@ -187,33 +198,68 @@ describe('Directive v-model select', () => { |
|
|
|
}).then(done) |
|
|
|
}) |
|
|
|
|
|
|
|
it('multiple', done => { |
|
|
|
const vm = new Vue({ |
|
|
|
data: { |
|
|
|
test: ['b'] |
|
|
|
}, |
|
|
|
template: |
|
|
|
'<select v-model="test" multiple>' + |
|
|
|
'<option>a</option>' + |
|
|
|
'<option>b</option>' + |
|
|
|
'<option>c</option>' + |
|
|
|
'</select>' |
|
|
|
}).$mount() |
|
|
|
var opts = vm.$el.options |
|
|
|
expect(opts[0].selected).toBe(false) |
|
|
|
expect(opts[1].selected).toBe(true) |
|
|
|
expect(opts[2].selected).toBe(false) |
|
|
|
vm.test = ['a', 'c'] |
|
|
|
waitForUpdate(() => { |
|
|
|
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 |
|
|
|
triggerEvent(vm.$el, 'change') |
|
|
|
expect(vm.test).toEqual(['b', 'c']) |
|
|
|
}).then(done) |
|
|
|
}) |
|
|
|
if (!hasMultiSelectBug()) { |
|
|
|
it('multiple', done => { |
|
|
|
const vm = new Vue({ |
|
|
|
data: { |
|
|
|
test: ['b'] |
|
|
|
}, |
|
|
|
template: |
|
|
|
'<select v-model="test" multiple>' + |
|
|
|
'<option>a</option>' + |
|
|
|
'<option>b</option>' + |
|
|
|
'<option>c</option>' + |
|
|
|
'</select>' |
|
|
|
}).$mount() |
|
|
|
var opts = vm.$el.options |
|
|
|
expect(opts[0].selected).toBe(false) |
|
|
|
expect(opts[1].selected).toBe(true) |
|
|
|
expect(opts[2].selected).toBe(false) |
|
|
|
vm.test = ['a', 'c'] |
|
|
|
waitForUpdate(() => { |
|
|
|
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 |
|
|
|
triggerEvent(vm.$el, 'change') |
|
|
|
expect(vm.test).toEqual(['b', 'c']) |
|
|
|
}).then(done) |
|
|
|
}) |
|
|
|
|
|
|
|
it('multiple + v-for', done => { |
|
|
|
const vm = new Vue({ |
|
|
|
data: { |
|
|
|
test: ['b'], |
|
|
|
opts: ['a', 'b', 'c'] |
|
|
|
}, |
|
|
|
template: |
|
|
|
'<select v-model="test" multiple>' + |
|
|
|
'<option v-for="o in opts">{{ o }}</option>' + |
|
|
|
'</select>' |
|
|
|
}).$mount() |
|
|
|
var opts = vm.$el.options |
|
|
|
expect(opts[0].selected).toBe(false) |
|
|
|
expect(opts[1].selected).toBe(true) |
|
|
|
expect(opts[2].selected).toBe(false) |
|
|
|
vm.test = ['a', 'c'] |
|
|
|
waitForUpdate(() => { |
|
|
|
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 |
|
|
|
triggerEvent(vm.$el, 'change') |
|
|
|
expect(vm.test).toEqual(['b', 'c']) |
|
|
|
// update v-for opts
|
|
|
|
vm.opts = ['c', 'd'] |
|
|
|
}).then(() => { |
|
|
|
expect(opts[0].selected).toBe(true) |
|
|
|
expect(opts[1].selected).toBe(false) |
|
|
|
expect(vm.test).toEqual(['c']) // should remove 'd' which no longer has a matching option
|
|
|
|
}).then(done) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
it('multiple with static template', () => { |
|
|
|
const vm = new Vue({ |
|
|
@ -230,39 +276,6 @@ describe('Directive v-model select', () => { |
|
|
|
expect(opts[2].selected).toBe(true) |
|
|
|
}) |
|
|
|
|
|
|
|
it('multiple + v-for', done => { |
|
|
|
const vm = new Vue({ |
|
|
|
data: { |
|
|
|
test: ['b'], |
|
|
|
opts: ['a', 'b', 'c'] |
|
|
|
}, |
|
|
|
template: |
|
|
|
'<select v-model="test" multiple>' + |
|
|
|
'<option v-for="o in opts">{{ o }}</option>' + |
|
|
|
'</select>' |
|
|
|
}).$mount() |
|
|
|
var opts = vm.$el.options |
|
|
|
expect(opts[0].selected).toBe(false) |
|
|
|
expect(opts[1].selected).toBe(true) |
|
|
|
expect(opts[2].selected).toBe(false) |
|
|
|
vm.test = ['a', 'c'] |
|
|
|
waitForUpdate(() => { |
|
|
|
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 |
|
|
|
triggerEvent(vm.$el, 'change') |
|
|
|
expect(vm.test).toEqual(['b', 'c']) |
|
|
|
// update v-for opts
|
|
|
|
vm.opts = ['c', 'd'] |
|
|
|
}).then(() => { |
|
|
|
expect(opts[0].selected).toBe(true) |
|
|
|
expect(opts[1].selected).toBe(false) |
|
|
|
expect(vm.test).toEqual(['c']) // should remove 'd' which no longer has a matching option
|
|
|
|
}).then(done) |
|
|
|
}) |
|
|
|
|
|
|
|
it('multiple selects', (done) => { |
|
|
|
const spy = jasmine.createSpy() |
|
|
|
const vm = new Vue({ |
|
|
|