skip multiple select tests on Android 4.4 by detecting its bug

Author: yyx990803

Diff for: build/karma.sauce.config.js

@@ -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',

Diff for: 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
@@ -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({