Index: packages/polymer/test/prop_attr_reflection_test.dart |
diff --git a/packages/polymer/test/prop_attr_reflection_test.dart b/packages/polymer/test/prop_attr_reflection_test.dart |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c7296e8e8d438abbc844fd8b75af1335021e3750 |
--- /dev/null |
+++ b/packages/polymer/test/prop_attr_reflection_test.dart |
@@ -0,0 +1,188 @@ |
+// 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. |
+ |
+import 'dart:async'; |
+import 'dart:html'; |
+import 'package:unittest/unittest.dart'; |
+import 'package:unittest/html_config.dart'; |
+import 'package:polymer/polymer.dart'; |
+ |
+class XAttrPublish extends PolymerElement { |
+ XAttrPublish.created() : super.created(); |
+ |
+ @PublishedProperty(reflect: false) |
+ String nog = ''; |
+} |
+ |
+class XFoo extends PolymerElement { |
+ XFoo.created() : super.created(); |
+ |
+ @PublishedProperty(reflect: true) var foo = ''; |
+ @PublishedProperty(reflect: true) String baz = ''; |
+ |
+ @PublishedProperty(reflect: true) var def1, def2; |
+} |
+ |
+class XBar extends XFoo { |
+ XBar.created() : super.created(); |
+ |
+ @PublishedProperty(reflect: true) int zot = 3; |
+ @PublishedProperty(reflect: true) bool zim = false; |
+ @PublishedProperty(reflect: true) String str = 'str'; |
+ @PublishedProperty(reflect: true) Object obj; |
+} |
+ |
+class XZot extends XBar { |
+ // Dart note: trying to make this roughly equivalent to the JS |
+ @PublishedProperty(reflect: false) int get zot => super.zot; |
+ @PublishedProperty(reflect: false) set zot(int x) { |
+ super.zot = x; |
+ } |
+ |
+ XZot.created() : super.created() { |
+ zot = 2; |
+ str = 'str2'; |
+ } |
+} |
+ |
+class XCompose extends PolymerElement { |
+ XCompose.created() : super.created(); |
+ |
+ @observable bool zim = false; |
+} |
+ |
+Future onAttributeChange(Element node) { |
+ var completer = new Completer(); |
+ new MutationObserver((records, observer) { |
+ observer.disconnect(); |
+ completer.complete(); |
+ })..observe(node, attributes: true); |
+ scheduleMicrotask(Observable.dirtyCheck); |
+ return completer.future; |
+} |
+ |
+main() => initPolymer().then((zone) => zone.run(() { |
+ useHtmlConfiguration(); |
+ |
+ // Most tests use @CustomTag, here we test out the impertive register: |
+ Polymer.register('x-foo', XFoo); |
+ Polymer.register('x-bar', XBar); |
+ Polymer.register('x-zot', XZot); |
+ Polymer.register('x-compose', XCompose); |
+ Polymer.register('x-attr-publish', XAttrPublish); |
+ |
+ setUp(() => Polymer.onReady); |
+ |
+ test('property to attribute reflection', () { |
+ var xbasic = querySelector('x-basic'); |
+ expect(xbasic.getAttribute('nog'), null, |
+ reason: 'property published with `attributes` has correct initial ' |
+ 'value'); |
+ xbasic.setAttribute('nog', 'hi'); |
+ expect(xbasic.getAttribute('nog'), 'hi', |
+ reason: 'deserialization of property published via `attributes`'); |
+ |
+ var xattrpublish = querySelector('x-attr-publish'); |
+ expect(xattrpublish.nog, '', |
+ reason: 'property published with `attributes` has correct initial ' |
+ 'value'); |
+ xattrpublish.setAttribute('nog', 'hi'); |
+ expect(xattrpublish.nog, 'hi', |
+ reason: 'deserialization of property published via `attributes`'); |
+ |
+ var xcompose = querySelector('x-compose'); |
+ var xfoo = querySelector('x-foo'); |
+ expect(xfoo.foo, '', |
+ reason: 'property published with info object has correct initial ' |
+ 'value'); |
+ var xbar = querySelector('x-bar'); |
+ expect(xbar.zim, false, |
+ reason: 'property published with info object has correct initial ' |
+ 'value'); |
+ expect(xbar.foo, '', |
+ reason: 'property published with info object has correct initial ' |
+ 'value'); |
+ var xzot = querySelector('x-zot'); |
+ xfoo.foo = 5; |
+ xfoo.attributes['def1'] = '15'; |
+ xfoo.def2 = 15; |
+ |
+ // Dart note: our test here is more async than JS until we change |
+ // Polymer.dart bindings to work like observe.js "bindToInstance". |
+ return onAttributeChange(xfoo).then((_) { |
+ expect(xcompose.$['bar'].attributes.containsKey('zim'), false, |
+ reason: 'attribute bound to property updates when binding is made'); |
+ |
+ expect(xfoo.attributes['def2'], '15', |
+ reason: 'default valued published property reflects to attr'); |
+ |
+ expect(xfoo.def1, 15, |
+ reason: 'attr updates default valued published property'); |
+ |
+ expect('${xfoo.foo}', xfoo.attributes['foo'], |
+ reason: 'attribute reflects property as string'); |
+ xfoo.attributes['foo'] = '27'; |
+ // TODO(jmesserly): why is JS leaving this as a String? From the code it |
+ // looks like it should use the type of 5 and parse it as a number. |
+ expect('${xfoo.foo}', xfoo.attributes['foo'], |
+ reason: 'property reflects attribute'); |
+ // |
+ xfoo.baz = 'Hello'; |
+ }).then((_) => onAttributeChange(xfoo)).then((_) { |
+ expect(xfoo.baz, xfoo.attributes['baz'], |
+ reason: 'attribute reflects property'); |
+ // |
+ xbar.foo = 'foo!'; |
+ xbar.zot = 27; |
+ xbar.zim = true; |
+ xbar.str = 'str!'; |
+ xbar.obj = {'hello': 'world'}; |
+ }).then((_) => onAttributeChange(xbar)).then((_) { |
+ expect(xbar.foo, xbar.attributes['foo'], |
+ reason: 'inherited published property is reflected'); |
+ expect('${xbar.zot}', xbar.attributes['zot'], |
+ reason: 'attribute reflects property as number'); |
+ expect(xbar.attributes['zim'], '', |
+ reason: 'attribute reflects true valued boolean property as ' |
+ 'having attribute'); |
+ expect(xbar.str, xbar.attributes['str'], |
+ reason: 'attribute reflects property as published string'); |
+ expect(xbar.attributes.containsKey('obj'), false, |
+ reason: 'attribute does not reflect object property'); |
+ xbar.attributes['zim'] = 'false'; |
+ xbar.attributes['foo'] = 'foo!!'; |
+ xbar.attributes['zot'] = '54'; |
+ xbar.attributes['str'] = 'str!!'; |
+ xbar.attributes['obj'] = "{'hello': 'world'}"; |
+ expect(xbar.foo, xbar.attributes['foo'], |
+ reason: 'property reflects attribute as string'); |
+ expect(xbar.zot, 54, reason: 'property reflects attribute as number'); |
+ expect(xbar.zim, false, reason: 'property reflects attribute as boolean'); |
+ expect(xbar.str, 'str!!', |
+ reason: 'property reflects attribute as published string'); |
+ expect(xbar.obj, {'hello': 'world'}, |
+ reason: 'property reflects attribute as object'); |
+ xbar.zim = false; |
+ }).then((_) => onAttributeChange(xbar)).then((_) { |
+ expect(xbar.attributes.containsKey('zim'), false, |
+ reason: 'attribute reflects false valued boolean property as NOT ' |
+ 'having attribute'); |
+ xbar.obj = 'hi'; |
+ }).then((_) => onAttributeChange(xbar)).then((_) { |
+ expect(xbar.attributes['obj'], 'hi', |
+ reason: 'reflect property based on current type'); |
+ |
+ expect(xzot.str, 'str2'); |
+ expect(xzot.zot, 2); |
+ xzot.str = 'hello'; |
+ xzot.zot = 5; |
+ }).then((_) => onAttributeChange(xzot)).then((_) { |
+ expect(xzot.attributes['str'], xzot.str); |
+ // TODO(jmesserly): the JS test seems backwards of the description text. |
+ // Is it because it doesn't do "WebComponents.flush()"? |
+ expect(xzot.attributes['zot'], '5', |
+ reason: 'extendee reflect false not honored'); |
+ }); |
+ }); |
+})); |