OLD | NEW |
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:html'; | 7 import 'dart:html'; |
8 import 'package:mdv/mdv.dart' as mdv; | 8 import 'package:mdv/mdv.dart' as mdv; |
| 9 import 'package:observe/observe.dart' show toObservable; |
9 import 'package:unittest/html_config.dart'; | 10 import 'package:unittest/html_config.dart'; |
10 import 'package:unittest/unittest.dart'; | 11 import 'package:unittest/unittest.dart'; |
11 import 'mdv_test_utils.dart'; | 12 import 'mdv_test_utils.dart'; |
12 | 13 |
13 // Note: this file ported from | 14 // Note: this file ported from |
14 // https://github.com/toolkitchen/mdv/blob/master/tests/node_bindings.js | 15 // https://github.com/toolkitchen/mdv/blob/master/tests/node_bindings.js |
15 | 16 |
16 main() { | 17 main() { |
17 mdv.initialize(); | 18 mdv.initialize(); |
18 useHtmlConfiguration(); | 19 useHtmlConfiguration(); |
19 group('Node Bindings', nodeBindingTests); | 20 group('Node Bindings', nodeBindingTests); |
20 } | 21 } |
21 | 22 |
22 nodeBindingTests() { | 23 nodeBindingTests() { |
23 var testDiv; | 24 var testDiv; |
24 | 25 |
25 setUp(() { | 26 setUp(() { |
26 document.body.append(testDiv = new DivElement()); | 27 document.body.append(testDiv = new DivElement()); |
27 }); | 28 }); |
28 | 29 |
29 tearDown(() { | 30 tearDown(() { |
30 testDiv.remove(); | 31 testDiv.remove(); |
31 testDiv = null; | 32 testDiv = null; |
32 }); | 33 }); |
33 | 34 |
34 observeTest('Text', () { | 35 observeTest('Text', () { |
35 var text = new Text('hi'); | 36 var text = new Text('hi'); |
36 var model = toSymbolMap({'a': 1}); | 37 var model = toObservable({'a': 1}); |
37 text.bind('text', model, 'a'); | 38 text.bind('text', model, 'a'); |
38 expect(text.text, '1'); | 39 expect(text.text, '1'); |
39 | 40 |
40 model[#a] = 2; | 41 model['a'] = 2; |
41 performMicrotaskCheckpoint(); | 42 performMicrotaskCheckpoint(); |
42 expect(text.text, '2'); | 43 expect(text.text, '2'); |
43 | 44 |
44 text.unbind('text'); | 45 text.unbind('text'); |
45 model[#a] = 3; | 46 model['a'] = 3; |
46 performMicrotaskCheckpoint(); | 47 performMicrotaskCheckpoint(); |
47 expect(text.text, '2'); | 48 expect(text.text, '2'); |
48 | 49 |
49 // TODO(rafaelw): Throw on binding to unavailable property? | 50 // TODO(rafaelw): Throw on binding to unavailable property? |
50 }); | 51 }); |
51 | 52 |
52 observeTest('Element', () { | 53 observeTest('Element', () { |
53 var element = new DivElement(); | 54 var element = new DivElement(); |
54 var model = toSymbolMap({'a': 1, 'b': 2}); | 55 var model = toObservable({'a': 1, 'b': 2}); |
55 element.bind('hidden?', model, 'a'); | 56 element.bind('hidden?', model, 'a'); |
56 element.bind('id', model, 'b'); | 57 element.bind('id', model, 'b'); |
57 | 58 |
58 expect(element.attributes, contains('hidden')); | 59 expect(element.attributes, contains('hidden')); |
59 expect(element.attributes['hidden'], ''); | 60 expect(element.attributes['hidden'], ''); |
60 expect(element.id, '2'); | 61 expect(element.id, '2'); |
61 | 62 |
62 model[#a] = null; | 63 model['a'] = null; |
63 performMicrotaskCheckpoint(); | 64 performMicrotaskCheckpoint(); |
64 expect(element.attributes, isNot(contains('hidden')), | 65 expect(element.attributes, isNot(contains('hidden')), |
65 reason: 'null is false-y'); | 66 reason: 'null is false-y'); |
66 | 67 |
67 model[#a] = false; | 68 model['a'] = false; |
68 performMicrotaskCheckpoint(); | 69 performMicrotaskCheckpoint(); |
69 expect(element.attributes, isNot(contains('hidden'))); | 70 expect(element.attributes, isNot(contains('hidden'))); |
70 | 71 |
71 model[#a] = 'foo'; | 72 model['a'] = 'foo'; |
72 model[#b] = 'x'; | 73 model['b'] = 'x'; |
73 performMicrotaskCheckpoint(); | 74 performMicrotaskCheckpoint(); |
74 expect(element.attributes, contains('hidden')); | 75 expect(element.attributes, contains('hidden')); |
75 expect(element.attributes['hidden'], ''); | 76 expect(element.attributes['hidden'], ''); |
76 expect(element.id, 'x'); | 77 expect(element.id, 'x'); |
77 }); | 78 }); |
78 | 79 |
79 inputTextAreaValueTest(String tagName) { | 80 inputTextAreaValueTest(String tagName) { |
80 var el = new Element.tag(tagName); | 81 var el = new Element.tag(tagName); |
81 testDiv.nodes.add(el); | 82 testDiv.nodes.add(el); |
82 var model = toSymbolMap({'x': 42}); | 83 var model = toObservable({'x': 42}); |
83 el.bind('value', model, 'x'); | 84 el.bind('value', model, 'x'); |
84 expect(el.value, '42'); | 85 expect(el.value, '42'); |
85 | 86 |
86 model[#x] = 'Hi'; | 87 model['x'] = 'Hi'; |
87 expect(el.value, '42', reason: 'changes delivered async'); | 88 expect(el.value, '42', reason: 'changes delivered async'); |
88 performMicrotaskCheckpoint(); | 89 performMicrotaskCheckpoint(); |
89 expect(el.value, 'Hi'); | 90 expect(el.value, 'Hi'); |
90 | 91 |
91 el.value = 'changed'; | 92 el.value = 'changed'; |
92 dispatchEvent('input', el); | 93 dispatchEvent('input', el); |
93 expect(model[#x], 'changed'); | 94 expect(model['x'], 'changed'); |
94 | 95 |
95 el.unbind('value'); | 96 el.unbind('value'); |
96 | 97 |
97 el.value = 'changed again'; | 98 el.value = 'changed again'; |
98 dispatchEvent('input', el); | 99 dispatchEvent('input', el); |
99 expect(model[#x], 'changed'); | 100 expect(model['x'], 'changed'); |
100 | 101 |
101 el.bind('value', model, 'x'); | 102 el.bind('value', model, 'x'); |
102 model[#x] = null; | 103 model['x'] = null; |
103 performMicrotaskCheckpoint(); | 104 performMicrotaskCheckpoint(); |
104 expect(el.value, ''); | 105 expect(el.value, ''); |
105 } | 106 } |
106 | 107 |
107 observeTest('Input.value', () => inputTextAreaValueTest('input')); | 108 observeTest('Input.value', () => inputTextAreaValueTest('input')); |
108 observeTest('TextArea.value', () => inputTextAreaValueTest('textarea')); | 109 observeTest('TextArea.value', () => inputTextAreaValueTest('textarea')); |
109 | 110 |
110 observeTest('Radio Input', () { | 111 observeTest('Radio Input', () { |
111 var input = new InputElement(); | 112 var input = new InputElement(); |
112 input.type = 'radio'; | 113 input.type = 'radio'; |
113 var model = toSymbolMap({'x': true}); | 114 var model = toObservable({'x': true}); |
114 input.bind('checked', model, 'x'); | 115 input.bind('checked', model, 'x'); |
115 expect(input.checked, true); | 116 expect(input.checked, true); |
116 | 117 |
117 model[#x] = false; | 118 model['x'] = false; |
118 expect(input.checked, true); | 119 expect(input.checked, true); |
119 performMicrotaskCheckpoint(); | 120 performMicrotaskCheckpoint(); |
120 expect(input.checked, false,reason: 'model change should update checked'); | 121 expect(input.checked, false,reason: 'model change should update checked'); |
121 | 122 |
122 input.checked = true; | 123 input.checked = true; |
123 dispatchEvent('change', input); | 124 dispatchEvent('change', input); |
124 expect(model[#x], true, reason: 'input.checked should set model'); | 125 expect(model['x'], true, reason: 'input.checked should set model'); |
125 | 126 |
126 input.unbind('checked'); | 127 input.unbind('checked'); |
127 | 128 |
128 input.checked = false; | 129 input.checked = false; |
129 dispatchEvent('change', input); | 130 dispatchEvent('change', input); |
130 expect(model[#x], true, | 131 expect(model['x'], true, |
131 reason: 'disconnected binding should not fire'); | 132 reason: 'disconnected binding should not fire'); |
132 }); | 133 }); |
133 | 134 |
134 observeTest('Checkbox Input', () { | 135 observeTest('Checkbox Input', () { |
135 var input = new InputElement(); | 136 var input = new InputElement(); |
136 testDiv.append(input); | 137 testDiv.append(input); |
137 input.type = 'checkbox'; | 138 input.type = 'checkbox'; |
138 var model = toSymbolMap({'x': true}); | 139 var model = toObservable({'x': true}); |
139 input.bind('checked', model, 'x'); | 140 input.bind('checked', model, 'x'); |
140 expect(input.checked, true); | 141 expect(input.checked, true); |
141 | 142 |
142 model[#x] = false; | 143 model['x'] = false; |
143 expect(input.checked, true, reason: 'changes delivered async'); | 144 expect(input.checked, true, reason: 'changes delivered async'); |
144 performMicrotaskCheckpoint(); | 145 performMicrotaskCheckpoint(); |
145 expect(input.checked, false); | 146 expect(input.checked, false); |
146 | 147 |
147 input.click(); | 148 input.click(); |
148 expect(model[#x], true); | 149 expect(model['x'], true); |
149 performMicrotaskCheckpoint(); | 150 performMicrotaskCheckpoint(); |
150 | 151 |
151 input.click(); | 152 input.click(); |
152 expect(model[#x], false); | 153 expect(model['x'], false); |
153 }); | 154 }); |
154 } | 155 } |
OLD | NEW |