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