port polymer data binding tests

pkg/polymer/test/bind_mdv_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 polymer.test.bind_mdv_test;
+
+import 'dart:async';
+import 'dart:html';
+import 'package:custom_element/polyfill.dart';
+import 'package:template_binding/template_binding.dart';
+import 'package:observe/observe.dart';
+import 'package:observe/src/microtask.dart' show runMicrotask;
+import 'package:polymer/platform.dart' as Platform;
+import 'package:unittest/html_config.dart';
+import 'package:unittest/unittest.dart';
+
+main() {
+  useHtmlConfiguration();
+
+  var registered = loadCustomElementPolyfill().then((_) {
+    document.register('my-div', MyDivElement);
+  });
+
+  setUp(() => registered);
+
+  group('bindModel', bindModelTests);
+}
+
+bindModelTests() {
+  var div;
+
+  setUp(() {
+    div = new MyDivElement();
+    document.body.append(div);
+  });
+
+  tearDown(() {
+    div.remove();
+  });
+
+  parseAndBindHTML(html, model) =>
+      templateBind(new Element.tag('template')
+        ..setInnerHtml(html, treeSanitizer: const NullTreeSanitizer()))
+        .createInstance(model);
+
+  test('bindModel', () {
+    var fragment = parseAndBindHTML('<div id="a" foo="{{bar}}"></div>', div);
+    div.append(fragment);
+    var a = div.query('#a');
+
+    div.bar = 5;
+    return onAttributeChange(a).then((_) {
+      expect(a.attributes['foo'], '5');
+      div.bar = 8;
+      return onAttributeChange(a).then((_) {
+        expect(a.attributes['foo'], '8');
+      });
+    });
+  });
+
+  test('bind input', () {
+    var fragment = parseAndBindHTML('<input value="{{bar}}" />', div);
+    div.append(fragment);
+    var a = div.query('input');
+
+    div.bar = 'hello';
+    // TODO(sorvell): fix this when observe-js lets us explicitly listen for
+    // a change on input.value
+    Observable.dirtyCheck();

[Siggi Cherem (dart-lang), 2013/10/24 00:50:43]

is this needed if you are using endOfMicrotask below?

[Jennifer Messerly, 2013/10/24 00:58:59]

yeah ... the end of microtask runs faster than polymer can update the property

+    Platform.endOfMicrotask(expectAsync0(() {
+      expect(a.value, 'hello');
+    }));
+  });
+}
+
+class MyDivElement extends HtmlElement with Observable {
+  factory MyDivElement() => new Element.tag('my-div');
+  MyDivElement.created() : super.created();
+  @observable var bar;
+}
+
+class NullTreeSanitizer implements NodeTreeSanitizer {
+  const NullTreeSanitizer();
+  void sanitizeTree(Node node) {}
+}
+
+Future onAttributeChange(Element node) {
+  var completer = new Completer();
+  new MutationObserver((records, observer) {
+    observer.disconnect();
+    completer.complete();
+  })..observe(node, attributes: true);
+  Platform.flush();
+  return completer.future;
+}