| 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 |