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