use custom async chaining assertion utility

test/unit/features/directives/if.spec.js

@@ -27,8 +27,7 @@ describe('Directive v-if', () => {
     })
     expect(vm.$el.innerHTML).toBe('<span>hello</span>')
     vm.foo = false
-    setTimeout(() => {
+    waitForUpdate(() => {
-      new Promise((res, rej) => {
       expect(vm.$el.innerHTML).toBe('')
       vm.foo = {}
       res()
@@ -53,8 +52,8 @@ describe('Directive v-if', () => {
     }).then(() => {
       expect(vm.$el.innerHTML).toBe('<span>hello</span>')
       done()
-      }).catch(done)
     })
+    .catch(done)
   })
 
   it('should work well with v-else', done => {
@@ -70,8 +69,7 @@ describe('Directive v-if', () => {
     })
     expect(vm.$el.innerHTML).toBe('<span>hello</span>')
     vm.foo = false
-    setTimeout(() => {
+    waitForUpdate(() => {
-      new Promise((res, rej) => {
       expect(vm.$el.innerHTML).toBe('<span>bye</span>')
       vm.foo = {}
       res()
@@ -98,7 +96,6 @@ describe('Directive v-if', () => {
       done()
     }).catch(done)
   })
-  })
 
   it('should work well with v-for', done => {
     const vm = new Vue({
@@ -118,8 +115,7 @@ describe('Directive v-if', () => {
     })
     expect(vm.$el.innerHTML).toBe('<span>0</span><span>2</span>')
     vm.list[0].value = false
-    setTimeout(() => {
+    waitForUpdate(() => {
-      new Promise((res, rej) => {
       expect(vm.$el.innerHTML).toBe('<span>2</span>')
       vm.list.push({ value: true })
       res()
@@ -131,7 +127,6 @@ describe('Directive v-if', () => {
       done()
     }).catch(done)
   })
-  })
 
   it('should work well with v-for and v-else', done => {
     const vm = new Vue({
@@ -152,8 +147,7 @@ describe('Directive v-if', () => {
     })
     expect(vm.$el.innerHTML).toBe('<span>hello</span><span>bye</span><span>hello</span>')
     vm.list[0].value = false
-    setTimeout(() => {
+    waitForUpdate(() => {
-      new Promise((res, rej) => {
       expect(vm.$el.innerHTML).toBe('<span>bye</span><span>bye</span><span>hello</span>')
       vm.list.push({ value: true })
       res()
@@ -166,4 +160,3 @@ describe('Directive v-if', () => {
     }).catch(done)
   })
 })
-})

test/unit/index.js

@@ -46,6 +46,57 @@ beforeEach(function () {
   })
 })
 
+// helper for async assertions.
+// Use like this:
+//
+// vm.a = 123
+// waitForUpdate(() => {
+//   expect(vm.$el.textContent).toBe('123')
+//   vm.a = 234
+// })
+// .then(() => {
+//   // more assertions...
+//   done()
+// })
+// .catch(done)
+window.waitForUpdate = initialCb => {
+  let onError
+  const queue = [initialCb]
+
+  function shift () {
+    const job = queue.shift()
+    let hasError = false
+    try {
+      job()
+    } catch (e) {
+      hasError = true
+      if (onError) {
+        onError(e)
+      }
+    }
+    if (!hasError) {
+      if (queue.length) {
+        Vue.nextTick(shift)
+      }
+    }
+  }
+
+  Vue.nextTick(shift)
+
+  const chainer = {
+    then: nextCb => {
+      queue.push(nextCb)
+      return chainer
+    },
+    catch: errorCb => {
+      onError = errorCb
+      return chainer
+    }
+  }
+
+  return chainer
+}
+
 // require all test files
-var testsContext = require.context('./', true, /\.spec$/)
+const testsContext = require.context('./', true, /\.spec$/)
 testsContext.keys().forEach(testsContext)