From aa7b76d5996a24bfaca74989907c0982fdeaa013 Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dobromir92@gmail.com>
Date: Mon, 27 Apr 2020 13:29:16 +0300
Subject: [PATCH] feat: return nextTick from setters, fix #1515 (#1517)

* feat: return promise from set methods

* fix: fix error types for error wrapper

* refactor: change promise assertion method

* docs: mention that some methods can be awaited

Generally improve async docs

* fix: fix TS types

* fix: fix nextTick for vue < 2.1

* docs: fix eslint error

* chore: revert dist

* chore: revert committed dist files

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
---
 docs/api/wrapper/trigger.md             |  9 ++-
 docs/guides/common-tips.md              | 34 ++++--------
 docs/guides/getting-started.md          | 29 ++++++----
 docs/guides/testing-async-components.md | 50 ++++++++++++-----
 flow/wrapper.flow.js                    | 12 ++--
 packages/shared/util.js                 | 13 +++++
 packages/test-utils/src/wrapper.js      | 67 ++++++++++++-----------
 packages/test-utils/types/index.d.ts    | 12 ++--
 test/resources/utils.js                 |  3 +
 test/specs/wrapper/setChecked.spec.js   | 64 ++++++++++------------
 test/specs/wrapper/setData.spec.js      | 73 +++++++++++++------------
 test/specs/wrapper/setProps.spec.js     | 55 +++++++++++--------
 test/specs/wrapper/setSelected.spec.js  | 16 ++----
 test/specs/wrapper/setValue.spec.js     | 21 ++++---
 test/specs/wrapper/trigger.spec.js      | 16 +++++-
 15 files changed, 265 insertions(+), 209 deletions(-)

diff --git a/docs/api/wrapper/trigger.md b/docs/api/wrapper/trigger.md
index 069ea67de..eed00ed1e 100644
--- a/docs/api/wrapper/trigger.md
+++ b/docs/api/wrapper/trigger.md
@@ -3,6 +3,7 @@
 Triggers an event asynchronously on the `Wrapper` DOM node.
 
 `trigger` takes an optional `options` object. The properties in the `options` object are added to the Event.
+`trigger` returns a Promise, which when resolved, guarantees the component is updated.
 
 - **Arguments:**
 
@@ -22,18 +23,16 @@ test('trigger demo', async () => {
     propsData: { clickHandler }
   })
 
-  wrapper.trigger('click')
+  await wrapper.trigger('click')
 
-  wrapper.trigger('click', {
+  await wrapper.trigger('click', {
     button: 0
   })
 
-  wrapper.trigger('click', {
+  await wrapper.trigger('click', {
     ctrlKey: true // For testing @click.ctrl handlers
   })
 
-  await wrapper.vm.$nextTick() // Wait until trigger events have been handled
-
   expect(clickHandler.called).toBe(true)
 })
 ```
diff --git a/docs/guides/common-tips.md b/docs/guides/common-tips.md
index 17b7c67b2..c95bf183d 100644
--- a/docs/guides/common-tips.md
+++ b/docs/guides/common-tips.md
@@ -35,28 +35,27 @@ When using either the `mount` or `shallowMount` methods, you can expect your com
 
 Additionally, the component will not be automatically destroyed at the end of each spec, and it is up to the user to stub or manually clean up tasks that will continue to run (`setInterval` or `setTimeout`, for example) before the end of each spec.
 
-### Writing asynchronous tests using `nextTick` (new)
+### Writing asynchronous tests (new)
 
 By default, Vue batches updates to run asynchronously (on the next "tick"). This is to prevent unnecessary DOM re-renders, and watcher computations ([see the docs](https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue) for more details).
 
-This means you **must** wait for updates to run after you set a reactive property. You can wait for updates with `Vue.nextTick()`:
+This means that you **must** wait for updates to run after you change a reactive property. You can do that by awaiting mutation methods like `trigger`:
 
 ```js
 it('updates text', async () => {
   const wrapper = mount(Component)
-  wrapper.trigger('click')
-  await Vue.nextTick()
+  await wrapper.trigger('click')
   expect(wrapper.text()).toContain('updated')
+  await wrapper.trigger('click')
+  wrapper.text().toContain('some different text')
 })
 
 // Or if you're without async/await
 it('render text', done => {
   const wrapper = mount(TestComponent)
-  wrapper.trigger('click')
-  Vue.nextTick(() => {
-    wrapper.text().toContain('some text')
-    wrapper.trigger('click')
-    Vue.nextTick(() => {
+  wrapper.trigger('click').then(() => {
+    wrapper.text().toContain('updated')
+    wrapper.trigger('click').then(() => {
       wrapper.text().toContain('some different text')
       done()
     })
@@ -64,14 +63,7 @@ it('render text', done => {
 })
 ```
 
-The following methods often cause watcher updates that require you to wait for the next tick:
-
-- `setChecked`
-- `setData`
-- `setSelected`
-- `setProps`
-- `setValue`
-- `trigger`
+Learn more in the [Testing Asynchronous Behavior](../guides/README.md#testing-asynchronous-behavior)
 
 ### Asserting Emitted Events
 
@@ -213,16 +205,15 @@ test('should render Foo, then hide it', async () => {
   const wrapper = mount(Foo)
   expect(wrapper.text()).toMatch(/Foo/)
 
-  wrapper.setData({
+  await wrapper.setData({
     show: false
   })
-  await wrapper.vm.$nextTick()
 
   expect(wrapper.text()).not.toMatch(/Foo/)
 })
 ```
 
-In practice, although we are calling `setData` then waiting for the `nextTick` to ensure the DOM is updated, this test fails. This is an ongoing issue related to how Vue implements the `<transition>` component, that we would like to solve before version 1.0. For now, there are some workarounds:
+In practice, although we are calling and awaiting `setData` to ensure the DOM is updated, this test fails. This is an ongoing issue related to how Vue implements the `<transition>` component, that we would like to solve before version 1.0. For now, there are some workarounds:
 
 #### Using a `transitionStub` helper
 
@@ -241,10 +232,9 @@ test('should render Foo, then hide it', async () => {
   })
   expect(wrapper.text()).toMatch(/Foo/)
 
-  wrapper.setData({
+  await wrapper.setData({
     show: false
   })
-  await wrapper.vm.$nextTick()
 
   expect(wrapper.text()).not.toMatch(/Foo/)
 })
diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md
index 2c6298039..96d37dfea 100644
--- a/docs/guides/getting-started.md
+++ b/docs/guides/getting-started.md
@@ -122,30 +122,34 @@ it('button click should increment the count', () => {
 
 In order to test that the counter text has updated, we need to learn about `nextTick`.
 
-### Using `nextTick`
+### Using `nextTick` and awaiting actions
 
-Anytime you make a change (in computed, data, vuex state, etc) which updates the DOM (ex. show a component from v-if), you should await the `nextTick` function before running the test. This is because Vue batches pending DOM updates and _applies them asynchronously_ to prevent unnecessary re-renders caused by multiple data mutations.
+Anytime you make a change (in computed, data, vuex state, etc) which updates the DOM (ex. show a component from v-if or display dynamic text), you should await the `nextTick` function before running the assertion.
+This is because Vue batches pending DOM updates and _applies them asynchronously_ to prevent unnecessary re-renders caused by multiple data mutations.
 
 _You can read more about asynchronous updates in the [Vue docs](https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue)_
 
-We need to use `wrapper.vm.$nextTick` to wait until Vue has performed the DOM update after we set a reactive property. In the counter example, setting the `count` property schedules a DOM update to run on the next tick.
+After updating a reactive property we can await methods like `trigger` or `wrapper.vm.$nextTick` directly, until Vue has performed the DOM update. In the counter example, setting the `count` property schedules a DOM update to run on the next tick.
 
-We can `await` `wrapper.vm.$nextTick()` by writing the tests in an async function:
+Lets see how we can `await trigger()` by writing the tests in an async function:
 
 ```js
 it('button click should increment the count text', async () => {
   expect(wrapper.text()).toContain('0')
   const button = wrapper.find('button')
-  button.trigger('click')
-  await wrapper.vm.$nextTick()
+  await button.trigger('click')
   expect(wrapper.text()).toContain('1')
 })
 ```
 
-When you use `nextTick` in your test files, be aware that any errors thrown inside it may not be caught by your test runner as it uses promises internally. There are two approaches to fixing this: either you can set the `done` callback as Vue's global error handler at the start of the test, or you can call `nextTick` without an argument and return it as a promise:
+`trigger` returns a promise, which can be awaited as seen above or chained with `then` like a regular promise callback. Methods like `trigger` just return `Vue.nextTick` internally.
+You can read more in depth about [Testing Asynchronous Components](../guides/README.md#testing-async-components).
+
+If for some reason you choose to use `nextTick` instead in your test files, be aware that any errors thrown inside it may not be caught by your test runner as it uses promises internally. There are two approaches to fixing this:
+either you can set the `done` callback as Vue's global error handler at the start of the test, or you can call `nextTick` without an argument and return it as a promise:
 
 ```js
-// this will not be caught
+// errors will not be caught
 it('will time out', done => {
   Vue.nextTick(() => {
     expect(true).toBe(false)
@@ -174,7 +178,12 @@ it('will catch the error using async/await', async () => {
 })
 ```
 
+`Vue.nextTick` is equal to `component.vm.$nextTick`, where `component` can be the result of `mount` or `find`.
+
+As mentioned in the beginning, in most cases, awaiting `trigger` is the recommended way to go.
+
 ### What's Next
 
-- Integrate Vue Test Utils into your project by [choosing a test runner](./choosing-a-test-runner.md).
-- Learn more about [common techniques when writing tests](./common-tips.md).
+- Learn more about [common techniques when writing tests](./README.md#knowing-what-to-test).
+- Integrate Vue Test Utils into your project by [choosing a test runner](./README.md#choosing-a-test-runner).
+- Learn more about [Testing Asynchronous Behavior](./README.md#testing-asynchronous-behavior)
diff --git a/docs/guides/testing-async-components.md b/docs/guides/testing-async-components.md
index 56f46e23e..daaf47b74 100644
--- a/docs/guides/testing-async-components.md
+++ b/docs/guides/testing-async-components.md
@@ -11,17 +11,22 @@ Vue batches pending DOM updates and applies them asynchronously to prevent unnec
 
 _You can read more about asynchronous updates in the [Vue docs](https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue)_
 
-In practice, this means you have to use `Vue.nextTick()` to wait until Vue has performed updates after you set a reactive property.
-
-The easiest way to use `Vue.nextTick()` is to write your tests in an async function:
+In practice, this means that after mutating a reactive property, to assert that change your test has to wait while Vue is performing updates.
+One way is to use `await Vue.nextTick()`, but an easier and cleaner way is to just `await` the method that you mutated the state with, like `trigger`.
 
 ```js
-// import Vue at the top of file
-import Vue from 'vue'
+// inside test-suite, add this test case
+it('button click should increment the count text', async () => {
+  expect(wrapper.text()).toContain('0')
+  const button = wrapper.find('button')
+  await button.trigger('click')
+  expect(wrapper.text()).toContain('1')
+})
+```
 
-// other code snippet...
+Awaiting the trigger above is the same as doing:
 
-// inside test-suite, add this test case
+```js
 it('button click should increment the count text', async () => {
   expect(wrapper.text()).toContain('0')
   const button = wrapper.find('button')
@@ -31,6 +36,15 @@ it('button click should increment the count text', async () => {
 })
 ```
 
+Methods that can be awaited are:
+
+- [setData](../api/wrapper/README.md#setdata)
+- [setValue](../api/wrapper/README.md#setvalue)
+- [setChecked](../api/wrapper/README.md#setchecked)
+- [setSelected](../api/wrapper/README.md#setselected)
+- [setProps](../api/wrapper/README.md#setprops)
+- [trigger](../api/wrapper/README.md#trigger)
+
 ## Asynchronous behavior outside of Vue
 
 One of the most common asynchronous behaviors outside of Vue is API calls in Vuex actions. The following examples shows how to test a method that makes an API call. This example uses Jest to run the test and to mock the HTTP library `axios`. More about Jest manual mocks can be found [here](https://jestjs.io/docs/en/manual-mocks.html#content).
@@ -47,7 +61,7 @@ The below component makes an API call when a button is clicked, then assigns the
 
 ```html
 <template>
-  <button @click="fetchResults" />
+  <button @click="fetchResults">{{ value }}</button>
 </template>
 
 <script>
@@ -75,12 +89,14 @@ A test can be written like this:
 ```js
 import { shallowMount } from '@vue/test-utils'
 import Foo from './Foo'
-jest.mock('axios')
+jest.mock('axios', () => ({
+  get: Promise.resolve('value')
+}))
 
 it('fetches async when a button is clicked', () => {
   const wrapper = shallowMount(Foo)
   wrapper.find('button').trigger('click')
-  expect(wrapper.vm.value).toBe('value')
+  expect(wrapper.text()).toBe('value')
 })
 ```
 
@@ -91,7 +107,7 @@ it('fetches async when a button is clicked', done => {
   const wrapper = shallowMount(Foo)
   wrapper.find('button').trigger('click')
   wrapper.vm.$nextTick(() => {
-    expect(wrapper.vm.value).toBe('value')
+    expect(wrapper.text()).toBe('value')
     done()
   })
 })
@@ -99,7 +115,7 @@ it('fetches async when a button is clicked', done => {
 
 The reason `setTimeout` allows the test to pass is because the microtask queue where promise callbacks are processed runs before the task queue, where `setTimeout` callbacks are processed. This means by the time the `setTimeout` callback runs, any promise callbacks on the microtask queue will have been executed. `$nextTick` on the other hand schedules a microtask, but since the microtask queue is processed first-in-first-out that also guarantees the promise callback has been executed by the time the assertion is made. See [here](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) for a more detailed explanation.
 
-Another solution is to use an `async` function and the [npm package flush-promises](https://www.npmjs.com/package/flush-promises). `flush-promises` flushes all pending resolved promise handlers. You can `await` the call of `flushPromises` to flush pending promises and improve the readability of your test.
+Another solution is to use an `async` function and a package like [flush-promises](https://www.npmjs.com/package/flush-promises). `flush-promises` flushes all pending resolved promise handlers. You can `await` the call of `flushPromises` to flush pending promises and improve the readability of your test.
 
 The updated test looks like this:
 
@@ -113,8 +129,16 @@ it('fetches async when a button is clicked', async () => {
   const wrapper = shallowMount(Foo)
   wrapper.find('button').trigger('click')
   await flushPromises()
-  expect(wrapper.vm.value).toBe('value')
+  expect(wrapper.text()).toBe('value')
 })
 ```
 
 This same technique can be applied to Vuex actions, which return a promise by default.
+
+#### Why not just `await button.trigger()` ?
+
+As explained above, there is a difference between the time it takes for Vue to update its components,
+and the time it takes for a Promise, like the one from `axios` to resolve.
+
+A nice rule to follow is to always `await` on mutations like `trigger` or `setProps`.
+If your code relies on something async, like calling `axios`, add an await to the `flushPromises` call as well.
diff --git a/flow/wrapper.flow.js b/flow/wrapper.flow.js
index e37c3d558..f3803bc70 100644
--- a/flow/wrapper.flow.js
+++ b/flow/wrapper.flow.js
@@ -30,13 +30,13 @@ declare interface BaseWrapper {
   props(key?: string): { [name: string]: any } | any | void;
   text(): string | void;
   selector: Selector | void;
-  setData(data: Object): void;
+  setData(data: Object): Promise<void> | void;
   setMethods(methods: Object): void;
-  setValue(value: any): void;
-  setChecked(checked?: boolean): void;
-  setSelected(): void;
-  setProps(data: Object): void;
-  trigger(type: string, options: Object): void;
+  setValue(value: any): Promise<void> | void;
+  setChecked(checked?: boolean): Promise<void> | void;
+  setSelected(): Promise<void> | void;
+  setProps(data: Object): Promise<void> | void;
+  trigger(type: string, options: Object): Promise<void> | void;
   destroy(): void;
 }
 
diff --git a/packages/shared/util.js b/packages/shared/util.js
index d8c942796..2d50152fa 100644
--- a/packages/shared/util.js
+++ b/packages/shared/util.js
@@ -1,6 +1,7 @@
 // @flow
 import Vue from 'vue'
 import semver from 'semver'
+import { VUE_VERSION } from './consts'
 import { config } from '@vue/test-utils'
 
 export function throwError(msg: string): void {
@@ -87,6 +88,18 @@ export function getCheckedEvent() {
   return 'change'
 }
 
+/**
+ * Normalize nextTick to return a promise for all Vue 2 versions.
+ * Vue < 2.1 does not return a Promise from nextTick
+ * @return {Promise<R>}
+ */
+export function nextTick(): Promise<void> {
+  if (VUE_VERSION > 2) return Vue.nextTick()
+  return new Promise(resolve => {
+    Vue.nextTick(resolve)
+  })
+}
+
 export function warnDeprecated(method: string, fallback: string = '') {
   if (!config.showDeprecationWarnings) return
   let msg = `${method} is deprecated and will removed in the next major version`
diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js
index 5ed371163..91fd02406 100644
--- a/packages/test-utils/src/wrapper.js
+++ b/packages/test-utils/src/wrapper.js
@@ -16,6 +16,7 @@ import {
   throwError,
   getCheckedEvent,
   isPhantomJS,
+  nextTick,
   warnDeprecated
 } from 'shared/util'
 import find from './find'
@@ -517,7 +518,7 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Checks radio button or checkbox element
    */
-  setChecked(checked: boolean = true): void {
+  setChecked(checked: boolean = true): Promise<*> {
     warnDeprecated(
       `setChecked`,
       'When you migrate to VTU 2, use setValue instead.'
@@ -533,14 +534,13 @@ export default class Wrapper implements BaseWrapper {
 
     if (tagName === 'INPUT' && type === 'checkbox') {
       if (this.element.checked === checked) {
-        return
+        return nextTick()
       }
       if (event !== 'click' || isPhantomJS) {
         // $FlowIgnore
         this.element.checked = checked
       }
-      this.trigger(event)
-      return
+      return this.trigger(event)
     }
 
     if (tagName === 'INPUT' && type === 'radio') {
@@ -552,24 +552,24 @@ export default class Wrapper implements BaseWrapper {
       }
 
       if (this.element.checked === checked) {
-        return
+        return nextTick()
       }
 
       if (event !== 'click' || isPhantomJS) {
         // $FlowIgnore
         this.element.selected = true
       }
-      this.trigger(event)
-      return
+      return this.trigger(event)
     }
 
     throwError(`wrapper.setChecked() cannot be called on this element`)
+    return nextTick()
   }
 
   /**
    * Selects <option></option> element
    */
-  setSelected(): void {
+  setSelected(): Promise<void> {
     warnDeprecated(
       `setSelected`,
       'When you migrate to VTU 2, use setValue instead.'
@@ -584,34 +584,33 @@ export default class Wrapper implements BaseWrapper {
       )
     }
 
-    if (tagName === 'OPTION') {
-      if (this.element.selected) {
-        return
-      }
+    if (tagName !== 'OPTION') {
+      throwError(`wrapper.setSelected() cannot be called on this element`)
+    }
 
-      // $FlowIgnore
-      this.element.selected = true
-      // $FlowIgnore
-      let parentElement = this.element.parentElement
+    if (this.element.selected) {
+      return nextTick()
+    }
 
-      // $FlowIgnore
-      if (parentElement.tagName === 'OPTGROUP') {
-        // $FlowIgnore
-        parentElement = parentElement.parentElement
-      }
+    // $FlowIgnore
+    this.element.selected = true
+    // $FlowIgnore
+    let parentElement = this.element.parentElement
 
+    // $FlowIgnore
+    if (parentElement.tagName === 'OPTGROUP') {
       // $FlowIgnore
-      createWrapper(parentElement, this.options).trigger('change')
-      return
+      parentElement = parentElement.parentElement
     }
 
-    throwError(`wrapper.setSelected() cannot be called on this element`)
+    // $FlowIgnore
+    return createWrapper(parentElement, this.options).trigger('change')
   }
 
   /**
    * Sets vm data
    */
-  setData(data: Object): void {
+  setData(data: Object): Promise<void> {
     if (this.isFunctionalComponent) {
       throwError(`wrapper.setData() cannot be called on a functional component`)
     }
@@ -621,6 +620,7 @@ export default class Wrapper implements BaseWrapper {
     }
 
     recursivelySetData(this.vm, this.vm, data)
+    return nextTick()
   }
 
   /**
@@ -648,7 +648,7 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Sets vm props
    */
-  setProps(data: Object): void {
+  setProps(data: Object): Promise<void> {
     // Validate the setProps method call
     if (this.isFunctionalComponent) {
       throwError(
@@ -688,7 +688,7 @@ export default class Wrapper implements BaseWrapper {
           if (VUE_VERSION > 2.3) {
             // $FlowIgnore : Problem with possibly null this.vm
             this.vm.$attrs[key] = data[key]
-            return
+            return nextTick()
           }
           throwError(
             `wrapper.setProps() called with ${key} property which ` +
@@ -703,6 +703,7 @@ export default class Wrapper implements BaseWrapper {
 
       // $FlowIgnore : Problem with possibly null this.vm
       this.vm.$forceUpdate()
+      return nextTick()
     } catch (err) {
       throw err
     } finally {
@@ -715,7 +716,7 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Sets element value and triggers input event
    */
-  setValue(value: any): void {
+  setValue(value: any): Promise<void> {
     const tagName = this.element.tagName
     // $FlowIgnore
     const type = this.attributes().type
@@ -758,9 +759,10 @@ export default class Wrapper implements BaseWrapper {
       ) {
         this.trigger('change')
       }
-    } else {
-      throwError(`wrapper.setValue() cannot be called on this element`)
+      return nextTick()
     }
+    throwError(`wrapper.setValue() cannot be called on this element`)
+    return nextTick()
   }
 
   /**
@@ -773,7 +775,7 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Dispatches a DOM event on wrapper
    */
-  trigger(type: string, options: Object = {}) {
+  trigger(type: string, options: Object = {}): Promise<void> {
     if (typeof type !== 'string') {
       throwError('wrapper.trigger() must be passed a string')
     }
@@ -805,10 +807,11 @@ export default class Wrapper implements BaseWrapper {
     const tagName = this.element.tagName
 
     if (this.attributes().disabled && supportedTags.indexOf(tagName) > -1) {
-      return
+      return nextTick()
     }
 
     const event = createDOMEvent(type, options)
     this.element.dispatchEvent(event)
+    return nextTick()
   }
 }
diff --git a/packages/test-utils/types/index.d.ts b/packages/test-utils/types/index.d.ts
index bc5a6bdc4..0334374f2 100644
--- a/packages/test-utils/types/index.d.ts
+++ b/packages/test-utils/types/index.d.ts
@@ -60,15 +60,15 @@ interface BaseWrapper {
   isEmpty (): boolean
   isVueInstance (): boolean
 
-  setData (data: object): void
+  setData (data: object): Promise<void> | void
   setMethods (data: object): void
-  setProps (props: object): void
+  setProps (props: object): Promise<void> | void
 
-  setValue (value: any): void
-  setChecked (checked?: boolean): void
-  setSelected (): void
+  setValue (value: any): Promise<void> | void
+  setChecked (checked?: boolean): Promise<void> | void
+  setSelected (): Promise<void> | void
 
-  trigger (eventName: string, options?: object): void
+  trigger (eventName: string, options?: object): Promise<void> | void
   destroy (): void
   selector: Selector | void
 }
diff --git a/test/resources/utils.js b/test/resources/utils.js
index 240de11c6..8d50b0aed 100644
--- a/test/resources/utils.js
+++ b/test/resources/utils.js
@@ -28,6 +28,9 @@ export const functionalSFCsSupported = vueVersion > 2.4
 
 export const scopedSlotsSupported = vueVersion > 2
 
+export const isPromise = value =>
+  typeof value === 'object' && typeof value.then === 'function'
+
 const shallowAndMount =
   process.env.TEST_ENV === 'node' ? [] : [mount, shallowMount]
 const shallowMountAndRender =
diff --git a/test/specs/wrapper/setChecked.spec.js b/test/specs/wrapper/setChecked.spec.js
index 4d31c0677..c21e86459 100644
--- a/test/specs/wrapper/setChecked.spec.js
+++ b/test/specs/wrapper/setChecked.spec.js
@@ -1,8 +1,17 @@
 import ComponentWithInput from '~resources/components/component-with-input.vue'
-import { describeWithShallowAndMount } from '~resources/utils'
-import Vue from 'vue'
+import { describeWithShallowAndMount, isPromise } from '~resources/utils'
 
 describeWithShallowAndMount('setChecked', mountingMethod => {
+  it('returns a promise, when resolved the component is updated', async () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="checkbox"]')
+
+    const response = input.setChecked()
+    expect(isPromise(response)).to.eql(true)
+    expect(wrapper.text()).not.to.contain('checkbox checked')
+    await response
+    expect(wrapper.text()).to.contain('checkbox checked')
+  })
   it('sets element checked true with no option passed', () => {
     const wrapper = mountingMethod(ComponentWithInput)
     const input = wrapper.find('input[type="checkbox"]')
@@ -26,12 +35,10 @@ describeWithShallowAndMount('setChecked', mountingMethod => {
     const wrapper = mountingMethod(ComponentWithInput)
     const input = wrapper.find('input[type="checkbox"]')
 
-    input.setChecked()
-    await Vue.nextTick()
+    await input.setChecked()
     expect(wrapper.text()).to.contain('checkbox checked')
 
-    input.setChecked(false)
-    await Vue.nextTick()
+    await input.setChecked(false)
     expect(wrapper.text()).to.not.contain('checkbox checked')
   })
 
@@ -39,18 +46,12 @@ describeWithShallowAndMount('setChecked', mountingMethod => {
     const wrapper = mountingMethod(ComponentWithInput)
     const input = wrapper.find('input[type="checkbox"]')
 
-    input.setChecked()
-    await Vue.nextTick()
-    input.setChecked(false)
-    await Vue.nextTick()
-    input.setChecked(false)
-    await Vue.nextTick()
-    input.setChecked(true)
-    await Vue.nextTick()
-    input.setChecked(false)
-    await Vue.nextTick()
-    input.setChecked(false)
-    await Vue.nextTick()
+    await input.setChecked()
+    await input.setChecked(false)
+    await input.setChecked(false)
+    await input.setChecked(true)
+    await input.setChecked(false)
+    await input.setChecked(false)
 
     expect(wrapper.find('.counter').text()).to.equal('4')
   })
@@ -95,12 +96,10 @@ describeWithShallowAndMount('setChecked', mountingMethod => {
   it('updates dom with radio v-model', async () => {
     const wrapper = mountingMethod(ComponentWithInput)
 
-    wrapper.find('#radioBar').setChecked()
-    await Vue.nextTick()
+    await wrapper.find('#radioBar').setChecked()
     expect(wrapper.text()).to.contain('radioBarResult')
 
-    wrapper.find('#radioFoo').setChecked()
-    await Vue.nextTick()
+    await wrapper.find('#radioFoo').setChecked()
     expect(wrapper.text()).to.contain('radioFooResult')
   })
 
@@ -109,20 +108,13 @@ describeWithShallowAndMount('setChecked', mountingMethod => {
     const radioBar = wrapper.find('#radioBar')
     const radioFoo = wrapper.find('#radioFoo')
 
-    radioBar.setChecked()
-    await Vue.nextTick()
-    radioBar.setChecked()
-    await Vue.nextTick()
-    radioFoo.setChecked()
-    await Vue.nextTick()
-    radioBar.setChecked()
-    await Vue.nextTick()
-    radioBar.setChecked()
-    await Vue.nextTick()
-    radioFoo.setChecked()
-    await Vue.nextTick()
-    radioFoo.setChecked()
-    await Vue.nextTick()
+    await radioBar.setChecked()
+    await radioBar.setChecked()
+    await radioFoo.setChecked()
+    await radioBar.setChecked()
+    await radioBar.setChecked()
+    await radioFoo.setChecked()
+    await radioFoo.setChecked()
     expect(wrapper.find('.counter').text()).to.equal('4')
   })
 
diff --git a/test/specs/wrapper/setData.spec.js b/test/specs/wrapper/setData.spec.js
index 8350a30b0..6f5078ab4 100644
--- a/test/specs/wrapper/setData.spec.js
+++ b/test/specs/wrapper/setData.spec.js
@@ -1,8 +1,11 @@
 import { compileToFunctions } from 'vue-template-compiler'
 import ComponentWithVIf from '~resources/components/component-with-v-if.vue'
 import ComponentWithWatch from '~resources/components/component-with-watch.vue'
-import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
-import Vue from 'vue'
+import {
+  describeWithShallowAndMount,
+  isPromise,
+  vueVersion
+} from '~resources/utils'
 
 describeWithShallowAndMount('setData', mountingMethod => {
   const sandbox = sinon.createSandbox()
@@ -16,11 +19,20 @@ describeWithShallowAndMount('setData', mountingMethod => {
     sandbox.restore()
   })
 
+  it('sets component data and returns a promise', async () => {
+    const wrapper = mountingMethod(ComponentWithVIf)
+    expect(wrapper.findAll('.child.ready').length).to.equal(0)
+    const response = wrapper.setData({ ready: true })
+    expect(wrapper.findAll('.child.ready').length).to.equal(0)
+    expect(isPromise(response)).to.eql(true)
+    await response
+    expect(wrapper.findAll('.child.ready').length).to.equal(1)
+  })
+
   it('sets component data and updates nested vm nodes when called on Vue instance', async () => {
     const wrapper = mountingMethod(ComponentWithVIf)
     expect(wrapper.findAll('.child.ready').length).to.equal(0)
-    wrapper.setData({ ready: true })
-    await Vue.nextTick()
+    await wrapper.setData({ ready: true })
     expect(wrapper.findAll('.child.ready').length).to.equal(1)
   })
 
@@ -34,8 +46,7 @@ describeWithShallowAndMount('setData', mountingMethod => {
       }
     }
     const wrapper = mountingMethod(Component)
-    wrapper.setData({ show: true })
-    await Vue.nextTick()
+    await wrapper.setData({ show: true })
     expect(wrapper.element).to.equal(wrapper.vm.$el)
     expect(wrapper.classes()).to.contain('some-class')
   })
@@ -43,16 +54,14 @@ describeWithShallowAndMount('setData', mountingMethod => {
   it('runs watch function when data is updated', async () => {
     const wrapper = mountingMethod(ComponentWithWatch)
     const data1 = 'testest'
-    wrapper.setData({ data1 })
-    await Vue.nextTick()
+    await wrapper.setData({ data1 })
     expect(wrapper.vm.data2).to.equal(data1)
   })
 
   it('runs watch function after all props are updated', async () => {
     const wrapper = mountingMethod(ComponentWithWatch)
     const data1 = 'testest'
-    wrapper.setData({ data2: 'newProp', data1 })
-    await Vue.nextTick()
+    await wrapper.setData({ data2: 'newProp', data1 })
     expect(console.info.args[0][0]).to.equal(data1)
   })
 
@@ -99,7 +108,7 @@ describeWithShallowAndMount('setData', mountingMethod => {
     const TestComponent = {
       template: `
         <em>{{ computedText }}</em>
-        `,
+      `,
       data() {
         return {
           text: '',
@@ -119,18 +128,17 @@ describeWithShallowAndMount('setData', mountingMethod => {
     }
     const wrapper = mountingMethod(TestComponent)
 
-    wrapper.setData({ text: 'hello' })
-    await Vue.nextTick()
+    await wrapper.setData({ text: 'hello' })
     expect(wrapper.vm.basket[0]).to.equal('hello')
   })
 
   it('should not run watcher if data is null', async () => {
     const TestComponent = {
       template: `
-      <div>
-        <div v-if="!message">There is no message yet</div>
-        <div v-else>{{ reversedMessage }}</div>
-      </div>
+        <div>
+          <div v-if="!message">There is no message yet</div>
+          <div v-else>{{ reversedMessage }}</div>
+        </div>
       `,
       data: () => ({
         message: 'egassem'
@@ -145,8 +153,7 @@ describeWithShallowAndMount('setData', mountingMethod => {
       }
     }
     const wrapper = mountingMethod(TestComponent)
-    wrapper.setData({ message: null })
-    await Vue.nextTick()
+    await wrapper.setData({ message: null })
     expect(wrapper.text()).to.equal('There is no message yet')
   })
 
@@ -201,41 +208,39 @@ describeWithShallowAndMount('setData', mountingMethod => {
   it('handles undefined values', async () => {
     const TestComponent = {
       template: `
-      <div>
-        {{undefinedProperty && undefinedProperty.foo}}
-      </div>
+        <div>
+          {{undefinedProperty && undefinedProperty.foo}}
+        </div>
       `,
       data: () => ({
         undefinedProperty: undefined
       })
     }
     const wrapper = mountingMethod(TestComponent)
-    wrapper.setData({
+    await wrapper.setData({
       undefinedProperty: {
         foo: 'baz'
       }
     })
-    await Vue.nextTick()
     expect(wrapper.text()).to.contain('baz')
   })
 
   it('handles null values', async () => {
     const TestComponent = {
       template: `
-      <div>{{nullProperty && nullProperty.foo}}</div>
+        <div>{{nullProperty && nullProperty.foo}}</div>
       `,
       data: () => ({
         nullProperty: null
       })
     }
     const wrapper = mountingMethod(TestComponent)
-    wrapper.setData({
+    await wrapper.setData({
       nullProperty: {
         foo: 'bar',
         another: null
       }
     })
-    await Vue.nextTick()
     expect(wrapper.text()).to.contain('bar')
     wrapper.setData({
       nullProperty: {
@@ -264,14 +269,13 @@ describeWithShallowAndMount('setData', mountingMethod => {
       items: [3]
     })
     expect(wrapper.vm.items).to.deep.equal([3])
-    wrapper.setData({
+    await wrapper.setData({
       nested: {
         nested: {
           nestedArray: [10]
         }
       }
     })
-    await Vue.nextTick()
     expect(wrapper.text()).to.equal('10')
     expect(wrapper.vm.nested.nested.nestedArray).to.deep.equal([10])
   })
@@ -292,12 +296,11 @@ describeWithShallowAndMount('setData', mountingMethod => {
       template: `<div>{{ anObjectKeys }}</div>`
     }
     const wrapper = mountingMethod(TestComponent)
-    wrapper.setData({
+    await wrapper.setData({
       anObject: {
         propC: 'c'
       }
     })
-    await Vue.nextTick()
     expect(wrapper.vm.anObject.propA).to.equal('a')
     expect(wrapper.vm.anObject.propB).to.equal('b')
     expect(wrapper.vm.anObject.propC).to.equal('c')
@@ -308,10 +311,10 @@ describeWithShallowAndMount('setData', mountingMethod => {
   it('allows setting data of type Date synchronously', () => {
     const TestComponent = {
       template: `
-      <div>
-        {{selectedDate}}
-      </div>
-    `,
+        <div>
+          {{selectedDate}}
+        </div>
+      `,
       data: () => ({
         selectedDate: undefined
       })
diff --git a/test/specs/wrapper/setProps.spec.js b/test/specs/wrapper/setProps.spec.js
index 52f0bd23a..635ffae66 100644
--- a/test/specs/wrapper/setProps.spec.js
+++ b/test/specs/wrapper/setProps.spec.js
@@ -1,7 +1,11 @@
 import { compileToFunctions } from 'vue-template-compiler'
 import ComponentWithProps from '~resources/components/component-with-props.vue'
 import ComponentWithWatch from '~resources/components/component-with-watch.vue'
-import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
+import {
+  describeWithShallowAndMount,
+  isPromise,
+  vueVersion
+} from '~resources/utils'
 import { itDoNotRunIf } from 'conditional-specs'
 import Vue from 'vue'
 
@@ -16,13 +20,21 @@ describeWithShallowAndMount('setProps', mountingMethod => {
     sandbox.restore()
   })
 
+  it('returns a promise, when resolved component is updated', async () => {
+    const wrapper = mountingMethod(ComponentWithProps)
+    const response = wrapper.setProps({ prop1: 'foo' })
+    expect(isPromise(response)).to.eql(true)
+    expect(wrapper.find('.prop-1').text()).to.equal('')
+    await response
+    expect(wrapper.find('.prop-1').text()).to.equal('foo')
+  })
+
   it('sets component props and updates DOM when called on Vue instance', async () => {
     const prop1 = 'prop 1'
     const prop2 = 'prop 2'
     const propsData = { prop1: 'a prop', prop2 }
     const wrapper = mountingMethod(ComponentWithProps, { propsData })
-    wrapper.setProps({ prop1 })
-    await Vue.nextTick()
+    await wrapper.setProps({ prop1 })
     expect(wrapper.find('.prop-1').element.textContent).to.equal(prop1)
     expect(wrapper.find('.prop-2').element.textContent).to.equal(prop2)
   })
@@ -37,14 +49,13 @@ describeWithShallowAndMount('setProps', mountingMethod => {
     }
     const wrapper = mountingMethod(TestComponent)
     obj.shouldRender = () => true
-    wrapper.setProps({ obj })
-    await Vue.nextTick()
+    await wrapper.setProps({ obj })
     expect(wrapper.is('div')).to.equal(true)
   })
 
   it('setProps and props getter are in sync', () => {
     const TestComponent = {
-      template: `<div/>`,
+      template: `<div />`,
       props: { prop1: { default: 'initial value' } }
     }
     const wrapper = mountingMethod(TestComponent)
@@ -57,8 +68,7 @@ describeWithShallowAndMount('setProps', mountingMethod => {
     const prop1 = 'prop 1'
     const prop2 = 'prop s'
     const wrapper = mountingMethod(ComponentWithProps)
-    wrapper.setProps({ prop1, prop2 })
-    await Vue.nextTick()
+    await wrapper.setProps({ prop1, prop2 })
     expect(wrapper.find('.prop-1').element.textContent).to.equal(prop1)
     expect(wrapper.find('.prop-2').element.textContent).to.equal(prop2)
   })
@@ -105,9 +115,11 @@ describeWithShallowAndMount('setProps', mountingMethod => {
 
     it('runs watchers correctly', async () => {
       const TestComponent = {
-        template: `<div id="app">
-      {{ stringified }}
-    </div>`,
+        template: `
+          <div id="app">
+            {{ stringified }}
+          </div>
+        `,
         props: ['collection'],
         data: () => ({
           data: ''
@@ -132,8 +144,7 @@ describeWithShallowAndMount('setProps', mountingMethod => {
       expect(wrapper.vm.stringified).to.equal('')
       expect(wrapper.vm.data).to.equal('')
 
-      wrapper.setProps({ collection: [1, 2, 3] })
-      await Vue.nextTick()
+      await wrapper.setProps({ collection: [1, 2, 3] })
       expect(wrapper.vm.stringified).to.equal('1,2,3')
       expect(wrapper.vm.data).to.equal('1,2,3')
 
@@ -146,11 +157,11 @@ describeWithShallowAndMount('setProps', mountingMethod => {
     it('should not run watchers if prop updated is null', async () => {
       const TestComponent = {
         template: `
-    <div>
-      <div v-if="!message">There is no message yet</div>
-      <div v-else>{{ reversedMessage }}</div>
-    </div>
-    `,
+          <div>
+            <div v-if="!message">There is no message yet</div>
+            <div v-else>{{ reversedMessage }}</div>
+          </div>
+        `,
         computed: {
           reversedMessage: function() {
             return this.message
@@ -166,16 +177,14 @@ describeWithShallowAndMount('setProps', mountingMethod => {
           message: 'message'
         }
       })
-      wrapper.setProps({ message: null })
-      await Vue.nextTick()
+      await wrapper.setProps({ message: null })
       expect(wrapper.text()).to.equal('There is no message yet')
     })
 
     it('runs watch function when prop is updated', async () => {
       const wrapper = mountingMethod(ComponentWithWatch)
       const prop1 = 'testest'
-      wrapper.setProps({ prop1 })
-      await Vue.nextTick()
+      await wrapper.setProps({ prop1 })
       expect(wrapper.vm.prop2).to.equal(prop1)
     })
   })
@@ -249,7 +258,7 @@ describeWithShallowAndMount('setProps', mountingMethod => {
       const wrapper = mountingMethod(
         {
           template: `
-            <div/>`,
+            <div />`,
           props: ['obj']
         },
         { propsData: { obj } }
diff --git a/test/specs/wrapper/setSelected.spec.js b/test/specs/wrapper/setSelected.spec.js
index efcda4627..f1b949f1e 100644
--- a/test/specs/wrapper/setSelected.spec.js
+++ b/test/specs/wrapper/setSelected.spec.js
@@ -1,14 +1,12 @@
 import ComponentWithInput from '~resources/components/component-with-input.vue'
 import { describeWithShallowAndMount } from '~resources/utils'
-import Vue from 'vue'
 
 describeWithShallowAndMount('setSelected', mountingMethod => {
   it('sets element selected true', async () => {
     const wrapper = mountingMethod(ComponentWithInput)
     const options = wrapper.find('select').findAll('option')
 
-    options.at(1).setSelected()
-    await Vue.nextTick()
+    await options.at(1).setSelected()
 
     expect(options.at(1).element.selected).to.equal(true)
   })
@@ -17,12 +15,10 @@ describeWithShallowAndMount('setSelected', mountingMethod => {
     const wrapper = mountingMethod(ComponentWithInput)
     const options = wrapper.find('select').findAll('option')
 
-    options.at(1).setSelected()
-    await Vue.nextTick()
+    await options.at(1).setSelected()
     expect(wrapper.text()).to.contain('selectB')
 
-    options.at(0).setSelected()
-    await Vue.nextTick()
+    await options.at(0).setSelected()
     expect(wrapper.text()).to.contain('selectA')
   })
 
@@ -30,12 +26,10 @@ describeWithShallowAndMount('setSelected', mountingMethod => {
     const wrapper = mountingMethod(ComponentWithInput)
     const options = wrapper.find('select.with-optgroups').findAll('option')
 
-    options.at(1).setSelected()
-    await Vue.nextTick()
+    await options.at(1).setSelected()
     expect(wrapper.text()).to.contain('selectB')
 
-    options.at(0).setSelected()
-    await Vue.nextTick()
+    await options.at(0).setSelected()
     expect(wrapper.text()).to.contain('selectA')
   })
 
diff --git a/test/specs/wrapper/setValue.spec.js b/test/specs/wrapper/setValue.spec.js
index 867047098..1b4cd8234 100644
--- a/test/specs/wrapper/setValue.spec.js
+++ b/test/specs/wrapper/setValue.spec.js
@@ -1,10 +1,18 @@
 import ComponentWithInput from '~resources/components/component-with-input.vue'
-import { describeWithShallowAndMount } from '~resources/utils'
+import { describeWithShallowAndMount, isPromise } from '~resources/utils'
 import { itDoNotRunIf } from 'conditional-specs'
 import { vueVersion } from '~resources/utils'
-import Vue from 'vue'
 
 describeWithShallowAndMount('setValue', mountingMethod => {
+  it('returns a promise', async () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="text"]')
+    const response = input.setValue('foo')
+    expect(isPromise(response)).to.eql(true)
+    expect(wrapper.text()).not.to.contain('foo')
+    await response
+    expect(wrapper.text()).to.contain('foo')
+  })
   it('sets element of input value', () => {
     const wrapper = mountingMethod(ComponentWithInput)
     const input = wrapper.find('input[type="text"]')
@@ -24,8 +32,7 @@ describeWithShallowAndMount('setValue', mountingMethod => {
   it('updates dom with input v-model', async () => {
     const wrapper = mountingMethod(ComponentWithInput)
     const input = wrapper.find('input[type="text"]')
-    input.setValue('input text awesome binding')
-    await Vue.nextTick()
+    await input.setValue('input text awesome binding')
 
     expect(wrapper.text()).to.contain('input text awesome binding')
   })
@@ -36,8 +43,7 @@ describeWithShallowAndMount('setValue', mountingMethod => {
     async () => {
       const wrapper = mountingMethod(ComponentWithInput)
       const input = wrapper.find('input#lazy')
-      input.setValue('lazy')
-      await Vue.nextTick()
+      await input.setValue('lazy')
 
       expect(wrapper.text()).to.contain('lazy')
     }
@@ -54,8 +60,7 @@ describeWithShallowAndMount('setValue', mountingMethod => {
   it('updates dom with select v-model', async () => {
     const wrapper = mountingMethod(ComponentWithInput)
     const select = wrapper.find('select')
-    select.setValue('selectB')
-    await Vue.nextTick()
+    await select.setValue('selectB')
 
     expect(wrapper.text()).to.contain('selectB')
   })
diff --git a/test/specs/wrapper/trigger.spec.js b/test/specs/wrapper/trigger.spec.js
index 268b2b89a..2bb3708a6 100644
--- a/test/specs/wrapper/trigger.spec.js
+++ b/test/specs/wrapper/trigger.spec.js
@@ -4,6 +4,7 @@ import {
   describeWithShallowAndMount,
   scopedSlotsSupported,
   isRunningPhantomJS,
+  isPromise,
   vueVersion
 } from '~resources/utils'
 import Vue from 'vue'
@@ -17,6 +18,17 @@ describeWithShallowAndMount('trigger', mountingMethod => {
     sandbox.restore()
   })
 
+  it('returns a promise that when resolved, the component is updated', async () => {
+    const wrapper = mountingMethod(ComponentWithEvents)
+    const toggle = wrapper.find('.toggle')
+    expect(toggle.classes()).not.to.contain('active')
+    const response = toggle.trigger('click')
+    expect(toggle.classes()).not.to.contain('active')
+    expect(isPromise(response)).to.eql(true)
+    await response
+    expect(toggle.classes()).to.contain('active')
+  })
+
   it('causes click handler to fire when wrapper.trigger("click") is called on a Component', () => {
     const clickHandler = sandbox.stub()
     const wrapper = mountingMethod(ComponentWithEvents, {
@@ -261,8 +273,8 @@ describeWithShallowAndMount('trigger', mountingMethod => {
       let lastEvent
       const TestComponent = {
         template: `
-        <div @click="updateLastEvent" />
-      `,
+          <div @click="updateLastEvent" />
+        `,
         methods: {
           updateLastEvent(event) {
             lastEvent = event