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