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

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

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

Powered by Google App Engine
This is Rietveld 408576698