fix: use semver to get correct event

Author: eddyerburgh

flow/modules.flow.js

@@ -23,3 +23,7 @@ declare module 'vue-server-renderer' {
 declare module 'cheerio' {
   declare module.exports: any;
 }
+
+declare module 'semver' {
+  declare module.exports: any;
+}

packages/create-instance/create-instance.js

@@ -4,7 +4,8 @@ import { createSlotVNodes } from './create-slot-vnodes'
 import addMocks from './add-mocks'
 import { addEventLogger } from './log-events'
 import { addStubs } from './add-stubs'
-import { throwError, vueVersion } from 'shared/util'
+import { throwError } from 'shared/util'
+import { VUE_VERSION } from 'shared/consts'
 import {
   compileTemplate,
   compileTemplateForSlots
@@ -42,7 +43,7 @@ export default function createInstance (
   _Vue.options._base = _Vue
 
   if (
-    vueVersion < 2.3 &&
+    VUE_VERSION < 2.3 &&
     typeof component === 'function' &&
     component.options
   ) {
@@ -110,7 +111,7 @@ export default function createInstance (
   if (
     options.provide &&
     typeof options.provide === 'object' &&
-    vueVersion < 2.5
+    VUE_VERSION < 2.5
   ) {
     const obj = { ...options.provide }
     options.provide = () => obj

packages/create-instance/create-scoped-slots.js

@@ -1,7 +1,8 @@
 // @flow
 
 import { compileToFunctions } from 'vue-template-compiler'
-import { throwError, vueVersion } from 'shared/util'
+import { throwError } from 'shared/util'
+import { VUE_VERSION } from 'shared/consts'
 
 function isDestructuringSlotScope (slotScope: string): boolean {
   return slotScope[0] === '{' && slotScope[slotScope.length - 1] === '}'
@@ -39,7 +40,7 @@ function getVueTemplateCompilerHelpers (
 }
 
 function validateEnvironment (): void {
-  if (vueVersion < 2.1) {
+  if (VUE_VERSION < 2.1) {
     throwError(`the scopedSlots option is only supported in [email protected]+.`)
   }
 }

packages/create-instance/patch-render.js

@@ -1,17 +1,15 @@
 import { createStubFromComponent } from './create-component-stubs'
-import { resolveComponent, semVerGreaterThan } from 'shared/util'
+import { resolveComponent } from 'shared/util'
 import { isReservedTag } from 'shared/validators'
-import Vue from 'vue'
-import { BEFORE_RENDER_LIFECYCLE_HOOK } from 'shared/consts'
+import {
+  BEFORE_RENDER_LIFECYCLE_HOOK,
+  CREATE_ELEMENT_ALIAS
+} from 'shared/consts'
 
 const isWhitelisted = (el, whitelist) => resolveComponent(el, whitelist)
 const isAlreadyStubbed = (el, stubs) => stubs.has(el)
 const isDynamicComponent = cmp => typeof cmp === 'function' && !cmp.cid
 
-const CREATE_ELEMENT_ALIAS = semVerGreaterThan(Vue.version, '2.1.5')
-  ? '_c'
-  : '_h'
-
 function shouldExtend (component, _Vue) {
   return (
     (typeof component === 'function' && !isDynamicComponent(component)) ||

packages/shared/consts.js

@@ -1,18 +1,24 @@
 import Vue from 'vue'
-import { semVerGreaterThan } from './util'
+import semver from 'semver'
 
 export const NAME_SELECTOR = 'NAME_SELECTOR'
 export const COMPONENT_SELECTOR = 'COMPONENT_SELECTOR'
 export const REF_SELECTOR = 'REF_SELECTOR'
 export const DOM_SELECTOR = 'DOM_SELECTOR'
 export const INVALID_SELECTOR = 'INVALID_SELECTOR'
+
 export const VUE_VERSION = Number(
   `${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`
 )
+
 export const FUNCTIONAL_OPTIONS =
   VUE_VERSION >= 2.5 ? 'fnOptions' : 'functionalOptions'
 
 export const BEFORE_RENDER_LIFECYCLE_HOOK =
-  semVerGreaterThan(Vue.version, '2.1.8')
+  semver.gt(Vue.version, '2.1.8')
     ? 'beforeCreate'
     : 'beforeMount'
+
+export const CREATE_ELEMENT_ALIAS = semver.gt(Vue.version, '2.1.5')
+  ? '_c'
+  : '_h'

packages/shared/package.json

@@ -2,6 +2,9 @@
   "name": "shared",
   "version": "1.0.0-beta.27",
   "private": true,
+  "dependencies": {
+    "semver": "^5.6.0"
+  },
   "peerDependencies": {
     "vue": "2.x",
     "vue-template-compiler": "^2.x"

packages/shared/util.js

@@ -1,5 +1,6 @@
 // @flow
 import Vue from 'vue'
+import semver from 'semver'
 
 export function throwError (msg: string): void {
   throw new Error(`[vue-test-utils]: ${msg}`)
@@ -31,10 +32,6 @@ const hyphenateRE = /\B([A-Z])/g
 export const hyphenate = (str: string): string =>
   str.replace(hyphenateRE, '-$1').toLowerCase()
 
-export const vueVersion = Number(
-  `${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`
-)
-
 function hasOwnProperty (obj, prop) {
   return Object.prototype.hasOwnProperty.call(obj, prop)
 }
@@ -59,16 +56,30 @@ export function resolveComponent (id: string, components: Object) {
   return components[id] || components[camelizedId] || components[PascalCaseId]
 }
 
-export function semVerGreaterThan (a: string, b: string) {
-  const pa = a.split('.')
-  const pb = b.split('.')
-  for (let i = 0; i < 3; i++) {
-    var na = Number(pa[i])
-    var nb = Number(pb[i])
-    if (na > nb) return true
-    if (nb > na) return false
-    if (!isNaN(na) && isNaN(nb)) return true
-    if (isNaN(na) && !isNaN(nb)) return false
+const UA = typeof window !== 'undefined' &&
+  'navigator' in window &&
+  navigator.userAgent.toLowerCase()
+
+export const isPhantomJS = UA && UA.includes &&
+  UA.match(/phantomjs/i)
+
+export const isEdge = UA && UA.indexOf('edge/') > 0
+export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
+
+export function getCheckedEvent () {
+  const version = Vue.version
+
+  if (semver.satisfies(version, '2.0 - 2.1.8')) {
+    return 'change'
   }
-  return false
+
+  if (semver.satisfies(version, '2.1.9 - 2.1.10')) {
+    return 'click'
+  }
+
+  if (semver.satisfies(version, '2.2 - 2.4')) {
+    return isChrome ? 'click' : 'change'
+  }
+
+  return 'change'
 }

packages/test-utils/src/find.js

@@ -4,9 +4,10 @@ import findDOMNodes from './find-dom-nodes'
 import {
   DOM_SELECTOR,
   REF_SELECTOR,
-  COMPONENT_SELECTOR
+  COMPONENT_SELECTOR,
+  VUE_VERSION
 } from 'shared/consts'
-import { throwError, vueVersion } from 'shared/util'
+import { throwError } from 'shared/util'
 import { matches } from './matches'
 
 export function findAllInstances (rootVm: any) {
@@ -74,7 +75,7 @@ export default function find (
       (selector.value.options &&
       selector.value.options.functional)
     ) &&
-    vueVersion < 2.3
+    VUE_VERSION < 2.3
   ) {
     throwError(
       `find for functional components is not supported ` +

packages/test-utils/src/wrapper.js

@@ -4,12 +4,18 @@ import Vue from 'vue'
 import getSelector from './get-selector'
 import {
   REF_SELECTOR,
-  FUNCTIONAL_OPTIONS
+  FUNCTIONAL_OPTIONS,
+  VUE_VERSION
 } from 'shared/consts'
 import config from './config'
 import WrapperArray from './wrapper-array'
 import ErrorWrapper from './error-wrapper'
-import { throwError, warn, vueVersion } from 'shared/util'
+import {
+  throwError,
+  warn,
+  getCheckedEvent,
+  isPhantomJS
+} from 'shared/util'
 import find from './find'
 import createWrapper from './create-wrapper'
 import { orderWatchers } from './order-watchers'
@@ -487,29 +493,34 @@ export default class Wrapper implements BaseWrapper {
     const tagName = this.element.tagName
     // $FlowIgnore
     const type = this.attributes().type
+    const event = getCheckedEvent()
 
     if (tagName === 'INPUT' && type === 'checkbox') {
-      // $FlowIgnore
-      this.element.checked = checked
-      this.trigger('change')
+      if (this.element.checked === checked) {
+        return
+      }
+      if (event !== 'click' || isPhantomJS) {
+        // $FlowIgnore
+        this.element.checked = checked
+      }
+      this.trigger(event)
       return
     }
 
     if (tagName === 'INPUT' && type === 'radio') {
       if (!checked) {
         throwError(
           `wrapper.setChecked() cannot be called with ` +
-            `parameter false on a <input type="radio" /> ` +
-            `element.`
+          `parameter false on a <input type="radio" /> ` +
+          `element.`
         )
-      } else {
+      }
+
+      if (event !== 'click' || isPhantomJS) {
         // $FlowIgnore
-        if (!this.element.checked) {
-          // $FlowIgnore
-          this.element.checked = true
-          this.trigger('change')
-        }
+        this.element.selected = true
       }
+      this.trigger(event)
       return
     }
 
@@ -568,7 +579,7 @@ export default class Wrapper implements BaseWrapper {
     )
 
     Object.keys(computed).forEach(key => {
-      if (vueVersion > 2.1) {
+      if (VUE_VERSION > 2.1) {
         // $FlowIgnore : Problem with possibly null this.vm
         if (!this.vm._computedWatchers[key]) {
           throwError(
@@ -704,7 +715,7 @@ export default class Wrapper implements BaseWrapper {
         !this.vm.$options._propKeys ||
         !this.vm.$options._propKeys.some(prop => prop === key)
       ) {
-        if (vueVersion > 2.3) {
+        if (VUE_VERSION > 2.3) {
           // $FlowIgnore : Problem with possibly null this.vm
           this.vm.$attrs[key] = data[key]
           return
@@ -766,7 +777,6 @@ export default class Wrapper implements BaseWrapper {
       tagName === 'TEXTAREA' ||
       tagName === 'SELECT'
     ) {
-      // $FlowIgnore
       const event = tagName === 'SELECT' ? 'change' : 'input'
       // $FlowIgnore
       this.element.value = value

yarn.lock

@@ -8592,6 +8592,11 @@ semver-diff@^2.0.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
+semver@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+  integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
+
 semver@~4.3.3:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"