| 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 bindings_test; | 5 library bindings_test; |
| 6 | 6 |
| 7 import 'dart:async'; |
| 7 import 'dart:html'; | 8 import 'dart:html'; |
| 8 | 9 |
| 9 import 'package:logging/logging.dart'; | 10 import 'package:logging/logging.dart'; |
| 10 import 'package:observe/observe.dart'; | 11 import 'package:observe/observe.dart'; |
| 11 import 'package:observe/src/microtask.dart'; | 12 import 'package:observe/src/dirty_check.dart' show dirtyCheckZone; |
| 12 import 'package:polymer_expressions/polymer_expressions.dart'; | 13 import 'package:polymer_expressions/polymer_expressions.dart'; |
| 13 import 'package:template_binding/template_binding.dart' show templateBind; | 14 import 'package:template_binding/template_binding.dart' show templateBind; |
| 14 import 'package:unittest/html_config.dart'; | 15 import 'package:unittest/html_config.dart'; |
| 15 import 'package:unittest/unittest.dart'; | 16 import 'package:unittest/unittest.dart'; |
| 16 | 17 |
| 17 main() { | 18 main() => dirtyCheckZone().run(() { |
| 18 useHtmlConfiguration(); | 19 useHtmlConfiguration(); |
| 19 | 20 |
| 20 group('bindings', () { | 21 group('bindings', () { |
| 21 var stop = null; | 22 var stop = null; |
| 22 var messages = []; | 23 var messages = []; |
| 23 var testDiv; | 24 var testDiv; |
| 24 setUp(() { | 25 setUp(() { |
| 25 stop = Logger.root.onRecord.listen((r) => messages.add(r)); | 26 stop = Logger.root.onRecord.listen((r) => messages.add(r)); |
| 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 stop.cancel(); | 33 stop.cancel(); |
| 33 stop = null; | 34 stop = null; |
| 34 messages = []; | 35 messages = []; |
| 35 }); | 36 }); |
| 36 | 37 |
| 37 observeTest('should update binding when data changes', () { | 38 test('should update binding when data changes', () { |
| 38 var model = new NotifyModel(); | 39 var model = new NotifyModel(); |
| 39 var binding = new PolymerExpressions() | 40 var binding = new PolymerExpressions() |
| 40 .prepareBinding('x', null, null)(model, null); | 41 .prepareBinding('x', null, null)(model, null, false); |
| 41 expect(binding.value, isNull); | 42 expect(binding.value, isNull); |
| 42 model.x = "hi"; | 43 model.x = "hi"; |
| 43 performMicrotaskCheckpoint(); | 44 return new Future(() { |
| 44 expect(binding.value, 'hi'); | 45 expect(binding.value, 'hi'); |
| 45 expect(messages.length, 0); | 46 expect(messages.length, 0); |
| 47 }); |
| 46 }); | 48 }); |
| 47 | 49 |
| 48 observeTest('should update text content when data changes', () { | 50 test('should update text content when data changes', () { |
| 49 var model = new NotifyModel('abcde'); | 51 var model = new NotifyModel('abcde'); |
| 50 var template = templateBind(new Element.html( | 52 var template = templateBind(new Element.html( |
| 51 '<template><span>{{x}}</span></template>')); | 53 '<template><span>{{x}}</span></template>')); |
| 52 testDiv.append(template.createInstance(model, new PolymerExpressions())); | 54 testDiv.append(template.createInstance(model, new PolymerExpressions())); |
| 53 | 55 |
| 54 performMicrotaskCheckpoint(); | 56 return new Future(() { |
| 55 var el = testDiv.query("span"); | 57 var el = testDiv.query("span"); |
| 56 expect(el.text, 'abcde'); | 58 expect(el.text, 'abcde'); |
| 57 expect(model.x, 'abcde'); | 59 expect(model.x, 'abcde'); |
| 58 model.x = '___'; | 60 model.x = '___'; |
| 59 | 61 |
| 60 performMicrotaskCheckpoint(); | 62 return new Future(() { |
| 61 expect(model.x, '___'); | 63 expect(model.x, '___'); |
| 62 expect(el.text, '___'); | 64 expect(el.text, '___'); |
| 65 }); |
| 66 }); |
| 63 }); | 67 }); |
| 64 | 68 |
| 65 observeTest('should log eval exceptions', () { | 69 test('should log eval exceptions', () { |
| 66 var model = new NotifyModel('abcde'); | 70 var model = new NotifyModel('abcde'); |
| 67 var template = templateBind(new Element.html( | 71 var template = templateBind(new Element.html( |
| 68 '<template><span>{{foo}}</span></template>')); | 72 '<template><span>{{foo}}</span></template>')); |
| 69 testDiv.append(template.createInstance(model, new PolymerExpressions())); | 73 testDiv.append(template.createInstance(model, new PolymerExpressions())); |
| 70 performMicrotaskCheckpoint(); | 74 |
| 71 expect(messages.length, 1); | 75 return new Future(() { |
| 72 expect(messages[0].message, | 76 expect(messages.length, 1); |
| 73 "Error evaluating expression 'foo': variable 'foo' not found"); | 77 expect(messages[0].message, |
| 78 "Error evaluating expression 'foo': variable 'foo' not found"); |
| 79 }); |
| 74 }); | 80 }); |
| 75 | 81 |
| 76 observeTest('should preserve the cursor position', () { | 82 test('should preserve the cursor position', () { |
| 77 var model = new NotifyModel('abcde'); | 83 var model = new NotifyModel('abcde'); |
| 78 var template = templateBind(new Element.html( | 84 var template = templateBind(new Element.html( |
| 79 '<template><input id="i1" value={{x}}></template>')); | 85 '<template><input id="i1" value={{x}}></template>')); |
| 80 testDiv.append(template.createInstance(model, new PolymerExpressions())); | 86 testDiv.append(template.createInstance(model, new PolymerExpressions())); |
| 81 | 87 |
| 82 performMicrotaskCheckpoint(); | 88 return new Future(() { |
| 83 var el = testDiv.query("#i1"); | 89 var el = testDiv.query("#i1"); |
| 84 var subscription = el.onInput.listen(expectAsync1((_) { | 90 var subscription = el.onInput.listen(expectAsync1((_) {}, count: 1)); |
| 85 performMicrotaskCheckpoint(); | 91 el.focus(); |
| 86 }, count: 1)); | |
| 87 el.focus(); | |
| 88 | 92 |
| 89 expect(el.value, 'abcde'); | 93 expect(el.value, 'abcde'); |
| 90 expect(model.x, 'abcde'); | 94 expect(model.x, 'abcde'); |
| 91 | 95 |
| 92 el.selectionStart = 3; | 96 el.selectionStart = 3; |
| 93 el.selectionEnd = 3; | 97 el.selectionEnd = 3; |
| 94 expect(el.selectionStart, 3); | 98 expect(el.selectionStart, 3); |
| 95 expect(el.selectionEnd, 3); | 99 expect(el.selectionEnd, 3); |
| 96 | 100 |
| 97 el.value = 'abc de'; | 101 el.value = 'abc de'; |
| 98 // Updating the input value programatically (even to the same value in | 102 // Updating the input value programatically (even to the same value in |
| 99 // Chrome) loses the selection position. | 103 // Chrome) loses the selection position. |
| 100 expect(el.selectionStart, 6); | 104 expect(el.selectionStart, 6); |
| 101 expect(el.selectionEnd, 6); | 105 expect(el.selectionEnd, 6); |
| 102 | 106 |
| 103 el.selectionStart = 4; | 107 el.selectionStart = 4; |
| 104 el.selectionEnd = 4; | 108 el.selectionEnd = 4; |
| 105 | 109 |
| 106 expect(model.x, 'abcde'); | 110 expect(model.x, 'abcde'); |
| 107 el.dispatchEvent(new Event('input')); | 111 el.dispatchEvent(new Event('input')); |
| 108 expect(model.x, 'abc de'); | 112 expect(model.x, 'abc de'); |
| 109 expect(el.value, 'abc de'); | 113 expect(el.value, 'abc de'); |
| 110 | 114 |
| 111 // But propagating observable values through reassign the value and | 115 // But propagating observable values through reassign the value and |
| 112 // selection will be preserved. | 116 // selection will be preserved. |
| 113 expect(el.selectionStart, 4); | 117 expect(el.selectionStart, 4); |
| 114 expect(el.selectionEnd, 4); | 118 expect(el.selectionEnd, 4); |
| 115 | 119 |
| 116 subscription.cancel(); | 120 subscription.cancel(); |
| 121 }); |
| 117 }); | 122 }); |
| 118 }); | 123 }); |
| 119 } | 124 }); |
| 120 | 125 |
| 121 @reflectable | 126 @reflectable |
| 122 class NotifyModel extends ChangeNotifier { | 127 class NotifyModel extends ChangeNotifier { |
| 123 var _x; | 128 var _x; |
| 124 NotifyModel([this._x]); | 129 NotifyModel([this._x]); |
| 125 | 130 |
| 126 get x => _x; | 131 get x => _x; |
| 127 set x(value) { | 132 set x(value) { |
| 128 _x = notifyPropertyChange(#x, _x, value); | 133 _x = notifyPropertyChange(#x, _x, value); |
| 129 } | 134 } |
| 130 } | 135 } |
| 131 | |
| 132 observeTest(name, testCase) => test(name, wrapMicrotask(testCase)); | |
| OLD | NEW |