fix functional tests for batcher

Author: yyx990803

examples/todomvc/js/benchmark.js

@@ -43,9 +43,11 @@ function runBenchmark () {
         function toggle () {
             addTime = now() - last
             var checkboxes = document.querySelectorAll('.toggle')
-            for (var i = 0; i < checkboxes.length; i++) {
-                checkboxes[i].click()
-            }
+            //for (var j = 0; j < 5; j++) {
+                for (var i = 0; i < checkboxes.length; i++) {
+                    checkboxes[i].click()
+                }
+            //}
             last = now()
             setTimeout(remove, 0)
         }

src/batcher.js

@@ -24,9 +24,11 @@ exports.queue = function (binding, method) {
 
 function flush () {
     for (var i = 0; i < queue.length; i++) {
-        var task = queue[i]
-        task.binding['_' + task.method]()
-        has[task.binding.id] = false
+        var task = queue[i],
+            b = task.binding
+        if (b.unbound) continue
+        b['_' + task.method]()
+        has[b.id] = false
     }
     reset()
 }

src/binding.js

@@ -19,6 +19,7 @@ function Binding (compiler, key, isExp, isFn) {
     this.instances = []
     this.subs = []
     this.deps = []
+    this.unbound = false
 }
 
 var BindingProto = Binding.prototype
@@ -70,6 +71,11 @@ BindingProto.pub = function () {
  *  Unbind the binding, remove itself from all of its dependencies
  */
 BindingProto.unbind = function () {
+    // Indicate this has been unbound.
+    // It's possible this binding will be in
+    // the batcher's flush queue when its owner
+    // compiler has already been destroyed.
+    this.unbound = true
     var i = this.instances.length
     while (i--) {
         this.instances[i].unbind()

src/directives/model.js

@@ -40,15 +40,14 @@ module.exports = {
                 try {
                     cursorPos = el.selectionStart
                 } catch (e) {}
-                // `input` event has weird updating issue with
-                // International (e.g. Chinese) input methods,
-                // have to use a Timeout to hack around it...
-                setTimeout(function () {
-                    self.vm.$set(self.key, el[attr])
+                self.vm.$set(self.key, el[attr])
+                // since updates are async
+                // we need to reset cursor position async too
+                utils.nextTick(function () {
                     if (cursorPos !== undefined) {
                         el.setSelectionRange(cursorPos, cursorPos)
                     }
-                }, 0)
+                })
             }
             : function () {
                 // no filters, don't let it trigger update()
@@ -63,9 +62,9 @@ module.exports = {
         if (isIE9) {
             self.onCut = function () {
                 // cut event fires before the value actually changes
-                setTimeout(function () {
+                utils.nextTick(function () {
                     self.set()
-                }, 0)
+                })
             }
             self.onDel = function (e) {
                 if (e.keyCode === 46 || e.keyCode === 8) {

test/functional/specs/extend.js

@@ -1,24 +1,23 @@
 casper.test.begin('Encapsulation & Inheritance', 8, function (test) {
 
     casper
-    .start('./fixtures/extend.html', function () {
-
+    .start('./fixtures/extend.html')
+    .then(function () {
         test.assertSelectorHasText('.dir', 'directive works')
         test.assertSelectorHasText('.filter', 'filter works')
         test.assertSelectorHasText('.partial', 'partial works')
         test.assertSelectorHasText('.vm', 'component works')
         test.assertSelectorHasText('.vm-w-model', 'component with model works')
-
         test.assertSelectorHasText('#log', 'T created T ready T created C created T ready C ready', 'hook inheritance works')
         test.assertSelectorHasText('.cvm', 'component works', 'Child should have access to Parent options')
-
-        this.evaluate(function () {
-            test.vmData = {
-                selfMsg: 'replacing $data ',
-                msg: 'also works'
-            }
-        })
-
+    })
+    .thenEvaluate(function () {
+        test.vmData = {
+            selfMsg: 'replacing $data ',
+            msg: 'also works'
+        }
+    })
+    .then(function () {
         test.assertSelectorHasText('.vm-w-model', 'replacing $data also works')
     })
     .run(function () {

test/functional/specs/forms.js

@@ -1,23 +1,25 @@
 casper.test.begin('Forms', 10, function (test) {
 
     casper
-    .start('./fixtures/forms.html', function () {
-
+    .start('./fixtures/forms.html')
+    .then(function () {
         // test initial value binding
         test.assertField('text', 'some text')
         test.assertField('checkbox', true)
         test.assertField('radio', 'b')
         test.assertField('select', 'b')
         test.assertField('textarea', 'more text')
-
+    })
+    .then(function () {
         this.fill('#forms', {
             'text': 'changed text',
             'checkbox': false,
             'radio': 'a',
             'select': 'a',
             'textarea': 'more changed text'
         })
-
+    })
+    .then(function () {
         test.assertSelectorHasText('.text', 'changed text')
         test.assertSelectorHasText('.checkbox', 'false')
         test.assertSelectorHasText('.radio', 'a')

test/functional/specs/nested-props.js

@@ -1,50 +1,54 @@
 casper.test.begin('Nested Properties', 20, function (test) {
 
     casper
-    .start('./fixtures/nested-props.html', function () {
-
+    .start('./fixtures/nested-props.html')
+    .then(function () {
         test.assertSelectorHasText('h1 span', '')
         test.assertSelectorHasText('h2 span', '555')
         test.assertSelectorHasText('h3 span', 'Yoyoyo555')
-
-        this.click('.one')
+    })
+    .thenClick('.one', function () {
         test.assertSelectorHasText('h1 span', 'one')
         test.assertSelectorHasText('h2 span', '1')
         test.assertSelectorHasText('h3 span', 'Yoyoyoone1')
-
-        this.click('.two')
+    })
+    .thenClick('.two', function () {
         test.assertSelectorHasText('h1 span', 'two')
         test.assertSelectorHasText('h2 span', '2')
         test.assertSelectorHasText('h3 span', 'Yoyoyotwo2')
-
-        this.click('.three')
+    })
+    .thenClick('.three', function () {
         test.assertSelectorHasText('h1 span', 'three')
         test.assertSelectorHasText('h2 span', '3')
         test.assertSelectorHasText('h3 span', 'Yoyoyothree3')
-
+    })
+    .then(function () {
         this.fill('#form', {
             msg: 'Oh yeah '
         })
+    })
+    .then(function () {
         test.assertSelectorHasText('h3 span', 'Oh yeah three3')
-
-        // hidden data variables
-        // i.e. nested under an object, not explicitly
-        // bound in the template, but is depended upon
-        // by an expression or a computed property
+    })
+    // hidden data variables
+    // i.e. nested under an object, not explicitly
+    // bound in the template, but is depended upon
+    // by an expression or a computed property
+    .then(function () {
         test.assertSelectorHasText('.hidden', '3')
-        this.click('.four')
+    })
+    .thenClick('.four', function () {
         test.assertSelectorHasText('.hidden', '4')
-
-        // set a nested object to {}
-        this.click('.empty1')
+    })
+    // set a nested object to {}
+    .thenClick('.empty1', function () {
         test.assertSelectorHasText('h1 span', '')
         test.assertSelectorHasText('h3 span', 'Oh yeah 3')
-
-        this.click('.empty2')
+    })
+    .thenClick('.empty2', function () {
         test.assertSelectorHasText('h1 span', '')
         test.assertSelectorHasText('h2 span', '')
         test.assertSelectorHasText('h3 span', 'Oh yeah ')
-
     })
     .run(function () {
         test.done()

test/functional/specs/nested-repeat.js

@@ -1,10 +1,9 @@
 casper.test.begin('Nested Repeat', 12, function (test) {
 
     casper
-    .start('./fixtures/nested-repeat.html', function () {
-
+    .start('./fixtures/nested-repeat.html')
+    .then(function () {
         var i, j
-
         for (i = 0; i < 2; i++) {
             for (j = 0; j < 2; j++) {
                 test.assertSelectorHasText(
@@ -13,10 +12,13 @@ casper.test.begin('Nested Repeat', 12, function (test) {
                 )
             }
         }
-
+    })
+    .then(function () {
         this.click('#b0')
         this.click('#b1')
-
+    })
+    .then(function () {
+        var i, j
         for (i = 0; i < 2; i++) {
             for (j = 0; j < 2; j++) {
                 test.assertSelectorHasText(
@@ -25,17 +27,25 @@ casper.test.begin('Nested Repeat', 12, function (test) {
                 )
             }
         }
-
+    })
+    .then(function () {
+        var i, j
         for (i = 0; i < 2; i++) {
             for (j = 0; j < 2; j++) {
                 this.click('#b' + i + '-' + j)
+            }
+        }
+    })
+    .then(function () {
+        var i, j
+        for (i = 0; i < 2; i++) {
+            for (j = 0; j < 2; j++) {
                 test.assertSelectorHasText(
                     '.list-' + i + ' .list-' + j,
                     i + '.' + j + ' : hi<-hi'
                 )
             }
         }
-
     })
     .run(function () {
         test.done()

test/functional/specs/nested-vms.js

@@ -1,7 +1,8 @@
 casper.test.begin('Nested Viewmodels', 7, function (test) {
 
     casper
-    .start('./fixtures/nested-vms.html', function () {
+    .start('./fixtures/nested-vms.html')
+    .then(function () {
 
         test.assertSelectorHasText('.ancestor', 'Andy Johnson')
         test.assertSelectorHasText('.jack', 'Jack, son of Andy')

test/functional/specs/repeated-items.js

@@ -1,66 +1,69 @@
 casper.test.begin('Repeated Items', 41, function (test) {
 
     casper
-    .start('./fixtures/repeated-items.html', function () {
+    .start('./fixtures/repeated-items.html')
+    .then(function () {
 
         // initial values
         test.assertSelectorHasText('.count', '3')
         test.assertSelectorHasText('.item:nth-child(1)', '0 A')
         test.assertSelectorHasText('.item:nth-child(2)', '1 B')
         test.assertSelectorHasText('.item:nth-child(3)', '2 C')
 
-        this.click('.push')
+    })
+    .thenClick('.push', function () {
         test.assertSelectorHasText('.count', '4')
         test.assertSelectorHasText('.item:nth-child(4)', '3 0')
-
-        this.click('.shift')
+    })
+    .thenClick('.shift', function () {
         test.assertSelectorHasText('.count', '3')
         test.assertSelectorHasText('.item:nth-child(1)', '0 B')
         test.assertSelectorHasText('.item:nth-child(2)', '1 C')
         test.assertSelectorHasText('.item:nth-child(3)', '2 0')
-
-        this.click('.pop')
+    })
+    .thenClick('.pop', function () {
         test.assertSelectorHasText('.count', '2')
         test.assertSelectorHasText('.item:nth-child(1)', '0 B')
         test.assertSelectorHasText('.item:nth-child(2)', '1 C')
-
-        this.click('.unshift')
+    })
+    .thenClick('.unshift', function () {
         test.assertSelectorHasText('.count', '3')
         test.assertSelectorHasText('.item:nth-child(1)', '0 1')
         test.assertSelectorHasText('.item:nth-child(2)', '1 B')
         test.assertSelectorHasText('.item:nth-child(3)', '2 C')
-
-        this.click('.splice')
+    })
+    .thenClick('.splice', function () {
         test.assertSelectorHasText('.count', '4')
         test.assertSelectorHasText('.item:nth-child(1)', '0 1')
         test.assertSelectorHasText('.item:nth-child(2)', '1 2')
         test.assertSelectorHasText('.item:nth-child(3)', '2 3')
         test.assertSelectorHasText('.item:nth-child(4)', '3 C')
-
-        this.click('.remove')
+    })
+    .thenClick('.remove', function () {
         test.assertSelectorHasText('.count', '3')
         test.assertSelectorHasText('.item:nth-child(1)', '0 1')
         test.assertSelectorHasText('.item:nth-child(2)', '1 2')
         test.assertSelectorHasText('.item:nth-child(3)', '2 3')
-
-        this.click('.replace')
+    })
+    .thenClick('.replace', function () {
         test.assertSelectorHasText('.count', '3')
         test.assertSelectorHasText('.item:nth-child(1)', '0 1')
         test.assertSelectorHasText('.item:nth-child(2)', '1 2')
         test.assertSelectorHasText('.item:nth-child(3)', '2 4')
-
-        this.click('.reverse')
+    })
+    .thenClick('.reverse', function () {
         test.assertSelectorHasText('.count', '3')
         test.assertSelectorHasText('.item:nth-child(1)', '0 4')
         test.assertSelectorHasText('.item:nth-child(2)', '1 2')
         test.assertSelectorHasText('.item:nth-child(3)', '2 1')
-
-        this.click('.sort')
+    })
+    .thenClick('.sort', function () {
         test.assertSelectorHasText('.count', '3')
         test.assertSelectorHasText('.item:nth-child(1)', '0 1')
         test.assertSelectorHasText('.item:nth-child(2)', '1 2')
         test.assertSelectorHasText('.item:nth-child(3)', '2 4')
-
+    })
+    .then(function () {
         // make sure things work on empty array
         this.click('.pop')
         this.click('.pop')
@@ -72,10 +75,11 @@ casper.test.begin('Repeated Items', 41, function (test) {
         this.click('.sort')
         this.click('.reverse')
         this.click('.splice')
+    })
+    .then(function () {
         test.assertSelectorHasText('.count', '2')
         test.assertSelectorHasText('.item:nth-child(1)', '0 6')
         test.assertSelectorHasText('.item:nth-child(2)', '1 7')
-
     })
     .run(function () {
         test.done()