| 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_observe/mdv_observe.dart'; | |
| 10 import 'package:unittest/html_config.dart'; | |
| 11 import 'package:unittest/unittest.dart'; | |
| 12 import 'mdv_observe_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 sym(x) => new Symbol(x); | |
| 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 dispatchEvent(type, target) { | |
| 39 target.dispatchEvent(new Event(type, cancelable: false)); | |
| 40 } | |
| 41 | |
| 42 test('Text', () { | |
| 43 var template = new Element.html('<template bind>{{a}} and {{b}}'); | |
| 44 testDiv.append(template); | |
| 45 var model = toSymbolMap({'a': 1, 'b': 2}); | |
| 46 template.model = model; | |
| 47 deliverChangeRecords(); | |
| 48 var text = testDiv.nodes[1]; | |
| 49 expect(text.text, '1 and 2'); | |
| 50 | |
| 51 model[sym('a')] = 3; | |
| 52 deliverChangeRecords(); | |
| 53 expect(text.text, '3 and 2'); | |
| 54 }); | |
| 55 | |
| 56 test('SimpleBinding', () { | |
| 57 var el = new DivElement(); | |
| 58 var model = toSymbolMap({'a': '1'}); | |
| 59 el.bind('foo', model, 'a'); | |
| 60 deliverChangeRecords(); | |
| 61 expect(el.attributes['foo'], '1'); | |
| 62 | |
| 63 model[sym('a')] = '2'; | |
| 64 deliverChangeRecords(); | |
| 65 expect(el.attributes['foo'], '2'); | |
| 66 | |
| 67 model[sym('a')] = 232.2; | |
| 68 deliverChangeRecords(); | |
| 69 expect(el.attributes['foo'], '232.2'); | |
| 70 | |
| 71 model[sym('a')] = 232; | |
| 72 deliverChangeRecords(); | |
| 73 expect(el.attributes['foo'], '232'); | |
| 74 | |
| 75 model[sym('a')] = null; | |
| 76 deliverChangeRecords(); | |
| 77 expect(el.attributes['foo'], ''); | |
| 78 }); | |
| 79 | |
| 80 test('SimpleBindingWithDashes', () { | |
| 81 var el = new DivElement(); | |
| 82 var model = toSymbolMap({'a': '1'}); | |
| 83 el.bind('foo-bar', model, 'a'); | |
| 84 deliverChangeRecords(); | |
| 85 expect(el.attributes['foo-bar'], '1'); | |
| 86 | |
| 87 model[sym('a')] = '2'; | |
| 88 deliverChangeRecords(); | |
| 89 expect(el.attributes['foo-bar'], '2'); | |
| 90 }); | |
| 91 | |
| 92 test('SimpleBindingWithComment', () { | |
| 93 var el = new DivElement(); | |
| 94 el.innerHtml = '<!-- Comment -->'; | |
| 95 var model = toSymbolMap({'a': '1'}); | |
| 96 el.bind('foo-bar', model, 'a'); | |
| 97 deliverChangeRecords(); | |
| 98 expect(el.attributes['foo-bar'], '1'); | |
| 99 | |
| 100 model[sym('a')] = '2'; | |
| 101 deliverChangeRecords(); | |
| 102 expect(el.attributes['foo-bar'], '2'); | |
| 103 }); | |
| 104 | |
| 105 test('PlaceHolderBindingText', () { | |
| 106 var model = toSymbolMap({ | |
| 107 'adj': 'cruel', | |
| 108 'noun': 'world' | |
| 109 }); | |
| 110 | |
| 111 var el = new DivElement(); | |
| 112 el.text = 'dummy'; | |
| 113 el.nodes.first.text = 'Hello {{ adj }} {{noun}}!'; | |
| 114 var template = new Element.html('<template bind>'); | |
| 115 template.content.append(el); | |
| 116 testDiv.append(template); | |
| 117 template.model = model; | |
| 118 | |
| 119 deliverChangeRecords(); | |
| 120 el = testDiv.nodes[1].nodes.first; | |
| 121 expect(el.text, 'Hello cruel world!'); | |
| 122 | |
| 123 model[sym('adj')] = 'happy'; | |
| 124 deliverChangeRecords(); | |
| 125 expect(el.text, 'Hello happy world!'); | |
| 126 }); | |
| 127 | |
| 128 test('InputElementTextBinding', () { | |
| 129 var model = toSymbolMap({'val': 'ping'}); | |
| 130 | |
| 131 var el = new InputElement(); | |
| 132 el.bind('value', model, 'val'); | |
| 133 deliverChangeRecords(); | |
| 134 expect(el.value, 'ping'); | |
| 135 | |
| 136 el.value = 'pong'; | |
| 137 dispatchEvent('input', el); | |
| 138 expect(model[sym('val')], 'pong'); | |
| 139 | |
| 140 // Try a deep path. | |
| 141 model = toSymbolMap({'a': {'b': {'c': 'ping'}}}); | |
| 142 | |
| 143 el.bind('value', model, 'a.b.c'); | |
| 144 deliverChangeRecords(); | |
| 145 expect(el.value, 'ping'); | |
| 146 | |
| 147 el.value = 'pong'; | |
| 148 dispatchEvent('input', el); | |
| 149 expect(observePath(model, 'a.b.c').value, 'pong'); | |
| 150 | |
| 151 // Start with the model property being absent. | |
| 152 model[sym('a')][sym('b')].remove(sym('c')); | |
| 153 deliverChangeRecords(); | |
| 154 expect(el.value, ''); | |
| 155 | |
| 156 el.value = 'pong'; | |
| 157 dispatchEvent('input', el); | |
| 158 expect(observePath(model, 'a.b.c').value, 'pong'); | |
| 159 deliverChangeRecords(); | |
| 160 | |
| 161 // Model property unreachable (and unsettable). | |
| 162 model[sym('a')].remove(sym('b')); | |
| 163 deliverChangeRecords(); | |
| 164 expect(el.value, ''); | |
| 165 | |
| 166 el.value = 'pong'; | |
| 167 dispatchEvent('input', el); | |
| 168 expect(observePath(model, 'a.b.c').value, null); | |
| 169 }); | |
| 170 | |
| 171 test('InputElementCheckbox', () { | |
| 172 var model = toSymbolMap({'val': true}); | |
| 173 | |
| 174 var el = new InputElement(); | |
| 175 testDiv.append(el); | |
| 176 el.type = 'checkbox'; | |
| 177 el.bind('checked', model, 'val'); | |
| 178 deliverChangeRecords(); | |
| 179 expect(el.checked, true); | |
| 180 | |
| 181 model[sym('val')] = false; | |
| 182 deliverChangeRecords(); | |
| 183 expect(el.checked, false); | |
| 184 | |
| 185 el.click(); | |
| 186 expect(model[sym('val')], true); | |
| 187 | |
| 188 el.click(); | |
| 189 expect(model[sym('val')], false); | |
| 190 }); | |
| 191 | |
| 192 test('InputElementRadio', () { | |
| 193 var model = toSymbolMap({'val1': true, 'val2': false, 'val3': false, | |
| 194 'val4': true}); | |
| 195 var RADIO_GROUP_NAME = 'test'; | |
| 196 | |
| 197 var container = testDiv; | |
| 198 | |
| 199 var el1 = new InputElement(); | |
| 200 testDiv.append(el1); | |
| 201 el1.type = 'radio'; | |
| 202 el1.name = RADIO_GROUP_NAME; | |
| 203 el1.bind('checked', model, 'val1'); | |
| 204 | |
| 205 var el2 = new InputElement(); | |
| 206 testDiv.append(el2); | |
| 207 el2.type = 'radio'; | |
| 208 el2.name = RADIO_GROUP_NAME; | |
| 209 el2.bind('checked', model, 'val2'); | |
| 210 | |
| 211 var el3 = new InputElement(); | |
| 212 testDiv.append(el3); | |
| 213 el3.type = 'radio'; | |
| 214 el3.name = RADIO_GROUP_NAME; | |
| 215 el3.bind('checked', model, 'val3'); | |
| 216 | |
| 217 var el4 = new InputElement(); | |
| 218 testDiv.append(el4); | |
| 219 el4.type = 'radio'; | |
| 220 el4.name = 'othergroup'; | |
| 221 el4.bind('checked', model, 'val4'); | |
| 222 | |
| 223 deliverChangeRecords(); | |
| 224 expect(el1.checked, true); | |
| 225 expect(el2.checked, false); | |
| 226 expect(el3.checked, false); | |
| 227 expect(el4.checked, true); | |
| 228 | |
| 229 model[sym('val1')] = false; | |
| 230 model[sym('val2')] = true; | |
| 231 deliverChangeRecords(); | |
| 232 expect(el1.checked, false); | |
| 233 expect(el2.checked, true); | |
| 234 expect(el3.checked, false); | |
| 235 expect(el4.checked, true); | |
| 236 | |
| 237 el1.checked = true; | |
| 238 dispatchEvent('change', el1); | |
| 239 expect(model[sym('val1')], true); | |
| 240 expect(model[sym('val2')], false); | |
| 241 expect(model[sym('val3')], false); | |
| 242 expect(model[sym('val4')], true); | |
| 243 | |
| 244 el3.checked = true; | |
| 245 dispatchEvent('change', el3); | |
| 246 expect(model[sym('val1')], false); | |
| 247 expect(model[sym('val2')], false); | |
| 248 expect(model[sym('val3')], true); | |
| 249 expect(model[sym('val4')], true); | |
| 250 }); | |
| 251 | |
| 252 test('InputElementRadioMultipleForms', () { | |
| 253 var model = toSymbolMap({'val1': true, 'val2': false, 'val3': false, | |
| 254 'val4': true}); | |
| 255 var RADIO_GROUP_NAME = 'test'; | |
| 256 | |
| 257 var form1 = new FormElement(); | |
| 258 testDiv.append(form1); | |
| 259 var form2 = new FormElement(); | |
| 260 testDiv.append(form2); | |
| 261 | |
| 262 var el1 = new InputElement(); | |
| 263 form1.append(el1); | |
| 264 el1.type = 'radio'; | |
| 265 el1.name = RADIO_GROUP_NAME; | |
| 266 el1.bind('checked', model, 'val1'); | |
| 267 | |
| 268 var el2 = new InputElement(); | |
| 269 form1.append(el2); | |
| 270 el2.type = 'radio'; | |
| 271 el2.name = RADIO_GROUP_NAME; | |
| 272 el2.bind('checked', model, 'val2'); | |
| 273 | |
| 274 var el3 = new InputElement(); | |
| 275 form2.append(el3); | |
| 276 el3.type = 'radio'; | |
| 277 el3.name = RADIO_GROUP_NAME; | |
| 278 el3.bind('checked', model, 'val3'); | |
| 279 | |
| 280 var el4 = new InputElement(); | |
| 281 form2.append(el4); | |
| 282 el4.type = 'radio'; | |
| 283 el4.name = RADIO_GROUP_NAME; | |
| 284 el4.bind('checked', model, 'val4'); | |
| 285 | |
| 286 deliverChangeRecords(); | |
| 287 expect(el1.checked, true); | |
| 288 expect(el2.checked, false); | |
| 289 expect(el3.checked, false); | |
| 290 expect(el4.checked, true); | |
| 291 | |
| 292 el2.checked = true; | |
| 293 dispatchEvent('change', el2); | |
| 294 expect(model[sym('val1')], false); | |
| 295 expect(model[sym('val2')], true); | |
| 296 | |
| 297 // Radio buttons in form2 should be unaffected | |
| 298 expect(model[sym('val3')], false); | |
| 299 expect(model[sym('val4')], true); | |
| 300 | |
| 301 el3.checked = true; | |
| 302 dispatchEvent('change', el3); | |
| 303 expect(model[sym('val3')], true); | |
| 304 expect(model[sym('val4')], false); | |
| 305 | |
| 306 // Radio buttons in form1 should be unaffected | |
| 307 expect(model[sym('val1')], false); | |
| 308 expect(model[sym('val2')], true); | |
| 309 }); | |
| 310 | |
| 311 test('BindToChecked', () { | |
| 312 var div = new DivElement(); | |
| 313 testDiv.append(div); | |
| 314 var child = new DivElement(); | |
| 315 div.append(child); | |
| 316 var input = new InputElement(); | |
| 317 child.append(input); | |
| 318 input.type = 'checkbox'; | |
| 319 | |
| 320 var model = toSymbolMap({'a': {'b': false}}); | |
| 321 input.bind('checked', model, 'a.b'); | |
| 322 | |
| 323 input.click(); | |
| 324 expect(model[sym('a')][sym('b')], true); | |
| 325 | |
| 326 input.click(); | |
| 327 expect(model[sym('a')][sym('b')], false); | |
| 328 }); | |
| 329 | |
| 330 test('MultipleReferences', () { | |
| 331 var el = new DivElement(); | |
| 332 var template = new Element.html('<template bind>'); | |
| 333 template.content.append(el); | |
| 334 testDiv.append(template); | |
| 335 | |
| 336 var model = toSymbolMap({'foo': 'bar'}); | |
| 337 el.attributes['foo'] = '{{foo}} {{foo}}'; | |
| 338 template.model = model; | |
| 339 | |
| 340 deliverChangeRecords(); | |
| 341 el = testDiv.nodes[1]; | |
| 342 expect(el.attributes['foo'], 'bar bar'); | |
| 343 }); | |
| 344 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 17552019:
Reorganize mdv and observe packages (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart