Skip to content

Commit

Permalink
skip multiple select tests on Android 4.4 by detecting its bug
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Jan 13, 2017
1 parent 3549e73 commit bb42625
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 64 deletions.
6 changes: 2 additions & 4 deletions build/karma.sauce.config.js
Expand Up @@ -64,10 +64,8 @@ var batches = [
},
sl_android_4_4: {
base: 'SauceLabs',
browserName: 'Browser',
platform: 'Android',
version: '4.4',
device: 'Android Emulator'
browserName: 'android',
version: '4.4'
},
sl_android_5_1: {
base: 'SauceLabs',
Expand Down
133 changes: 73 additions & 60 deletions test/unit/features/directives/model-select.spec.js
@@ -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
Expand Down Expand Up @@ -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({
Expand All @@ -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({
Expand Down

0 comments on commit bb42625

Please sign in to comment.