[mdv] implement full DOM stability

pkg/mdv/test/template_element_test.dart

Index: pkg/mdv/test/template_element_test.dart
diff --git a/pkg/mdv/test/template_element_test.dart b/pkg/mdv/test/template_element_test.dart
index 3602db0c8fa7708d427daeda27728bf7061f85f3..d2b1ff19b7f973605c5f1f0674d3e2d0cd440c46 100644
--- a/pkg/mdv/test/template_element_test.dart
+++ b/pkg/mdv/test/template_element_test.dart
@@ -73,6 +73,22 @@ templateElementTests() {
     target.dispatchEvent(new Event(type, cancelable: false));
   }
 
+  var expando = new Expando('test');
+  void addExpandos(node) {

[justinfagnani, 2013/06/26 20:01:13]

Consider a more descriptive name than addExpandos(), preferably including 'text'
since this is for the text property.

[Jennifer Messerly, 2013/06/26 20:47:50]

I usually try to keep names as close as possible to the original to make future
porting easier (other than Dart-specific changes, like changing underscores).

However they did have these as local functions. Maybe I should copy it back into
the two test cases?
Other possible courses of action: comment on original CL and/or file a pull
request to change MDV.

+    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', () {
     var div = createTestHtml('<template bind={{}}>text</template>');
     recursivelySetTemplateModel(div, null);
@@ -267,6 +283,67 @@ templateElementTests() {
     expect(div.nodes.length, 3);
   });
 
+  test('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);

[justinfagnani, 2013/06/26 20:01:13]

what is the reason for setting the model on all <template>s in the fragment?

[Jennifer Messerly, 2013/06/26 20:47:50]

it's just shorthand used for the tests

+
+    deliverChanges(model);
+    expect(div.nodes.length, 6);
+    var template = div.$dom_firstChild;

[justinfagnani, 2013/06/26 20:01:13]

I've always wondered about the $-prefixed methods. Why not div.nodes.first?

[Jennifer Messerly, 2013/06/26 20:47:50]

firstChild was just unhidden. Yay!

+
+    addExpandos(template.nextNode);
+    checkExpandos(template.nextNode);
+
+    final VAL = const Symbol('val');
+    model.sort((a, b) => a[VAL] - b[VAL]);
+    deliverChanges(model);
+    checkExpandos(template.nextNode);
+
+    model = toObservable(model.reversed);
+    recursivelySetTemplateModel(div, model);
+    deliverChanges(model);
+    checkExpandos(template.nextNode);
+
+    for (var item in model) {
+      item[VAL] += 1;
+    }
+
+    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");

[justinfagnani, 2013/06/26 20:01:13]

do you want to check that the nodes are not reused?

[Jennifer Messerly, 2013/06/26 20:47:50]

that seems like a valid question to ask on the original CL. Do you think it's
worth sending a pull request to MDV for this?

+  });
+
+  test('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.$dom_firstChild;
+
+    addExpandos(template.nextNode);
+    checkExpandos(template.nextNode);
+
+    model = toObservable({'foo': model['foo']});
+    recursivelySetTemplateModel(div, model);
+    deliverChanges(model);
+    checkExpandos(template.nextNode);
+  });
+
   test('Repeat-Empty', () {
     var div = createTestHtml(
         '<template repeat>text</template>');