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