port TemplateBinding to ed3266266e751b5ab1f75f8e0509d0d5f0ef35d8

pkg/template_binding/test/binding_syntax.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.binding_syntax;
+
+import 'dart:collection';
+import 'dart:html';
+import 'package:template_binding/template_binding.dart';
+import 'package:observe/observe.dart';
+import 'package:unittest/html_config.dart';
+import 'package:unittest/unittest.dart';
+import 'utils.dart';
+
+// Note: this test is executed by template_element_test.dart
+
+syntaxTests(FooBarModel fooModel([foo, bar])) {
+  observeTest('prepareBinding', () {
+    var model = fooModel('bar');
+    var testSyntax = new TestBindingSyntax();
+    var div = createTestHtml(
+        '<template bind>{{ foo }}'
+          '<template bind>{{ foo }}</template>'
+        '</template>');
+    recursivelySetTemplateModel(div, model, testSyntax);
+    performMicrotaskCheckpoint();
+    expect(div.nodes.length, 4);
+    expect(div.nodes.last.text, 'bar');
+    expect(div.nodes[2].tagName, 'TEMPLATE');
+    expect(testSyntax.log, [
+      ['prepare', '', 'bind', 'TEMPLATE'],
+      ['bindFn', model, 'TEMPLATE', 0],
+      ['prepare', 'foo', 'text', 'TEXT'],
+      ['prepare', '', 'bind', 'TEMPLATE'],
+      ['bindFn', model, 'TEXT', 2],
+      ['bindFn', model, 'TEMPLATE', 3],
+      ['prepare', 'foo', 'text', 'TEXT'],
+      ['bindFn', model, 'TEXT', 6],
+    ]);
+  });
+
+  observeTest('prepareInstanceModel', () {
+    var model = toObservable([fooModel(1), fooModel(2), fooModel(3)]);
+
+    var testSyntax = new TestModelSyntax();
+    testSyntax.altModels.addAll([fooModel('a'), fooModel('b'), fooModel('c')]);
+
+    var div = createTestHtml('<template repeat>{{ foo }}</template>');
+
+    var template = div.nodes[0];
+    recursivelySetTemplateModel(div, model, testSyntax);
+    performMicrotaskCheckpoint();
+
+    expect(div.nodes.length, 4);
+    expect(div.nodes[0].tagName, 'TEMPLATE');
+    expect(div.nodes[1].text, 'a');
+    expect(div.nodes[2].text, 'b');
+    expect(div.nodes[3].text, 'c');
+
+    expect(testSyntax.log, [
+      ['prepare', template],
+      ['bindFn', model[0]],
+      ['bindFn', model[1]],
+      ['bindFn', model[2]],
+    ]);
+  });
+
+  observeTest('prepareInstanceModel - reorder instances', () {
+    var model = toObservable([0, 1, 2]);
+
+    var div = createTestHtml('<template repeat>{{}}</template>');
+    var template = div.firstChild;
+    var delegate = new TestInstanceModelSyntax();
+
+    recursivelySetTemplateModel(div, model, delegate);
+    performMicrotaskCheckpoint();
+    expect(delegate.prepareCount, 1);
+    expect(delegate.callCount, 3);
+
+    // Note: intentionally mutate in place.
+    model.replaceRange(0, model.length, model.reversed.toList());
+    performMicrotaskCheckpoint();
+    expect(delegate.prepareCount, 1);
+    expect(delegate.callCount, 3);
+  });
+
+  observeTest('prepareInstancePositionChanged', () {
+    var model = toObservable(['a', 'b', 'c']);
+
+    var div = createTestHtml('<template repeat>{{}}</template>');
+    var delegate = new TestPositionChangedSyntax();
+
+    var template = div.nodes[0];
+    recursivelySetTemplateModel(div, model, delegate);
+    performMicrotaskCheckpoint();
+
+    expect(div.nodes.length, 4);
+    expect(div.nodes[0].tagName, 'TEMPLATE');
+    expect(div.nodes[1].text, 'a');
+    expect(div.nodes[2].text, 'b');
+    expect(div.nodes[3].text, 'c');
+
+    expect(delegate.log, [
+      ['prepare', template],
+      ['bindFn', model[0], 0],
+      ['bindFn', model[1], 1],
+      ['bindFn', model[2], 2],
+    ]);
+
+    delegate.log.clear();
+
+    model.removeAt(1);
+    performMicrotaskCheckpoint();
+
+    expect(delegate.log, [['bindFn', 'c', 1]], reason: 'removed item');
+
+    expect(div.nodes.skip(1).map((n) => n.text), ['a', 'c']);
+  });
+
+  observeTest('Basic', () {
+    var model = fooModel(2, 4);
+    var div = createTestHtml(
+        '<template bind>'
+        '{{ foo }} + {{ 2x: bar }} + {{ 4x: bar }}</template>');
+    recursivelySetTemplateModel(div, model, new TimesTwoSyntax());
+    performMicrotaskCheckpoint();
+    expect(div.nodes.length, 2);
+    expect(div.nodes.last.text, '2 + 8 + ');
+
+    model.foo = 4;
+    model.bar = 8;
+    performMicrotaskCheckpoint();
+    expect(div.nodes.last.text, '4 + 16 + ');
+  });
+
+  // Note: issue-141 test not included here as it's not related to the
+  // BindingDelegate
+}
+
+// TODO(jmesserly): mocks would be cleaner here.
+
+class TestBindingSyntax extends BindingDelegate {
+  var log = [];
+
+  prepareBinding(String path, String name, Node node) {
+    var tagName = node is Element ? node.tagName : 'TEXT';
+    int id = log.length;
+    log.add(['prepare', path, name, tagName]);
+    final outerNode = node;
+    return (model, node) {
+      var tagName = node is Element ? node.tagName : 'TEXT';
+      log.add(['bindFn', model, tagName, id]);
+    };
+  }
+}
+
+class TestModelSyntax extends BindingDelegate {
+  var log = [];
+  var altModels = new ListQueue();
+
+  prepareInstanceModel(template) {
+    log.add(['prepare', template]);
+    return (model) {
+      log.add(['bindFn', model]);
+      return altModels.removeFirst();
+    };
+  }
+}
+
+class TestInstanceModelSyntax extends BindingDelegate {
+  int prepareCount = 0;
+  int callCount = 0;
+  prepareInstanceModel(template) {
+    prepareCount++;
+    return (model) {
+      callCount++;
+      return model;
+    };
+  }
+}
+
+
+class TestPositionChangedSyntax extends BindingDelegate {
+  var log = [];
+
+  prepareInstancePositionChanged(template) {
+    int id = log.length;
+    log.add(['prepare', template]);
+    return (templateInstance, index) {
+      log.add(['bindFn', templateInstance.model, index]);
+    };
+  }
+}
+
+
+class TimesTwoSyntax extends BindingDelegate {
+  prepareBinding(path, name, node) {
+    path = path.trim();
+    if (!path.startsWith('2x:')) return null;
+
+    path = path.substring(3);
+    return (model, _) {
+      return new PathObserver(model, path, computeValue: (x) => 2 * x);
+    };
+  }
+}