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