| OLD | NEW |
| 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2013, 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 template_binding.test.custom_element_bindings_test; | 5 library template_binding.test.custom_element_bindings_test; |
| 6 | 6 |
| 7 import 'dart:async'; | 7 import 'dart:async'; |
| 8 import 'dart:html'; | 8 import 'dart:html'; |
| 9 import 'dart:collection' show MapView; | 9 import 'dart:collection' show MapView; |
| 10 import 'package:template_binding/template_binding.dart'; | 10 import 'package:template_binding/template_binding.dart'; |
| 11 import 'package:observe/observe.dart'; | 11 import 'package:observe/observe.dart'; |
| 12 import 'package:unittest/html_config.dart'; | 12 import 'package:unittest/html_config.dart'; |
| 13 import 'package:unittest/unittest.dart'; | 13 import 'package:unittest/unittest.dart'; |
| 14 import 'package:web_components/polyfill.dart'; | 14 import 'package:web_components/polyfill.dart'; |
| 15 import 'utils.dart'; | 15 import 'utils.dart'; |
| 16 | 16 |
| 17 Future _registered; | 17 Future _registered; |
| 18 | 18 |
| 19 main() => dirtyCheckZone().run(() { | 19 main() => dirtyCheckZone().run(() { |
| 20 useHtmlConfiguration(); | 20 useHtmlConfiguration(); |
| 21 | 21 |
| 22 _registered = customElementsReady.then((_) { | 22 _registered = customElementsReady.then((_) { |
| 23 document.registerElement('my-custom-element', MyCustomElement); | 23 document.registerElement('my-custom-element', MyCustomElement); |
| 24 document.registerElement('with-attrs-custom-element', | |
| 25 WithAttrsCustomElement); | |
| 26 }); | 24 }); |
| 27 | 25 |
| 28 group('Custom Element Bindings', customElementBindingsTest); | 26 group('Custom Element Bindings', customElementBindingsTest); |
| 29 }); | 27 }); |
| 30 | 28 |
| 31 customElementBindingsTest() { | 29 customElementBindingsTest() { |
| 32 setUp(() { | 30 setUp(() { |
| 33 document.body.append(testDiv = new DivElement()); | 31 document.body.append(testDiv = new DivElement()); |
| 34 return _registered; | 32 return _registered; |
| 35 }); | 33 }); |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 68 expect(element.myPoint, null, reason: 'a was unbound'); | 66 expect(element.myPoint, null, reason: 'a was unbound'); |
| 69 | 67 |
| 70 scaryBinding.close(); | 68 scaryBinding.close(); |
| 71 model['b'] = null; | 69 model['b'] = null; |
| 72 }).then(endOfMicrotask).then((_) { | 70 }).then(endOfMicrotask).then((_) { |
| 73 expect(element.scaryMonster.health, 200); | 71 expect(element.scaryMonster.health, 200); |
| 74 expect(element.bindFinishedCalled, 0); | 72 expect(element.bindFinishedCalled, 0); |
| 75 }); | 73 }); |
| 76 }); | 74 }); |
| 77 | 75 |
| 78 test('override attribute setter', () { | |
| 79 var element = new WithAttrsCustomElement(); | |
| 80 var model = toObservable({'a': 1, 'b': 2}); | |
| 81 nodeBind(element).bind('hidden?', new PathObserver(model, 'a')); | |
| 82 nodeBind(element).bind('id', new PathObserver(model, 'b')); | |
| 83 | |
| 84 expect(element.attributes, contains('hidden')); | |
| 85 expect(element.attributes['hidden'], ''); | |
| 86 expect(element.id, '2'); | |
| 87 | |
| 88 model['a'] = null; | |
| 89 return new Future(() { | |
| 90 expect(element.attributes, isNot(contains('hidden')), | |
| 91 reason: 'null is false-y'); | |
| 92 | |
| 93 model['a'] = false; | |
| 94 }).then(endOfMicrotask).then((_) { | |
| 95 expect(element.attributes, isNot(contains('hidden'))); | |
| 96 | |
| 97 model['a'] = 'foo'; | |
| 98 // TODO(jmesserly): this is here to force an ordering between the two | |
| 99 // changes. Otherwise the order depends on what order StreamController | |
| 100 // chooses to fire the two listeners in. | |
| 101 }).then(endOfMicrotask).then((_) { | |
| 102 | |
| 103 model['b'] = 'x'; | |
| 104 }).then(endOfMicrotask).then((_) { | |
| 105 expect(element.attributes, contains('hidden')); | |
| 106 expect(element.attributes['hidden'], ''); | |
| 107 expect(element.id, 'x'); | |
| 108 | |
| 109 expect(element.attributes.log, [ | |
| 110 ['remove', 'hidden?'], | |
| 111 ['[]=', 'hidden', ''], | |
| 112 ['[]=', 'id', '2'], | |
| 113 ['remove', 'hidden'], | |
| 114 ['remove', 'hidden'], | |
| 115 ['[]=', 'hidden', ''], | |
| 116 ['[]=', 'id', 'x'], | |
| 117 ]); | |
| 118 }); | |
| 119 }); | |
| 120 | |
| 121 test('template bind uses overridden custom element bind', () { | 76 test('template bind uses overridden custom element bind', () { |
| 122 | 77 |
| 123 var model = toObservable({'a': new Point(123, 444), 'b': new Monster(100)}); | 78 var model = toObservable({'a': new Point(123, 444), 'b': new Monster(100)}); |
| 124 var div = createTestHtml('<template bind>' | 79 var div = createTestHtml('<template bind>' |
| 125 '<my-custom-element my-point="{{a}}" scary-monster="{{b}}">' | 80 '<my-custom-element my-point="{{a}}" scary-monster="{{b}}">' |
| 126 '</my-custom-element>' | 81 '</my-custom-element>' |
| 127 '</template>'); | 82 '</template>'); |
| 128 | 83 |
| 129 templateBind(div.query('template')).model = model; | 84 templateBind(div.query('template')).model = model; |
| 130 var element; | 85 var element; |
| (...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 210 get bindings => nodeBindFallback(this).bindings; | 165 get bindings => nodeBindFallback(this).bindings; |
| 211 set bindings(x) => nodeBindFallback(this).bindings = x; | 166 set bindings(x) => nodeBindFallback(this).bindings = x; |
| 212 get templateInstance => nodeBindFallback(this).templateInstance; | 167 get templateInstance => nodeBindFallback(this).templateInstance; |
| 213 | 168 |
| 214 void _setProperty(String property, newValue) { | 169 void _setProperty(String property, newValue) { |
| 215 if (property == 'my-point') myPoint = newValue; | 170 if (property == 'my-point') myPoint = newValue; |
| 216 if (property == 'scary-monster') scaryMonster = newValue; | 171 if (property == 'scary-monster') scaryMonster = newValue; |
| 217 } | 172 } |
| 218 } | 173 } |
| 219 | 174 |
| 220 | |
| 221 /** | |
| 222 * Demonstrates a custom element can override attributes []= and remove. | |
| 223 * and see changes that the data binding system is making to the attributes. | |
| 224 */ | |
| 225 class WithAttrsCustomElement extends HtmlElement { | |
| 226 AttributeMapWrapper _attributes; | |
| 227 | |
| 228 factory WithAttrsCustomElement() => | |
| 229 new Element.tag('with-attrs-custom-element'); | |
| 230 | |
| 231 WithAttrsCustomElement.created() : super.created() { | |
| 232 _attributes = new AttributeMapWrapper(super.attributes); | |
| 233 } | |
| 234 | |
| 235 get attributes => _attributes; | |
| 236 } | |
| 237 | |
| 238 // TODO(jmesserly): would be nice to use mocks when mirrors work on dart2js. | |
| 239 class AttributeMapWrapper<K, V> extends MapView<K, V> { | |
| 240 final List log = []; | |
| 241 | |
| 242 AttributeMapWrapper(Map map) : super(map); | |
| 243 | |
| 244 void operator []=(K key, V value) { | |
| 245 log.add(['[]=', key, value]); | |
| 246 super[key] = value; | |
| 247 } | |
| 248 | |
| 249 V remove(Object key) { | |
| 250 log.add(['remove', key]); | |
| 251 return super.remove(key); | |
| 252 } | |
| 253 } | |
| OLD | NEW |