fix: use Vue async option for sync mode

flow/config.flow.js

@@ -3,6 +3,5 @@ declare type Config = {
  mocks?: Object,
  methods?: { [name: string]: Function },
  provide?: Object,
- logModifiedComponents?: boolean,
  silent?: boolean
 };

package.json

@@ -65,12 +65,12 @@
  "sinon-chai": "^2.10.0",
  "typescript": "^3.0.1",
  "vee-validate": "^2.1.3",
- "vue": "2.5.16",
+ "vue": "2.5.20",
  "vue-class-component": "^6.1.2",
  "vue-loader": "^13.6.2",
  "vue-router": "^3.0.1",
- "vue-server-renderer": "2.5.16",
- "vue-template-compiler": "2.5.16",
+ "vue-server-renderer": "2.5.20",
+ "vue-template-compiler": "2.5.20",
  "vuepress": "^0.14.2",
  "vuepress-theme-vue": "^1.0.3",
  "vuex": "^3.0.1",

packages/create-instance/extract-instance-options.js

@@ -11,7 +11,6 @@ const MOUNTING_OPTIONS = [
  'attrs',
  'listeners',
  'propsData',
- 'logModifiedComponents',
  'sync',
  'shouldProxy'
 ]

packages/server-test-utils/types/index.d.ts

@@ -50,7 +50,6 @@ interface VueTestUtilsConfigOptions {
  mocks?: object
  methods?: Record<string, Function>
  provide?: object,
- logModifiedComponents?: Boolean
  silent?: Boolean
 }
 

packages/server-test-utils/types/test/renderToString.ts

@@ -62,5 +62,4 @@ config.methods = {
 config.provide = {
  foo: {}
 }
-config.logModifiedComponents = true
 config.silent = true

packages/shared/consts.js

@@ -6,6 +6,9 @@ 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 COMPAT_SYNC_MODE = 'COMPAT_SYNC_MODE'
+
 export const VUE_VERSION = Number(
  `${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`
 )

packages/shared/merge-options.js

@@ -26,7 +26,6 @@ export function mergeOptions (options: Options, config: Config): Options {
  const provide = ((getOption(options.provide, config.provide)): Object)
  return {
  ...options,
- logModifiedComponents: config.logModifiedComponents,
  stubs: getOption(normalizeStubs(options.stubs), config.stubs),
  mocks,
  methods,

packages/test-utils/src/mount.js

@@ -13,22 +13,53 @@ import config from './config'
 import warnIfNoWindow from './warn-if-no-window'
 import createWrapper from './create-wrapper'
 import createLocalVue from './create-local-vue'
+import { semVerGreaterThan, warn } from 'shared/util'
+import { COMPAT_SYNC_MODE } from 'shared/consts'
+
 Vue.config.productionTip = false
 Vue.config.devtools = false
 
+function getSyncOption (syncOption) {
+ if (syncOption === false) {
+ Vue.config.async = true
+ return false
+ }
+ if (!semVerGreaterThan(Vue.version, '2.5.17')) {
+ warn(
+ `Vue Test Utils runs in sync mode by default. Due to bugs, sync mode ` +
+ `requires Vue > 2.5.18. In Vue Test Utils 1.0 sync mode will only be ` +
+ `supported with Vue 2.5.18 running in development mode. If you are ` +
+ `unable to upgrade, you should rewrite your tests to run synchronously` +
+ `you can do this by setting the sync mounting option to false.`
+ )
+ return COMPAT_SYNC_MODE
+ }
+
+ if (typeof Vue.config.async === 'undefined') {
+ warn(
+ `Sync mode only works when Vue runs in dev mode. ` +
+ `Please set Vue to run in dev mode, or set sync to false`
+ )
+ }
+
+ Vue.config.async = false
+ return true
+}
+
 export default function mount (
  component: Component,
  options: Options = {}
 ): VueWrapper | Wrapper {
+ const mergedOptions = mergeOptions(options, config)
+ const sync = getSyncOption(mergedOptions.sync)
  const existingErrorHandler = Vue.config.errorHandler
+
  Vue.config.errorHandler = errorHandler
 
  warnIfNoWindow()
 
  const elm = options.attachToDocument ? createElement() : undefined
 
- const mergedOptions = mergeOptions(options, config)
-
  const parentVm = createInstance(
  component,
  mergedOptions,
@@ -49,7 +80,7 @@ export default function mount (
 
  const wrapperOptions = {
  attachedToDocument: !!mergedOptions.attachToDocument,
- sync: mergedOptions.sync
+ sync
  }
  const root = vm.$options._isFunctionalContainer
  ? vm._vnode

packages/test-utils/src/vue-wrapper.js

@@ -4,6 +4,7 @@ import Wrapper from './wrapper'
 import { throwError } from 'shared/util'
 import { setWatchersToSync } from './set-watchers-to-sync'
 import { orderWatchers } from './order-watchers'
+import { COMPAT_SYNC_MODE } from 'shared/consts'
 
 export default class VueWrapper extends Wrapper implements BaseWrapper {
  constructor (vm: Component, options: WrapperOptions) {
@@ -28,7 +29,7 @@ export default class VueWrapper extends Wrapper implements BaseWrapper {
  get: () => vm,
  set: () => throwError('wrapper.vm is read-only')
  })
- if (options.sync) {
+ if (options.sync === COMPAT_SYNC_MODE) {
  setWatchersToSync(vm)
  orderWatchers(vm)
  }

packages/test-utils/src/wrapper.js

@@ -4,7 +4,8 @@ import Vue from 'vue'
 import getSelector from './get-selector'
 import {
  REF_SELECTOR,
- FUNCTIONAL_OPTIONS
+ FUNCTIONAL_OPTIONS,
+ COMPAT_SYNC_MODE
 } from 'shared/consts'
 import config from './config'
 import WrapperArray from './wrapper-array'
@@ -758,8 +759,10 @@ export default class Wrapper implements BaseWrapper {
  })
  // $FlowIgnore : Problem with possibly null this.vm
  this.vm.$forceUpdate()
- // $FlowIgnore : Problem with possibly null this.vm
- orderWatchers(this.vm || this.vnode.context.$root)
+ if (this.options.sync === COMPAT_SYNC_MODE) {
+ // $FlowIgnore : Problem with possibly null this.vm
+ orderWatchers(this.vm || this.vnode.context.$root)
+ }
  Vue.config.silent = originalConfig
  }
 
@@ -832,7 +835,7 @@ export default class Wrapper implements BaseWrapper {
  const event = createDOMEvent(type, options)
  this.element.dispatchEvent(event)
 
- if (this.vnode) {
+ if (this.vnode && this.options.sync === COMPAT_SYNC_MODE) {
  orderWatchers(this.vm || this.vnode.context.$root)
  }
  }

scripts/test-compat-all.sh

@@ -7,4 +7,4 @@ scripts/test-compat.sh "2.1.10"
 scripts/test-compat.sh "2.2.6"
 scripts/test-compat.sh "2.3.4"
 scripts/test-compat.sh "2.4.2"
-scripts/test-compat.sh "2.5.16"
+scripts/test-compat.sh "2.5.20"

test/specs/config.spec.js

@@ -1,29 +1,28 @@
-import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
+import { describeWithShallowAndMount } from '~resources/utils'
 import ComponentWithProps from '~resources/components/component-with-props.vue'
-import { itDoNotRunIf, itSkipIf } from 'conditional-specs'
+import { itDoNotRunIf } from 'conditional-specs'
 import {
  config,
  TransitionStub,
  TransitionGroupStub,
  createLocalVue
 } from '~vue/test-utils'
-import Vue from 'vue'
 
 describeWithShallowAndMount('config', mountingMethod => {
- let configStubsSave, consoleError, configLogSave, configSilentSave
+ let configStubsSave, configLogSave, configSilentSave
 
  beforeEach(() => {
  configStubsSave = config.stubs
  configLogSave = config.logModifiedComponents
  configSilentSave = config.silent
- consoleError = sinon.stub(console, 'error')
+ sinon.stub(console, 'error').callThrough()
  })
 
  afterEach(() => {
  config.stubs = configStubsSave
  config.logModifiedComponents = configLogSave
  config.silent = configSilentSave
- consoleError.restore()
+ console.error.restore()
  })
 
  itDoNotRunIf(
@@ -150,7 +149,7 @@ describeWithShallowAndMount('config', mountingMethod => {
  wrapper.setProps({
  prop1: 'new value'
  })
- expect(consoleError.called).to.equal(false)
+ expect(console.error).not.calledWith(sinon.match('[Vue warn]'))
  })
 
  it('does throw Vue warning when silent is set to false', () => {
@@ -166,25 +165,6 @@ describeWithShallowAndMount('config', mountingMethod => {
  wrapper.setProps({
  prop1: 'new value'
  })
- expect(consoleError.called).to.equal(true)
+ expect(console.error).calledWith(sinon.match('[Vue warn]'))
  })
-
- itSkipIf(
- vueVersion < 2.3,
- 'does not log when component is extended if logModifiedComponents is false',
- () => {
- const ChildComponent = Vue.extend({
- template: '<span />'
- })
- const TestComponent = {
- template: '<child-component />',
- components: {
- ChildComponent
- }
- }
- config.logModifiedComponents = false
- mountingMethod(TestComponent)
- expect(consoleError.called).to.equal(false)
- }
- )
 })

test/specs/mounting-options/scopedSlots.spec.js

@@ -234,4 +234,29 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
  .with.property('message', message)
  }
  )
+
+ itDoNotRunIf(
+ vueVersion < 2.5,
+ 'renders scoped slots in sync mode by default', () => {
+ const TestComponent = {
+ data () {
+ return {
+ val: null
+ }
+ },
+ mounted () {
+ this.val = 123
+ },
+ render () {
+ return this.$scopedSlots.default(this.val)
+ }
+ }
+ const stub = sinon.stub()
+ mountingMethod(TestComponent, {
+ scopedSlots: {
+ default: stub
+ }
+ })
+ expect(stub).calledWith(123)
+ })
 })

test/specs/mounting-options/sync.spec.js

@@ -1,7 +1,16 @@
 import sinon from 'sinon'
-import { describeWithShallowAndMount } from '~resources/utils'
+import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
+import { itDoNotRunIf } from 'conditional-specs'
 
 describeWithShallowAndMount('options.sync', mountingMethod => {
+ beforeEach(() => {
+ sinon.stub(console, 'error').callThrough()
+ })
+
+ afterEach(() => {
+ console.error.restore()
+ })
+
  it('sets watchers to sync if set to true', () => {
  const TestComponent = {
  template: '<div>{{someData}}</div>',
@@ -12,11 +21,12 @@ describeWithShallowAndMount('options.sync', mountingMethod => {
  const wrapper = mountingMethod(TestComponent, {
  sync: true
  })
+ const syncValue = vueVersion < 2.5 ? 'COMPAT_SYNC_MODE' : true
 
  expect(wrapper.text()).to.equal('hello')
  wrapper.vm.someData = 'world'
  expect(wrapper.text()).to.equal('world')
- expect(wrapper.options.sync).to.equal(true)
+ expect(wrapper.options.sync).to.equal(syncValue)
  })
 
  it('sets watchers to sync if undefined', () => {
@@ -27,11 +37,12 @@ describeWithShallowAndMount('options.sync', mountingMethod => {
  })
  }
  const wrapper = mountingMethod(TestComponent)
+ const syncValue = vueVersion < 2.5 ? 'COMPAT_SYNC_MODE' : true
 
  expect(wrapper.text()).to.equal('hello')
  wrapper.vm.someData = 'world'
  expect(wrapper.text()).to.equal('world')
- expect(wrapper.options.sync).to.equal(true)
+ expect(wrapper.options.sync).to.equal(syncValue)
  })
 
  it('handles methods that update watchers', () => {
@@ -145,4 +156,18 @@ describeWithShallowAndMount('options.sync', mountingMethod => {
  expect(childComponentSpy.calledOnce).to.equal(true)
  expect(wrapper.html()).to.equal('<div>bar<div>bar</div></div>')
  })
+
+ itDoNotRunIf(
+ vueVersion > 2.4,
+ 'warns if Vue version is less than 2.5.18',
+ () => {
+ const TestComponent = {
+ template: '<div />'
+ }
+ mountingMethod(TestComponent)
+ expect(console.error)
+ .calledWith(
+ sinon.match('Vue Test Utils runs in sync mode by default')
+ )
+ })
 })

test/specs/shallow-mount.spec.js

@@ -147,7 +147,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
  }
  }
  shallowMount(TestComponent)
- expect(console.error).not.called
+ expect(console.error).not.calledWith(sinon.match('[Vue warn]'))
  }
  )
 
@@ -248,7 +248,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
  }
  const wrapper = shallowMount(TestComponent)
  expect(wrapper.html()).to.contain('<test-component-stub>')
- expect(console.error).not.called
+ expect(console.error).not.calledWith('[Vue warn]')
  })
 
  it('does not call stubbed children lifecycle hooks', () => {