Chromium Code Reviews Chromium Code Reviews
Issue 42433002:
port Node.bind to bd0a0591920da9091b326627a46a104a92c7efe7 (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart| OLD | NEW |
|---|---|
| (Empty) | |
| 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 | |
| 3 // BSD-style license that can be found in the LICENSE file. | |
| 4 | |
| 5 library template_binding.test.element_bindings_test; | |
|
Jennifer Messerly
2013/10/25 00:51:41
most of these tests moved into the node.bind conso
| |
| 6 | |
| 7 import 'dart:html'; | |
| 8 import 'package:observe/observe.dart'; | |
| 9 import 'package:template_binding/template_binding.dart'; | |
| 10 import 'package:unittest/html_config.dart'; | |
| 11 import 'package:unittest/unittest.dart'; | |
| 12 import 'utils.dart'; | |
| 13 | |
| 14 // Note: this file ported from | |
| 15 // https://github.com/toolkitchen/mdv/blob/master/tests/element_bindings.js | |
| 16 | |
| 17 main() { | |
| 18 useHtmlConfiguration(); | |
| 19 group('Element Bindings', elementBindingTests); | |
| 20 } | |
| 21 | |
| 22 observePath(obj, path) => new PathObserver(obj, path); | |
| 23 | |
| 24 elementBindingTests() { | |
| 25 setUp(() { | |
| 26 document.body.append(testDiv = new DivElement()); | |
| 27 }); | |
| 28 | |
| 29 tearDown(() { | |
| 30 testDiv.remove(); | |
| 31 testDiv = null; | |
| 32 }); | |
| 33 | |
| 34 observeTest('Text', () { | |
| 35 var template = new Element.html('<template bind>{{a}} and {{b}}'); | |
| 36 testDiv.append(template); | |
| 37 var model = toObservable({'a': 1, 'b': 2}); | |
| 38 templateBind(template).model = model; | |
| 39 performMicrotaskCheckpoint(); | |
| 40 var text = testDiv.nodes[1]; | |
| 41 expect(text.text, '1 and 2'); | |
| 42 | |
| 43 model['a'] = 3; | |
| 44 performMicrotaskCheckpoint(); | |
| 45 expect(text.text, '3 and 2'); | |
| 46 }); | |
| 47 | |
| 48 observeTest('SimpleBinding', () { | |
| 49 var el = new DivElement(); | |
| 50 var model = toObservable({'a': '1'}); | |
| 51 nodeBind(el).bind('foo', model, 'a'); | |
| 52 performMicrotaskCheckpoint(); | |
| 53 expect(el.attributes['foo'], '1'); | |
| 54 | |
| 55 model['a'] = '2'; | |
| 56 performMicrotaskCheckpoint(); | |
| 57 expect(el.attributes['foo'], '2'); | |
| 58 | |
| 59 model['a'] = 232.2; | |
| 60 performMicrotaskCheckpoint(); | |
| 61 expect(el.attributes['foo'], '232.2'); | |
| 62 | |
| 63 model['a'] = 232; | |
| 64 performMicrotaskCheckpoint(); | |
| 65 expect(el.attributes['foo'], '232'); | |
| 66 | |
| 67 model['a'] = null; | |
| 68 performMicrotaskCheckpoint(); | |
| 69 expect(el.attributes['foo'], ''); | |
| 70 }); | |
| 71 | |
| 72 observeTest('SimpleBindingWithDashes', () { | |
| 73 var el = new DivElement(); | |
| 74 var model = toObservable({'a': '1'}); | |
| 75 nodeBind(el).bind('foo-bar', model, 'a'); | |
| 76 performMicrotaskCheckpoint(); | |
| 77 expect(el.attributes['foo-bar'], '1'); | |
| 78 | |
| 79 model['a'] = '2'; | |
| 80 performMicrotaskCheckpoint(); | |
| 81 expect(el.attributes['foo-bar'], '2'); | |
| 82 }); | |
| 83 | |
| 84 observeTest('SimpleBindingWithComment', () { | |
| 85 var el = new DivElement(); | |
| 86 el.innerHtml = '<!-- Comment -->'; | |
| 87 var model = toObservable({'a': '1'}); | |
| 88 nodeBind(el).bind('foo-bar', model, 'a'); | |
| 89 performMicrotaskCheckpoint(); | |
| 90 expect(el.attributes['foo-bar'], '1'); | |
| 91 | |
| 92 model['a'] = '2'; | |
| 93 performMicrotaskCheckpoint(); | |
| 94 expect(el.attributes['foo-bar'], '2'); | |
| 95 }); | |
| 96 | |
| 97 observeTest('PlaceHolderBindingText', () { | |
| 98 var model = toObservable({ | |
| 99 'adj': 'cruel', | |
| 100 'noun': 'world' | |
| 101 }); | |
| 102 | |
| 103 var el = new DivElement(); | |
| 104 el.text = 'dummy'; | |
| 105 el.nodes.first.text = 'Hello {{ adj }} {{noun}}!'; | |
| 106 var template = new Element.html('<template bind>'); | |
| 107 templateBind(template).content.append(el); | |
| 108 testDiv.append(template); | |
| 109 templateBind(template).model = model; | |
| 110 | |
| 111 performMicrotaskCheckpoint(); | |
| 112 el = testDiv.nodes[1].nodes.first; | |
| 113 expect(el.text, 'Hello cruel world!'); | |
| 114 | |
| 115 model['adj'] = 'happy'; | |
| 116 performMicrotaskCheckpoint(); | |
| 117 expect(el.text, 'Hello happy world!'); | |
| 118 }); | |
| 119 | |
| 120 observeTest('InputElementTextBinding', () { | |
| 121 var model = toObservable({'val': 'ping'}); | |
| 122 | |
| 123 var el = new InputElement(); | |
| 124 nodeBind(el).bind('value', model, 'val'); | |
| 125 performMicrotaskCheckpoint(); | |
| 126 expect(el.value, 'ping'); | |
| 127 | |
| 128 el.value = 'pong'; | |
| 129 dispatchEvent('input', el); | |
| 130 expect(model['val'], 'pong'); | |
| 131 | |
| 132 // Try a deep path. | |
| 133 model = toObservable({'a': {'b': {'c': 'ping'}}}); | |
| 134 | |
| 135 nodeBind(el).bind('value', model, 'a.b.c'); | |
| 136 performMicrotaskCheckpoint(); | |
| 137 expect(el.value, 'ping'); | |
| 138 | |
| 139 el.value = 'pong'; | |
| 140 dispatchEvent('input', el); | |
| 141 expect(observePath(model, 'a.b.c').value, 'pong'); | |
| 142 | |
| 143 // Start with the model property being absent. | |
| 144 model['a']['b'].remove('c'); | |
| 145 performMicrotaskCheckpoint(); | |
| 146 expect(el.value, ''); | |
| 147 | |
| 148 el.value = 'pong'; | |
| 149 dispatchEvent('input', el); | |
| 150 expect(observePath(model, 'a.b.c').value, 'pong'); | |
| 151 performMicrotaskCheckpoint(); | |
| 152 | |
| 153 // Model property unreachable (and unsettable). | |
| 154 model['a'].remove('b'); | |
| 155 performMicrotaskCheckpoint(); | |
| 156 expect(el.value, ''); | |
| 157 | |
| 158 el.value = 'pong'; | |
| 159 dispatchEvent('input', el); | |
| 160 expect(observePath(model, 'a.b.c').value, null); | |
| 161 }); | |
| 162 | |
| 163 observeTest('InputElementCheckbox', () { | |
| 164 var model = toObservable({'val': true}); | |
| 165 | |
| 166 var el = new InputElement(); | |
| 167 testDiv.append(el); | |
| 168 el.type = 'checkbox'; | |
| 169 nodeBind(el).bind('checked', model, 'val'); | |
| 170 performMicrotaskCheckpoint(); | |
| 171 expect(el.checked, true); | |
| 172 | |
| 173 model['val'] = false; | |
| 174 performMicrotaskCheckpoint(); | |
| 175 expect(el.checked, false); | |
| 176 | |
| 177 el.click(); | |
| 178 expect(model['val'], true); | |
| 179 | |
| 180 el.click(); | |
| 181 expect(model['val'], false); | |
| 182 | |
| 183 el.onClick.listen((_) { | |
| 184 expect(model['val'], true); | |
| 185 }); | |
| 186 el.onChange.listen((_) { | |
| 187 expect(model['val'], true); | |
| 188 }); | |
| 189 | |
| 190 el.dispatchEvent(new MouseEvent('click', view: window)); | |
| 191 }); | |
| 192 | |
| 193 observeTest('InputElementCheckbox - binding updated on click', () { | |
| 194 var model = toObservable({'val': true}); | |
| 195 | |
| 196 var el = new InputElement(); | |
| 197 testDiv.append(el); | |
| 198 el.type = 'checkbox'; | |
| 199 nodeBind(el).bind('checked', model, 'val'); | |
| 200 performMicrotaskCheckpoint(); | |
| 201 expect(el.checked, true); | |
| 202 | |
| 203 el.onClick.listen((_) { | |
| 204 expect(model['val'], false); | |
| 205 }); | |
| 206 | |
| 207 el.dispatchEvent(new MouseEvent('click', view: window)); | |
| 208 }); | |
| 209 | |
| 210 observeTest('InputElementCheckbox - binding updated on change', () { | |
| 211 var model = toObservable({'val': true}); | |
| 212 | |
| 213 var el = new InputElement(); | |
| 214 testDiv.append(el); | |
| 215 el.type = 'checkbox'; | |
| 216 nodeBind(el).bind('checked', model, 'val'); | |
| 217 performMicrotaskCheckpoint(); | |
| 218 expect(el.checked, true); | |
| 219 | |
| 220 el.onChange.listen((_) { | |
| 221 expect(model['val'], false); | |
| 222 }); | |
| 223 | |
| 224 el.dispatchEvent(new MouseEvent('click', view: window)); | |
| 225 }); | |
| 226 | |
| 227 observeTest('InputElementRadio', () { | |
| 228 var model = toObservable({'val1': true, 'val2': false, 'val3': false, | |
| 229 'val4': true}); | |
| 230 var RADIO_GROUP_NAME = 'observeTest'; | |
| 231 | |
| 232 var container = testDiv; | |
| 233 | |
| 234 var el1 = new InputElement(); | |
| 235 testDiv.append(el1); | |
| 236 el1.type = 'radio'; | |
| 237 el1.name = RADIO_GROUP_NAME; | |
| 238 nodeBind(el1).bind('checked', model, 'val1'); | |
| 239 | |
| 240 var el2 = new InputElement(); | |
| 241 testDiv.append(el2); | |
| 242 el2.type = 'radio'; | |
| 243 el2.name = RADIO_GROUP_NAME; | |
| 244 nodeBind(el2).bind('checked', model, 'val2'); | |
| 245 | |
| 246 var el3 = new InputElement(); | |
| 247 testDiv.append(el3); | |
| 248 el3.type = 'radio'; | |
| 249 el3.name = RADIO_GROUP_NAME; | |
| 250 nodeBind(el3).bind('checked', model, 'val3'); | |
| 251 | |
| 252 var el4 = new InputElement(); | |
| 253 testDiv.append(el4); | |
| 254 el4.type = 'radio'; | |
| 255 el4.name = 'othergroup'; | |
| 256 nodeBind(el4).bind('checked', model, 'val4'); | |
| 257 | |
| 258 performMicrotaskCheckpoint(); | |
| 259 expect(el1.checked, true); | |
| 260 expect(el2.checked, false); | |
| 261 expect(el3.checked, false); | |
| 262 expect(el4.checked, true); | |
| 263 | |
| 264 model['val1'] = false; | |
| 265 model['val2'] = true; | |
| 266 performMicrotaskCheckpoint(); | |
| 267 expect(el1.checked, false); | |
| 268 expect(el2.checked, true); | |
| 269 expect(el3.checked, false); | |
| 270 expect(el4.checked, true); | |
| 271 | |
| 272 el1.checked = true; | |
| 273 dispatchEvent('change', el1); | |
| 274 expect(model['val1'], true); | |
| 275 expect(model['val2'], false); | |
| 276 expect(model['val3'], false); | |
| 277 expect(model['val4'], true); | |
| 278 | |
| 279 el3.checked = true; | |
| 280 dispatchEvent('change', el3); | |
| 281 expect(model['val1'], false); | |
| 282 expect(model['val2'], false); | |
| 283 expect(model['val3'], true); | |
| 284 expect(model['val4'], true); | |
| 285 }); | |
| 286 | |
| 287 observeTest('InputElementRadioMultipleForms', () { | |
| 288 var model = toObservable({'val1': true, 'val2': false, 'val3': false, | |
| 289 'val4': true}); | |
| 290 var RADIO_GROUP_NAME = 'observeTest'; | |
| 291 | |
| 292 var form1 = new FormElement(); | |
| 293 testDiv.append(form1); | |
| 294 var form2 = new FormElement(); | |
| 295 testDiv.append(form2); | |
| 296 | |
| 297 var el1 = new InputElement(); | |
| 298 form1.append(el1); | |
| 299 el1.type = 'radio'; | |
| 300 el1.name = RADIO_GROUP_NAME; | |
| 301 nodeBind(el1).bind('checked', model, 'val1'); | |
| 302 | |
| 303 var el2 = new InputElement(); | |
| 304 form1.append(el2); | |
| 305 el2.type = 'radio'; | |
| 306 el2.name = RADIO_GROUP_NAME; | |
| 307 nodeBind(el2).bind('checked', model, 'val2'); | |
| 308 | |
| 309 var el3 = new InputElement(); | |
| 310 form2.append(el3); | |
| 311 el3.type = 'radio'; | |
| 312 el3.name = RADIO_GROUP_NAME; | |
| 313 nodeBind(el3).bind('checked', model, 'val3'); | |
| 314 | |
| 315 var el4 = new InputElement(); | |
| 316 form2.append(el4); | |
| 317 el4.type = 'radio'; | |
| 318 el4.name = RADIO_GROUP_NAME; | |
| 319 nodeBind(el4).bind('checked', model, 'val4'); | |
| 320 | |
| 321 performMicrotaskCheckpoint(); | |
| 322 expect(el1.checked, true); | |
| 323 expect(el2.checked, false); | |
| 324 expect(el3.checked, false); | |
| 325 expect(el4.checked, true); | |
| 326 | |
| 327 el2.checked = true; | |
| 328 dispatchEvent('change', el2); | |
| 329 expect(model['val1'], false); | |
| 330 expect(model['val2'], true); | |
| 331 | |
| 332 // Radio buttons in form2 should be unaffected | |
| 333 expect(model['val3'], false); | |
| 334 expect(model['val4'], true); | |
| 335 | |
| 336 el3.checked = true; | |
| 337 dispatchEvent('change', el3); | |
| 338 expect(model['val3'], true); | |
| 339 expect(model['val4'], false); | |
| 340 | |
| 341 // Radio buttons in form1 should be unaffected | |
| 342 expect(model['val1'], false); | |
| 343 expect(model['val2'], true); | |
| 344 }); | |
| 345 | |
| 346 observeTest('BindToChecked', () { | |
| 347 var div = new DivElement(); | |
| 348 testDiv.append(div); | |
| 349 var child = new DivElement(); | |
| 350 div.append(child); | |
| 351 var input = new InputElement(); | |
| 352 child.append(input); | |
| 353 input.type = 'checkbox'; | |
| 354 | |
| 355 var model = toObservable({'a': {'b': false}}); | |
| 356 nodeBind(input).bind('checked', model, 'a.b'); | |
| 357 | |
| 358 input.click(); | |
| 359 expect(model['a']['b'], true); | |
| 360 | |
| 361 input.click(); | |
| 362 expect(model['a']['b'], false); | |
| 363 }); | |
| 364 | |
| 365 observeTest('Select selectedIndex', () { | |
| 366 var select = new SelectElement(); | |
| 367 testDiv.append(select); | |
| 368 var option0 = select.append(new OptionElement()); | |
| 369 var option1 = select.append(new OptionElement()); | |
| 370 var option2 = select.append(new OptionElement()); | |
| 371 | |
| 372 var model = toObservable({'val': 2}); | |
| 373 | |
| 374 nodeBind(select).bind('selectedIndex', model, 'val'); | |
| 375 performMicrotaskCheckpoint(); | |
| 376 expect(select.selectedIndex, 2); | |
| 377 | |
| 378 select.selectedIndex = 1; | |
| 379 dispatchEvent('change', select); | |
| 380 expect(model['val'], 1); | |
| 381 }); | |
| 382 | |
| 383 observeTest('MultipleReferences', () { | |
| 384 var el = new DivElement(); | |
| 385 var template = new Element.html('<template bind>'); | |
| 386 templateBind(template).content.append(el); | |
| 387 testDiv.append(template); | |
| 388 | |
| 389 var model = toObservable({'foo': 'bar'}); | |
| 390 el.attributes['foo'] = '{{foo}} {{foo}}'; | |
| 391 templateBind(template).model = model; | |
| 392 | |
| 393 performMicrotaskCheckpoint(); | |
| 394 el = testDiv.nodes[1]; | |
| 395 expect(el.attributes['foo'], 'bar bar'); | |
| 396 }); | |
| 397 } | |
| OLD | NEW |
