implement dirty checking for @observable objects

pkg/mdv/test/template_element_test.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 library template_element_test;
 
 import 'dart:async';
 import 'dart:collection';
 import 'dart:html';
 import 'dart:math' as math;
 import 'package:mdv/mdv.dart' as mdv;
 import 'package:observe/observe.dart';
 import 'package:unittest/html_config.dart';
 import 'package:unittest/unittest.dart';
-import 'observe_utils.dart';
+import 'mdv_test_utils.dart';
 
 // Note: this file ported from
 // https://github.com/toolkitchen/mdv/blob/master/tests/template_element.js
 // TODO(jmesserly): submit a small cleanup patch to original. I fixed some
 // cases where "div" and "t" were unintentionally using the JS global scope;
 // look for "assertNodesAre".
 
 main() {
   mdv.initialize();
   useHtmlConfiguration();
@@ skipping 40 matching lines @@
   recursivelySetTemplateModel(element, model) {
     for (var node in element.queryAll('*')) {
       if (node.isTemplate) node.model = model;
     }
   }
 
   dispatchEvent(type, target) {
     target.dispatchEvent(new Event(type, cancelable: false));
   }
 
-  var expando = new Expando('test');
+  var expando = new Expando('observeTest');
   void addExpandos(node) {
     while (node != null) {
       expando[node] = node.text;
       node = node.nextNode;
     }
   }
 
   void checkExpandos(node) {
     expect(node, isNotNull);
     while (node != null) {
       expect(expando[node], node.text);
       node = node.nextNode;
     }
   }
 
-  test('Template', () {
+  observeTest('Template', () {
     var div = createTestHtml('<template bind={{}}>text</template>');
     recursivelySetTemplateModel(div, null);
-    deliverChangeRecords();
+    performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'text');
   });
 
-  test('Template bind, no parent', () {
+  observeTest('Template bind, no parent', () {
     var div = createTestHtml('<template bind>text</template>');
     var template = div.nodes[0];
     template.remove();
 
     recursivelySetTemplateModel(template, toSymbolMap({}));
-    deliverChangeRecords();
+    performMicrotaskCheckpoint();
     expect(template.nodes.length, 0);
     expect(template.nextNode, null);
     // TODO(jmesserly): the JS tests assert that observer callbacks had no
     // exceptions. How do we replicate this?
   });
 
-  test('Template bind, no defaultView', () {
+  observeTest('Template bind, no defaultView', () {
     var div = createTestHtml('<template bind>text</template>');
     var template = div.nodes[0];
     var doc = document.implementation.createHtmlDocument('');
     doc.adoptNode(div);
     recursivelySetTemplateModel(template, toSymbolMap({}));
-    deliverChangeRecords();
+    performMicrotaskCheckpoint();
     expect(div.nodes.length, 1);
     // TODO(jmesserly): the JS tests assert that observer callbacks had no
     // exceptions. How do we replicate this?
   });
 
-  test('Template-Empty Bind', () {
+  observeTest('Template-Empty Bind', () {
     var div = createTestHtml('<template bind>text</template>');
     recursivelySetTemplateModel(div, null);
-    deliverChangeRecords();
+    performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'text');
   });
 
-  test('TextTemplateWithNullStringBinding', () {
+  observeTest('TextTemplateWithNullStringBinding', () {
     var div = createTestHtml('<template bind={{}}>a{{b}}c</template>');
     var model = toSymbolMap({'b': 'B'});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'aBc');
 
     model[sym('b')] = 'b';
     deliverChanges(model);
     expect(div.nodes.last.text, 'abc');
 
     model[sym('b')] = null;
     deliverChanges(model);
     expect(div.nodes.last.text, 'ac');
 
     model = null;
     deliverChanges(model);
     // setting model isn't observable.
     expect(div.nodes.last.text, 'ac');
   });
 
-  test('TextTemplateWithBindingPath', () {
+  observeTest('TextTemplateWithBindingPath', () {
     var div = createTestHtml(
         '<template bind="{{ data }}">a{{b}}c</template>');
     var model = toSymbolMap({ 'data': {'b': 'B'} });
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'aBc');
 
     model[sym('data')][sym('b')] = 'b';
     deliverChanges(model);
     expect(div.nodes.last.text, 'abc');
 
     model[sym('data')] = toSymbols({'b': 'X'});
     deliverChanges(model);
     expect(div.nodes.last.text, 'aXc');
 
     model[sym('data')] = null;
     deliverChanges(model);
     expect(div.nodes.last.text, 'ac');
   });
 
-  test('TextTemplateWithBindingAndConditional', () {
+  observeTest('TextTemplateWithBindingAndConditional', () {
     var div = createTestHtml(
         '<template bind="{{}}" if="{{ d }}">a{{b}}c</template>');
     var model = toSymbolMap({'b': 'B', 'd': 1});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'aBc');
 
     model[sym('b')] = 'b';
     deliverChanges(model);
     expect(div.nodes.last.text, 'abc');
 
     // TODO(jmesserly): MDV set this to empty string and relies on JS conversion
     // rules. Is that intended?
     // See https://github.com/toolkitchen/mdv/issues/59
     model[sym('d')] = null;
     deliverChanges(model);
     expect(div.nodes.length, 1);
 
     model[sym('d')] = 'here';
     model[sym('b')] = 'd';
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'adc');
   });
 
-  test('TemplateWithTextBinding2', () {
+  observeTest('TemplateWithTextBinding2', () {
     var div = createTestHtml(
         '<template bind="{{ b }}">a{{value}}c</template>');
     expect(div.nodes.length, 1);
     var model = toSymbolMap({'b': {'value': 'B'}});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'aBc');
 
     model[sym('b')] = toSymbols({'value': 'b'});
     deliverChanges(model);
     expect(div.nodes.last.text, 'abc');
   });
 
-  test('TemplateWithAttributeBinding', () {
+  observeTest('TemplateWithAttributeBinding', () {
     var div = createTestHtml(
         '<template bind="{{}}">'
         '<div foo="a{{b}}c"></div>'
         '</template>');
     var model = toSymbolMap({'b': 'B'});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     expect(div.nodes.last.attributes['foo'], 'aBc');
 
     model[sym('b')] = 'b';
     deliverChanges(model);
     expect(div.nodes.last.attributes['foo'], 'abc');
 
     model[sym('b')] = 'X';
     deliverChanges(model);
     expect(div.nodes.last.attributes['foo'], 'aXc');
   });
 
-  test('TemplateWithConditionalBinding', () {
+  observeTest('TemplateWithConditionalBinding', () {
     var div = createTestHtml(
         '<template bind="{{}}">'
         '<div foo?="{{b}}"></div>'
         '</template>');
     var model = toSymbolMap({'b': 'b'});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     expect(div.nodes.last.attributes['foo'], '');
     expect(div.nodes.last.attributes, isNot(contains('foo?')));
 
     model[sym('b')] = null;
     deliverChanges(model);
     expect(div.nodes.last.attributes, isNot(contains('foo')));
   });
 
-  test('Repeat', () {
+  observeTest('Repeat', () {
     var div = createTestHtml(
         '<template repeat="{{}}"">text</template>');
 
     var model = toSymbols([0, 1, 2]);
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 4);
 
     model.length = 1;
     deliverChanges(model);
     expect(div.nodes.length, 2);
 
     model.addAll(toSymbols([3, 4]));
     deliverChanges(model);
     expect(div.nodes.length, 4);
 
     model.removeRange(1, 2);
     deliverChanges(model);
     expect(div.nodes.length, 3);
   });
 
-  test('Repeat - Reuse Instances', () {
+  observeTest('Repeat - Reuse Instances', () {
     var div = createTestHtml('<template repeat>{{ val }}</template>');
 
     var model = toSymbols([
       {'val': 10},
       {'val': 5},
       {'val': 2},
       {'val': 8},
       {'val': 1}
     ]);
     recursivelySetTemplateModel(div, model);
@@ skipping 20 matching lines @@
     }
 
     deliverChanges(model);
     expect(div.nodes[1].text, "11");
     expect(div.nodes[2].text, "9");
     expect(div.nodes[3].text, "6");
     expect(div.nodes[4].text, "3");
     expect(div.nodes[5].text, "2");
   });
 
-  test('Bind - Reuse Instance', () {
+  observeTest('Bind - Reuse Instance', () {
     var div = createTestHtml(
         '<template bind="{{ foo }}">{{ bar }}</template>');
 
     var model = toObservable({ 'foo': { 'bar': 5 }});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     var template = div.firstChild;
 
     addExpandos(template.nextNode);
     checkExpandos(template.nextNode);
 
     model = toObservable({'foo': model['foo']});
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
     checkExpandos(template.nextNode);
   });
 
-  test('Repeat-Empty', () {
+  observeTest('Repeat-Empty', () {
     var div = createTestHtml(
         '<template repeat>text</template>');
 
     var model = toSymbols([0, 1, 2]);
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 4);
 
     model.length = 1;
     deliverChanges(model);
     expect(div.nodes.length, 2);
 
     model.addAll(toSymbols([3, 4]));
     deliverChanges(model);
     expect(div.nodes.length, 4);
 
     model.removeRange(1, 2);
     deliverChanges(model);
     expect(div.nodes.length, 3);
   });
 
-  test('Removal from iteration needs to unbind', () {
+  observeTest('Removal from iteration needs to unbind', () {
     var div = createTestHtml(
         '<template repeat="{{}}"><a>{{v}}</a></template>');
     var model = toSymbols([{'v': 0}, {'v': 1}, {'v': 2}, {'v': 3}, {'v': 4}]);
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
 
     var nodes = div.nodes.skip(1).toList();
     var vs = model.toList();
 
     for (var i = 0; i < 5; i++) {
       expect(nodes[i].text, '$i');
     }
 
     model.length = 3;
     deliverChanges(model);
     for (var i = 0; i < 5; i++) {
       expect(nodes[i].text, '$i');
     }
 
     vs[3][sym('v')] = 33;
     vs[4][sym('v')] = 44;
     deliverChanges(model);
     for (var i = 0; i < 5; i++) {
       expect(nodes[i].text, '$i');
     }
   });
 
-  test('DOM Stability on Iteration', () {
+  observeTest('DOM Stability on Iteration', () {
     var div = createTestHtml(
         '<template repeat="{{}}">{{}}</template>');
     var model = toSymbols([1, 2, 3, 4, 5]);
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
 
     // Note: the node at index 0 is the <template>.
     var nodes = div.nodes.toList();
     expect(nodes.length, 6, reason: 'list has 5 items');
@@ skipping 28 matching lines @@
 
     expect(div.nodes.length, 7, reason: 'list has 6 items');
     expect(identical(div.nodes[1], nodes[1]), true);
     expect(identical(div.nodes[2], nodes[2]), true);
     expect(nodes.contains(div.nodes[3]), false, reason: '8 is a new node');
     expect(identical(div.nodes[4], nodes[3]), true);
     expect(identical(div.nodes[5], nodes[4]), true);
     expect(identical(div.nodes[6], nodes[5]), true);
   });
 
-  test('Repeat2', () {
+  observeTest('Repeat2', () {
     var div = createTestHtml(
         '<template repeat="{{}}">{{value}}</template>');
     expect(div.nodes.length, 1);
 
     var model = toSymbols([
       {'value': 0},
       {'value': 1},
       {'value': 2}
     ]);
     recursivelySetTemplateModel(div, model);
@@ skipping 12 matching lines @@
     expect(div.nodes[3].text, '2');
 
     model.replaceRange(0, 1, toSymbols([{'value': 'Zero'}]));
     deliverChanges(model);
     expect(div.nodes.length, 4);
     expect(div.nodes[1].text, 'Zero');
     expect(div.nodes[2].text, 'One');
     expect(div.nodes[3].text, '2');
   });
 
-  test('TemplateWithInputValue', () {
+  observeTest('TemplateWithInputValue', () {
     var div = createTestHtml(
         '<template bind="{{}}">'
         '<input value="{{x}}">'
         '</template>');
     var model = toSymbolMap({'x': 'hi'});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes.length, 2);
     expect(div.nodes.last.value, 'hi');
 
     model[sym('x')] = 'bye';
     expect(div.nodes.last.value, 'hi');
     deliverChanges(model);
     expect(div.nodes.last.value, 'bye');
 
     div.nodes.last.value = 'hello';
     dispatchEvent('input', div.nodes.last);
     expect(model[sym('x')], 'hello');
     deliverChanges(model);
     expect(div.nodes.last.value, 'hello');
   });
 
 //////////////////////////////////////////////////////////////////////////////
 
-  test('Decorated', () {
+  observeTest('Decorated', () {
     var div = createTestHtml(
         '<template bind="{{ XX }}" id="t1">'
           '<p>Crew member: {{name}}, Job title: {{title}}</p>'
         '</template>'
         '<template bind="{{ XY }}" id="t2" ref="t1"></template>');
 
     var model = toSymbolMap({
       'XX': {'name': 'Leela', 'title': 'Captain'},
       'XY': {'name': 'Fry', 'title': 'Delivery boy'},
       'XZ': {'name': 'Zoidberg', 'title': 'Doctor'}
@@ skipping 10 matching lines @@
     instance = t2.nextElementSibling;
     expect(instance.text, 'Crew member: Fry, Job title: Delivery boy');
 
     expect(div.children.length, 4);
     expect(div.nodes.length, 4);
 
     expect(div.nodes[1].tagName, 'P');
     expect(div.nodes[3].tagName, 'P');
   });
 
-  test('DefaultStyles', () {
+  observeTest('DefaultStyles', () {
     var t = new Element.tag('template');
     TemplateElement.decorate(t);
 
     document.body.append(t);
     expect(t.getComputedStyle().display, 'none');
 
     t.remove();
   });
 
 
-  test('Bind', () {
+  observeTest('Bind', () {
     var div = createTestHtml('<template bind="{{}}">Hi {{ name }}</template>');
     var model = toSymbolMap({'name': 'Leela'});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes[1].text, 'Hi Leela');
   });
 
-  test('BindImperative', () {
+  observeTest('BindImperative', () {
     var div = createTestHtml(
         '<template>'
           'Hi {{ name }}'
         '</template>');
     var t = div.nodes.first;
 
     var model = toSymbolMap({'name': 'Leela'});
     t.bind('bind', model, '');
 
     deliverChanges(model);
     expect(div.nodes[1].text, 'Hi Leela');
   });
 
-  test('BindPlaceHolderHasNewLine', () {
+  observeTest('BindPlaceHolderHasNewLine', () {
     var div = createTestHtml('<template bind="{{}}">Hi {{\nname\n}}</template>');
     var model = toSymbolMap({'name': 'Leela'});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(div.nodes[1].text, 'Hi Leela');
   });
 
-  test('BindWithRef', () {
+  observeTest('BindWithRef', () {
     var id = 't${new math.Random().nextDouble()}';
     var div = createTestHtml(
         '<template id="$id">'
           'Hi {{ name }}'
         '</template>'
         '<template ref="$id" bind="{{}}"></template>');
 
     var t1 = div.nodes.first;
     var t2 = div.nodes[1];
 
     expect(t2.ref, t1);
 
     var model = toSymbolMap({'name': 'Fry'});
     recursivelySetTemplateModel(div, model);
 
     deliverChanges(model);
     expect(t2.nextNode.text, 'Hi Fry');
   });
 
-  test('BindChanged', () {
+  observeTest('BindChanged', () {
     var model = toSymbolMap({
       'XX': {'name': 'Leela', 'title': 'Captain'},
       'XY': {'name': 'Fry', 'title': 'Delivery boy'},
       'XZ': {'name': 'Zoidberg', 'title': 'Doctor'}
     });
 
     var div = createTestHtml(
         '<template bind="{{ XX }}">Hi {{ name }}</template>');
 
     recursivelySetTemplateModel(div, model);
@@ skipping 14 matching lines @@
   assertNodesAre(div, [arguments]) {
     var expectedLength = arguments.length;
     expect(div.nodes.length, expectedLength + 1);
 
     for (var i = 0; i < arguments.length; i++) {
       var targetNode = div.nodes[i + 1];
       expect(targetNode.text, arguments[i]);
     }
   }
 
-  test('Repeat3', () {
+  observeTest('Repeat3', () {
     var div = createTestHtml(
         '<template repeat="{{ contacts }}">Hi {{ name }}</template>');
     var t = div.nodes.first;
 
     var m = toSymbols({
       'contacts': [
         {'name': 'Raf'},
         {'name': 'Arv'},
         {'name': 'Neal'}
       ]
@@ skipping 29 matching lines @@
 
     m[sym('contacts')] = toSymbols([{'name': 'Alex'}]);
     deliverChanges(m);
     assertNodesAre(div, ['Hi Alex']);
 
     m[sym('contacts')].length = 0;
     deliverChanges(m);
     assertNodesAre(div, []);
   });
 
-  test('RepeatModelSet', () {
+  observeTest('RepeatModelSet', () {
     var div = createTestHtml(
         '<template repeat="{{ contacts }}">'
           'Hi {{ name }}'
         '</template>');
     var m = toSymbols({
       'contacts': [
         {'name': 'Raf'},
         {'name': 'Arv'},
         {'name': 'Neal'}
       ]
     });
     recursivelySetTemplateModel(div, m);
 
     deliverChanges(m);
     var t = div.nodes.first;
 
     assertNodesAre(div, ['Hi Raf', 'Hi Arv', 'Hi Neal']);
   });
 
-  test('RepeatEmptyPath', () {
+  observeTest('RepeatEmptyPath', () {
     var div = createTestHtml('<template repeat="{{}}">Hi {{ name }}</template>');
     var t = div.nodes.first;
 
     var m = toSymbols([
       {'name': 'Raf'},
       {'name': 'Arv'},
       {'name': 'Neal'}
     ]);
     recursivelySetTemplateModel(div, m);
 
@@ skipping 20 matching lines @@
     m.replaceRange(0, 1, toSymbols([{'name': 'Tab'}, {'name': 'Neal'}]));
     deliverChanges(m);
     assertNodesAre(div, ['Hi Tab', 'Hi Neal', 'Hi Erik', 'Hi Dimitri', 'Hi Alex']);
 
     m.length = 0;
     m.add(toSymbols({'name': 'Alex'}));
     deliverChanges(m);
     assertNodesAre(div, ['Hi Alex']);
   });
 
-  test('RepeatNullModel', () {
+  observeTest('RepeatNullModel', () {
     var div = createTestHtml('<template repeat="{{}}">Hi {{ name }}</template>');
     var t = div.nodes.first;
 
     var m = null;
     recursivelySetTemplateModel(div, m);
 
     expect(div.nodes.length, 1);
 
     t.attributes['iterate'] = '';
     m = toSymbols({});
     recursivelySetTemplateModel(div, m);
 
     deliverChanges(m);
     expect(div.nodes.length, 1);
   });
 
-  test('RepeatReuse', () {
+  observeTest('RepeatReuse', () {
     var div = createTestHtml('<template repeat="{{}}">Hi {{ name }}</template>');
     var t = div.nodes.first;
 
     var m = toSymbols([
       {'name': 'Raf'},
       {'name': 'Arv'},
       {'name': 'Neal'}
     ]);
     recursivelySetTemplateModel(div, m);
     deliverChanges(m);
@@ skipping 12 matching lines @@
         reason: 'Should not reuse when replacing');
     expect(div.nodes[3], node3,
         reason: 'model[2] did not change so the node should not have changed');
 
     node2 = div.nodes[2];
     m.insert(0, toSymbols({'name': 'Alex'}));
     deliverChanges(m);
     assertNodesAre(div, ['Hi Alex', 'Hi Raf', 'Hi Erik', 'Hi Neal']);
   });
 
-  test('TwoLevelsDeepBug', () {
+  observeTest('TwoLevelsDeepBug', () {
     var div = createTestHtml(
       '<template bind="{{}}"><span><span>{{ foo }}</span></span></template>');
 
     var model = toSymbolMap({'foo': 'bar'});
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
 
     expect(div.nodes[1].nodes[0].nodes[0].text, 'bar');
   });
 
-  test('Checked', () {
+  observeTest('Checked', () {
     var div = createTestHtml(
         '<template>'
           '<input type="checkbox" checked="{{a}}">'
         '</template>');
     var t = div.nodes.first;
     var m = toSymbols({
       'a': true
     });
     t.bind('bind', m, '');
     deliverChanges(m);
@@ skipping 28 matching lines @@
 
     m[sym('a')][sym('b')] = 11;
     deliverChanges(m);
     expect(div.nodes[start].text, '11');
 
     m[sym('a')][sym('c')] = toSymbols({'d': 22});
     deliverChanges(m);
     expect(div.nodes[start + 2].text, '22');
   }
 
-  test('Nested', () {
+  observeTest('Nested', () {
     nestedHelper(
         '<template bind="{{a}}">'
           '{{b}}'
           '<template bind="{{c}}">'
             '{{d}}'
           '</template>'
         '</template>', 1);
   });
 
-  test('NestedWithRef', () {
+  observeTest('NestedWithRef', () {
     nestedHelper(
         '<template id="inner">{{d}}</template>'
         '<template id="outer" bind="{{a}}">'
           '{{b}}'
           '<template ref="inner" bind="{{c}}"></template>'
         '</template>', 2);
   });
 
   nestedIterateInstantiateHelper(s, start) {
     var div = createTestHtml(s);
@@ skipping 25 matching lines @@
     m[sym('a')][1] = toSymbols({
       'b': 3,
       'c': {'d': 33}
     });
 
     deliverChanges(m);
     expect(div.nodes[start + 3].text, '3');
     expect(div.nodes[start + 5].text, '33');
   }
 
-  test('NestedRepeatBind', () {
+  observeTest('NestedRepeatBind', () {
     nestedIterateInstantiateHelper(
         '<template repeat="{{a}}">'
           '{{b}}'
           '<template bind="{{c}}">'
             '{{d}}'
           '</template>'
         '</template>', 1);
   });
 
-  test('NestedRepeatBindWithRef', () {
+  observeTest('NestedRepeatBindWithRef', () {
     nestedIterateInstantiateHelper(
         '<template id="inner">'
           '{{d}}'
         '</template>'
         '<template repeat="{{a}}">'
           '{{b}}'
           '<template ref="inner" bind="{{c}}"></template>'
         '</template>', 2);
   });
 
@@ skipping 32 matching lines @@
     });
 
     i = start + 4;
     deliverChanges(m);
     expect(div.nodes[start + 4].text, '3');
     expect(div.nodes[start + 6].text, '31');
     expect(div.nodes[start + 7].text, '32');
     expect(div.nodes[start + 8].text, '33');
   }
 
-  test('NestedRepeatBind', () {
+  observeTest('NestedRepeatBind', () {
     nestedIterateIterateHelper(
         '<template repeat="{{a}}">'
           '{{b}}'
           '<template repeat="{{c}}">'
             '{{d}}'
           '</template>'
         '</template>', 1);
   });
 
-  test('NestedRepeatRepeatWithRef', () {
+  observeTest('NestedRepeatRepeatWithRef', () {
     nestedIterateIterateHelper(
         '<template id="inner">'
           '{{d}}'
         '</template>'
         '<template repeat="{{a}}">'
           '{{b}}'
           '<template ref="inner" repeat="{{c}}"></template>'
         '</template>', 2);
   });
 
-  test('NestedRepeatSelfRef', () {
+  observeTest('NestedRepeatSelfRef', () {
     var div = createTestHtml(
         '<template id="t" repeat="{{}}">'
           '{{name}}'
           '<template ref="t" repeat="{{items}}"></template>'
         '</template>');
 
     var m = toSymbols([
       {
         'name': 'Item 1',
         'items': [
@@ skipping 33 matching lines @@
 
     m[0] = toSymbols({'name': 'Item 1 changed'});
 
     i = 1;
     deliverChanges(m);
     expect(div.nodes[i++].text, 'Item 1 changed');
     expect(div.nodes[i++].tagName, 'TEMPLATE');
     expect(div.nodes[i++].text, 'Item 2');
   });
 
-  test('Attribute Template Option/Optgroup', () {
+  observeTest('Attribute Template Option/Optgroup', () {
     var div = createTestHtml(
         '<template bind>'
           '<select selectedIndex="{{ selected }}">'
             '<optgroup template repeat="{{ groups }}" label="{{ name }}">'
               '<option template repeat="{{ items }}">{{ val }}</option>'
             '</optgroup>'
           '</select>'
         '</template>');
 
     var m = toSymbols({
@@ skipping 19 matching lines @@
     expect(select.nodes[0].ref.content.nodes[0].tagName, 'OPTGROUP');
 
     var optgroup = select.nodes[1];
     expect(optgroup.nodes[0].tagName, 'TEMPLATE');
     expect(optgroup.nodes[1].tagName, 'OPTION');
     expect(optgroup.nodes[1].text, '0');
     expect(optgroup.nodes[2].tagName, 'OPTION');
     expect(optgroup.nodes[2].text, '1');
   });
 
-  test('NestedIterateTableMixedSemanticNative', () {
+  observeTest('NestedIterateTableMixedSemanticNative', () {
     if (!TemplateElement.supported) return;
 
     var div = createTestHtml(
         '<table><tbody>'
           '<template repeat="{{}}">'
             '<tr>'
               '<td template repeat="{{}}" class="{{ val }}">{{ val }}</td>'
             '</tr>'
           '</template>'
         '</tbody></table>');
@@ skipping 20 matching lines @@
     // 1 for the <td template>, 2 * (1 td)
     expect(tbody.nodes[2].nodes.length, 3);
     expect(tbody.nodes[2].nodes[1].text, '2');
     expect(tbody.nodes[2].nodes[2].text, '3');
 
     // Asset the 'class' binding is retained on the semantic template (just
     // check the last one).
     expect(tbody.nodes[2].nodes[2].attributes["class"], '3');
   });
 
-  test('NestedIterateTable', () {
+  observeTest('NestedIterateTable', () {
     var div = createTestHtml(
         '<table><tbody>'
           '<tr template repeat="{{}}">'
             '<td template repeat="{{}}" class="{{ val }}">{{ val }}</td>'
           '</tr>'
         '</tbody></table>');
 
     var m = toSymbols([
       [{ 'val': 0 }, { 'val': 1 }],
       [{ 'val': 2 }, { 'val': 3 }]
@@ skipping 16 matching lines @@
     // 1 for the <td template>, 2 * (1 td)
     expect(tbody.nodes[2].nodes.length, 3);
     expect(tbody.nodes[2].nodes[1].text, '2');
     expect(tbody.nodes[2].nodes[2].text, '3');
 
     // Asset the 'class' binding is retained on the semantic template (just check
     // the last one).
     expect(tbody.nodes[2].nodes[2].attributes['class'], '3');
   });
 
-  test('NestedRepeatDeletionOfMultipleSubTemplates', () {
+  observeTest('NestedRepeatDeletionOfMultipleSubTemplates', () {
     var div = createTestHtml(
         '<ul>'
           '<template repeat="{{}}" id=t1>'
             '<li>{{name}}'
               '<ul>'
                 '<template ref=t1 repaet="{{items}}"></template>'
               '</ul>'
             '</li>'
           '</template>'
         '</ul>');
 
     var m = toSymbols([
       {
         'name': 'Item 1',
         'items': [
           {
             'name': 'Item 1.1'
           }
         ]
       }
     ]);
 
     recursivelySetTemplateModel(div, m);
 
     deliverChanges(m);
     m.removeAt(0);
     deliverChanges(m);
   });
 
-  test('DeepNested', () {
+  observeTest('DeepNested', () {
     var div = createTestHtml(
       '<template bind="{{a}}">'
         '<p>'
           '<template bind="{{b}}">'
             '{{ c }}'
           '</template>'
         '</p>'
       '</template>');
 
     var m = toSymbols({
       'a': {
         'b': {
           'c': 42
         }
       }
     });
     recursivelySetTemplateModel(div, m);
     deliverChanges(m);
 
     expect(div.nodes[1].tagName, 'P');
     expect(div.nodes[1].nodes.first.tagName, 'TEMPLATE');
     expect(div.nodes[1].nodes[1].text, '42');
   });
 
-  test('TemplateContentRemoved', () {
+  observeTest('TemplateContentRemoved', () {
     var div = createTestHtml('<template bind="{{}}">{{ }}</template>');
     var model = 42;
 
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
     expect(div.nodes[1].text, '42');
     expect(div.nodes[0].text, '');
   });
 
-  test('TemplateContentRemovedEmptyArray', () {
+  observeTest('TemplateContentRemovedEmptyArray', () {
     var div = createTestHtml('<template iterate>Remove me</template>');
     var model = toSymbols([]);
 
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
     expect(div.nodes.length, 1);
     expect(div.nodes[0].text, '');
   });
 
-  test('TemplateContentRemovedNested', () {
+  observeTest('TemplateContentRemovedNested', () {
     var div = createTestHtml(
         '<template bind="{{}}">'
           '{{ a }}'
           '<template bind="{{}}">'
             '{{ b }}'
           '</template>'
         '</template>');
 
     var model = toSymbolMap({
       'a': 1,
       'b': 2
     });
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
 
     expect(div.nodes[0].text, '');
     expect(div.nodes[1].text, '1');
     expect(div.nodes[2].text, '');
     expect(div.nodes[3].text, '2');
   });
 
-  test('BindWithUndefinedModel', () {
+  observeTest('BindWithUndefinedModel', () {
     var div = createTestHtml(
         '<template bind="{{}}" if="{{}}">{{ a }}</template>');
 
     var model = toSymbolMap({'a': 42});
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
     expect(div.nodes[1].text, '42');
 
     model = null;
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
     expect(div.nodes.length, 1);
 
     model = toSymbols({'a': 42});
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
     expect(div.nodes[1].text, '42');
   });
 
-  test('BindNested', () {
+  observeTest('BindNested', () {
     var div = createTestHtml(
         '<template bind="{{}}">'
           'Name: {{ name }}'
           '<template bind="{{wife}}" if="{{wife}}">'
             'Wife: {{ name }}'
           '</template>'
           '<template bind="{{child}}" if="{{child}}">'
             'Child: {{ name }}'
           '</template>'
         '</template>');
@@ skipping 15 matching lines @@
     deliverChanges(m);
     expect(div.nodes.length, 6);
     expect(div.nodes[5].text, 'Child: Dwight');
 
     m.remove(sym('wife'));
     deliverChanges(m);
     expect(div.nodes.length, 5);
     expect(div.nodes[4].text, 'Child: Dwight');
   });
 
-  test('BindRecursive', () {
+  observeTest('BindRecursive', () {
     var div = createTestHtml(
         '<template bind="{{}}" if="{{}}" id="t">'
           'Name: {{ name }}'
           '<template bind="{{friend}}" if="{{friend}}" ref="t"></template>'
         '</template>');
 
     var m = toSymbols({
       'name': 'Fry',
       'friend': {
         'name': 'Bender'
@@ skipping 10 matching lines @@
     deliverChanges(m);
     expect(div.nodes.length, 7);
     expect(div.nodes[5].text, 'Name: Leela');
 
     m[sym('friend')] = toSymbols({'name': 'Leela'});
     deliverChanges(m);
     expect(div.nodes.length, 5);
     expect(div.nodes[3].text, 'Name: Leela');
   });
 
-  test('ChangeFromBindToRepeat', () {
+  observeTest('ChangeFromBindToRepeat', () {
     var div = createTestHtml(
         '<template bind="{{a}}">'
           '{{ length }}'
         '</template>');
     var template = div.nodes.first;
 
     // Note: this test data is a little different from the JS version, because
     // we allow binding to the "length" field of the Map in preference to
     // binding keys.
     var m = toSymbols({
@@ skipping 19 matching lines @@
     expect(div.nodes[3].text, '2');
 
     template.unbind('repeat');
     template.bind('bind', m, 'a.1.b');
 
     deliverChanges(m);
     expect(div.nodes.length, 2);
     expect(div.nodes[1].text, '4');
   });
 
-  test('ChangeRefId', () {
+  observeTest('ChangeRefId', () {
     var div = createTestHtml(
         '<template id="a">a:{{ }}</template>'
         '<template id="b">b:{{ }}</template>'
         '<template repeat="{{}}">'
           '<template ref="a" bind="{{}}"></template>'
         '</template>');
     var model = toSymbols([]);
     recursivelySetTemplateModel(div, model);
     deliverChanges(model);
 
     expect(div.nodes.length, 3);
 
     document.getElementById('a').id = 'old-a';
     document.getElementById('b').id = 'a';
 
     model..add(1)..add(2);
     deliverChanges(model);
 
     expect(div.nodes.length, 7);
     expect(div.nodes[4].text, 'b:1');
     expect(div.nodes[6].text, 'b:2');
   });
 
-  test('Content', () {
+  observeTest('Content', () {
     var div = createTestHtml(
         '<template><a></a></template>'
         '<template><b></b></template>');
     var templateA = div.nodes.first;
     var templateB = div.nodes.last;
     var contentA = templateA.content;
     var contentB = templateB.content;
     expect(contentA, isNotNull);
 
     expect(templateA.document, isNot(equals(contentA.document)));
     expect(templateB.document, isNot(equals(contentB.document)));
 
     expect(templateB.document, templateA.document);
     expect(contentB.document, contentA.document);
 
     expect(templateA.document.window, window);
     expect(templateB.document.window, window);
 
     expect(contentA.document.window, null);
     expect(contentB.document.window, null);
 
     expect(contentA.nodes.last, contentA.nodes.first);
     expect(contentA.nodes.first.tagName, 'A');
 
     expect(contentB.nodes.last, contentB.nodes.first);
     expect(contentB.nodes.first.tagName, 'B');
   });
 
-  test('NestedContent', () {
+  observeTest('NestedContent', () {
     var div = createTestHtml(
         '<template>'
         '<template></template>'
         '</template>');
     var templateA = div.nodes.first;
     var templateB = templateA.content.nodes.first;
 
     expect(templateB.document, templateA.content.document);
     expect(templateB.content.document, templateA.content.document);
   });
 
-  test('BindShadowDOM', () {
+  observeTest('BindShadowDOM', () {
     if (ShadowRoot.supported) {
       var root = createShadowTestHtml(
           '<template bind="{{}}">Hi {{ name }}</template>');
       var model = toSymbolMap({'name': 'Leela'});
       recursivelySetTemplateModel(root, model);
       deliverChanges(model);
       expect(root.nodes[1].text, 'Hi Leela');
     }
   });
 
-  test('BindShadowDOM bindModel', () {
+  observeTest('BindShadowDOM bindModel', () {
     if (ShadowRoot.supported) {
       var root = createShadowTestHtml('Hi {{ name }}');
       var model = toSymbolMap({'name': 'Leela'});
       mdv.bindModel(root, model);
-      deliverChangeRecords();
+      performMicrotaskCheckpoint();
       expect(root.text, 'Hi Leela');
     }
   });
 
-  test('bindModel to polyfilled shadow root', () {
+  observeTest('bindModel to polyfilled shadow root', () {
     var root = createTestHtml('Hi {{ name }}');
     var model = toSymbolMap({'name': 'Leela'});
     mdv.bindModel(root, model);
-    deliverChangeRecords();
+    performMicrotaskCheckpoint();
     expect(root.text, 'Hi Leela');
   });
 
-  test('BindShadowDOM Template Ref', () {
+  observeTest('BindShadowDOM Template Ref', () {
     if (ShadowRoot.supported) {
       var root = createShadowTestHtml(
           '<template id=foo>Hi</template><template bind ref=foo></template>');
       recursivelySetTemplateModel(root, toSymbolMap({}));
-      deliverChangeRecords();
+      performMicrotaskCheckpoint();
       expect(root.nodes.length, 3);
     }
   });
 
   // https://github.com/toolkitchen/mdv/issues/8
-  test('UnbindingInNestedBind', () {
+  observeTest('UnbindingInNestedBind', () {
     var div = createTestHtml(
       '<template bind="{{outer}}" if="{{outer}}" syntax="testHelper">'
         '<template bind="{{inner}}" if="{{inner}}">'
           '{{ age }}'
         '</template>'
       '</template>');
 
     var syntax = new UnbindingInNestedBindSyntax();
     TemplateElement.syntax['testHelper'] = syntax;
     try {
@@ skipping 20 matching lines @@
       syntax.expectedAge = 2;
 
       deliverChanges(model);
       expect(syntax.count, 2);
     } finally {
       TemplateElement.syntax.remove('testHelper');
     }
   });
 
   // https://github.com/toolkitchen/mdv/issues/8
-  test('DontCreateInstancesForAbandonedIterators', () {
+  observeTest('DontCreateInstancesForAbandonedIterators', () {
     var div = createTestHtml(
       '<template bind="{{}} {{}}">'
         '<template bind="{{}}">Foo'
         '</template>'
       '</template>');
     recursivelySetTemplateModel(div, null);
-    // TODO(jmesserly): how to fix this test?
-    // Perhaps revive the original?
-    // https://github.com/toolkitchen/mdv/commit/8bc1e3466aeb6930150c0d3148f0e830184bf599#L3R1278
-    //expect(!!ChangeSummary._errorThrownDuringCallback, false);
+    performMicrotaskCheckpoint();
   });
 
-  test('CreateInstance', () {
+  observeTest('CreateInstance', () {
     TemplateElement.syntax['Test'] = new TestBindingSyntax();
     try {
       var div = createTestHtml(
         '<template bind="{{a}}">'
           '<template bind="{{b}}">'
             '{{ foo }}:{{ replaceme }}'
           '</template>'
         '</template>');
       var outer = div.nodes.first;
       var model = toSymbolMap({'b': {'foo': 'bar'}});
 
       var host = new DivElement();
       var instance = outer.createInstance(model, 'Test');
       expect(outer.content.nodes.first, instance.nodes.first.ref);
       expect(instance.firstChild.attributes['syntax'], 'Test');
 
       host.append(instance);
-      deliverChangeRecords();
+      performMicrotaskCheckpoint();
       expect(host.firstChild.nextNode.text, 'bar:replaced');
     } finally {
       TemplateElement.syntax.remove('Test');
     }
   });
 
-  test('Bootstrap', () {
+  observeTest('Bootstrap', () {
     var div = new DivElement();
     div.innerHtml =
       '<template>'
         '<div></div>'
         '<template>'
           'Hello'
         '</template>'
       '</template>';
 
     TemplateElement.bootstrap(div);
@@ skipping 13 matching lines @@
       '</template>';
 
     TemplateElement.bootstrap(template);
     template2 = template.content.nodes.first;
     expect(template2.content.nodes.length, 2);
     var template3 = template2.content.nodes.first.nextNode;
     expect(template3.content.nodes.length, 1);
     expect(template3.content.nodes.first.text, 'Hello');
   });
 
-  test('instanceCreated hack', () {
+  observeTest('instanceCreated hack', () {
     var called = false;
     var sub = mdv.instanceCreated.listen((node) {
       called = true;
       expect(node.nodeType, Node.DOCUMENT_FRAGMENT_NODE);
     });
 
     var div = createTestHtml('<template bind="{{}}">Foo</template>');
     expect(called, false);
 
     recursivelySetTemplateModel(div, null);
-    deliverChangeRecords();
+    performMicrotaskCheckpoint();
     expect(called, true);
 
     sub.cancel();
   });
 }
 
 class TestBindingSyntax extends CustomBindingSyntax {
   getBinding(model, String path, name, node) {
     if (path.trim() == 'replaceme') return new ObservableBox('replaced');
     return null;
   }
 }
 
 class UnbindingInNestedBindSyntax extends CustomBindingSyntax {
   int expectedAge = 42;
   int count = 0;
 
   getBinding(model, path, name, node) {
     if (name != 'text' || path != 'age')
       return;
 
     expect(model[sym('age')], expectedAge);
     count++;
   }
 }
 
-/** Verifies that the model is Observable, then calls [deliverChangeRecords]. */
+/**
+ * Verifies that the model is Observable, then calls
+ * [performMicrotaskCheckpoint].
+ */
 void deliverChanges(model) {
   expectObservable(model);
-  deliverChangeRecords();
+  performMicrotaskCheckpoint();
 }
 
 void expectObservable(model) {
   if (model is! Observable) {
     // This is here to eagerly catch a bug in the test; it means the test
     // forgot a toSymbols somewhere.
     expect(identical(toSymbols(model), model), true,
         reason: 'model type "${model.runtimeType}" should be observable');
     return;
   }
@@ skipping 20 matching lines @@
       k = k is String ? sym(k) : _deepToSymbol(k);
       result[k] = _deepToSymbol(v);
     });
     return result;
   }
   if (value is Iterable) {
     return value.map(_deepToSymbol).toList();
   }
   return value;
 }