OLD | NEW |
1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2014, the Dart project authors. Please see the AUTHORS file |
2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
4 | 4 |
5 library polymer.test.web.js_interop_test; | 5 library polymer.test.web.js_interop_test; |
6 | 6 |
7 import 'dart:async'; | 7 import 'dart:async'; |
8 import 'dart:html'; | 8 import 'dart:html'; |
9 import 'dart:js'; | 9 import 'dart:js'; |
10 import 'package:polymer/polymer.dart'; | 10 import 'package:polymer/polymer.dart'; |
11 import 'package:unittest/html_config.dart'; | 11 import 'package:unittest/html_config.dart'; |
12 import 'package:unittest/unittest.dart'; | 12 import 'package:unittest/unittest.dart'; |
13 | 13 |
14 @CustomTag("dart-element") | 14 @CustomTag('dart-element') |
15 class DartElement extends PolymerElement { | 15 class DartElement extends PolymerElement { |
16 DartElement.created() : super.created(); | 16 DartElement.created() : super.created(); |
17 } | 17 } |
18 | 18 |
| 19 @CustomTag('dart-element2') |
| 20 class DartElement2 extends PolymerElement { |
| 21 Element get quux => this.querySelector('.quux'); |
| 22 DartElement2.created() : super.created(); |
| 23 } |
| 24 |
| 25 @CustomTag('dart-element3') |
| 26 class DartElement3 extends PolymerElement { |
| 27 @observable var quux; |
| 28 DartElement3.created() : super.created(); |
| 29 |
| 30 domReady() { |
| 31 quux = new JsObject.jsify({ |
| 32 'aDartMethod': (x) => 444 + x |
| 33 }); |
| 34 } |
| 35 } |
| 36 |
| 37 @CustomTag('dart-two-way') |
| 38 class DartTwoWay extends PolymerElement { |
| 39 @observable var twoWay = 40; |
| 40 DartTwoWay.created() : super.created(); |
| 41 } |
| 42 |
19 main() => initPolymer().run(() { | 43 main() => initPolymer().run(() { |
20 useHtmlConfiguration(); | 44 useHtmlConfiguration(); |
21 | 45 |
22 setUp(() => Polymer.onReady); | 46 setUp(() => Polymer.onReady); |
23 | 47 |
24 test('dart-element upgraded', () { | 48 test('dart-element upgraded', () { |
25 expect(querySelector('dart-element') is DartElement, true, | 49 expect(querySelector('dart-element') is DartElement, true, |
26 reason: 'dart-element upgraded'); | 50 reason: 'dart-element upgraded'); |
27 }); | 51 }); |
28 | 52 |
29 test('js-element in body', () => testInterop( | 53 test('js-element in body', () => testInterop( |
30 querySelector('js-element'))); | 54 querySelector('js-element'))); |
31 | 55 |
32 test('js-element in dart-element', () => testInterop( | 56 test('js-element in dart-element', () => testInterop( |
33 querySelector('dart-element').shadowRoot.querySelector('js-element'))); | 57 querySelector('dart-element').shadowRoot.querySelector('js-element'))); |
| 58 |
| 59 test('elements can be passed through Node.bind to JS', () { |
| 60 var text = querySelector('dart-element2') |
| 61 .shadowRoot.querySelector('js-element2') |
| 62 .shadowRoot.text; |
| 63 expect(text, 'QUX:123'); |
| 64 }); |
| 65 |
| 66 test('objects with functions can be passed through Node.bind to JS', () { |
| 67 var sr = querySelector('dart-element3') |
| 68 .shadowRoot.querySelector('js-element3') |
| 69 .shadowRoot; |
| 70 |
| 71 return new Future(() { |
| 72 expect(sr.text, 'js-element3[qux]:765'); |
| 73 }); |
| 74 }); |
| 75 |
| 76 test('two way bindings work', () { |
| 77 var dartElem = querySelector('dart-two-way'); |
| 78 var jsElem = dartElem.shadowRoot.querySelector('js-two-way'); |
| 79 var interop = new JsObject.fromBrowserObject(jsElem); |
| 80 |
| 81 return new Future(() { |
| 82 expect(jsElem.shadowRoot.text, 'FOOBAR:40'); |
| 83 |
| 84 expect(dartElem.twoWay, 40); |
| 85 expect(interop['foobar'], 40); |
| 86 |
| 87 interop.callMethod('aJsMethod', [2]); |
| 88 |
| 89 // Because Polymer.js two-way bindings are just a getter/setter pair |
| 90 // pointing at the original, we will see the new value immediately. |
| 91 expect(dartElem.twoWay, 42); |
| 92 |
| 93 expect(interop['foobar'], 42); |
| 94 |
| 95 // Text will update asynchronously |
| 96 expect(jsElem.shadowRoot.text, 'FOOBAR:40'); |
| 97 |
| 98 return new Future(() { |
| 99 expect(jsElem.shadowRoot.text, 'FOOBAR:42'); |
| 100 }); |
| 101 }); |
| 102 }); |
34 }); | 103 }); |
35 | 104 |
36 testInterop(jsElem) { | 105 testInterop(jsElem) { |
37 expect(jsElem.shadowRoot.text, 'FOOBAR'); | 106 expect(jsElem.shadowRoot.text, 'FOOBAR'); |
38 var interop = new JsObject.fromBrowserObject(jsElem); | 107 var interop = new JsObject.fromBrowserObject(jsElem); |
39 expect(interop['baz'], 42, reason: 'can read JS custom element properties'); | 108 expect(interop['baz'], 42, reason: 'can read JS custom element properties'); |
40 | 109 |
41 jsElem.attributes['baz'] = '123'; | 110 jsElem.attributes['baz'] = '123'; |
42 return flush().then((_) { | 111 return flush().then((_) { |
43 expect(interop['baz'], 123, reason: 'attribute reflected to property'); | 112 expect(interop['baz'], 123, reason: 'attribute reflected to property'); |
(...skipping 18 matching lines...) Expand all Loading... |
62 /// Calls Platform.flush() to flush Polymer.js pending operations, e.g. | 131 /// Calls Platform.flush() to flush Polymer.js pending operations, e.g. |
63 /// dirty checking for data-bindings. | 132 /// dirty checking for data-bindings. |
64 Future flush() { | 133 Future flush() { |
65 var Platform = context['Platform']; | 134 var Platform = context['Platform']; |
66 Platform.callMethod('flush'); | 135 Platform.callMethod('flush'); |
67 | 136 |
68 var completer = new Completer(); | 137 var completer = new Completer(); |
69 Platform.callMethod('endOfMicrotask', [() => completer.complete()]); | 138 Platform.callMethod('endOfMicrotask', [() => completer.complete()]); |
70 return completer.future; | 139 return completer.future; |
71 } | 140 } |
OLD | NEW |