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