| 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;
|
| +}
|
|
|