port TemplateBinding to ed3266266e751b5ab1f75f8e0509d0d5f0ef35d8

pkg/template_binding/test/template_binding_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_binding.test.template_element_test;
+library template_binding.test.template_binding_test;
 
 import 'dart:async';
 import 'dart:collection';
 import 'dart:html';
 import 'dart:math' as math;
 import 'package:observe/observe.dart';
 import 'package:template_binding/template_binding.dart';
 import 'package:unittest/html_config.dart';
 import 'package:unittest/unittest.dart';
+
+// TODO(jmesserly): merge this file?
+import 'binding_syntax.dart' show syntaxTests;
 import 'utils.dart';
 
 // Note: this file ported from
-// https://github.com/toolkitchen/mdv/blob/master/tests/template_element.js
+// https://github.com/Polymer/TemplateBinding/blob/ed3266266e751b5ab1f75f8e0509d0d5f0ef35d8/tests/tests.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() {
   useHtmlConfiguration();
-  group('Template Element', templateElementTests);
-}
 
-templateElementTests() {
   setUp(() {
     document.body.append(testDiv = new DivElement());
   });
 
   tearDown(() {
     testDiv.remove();
     testDiv = null;
   });
 
-  var expando = new Expando('observeTest');
-  void addExpandos(node) {
-    while (node != null) {
-      expando[node] = node.text;
-      node = node.nextNode;
-    }
+  group('Template Instantiation', templateInstantiationTests);
+
+  group('Binding Delegate API', () {
+    group('with Observable', () {
+      syntaxTests(([f, b]) => new FooBarModel(f, b));
+    });
+
+    group('with ChangeNotifier', () {
+      syntaxTests(([f, b]) => new FooBarNotifyModel(f, b));
+    });
+  });
+
+  group('Compat', compatTests);
+}
+
+var expando = new Expando('test');
+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;
-    }
+void checkExpandos(node) {
+  expect(node, isNotNull);
+  while (node != null) {
+    expect(expando[node], node.text);
+    node = node.nextNode;
   }
+}
+
+templateInstantiationTests() {
 
   observeTest('Template', () {
     var div = createTestHtml('<template bind={{}}>text</template>');
-    recursivelySetTemplateModel(div, null);
+    templateBind(div.firstChild).model = {};
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'text');
+
+    templateBind(div.firstChild).model = null;
+    performMicrotaskCheckpoint();
+    expect(div.nodes.length, 1);
   });
 
   observeTest('Template bind, no parent', () {
     var div = createTestHtml('<template bind>text</template>');
-    var template = div.nodes[0];
+    var template = div.firstChild;
     template.remove();
 
-    recursivelySetTemplateModel(template, toObservable({}));
+    templateBind(template).model = {};
     performMicrotaskCheckpoint();
     expect(template.nodes.length, 0);
     expect(template.nextNode, null);
   });
 
   observeTest('Template bind, no defaultView', () {
     var div = createTestHtml('<template bind>text</template>');
-    var template = div.nodes[0];
+    var template = div.firstChild;
     var doc = document.implementation.createHtmlDocument('');
     doc.adoptNode(div);
-    recursivelySetTemplateModel(template, toObservable({}));
+    recursivelySetTemplateModel(template, {});
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 1);
   });
 
   observeTest('Template-Empty Bind', () {
     var div = createTestHtml('<template bind>text</template>');
-    recursivelySetTemplateModel(div, null);
+    var template = div.firstChild;
+    templateBind(template).model = {};
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'text');
   });
 
   observeTest('Template Bind If', () {
     var div = createTestHtml('<template bind if="{{ foo }}">text</template>');
     // Note: changed this value from 0->null because zero is not falsey in Dart.
     // See https://code.google.com/p/dart/issues/detail?id=11956
     var m = toObservable({ 'foo': null });
-    recursivelySetTemplateModel(div, m);
+    var template = div.firstChild;
+    templateBind(template).model = m;
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 1);
 
     m['foo'] = 1;
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.lastChild.text, 'text');
+
+    templateBind(template).model = null;
+    performMicrotaskCheckpoint();
+    expect(div.nodes.length, 1);
   });
 
   observeTest('Template Bind If, 2', () {
     var div = createTestHtml(
         '<template bind="{{ foo }}" if="{{ bar }}">{{ bat }}</template>');
     var m = toObservable({ 'bar': null, 'foo': { 'bat': 'baz' } });
     recursivelySetTemplateModel(div, m);
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 1);
 
     m['bar'] = 1;
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.lastChild.text, 'baz');
   });
 
   observeTest('Template If', () {
     var div = createTestHtml('<template if="{{ foo }}">{{ value }}</template>');
-    // Note: changed this value from 0->null because zero is not falsey in Dart.
-    // See https://code.google.com/p/dart/issues/detail?id=11956
+    // Note: changed this value from 0->null because zero is not falsey in
+    // Dart. See https://code.google.com/p/dart/issues/detail?id=11956
     var m = toObservable({ 'foo': null, 'value': 'foo' });
-    recursivelySetTemplateModel(div, m);
+    var template = div.firstChild;
+    templateBind(template).model = m;
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 1);
 
     m['foo'] = 1;
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.lastChild.text, 'foo');
+
+    templateBind(template).model = null;
+    performMicrotaskCheckpoint();
+    expect(div.nodes.length, 1);
+  });
+
+  observeTest('Template Empty-If', () {
+    var div = createTestHtml('<template if>{{ value }}</template>');
+    var m = toObservable({ 'value': 'foo' });
+    recursivelySetTemplateModel(div, null);
+    performMicrotaskCheckpoint();
+    expect(div.nodes.length, 1);
+
+    recursivelySetTemplateModel(div, m);
+    performMicrotaskCheckpoint();
+    expect(div.nodes.length, 2);
+    expect(div.lastChild.text, 'foo');
   });
 
   observeTest('Template Repeat If', () {
     var div = createTestHtml(
         '<template repeat="{{ foo }}" if="{{ bar }}">{{ }}</template>');
     // Note: changed this value from 0->null because zero is not falsey in Dart.
     // See https://code.google.com/p/dart/issues/detail?id=11956
     var m = toObservable({ 'bar': null, 'foo': [1, 2, 3] });
-    recursivelySetTemplateModel(div, m);
+    var template = div.firstChild;
+    templateBind(template).model = m;
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 1);
 
     m['bar'] = 1;
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 4);
     expect(div.nodes[1].text, '1');
     expect(div.nodes[2].text, '2');
     expect(div.nodes[3].text, '3');
+
+    templateBind(template).model = null;
+    performMicrotaskCheckpoint();
+    expect(div.nodes.length, 1);
   });
 
   observeTest('TextTemplateWithNullStringBinding', () {
     var div = createTestHtml('<template bind={{}}>a{{b}}c</template>');
     var model = toObservable({'b': 'B'});
     recursivelySetTemplateModel(div, model);
 
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'aBc');
 
     model['b'] = 'b';
     performMicrotaskCheckpoint();
     expect(div.nodes.last.text, 'abc');
 
     model['b'] = null;
     performMicrotaskCheckpoint();
     expect(div.nodes.last.text, 'ac');
 
     model = null;
     performMicrotaskCheckpoint();
     // setting model isn't observable.
     expect(div.nodes.last.text, 'ac');
   });
 
   observeTest('TextTemplateWithBindingPath', () {
     var div = createTestHtml(
         '<template bind="{{ data }}">a{{b}}c</template>');
     var model = toObservable({ 'data': {'b': 'B'} });
-    recursivelySetTemplateModel(div, model);
+    var template = div.firstChild;
+    templateBind(template).model = model;
 
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
     expect(div.nodes.last.text, 'aBc');
 
     model['data']['b'] = 'b';
     performMicrotaskCheckpoint();
     expect(div.nodes.last.text, 'abc');
 
     model['data'] = toObservable({'b': 'X'});
     performMicrotaskCheckpoint();
     expect(div.nodes.last.text, 'aXc');
 
+    // Dart note: changed from `null` since our null means don't render a model.
+    model['data'] = toObservable({});
+    performMicrotaskCheckpoint();
+    expect(div.nodes.last.text, 'ac');
+
     model['data'] = null;
     performMicrotaskCheckpoint();
-    expect(div.nodes.last.text, 'ac');
+    expect(div.nodes.length, 1);
   });
 
   observeTest('TextTemplateWithBindingAndConditional', () {
     var div = createTestHtml(
         '<template bind="{{}}" if="{{ d }}">a{{b}}c</template>');
     var model = toObservable({'b': 'B', 'd': 1});
     recursivelySetTemplateModel(div, model);
 
     performMicrotaskCheckpoint();
     expect(div.nodes.length, 2);
@@ skipping 385 matching lines @@
     var div = createTestHtml(
         '<template bind="{{}}">Hi {{\nname\n}}</template>');
     var model = toObservable({'name': 'Leela'});
     recursivelySetTemplateModel(div, model);
 
     performMicrotaskCheckpoint();
     expect(div.nodes[1].text, 'Hi Leela');
   });
 
   observeTest('BindWithRef', () {
-    var id = 't${new math.Random().nextDouble()}';
+    var id = 't${new math.Random().nextInt(100)}';
     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(templateBind(t2).ref, t1);
 
     var model = toObservable({'name': 'Fry'});
     recursivelySetTemplateModel(div, model);
 
     performMicrotaskCheckpoint();
     expect(t2.nextNode.text, 'Hi Fry');
   });
 
+  observeTest('BindWithDynamicRef', () {
+    var id = 't${new math.Random().nextInt(100)}';
+    var div = createTestHtml(
+        '<template id="$id">'
+          'Hi {{ name }}'
+        '</template>'
+        '<template ref="{{ id }}" bind="{{}}"></template>');
+
+    var t1 = div.firstChild;
+    var t2 = div.nodes[1];
+    var model = toObservable({'name': 'Fry', 'id': id });
+    recursivelySetTemplateModel(div, model);
+
+    performMicrotaskCheckpoint();
+    expect(t2.nextNode.text, 'Hi Fry');
+  });
+
   observeTest('BindChanged', () {
     var model = toObservable({
       '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>');
 
@@ skipping 910 matching lines @@
     if (ShadowRoot.supported) {
       var root = createShadowTestHtml(
           '<template bind="{{}}">Hi {{ name }}</template>');
       var model = toObservable({'name': 'Leela'});
       recursivelySetTemplateModel(root, model);
       performMicrotaskCheckpoint();
       expect(root.nodes[1].text, 'Hi Leela');
     }
   });
 
+  // Dart note: this test seems gone from JS. Keeping for posterity sake.
   observeTest('BindShadowDOM createInstance', () {
     if (ShadowRoot.supported) {
       var model = toObservable({'name': 'Leela'});
       var template = new Element.html('<template>Hi {{ name }}</template>');
       var root = createShadowTestHtml('');
       root.nodes.add(templateBind(template).createInstance(model));
 
       performMicrotaskCheckpoint();
       expect(root.text, 'Hi Leela');
 
@@ skipping 106 matching lines @@
         '</template>'
       '</template>';
 
     TemplateBindExtension.bootstrap(template);
     template2 = templateBind(templateBind(template).content.nodes.first);
     expect(template2.content.nodes.length, 2);
     var template3 = templateBind(template2.content.nodes.first.nextNode);
     expect(template3.content.nodes.length, 1);
     expect(template3.content.nodes.first.text, 'Hello');
   });
+
+  observeTest('issue-285', () {
+    var div = createTestHtml(
+        '<template>'
+          '<template bind if="{{show}}">'
+            '<template id=del repeat="{{items}}">'
+              '{{}}'
+            '</template>'
+          '</template>'
+        '</template>');
+
+    var template = div.firstChild;
+
+    var model = toObservable({
+      'show': true,
+      'items': [1]
+    });
+
+    div.append(templateBind(template).createInstance(model,
+        new Issue285Syntax()));
+
+    performMicrotaskCheckpoint();
+    expect(template.nextNode.nextNode.nextNode.text, '2');
+    model['show'] = false;
+    performMicrotaskCheckpoint();
+    model['show'] = true;
+    performMicrotaskCheckpoint();
+    expect(template.nextNode.nextNode.nextNode.text, '2');
+  });
+
+  observeTest('issue-141', () {
+    var div = createTestHtml(
+        '<template bind>' +
+          '<div foo="{{foo1}} {{foo2}}" bar="{{bar}}"></div>' +
+        '</template>');
+
+    var model = toObservable({
+      'foo1': 'foo1Value',
+      'foo2': 'foo2Value',
+      'bar': 'barValue'
+    });
+
+    recursivelySetTemplateModel(div, model);
+    performMicrotaskCheckpoint();
+
+    expect(div.lastChild.attributes['bar'], 'barValue');
+  });
+}
+
+compatTests() {
+  observeTest('underbar bindings', () {
+    var div = createTestHtml(
+        '<template bind>'
+          '<div _style="color: {{ color }};"></div>'
+          '<img _src="{{ url }}">'
+          '<a _href="{{ url2 }}">Link</a>'
+          '<input type="number" _value="{{ number }}">'
+        '</template>');
+
+    var model = toObservable({
+      'color': 'red',
+      'url': 'pic.jpg',
+      'url2': 'link.html',
+      'number': 4
+    });
+
+    recursivelySetTemplateModel(div, model);
+    performMicrotaskCheckpoint();
+
+    var subDiv = div.firstChild.nextNode;
+    expect(subDiv.attributes['style'], 'color: red;');
+
+    var img = subDiv.nextNode;
+    expect(img.attributes['src'], 'pic.jpg');
+
+    var a = img.nextNode;
+    expect(a.attributes['href'], 'link.html');
+
+    var input = a.nextNode;
+    expect(input.value, '4');
+  });
+}
+
+class Issue285Syntax extends BindingDelegate {
+  prepareInstanceModel(template) {
+    if (template.id == 'del') return (val) => val * 2;
+  }
 }
 
 class TestBindingSyntax extends BindingDelegate {
-  getBinding(model, String path, name, node) {
-    if (path.trim() == 'replaceme') return new ObservableBox('replaced');
+  prepareBinding(String path, name, node) {
+    if (path.trim() == 'replaceme') {
+      return (x, y) => new ObservableBox('replaced');
+    }
     return null;
   }
 }
 
 class UnbindingInNestedBindSyntax extends BindingDelegate {
   int expectedAge = 42;
   int count = 0;
 
-  getBinding(model, path, name, node) {
+  prepareBinding(path, name, node) {
     if (name != 'text' || path != 'age')
       return;

[Siggi Cherem (dart-lang), 2013/10/29 21:00:07]

nit - use 'return null' to be more explicit?

[Jennifer Messerly, 2013/10/29 23:07:19]

Done.

 
-    expect(model['age'], expectedAge);
-    count++;
+    return (model, node) {
+      expect(model['age'], expectedAge);
+      count++;
+      return model;
+    };
   }
 }