Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(145)

Side by Side Diff: pkg/mdv/test/element_bindings_test.dart

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

Powered by Google App Engine
This is Rietveld 408576698