Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(190)

Unified Diff: packages/polymer/test/js_interop_test.dart

Issue 1400473008: Roll Observatory packages and add a roll script (Closed) Base URL: git@github.com:dart-lang/observatory_pub_packages.git@master
Patch Set: Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « packages/polymer/test/js_custom_event_test.html ('k') | packages/polymer/test/js_interop_test.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: packages/polymer/test/js_interop_test.dart
diff --git a/packages/polymer/test/js_interop_test.dart b/packages/polymer/test/js_interop_test.dart
new file mode 100644
index 0000000000000000000000000000000000000000..e22bb9697bc7a2719a50c09da6b4a985ccad5ea4
--- /dev/null
+++ b/packages/polymer/test/js_interop_test.dart
@@ -0,0 +1,144 @@
+// Copyright (c) 2014, 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.web.js_interop_test;
+
+import 'dart:async';
+import 'dart:html';
+import 'dart:js';
+import 'package:polymer/polymer.dart';
+import 'package:polymer_interop/polymer_interop.dart';
+import 'package:unittest/html_config.dart';
+import 'package:unittest/unittest.dart';
+
+@CustomTag('dart-element')
+class DartElement extends PolymerElement {
+ DartElement.created() : super.created();
+}
+
+@CustomTag('dart-element2')
+class DartElement2 extends PolymerElement {
+ Element get quux => this.querySelector('.quux');
+ DartElement2.created() : super.created();
+}
+
+@CustomTag('dart-element3')
+class DartElement3 extends PolymerElement {
+ @observable var quux;
+ DartElement3.created() : super.created();
+
+ domReady() {
+ quux = new JsObject.jsify({'aDartMethod': (x) => 444 + x});
+ }
+}
+
+@CustomTag('dart-two-way')
+class DartTwoWay extends PolymerElement {
+ @observable var twoWay = 40;
+ DartTwoWay.created() : super.created();
+}
+
+main() => initPolymer().then((zone) => zone.run(() {
+ useHtmlConfiguration();
+
+ setUp(() => Polymer.onReady);
+
+ test('dart-element upgraded', () {
+ expect(querySelector('dart-element') is DartElement, true,
+ reason: 'dart-element upgraded');
+ });
+
+ test('js-element in body', () => testInterop(querySelector('js-element')));
+
+ test('js-element in dart-element', () => testInterop(
+ querySelector('dart-element').shadowRoot.querySelector('js-element')));
+
+ test('elements can be passed through Node.bind to JS', () {
+ var text = querySelector('dart-element2').shadowRoot
+ .querySelector('js-element2').shadowRoot.text;
+ expect(text, 'QUX:123');
+ });
+
+ test('objects with functions can be passed through Node.bind to JS', () {
+ var sr = querySelector('dart-element3').shadowRoot
+ .querySelector('js-element3').shadowRoot;
+
+ return new Future(() {
+ expect(sr.text, 'js-element3[qux]:765');
+ });
+ });
+
+ test('two way bindings work', () {
+ var dartElem = querySelector('dart-two-way');
+ var jsElem = dartElem.shadowRoot.querySelector('js-two-way');
+ var interop = new JsObject.fromBrowserObject(jsElem);
+
+ return new Future(() {
+ expect(jsElem.shadowRoot.text, 'FOOBAR:40');
+
+ expect(dartElem.twoWay, 40);
+ expect(interop['foobar'], 40);
+
+ interop.callMethod('aJsMethod', [2]);
+
+ // Because Polymer.js two-way bindings are just a getter/setter pair
+ // pointing at the original, we will see the new value immediately.
+ expect(dartElem.twoWay, 42);
+
+ expect(interop['foobar'], 42);
+
+ // Text will update asynchronously
+ expect(jsElem.shadowRoot.text, 'FOOBAR:40');
+
+ return _onTextChanged(jsElem.shadowRoot).then((_) {
+ expect(jsElem.shadowRoot.text, 'FOOBAR:42');
+ });
+ });
+ });
+}));
+
+Future<List<MutationRecord>> _onTextChanged(Node node) {
+ var completer = new Completer();
+ new MutationObserver((mutations, observer) {
+ observer.disconnect();
+ completer.complete(mutations);
+ })..observe(node, characterData: true, subtree: true);
+ return completer.future;
+}
+
+testInterop(jsElem) {
+ expect(jsElem.shadowRoot.text, 'FOOBAR');
+ var interop = new JsObject.fromBrowserObject(jsElem);
+ expect(interop['baz'], 42, reason: 'can read JS custom element properties');
+
+ jsElem.attributes['baz'] = '123';
+ return flush().then((_) {
+ expect(interop['baz'], 123, reason: 'attribute reflected to property');
+ expect(jsElem.shadowRoot.text, 'FOOBAR', reason: 'text unchanged');
+
+ interop['baz'] = 777;
+ return flush();
+ }).then((_) {
+ expect(jsElem.attributes['baz'], '777',
+ reason: 'property reflected to attribute');
+
+ expect(jsElem.shadowRoot.text, 'FOOBAR', reason: 'text unchanged');
+
+ interop.callMethod('aJsMethod', [123]);
+ return flush();
+ }).then((_) {
+ expect(jsElem.shadowRoot.text, '900', reason: 'text set by JS method');
+ expect(interop['baz'], 777, reason: 'unchanged');
+ });
+}
+
+/// Calls Polymer.flush() to flush Polymer.js pending operations, e.g.
+/// dirty checking for data-bindings.
+Future flush() {
+ PolymerJs.flush();
+
+ var completer = new Completer();
+ PolymerJs.endOfMicrotask(() => completer.complete());
+ return completer.future;
+}
« no previous file with comments | « packages/polymer/test/js_custom_event_test.html ('k') | packages/polymer/test/js_interop_test.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698