Index: pkg/template_binding/test/node_bind_test.dart |
=================================================================== |
--- pkg/template_binding/test/node_bind_test.dart (revision 37373) |
+++ pkg/template_binding/test/node_bind_test.dart (working copy) |
@@ -9,25 +9,30 @@ |
import 'package:observe/observe.dart' |
show toObservable, PathObserver, PropertyPath; |
-import 'package:template_binding/template_binding.dart' show nodeBind; |
+import 'package:template_binding/template_binding.dart' |
+ show nodeBind, enableBindingsReflection; |
import 'package:unittest/html_config.dart'; |
import 'package:unittest/unittest.dart'; |
import 'utils.dart'; |
-// Note: this file ported from |
-// https://github.com/toolkitchen/mdv/blob/master/tests/node_bindings.js |
+// Ported from: https://github.com/Polymer/NodeBind/blob/master/tests/tests.js |
+var bindings; |
+ |
main() => dirtyCheckZone().run(() { |
useHtmlConfiguration(); |
setUp(() { |
document.body.append(testDiv = new DivElement()); |
+ bindings = []; |
}); |
tearDown(() { |
testDiv.remove(); |
testDiv = null; |
+ for (var b in bindings) if (b != null) b.close(); |
+ bindings = null; |
}); |
group('Text bindings', testBindings); |
@@ -39,31 +44,25 @@ |
test('Basic', () { |
var text = new Text('hi'); |
var model = toObservable({'a': 1}); |
- nodeBind(text).bind('text', new PathObserver(model, 'a')); |
+ bindings.add(nodeBind(text).bind('text', new PathObserver(model, 'a'))); |
expect(text.text, '1'); |
model['a'] = 2; |
return new Future(() { |
expect(text.text, '2'); |
- |
- nodeBind(text).unbind('text'); |
- model['a'] = 3; |
- }).then(endOfMicrotask).then((_) { |
- // TODO(rafaelw): Throw on binding to unavailable property? |
- expect(text.text, '2'); |
}); |
}); |
test('oneTime', () { |
var text = new Text('hi'); |
- nodeBind(text).bind('text', 1, oneTime: true); |
+ bindings.add(nodeBind(text).bind('text', 1, oneTime: true)); |
expect(text.text, '1'); |
}); |
test('No Path', () { |
var text = new Text('hi'); |
var model = 1; |
- nodeBind(text).bind('text', new PathObserver(model)); |
+ bindings.add(nodeBind(text).bind('text', new PathObserver(model))); |
expect(text.text, '1'); |
}); |
@@ -76,28 +75,37 @@ |
}); |
test('Observer is Model', () { |
- var text = new Text(''); |
- var model = toObservable({'a': {'b': {'c': 1}}}); |
- var observer = new PathObserver(model, 'a.b.c'); |
- nodeBind(text).bind('text', observer); |
- expect(text.text, '1'); |
+ // Dart note: we don't have _allObserversCount so we use binding reflection |
+ // instead. |
+ enableBindingsReflection = true; |
- var binding = nodeBind(text).bindings['text']; |
- expect(binding, observer, reason: 'should reuse observer'); |
+ // This future is here so we can turn off bindings reflection reliably. |
+ Text text; |
+ return new Future(() { |
+ text = new Text(''); |
+ var model = toObservable({'a': {'b': {'c': 1}}}); |
+ var observer = new PathObserver(model, 'a.b.c'); |
+ bindings.add(nodeBind(text).bind('text', observer)); |
+ expect(text.text, '1'); |
- model['a']['b']['c'] = 2; |
- return new Future(() { |
+ var binding = nodeBind(text).bindings['text']; |
+ expect(binding, observer, reason: 'should reuse observer'); |
+ |
+ model['a']['b']['c'] = 2; |
+ }).then(endOfMicrotask).then((_) { |
expect(text.text, '2'); |
- nodeBind(text).unbind('text'); |
+ }).whenComplete(() { |
+ enableBindingsReflection = false; |
}); |
}); |
} |
elementBindings() { |
+ |
test('Basic', () { |
var el = new DivElement(); |
var model = toObservable({'a': '1'}); |
- nodeBind(el).bind('foo', new PathObserver(model, 'a')); |
+ bindings.add(nodeBind(el).bind('foo', new PathObserver(model, 'a'))); |
return new Future(() { |
expect(el.attributes['foo'], '1'); |
@@ -116,17 +124,45 @@ |
}); |
}); |
+ // Dart specific test |
+ test('enableBindingsReflection defaults to off', () { |
+ expect(enableBindingsReflection, false); |
+ |
+ var el = new DivElement(); |
+ var model = toObservable({'a': '1'}); |
+ bindings.add(nodeBind(el).bind('foo', new PathObserver(model, 'a'))); |
+ |
+ expect(nodeBind(el).bindings, null); |
+ }); |
+ |
+ test('enableBindingsReflection', () { |
+ enableBindingsReflection = true; |
+ try { |
+ var el = testDiv.append(new DivElement()); |
+ var model = toObservable({'a': '1'}); |
+ bindings.add(nodeBind(el).bind('foo', new PathObserver(model, 'a'))); |
+ bindings.add(nodeBind(el).bind('bar', new PathObserver(model, 'a'))); |
+ bindings.add(nodeBind(el).bind('baz', new PathObserver(model, 'a'))); |
+ |
+ expect(nodeBind(el).bindings.keys, |
+ unorderedEquals(['foo', 'bar', 'baz'])); |
+ |
+ } finally { |
+ enableBindingsReflection = false; |
+ } |
+ }); |
+ |
test('oneTime', () { |
var el = testDiv.append(new DivElement()); |
var model = toObservable({'a': '1'}); |
- nodeBind(el).bind('foo', 1, oneTime: true); |
+ bindings.add(nodeBind(el).bind('foo', 1, oneTime: true)); |
expect('1', el.attributes['foo']); |
}); |
test('No Path', () { |
var el = testDiv.append(new DivElement()); |
var model = 1; |
- nodeBind(el).bind('foo', new PathObserver(model)); |
+ bindings.add(nodeBind(el).bind('foo', new PathObserver(model))); |
return new Future(() { |
expect(el.attributes['foo'], '1'); |
}); |
@@ -135,7 +171,7 @@ |
test('Path unreachable', () { |
var el = testDiv.append(new DivElement()); |
var model = toObservable({}); |
- nodeBind(el).bind('foo', new PathObserver(model, 'bar')); |
+ bindings.add(nodeBind(el).bind('foo', new PathObserver(model, 'bar'))); |
return new Future(() { |
expect(el.attributes['foo'], ''); |
}); |
@@ -144,7 +180,7 @@ |
test('Dashes', () { |
var el = testDiv.append(new DivElement()); |
var model = toObservable({'a': '1'}); |
- nodeBind(el).bind('foo-bar', new PathObserver(model, 'a')); |
+ bindings.add(nodeBind(el).bind('foo-bar', new PathObserver(model, 'a'))); |
return new Future(() { |
expect(el.attributes['foo-bar'], '1'); |
model['a'] = '2'; |
@@ -157,8 +193,9 @@ |
test('Element.id, Element.hidden?', () { |
var element = new DivElement(); |
var model = toObservable({'a': 1, 'b': 2}); |
- nodeBind(element).bind('hidden?', new PathObserver(model, 'a')); |
- nodeBind(element).bind('id', new PathObserver(model, 'b')); |
+ bindings.add( |
+ nodeBind(element).bind('hidden?', new PathObserver(model, 'a'))); |
+ bindings.add(nodeBind(element).bind('id', new PathObserver(model, 'b'))); |
expect(element.attributes, contains('hidden')); |
expect(element.attributes['hidden'], ''); |
@@ -185,7 +222,7 @@ |
test('Element.id - path unreachable', () { |
var element = testDiv.append(new DivElement()); |
var model = toObservable({}); |
- nodeBind(element).bind('id', new PathObserver(model, 'a')); |
+ bindings.add(nodeBind(element).bind('id', new PathObserver(model, 'a'))); |
return new Future(() => expect(element.id, '')); |
}); |
} |
@@ -195,7 +232,7 @@ |
var el = new Element.tag(tagName); |
testDiv.nodes.add(el); |
var model = toObservable({'x': 42}); |
- nodeBind(el).bind('value', new PathObserver(model, 'x')); |
+ bindings.add(nodeBind(el).bind('value', new PathObserver(model, 'x'))); |
expect(el.value, '42'); |
model['x'] = 'Hi'; |
@@ -206,37 +243,26 @@ |
el.value = 'changed'; |
dispatchEvent('input', el); |
expect(model['x'], 'changed'); |
- |
- nodeBind(el).unbind('value'); |
- |
- el.value = 'changed again'; |
- dispatchEvent('input', el); |
- expect(model['x'], 'changed'); |
- |
- nodeBind(el).bind('value', new PathObserver(model, 'x')); |
- model['x'] = null; |
- }).then(endOfMicrotask).then((_) { |
- expect(el.value, ''); |
}); |
} |
inputTextAreaValueOnetime(String tagName) { |
var el = testDiv.append(new Element.tag(tagName)); |
- nodeBind(el).bind('value', 42, oneTime: true); |
+ bindings.add(nodeBind(el).bind('value', 42, oneTime: true)); |
expect(el.value, '42'); |
} |
inputTextAreaNoPath(String tagName) { |
var el = testDiv.append(new Element.tag(tagName)); |
var model = 42; |
- nodeBind(el).bind('value', new PathObserver(model)); |
+ bindings.add(nodeBind(el).bind('value', new PathObserver(model))); |
expect(el.value, '42'); |
} |
inputTextAreaPathUnreachable(String tagName) { |
var el = testDiv.append(new Element.tag(tagName)); |
var model = toObservable({}); |
- nodeBind(el).bind('value', new PathObserver(model, 'a')); |
+ bindings.add(nodeBind(el).bind('value', new PathObserver(model, 'a'))); |
expect(el.value, ''); |
} |
@@ -268,7 +294,7 @@ |
var input = new InputElement(); |
input.type = 'radio'; |
var model = toObservable({'x': true}); |
- nodeBind(input).bind('checked', new PathObserver(model, 'x')); |
+ bindings.add(nodeBind(input).bind('checked', new PathObserver(model, 'x'))); |
expect(input.checked, true); |
model['x'] = false; |
@@ -280,7 +306,7 @@ |
dispatchEvent('change', input); |
expect(model['x'], true, reason: 'input.checked should set model'); |
- nodeBind(input).unbind('checked'); |
+ bindings[0].close(); |
input.checked = false; |
dispatchEvent('change', input); |
@@ -292,44 +318,25 @@ |
test('Input.value - user value rejected', () { |
var model = toObservable({'val': 'ping'}); |
+ var rejector = new PathObserver(model, 'val'); |
+ rejector.open(() { |
+ model['val'] = 'ping'; |
+ }); |
+ |
var el = new InputElement(); |
- nodeBind(el).bind('value', new PathObserver(model, 'val')); |
+ bindings.add(nodeBind(el).bind('value', new PathObserver(model, 'val'))); |
+ |
return new Future(() { |
expect(el.value, 'ping'); |
el.value = 'pong'; |
dispatchEvent('input', el); |
- expect(model['val'], 'pong'); |
- // Try a deep path. |
- model = toObservable({'a': {'b': {'c': 'ping'}}}); |
- |
- nodeBind(el).bind('value', new PathObserver(model, 'a.b.c')); |
}).then(endOfMicrotask).then((_) { |
+ // rejector will have set the bound value back to 'ping'. |
expect(el.value, 'ping'); |
- el.value = 'pong'; |
- dispatchEvent('input', el); |
- expect(new PropertyPath('a.b.c').getValueFrom(model), 'pong'); |
- |
- // Start with the model property being absent. |
- model['a']['b'].remove('c'); |
- }).then(endOfMicrotask).then((_) { |
- expect(el.value, ''); |
- |
- el.value = 'pong'; |
- dispatchEvent('input', el); |
- expect(new PropertyPath('a.b.c').getValueFrom(model), 'pong'); |
- }).then(endOfMicrotask).then((_) { |
- |
- // Model property unreachable (and unsettable). |
- model['a'].remove('b'); |
- }).then(endOfMicrotask).then((_) { |
- expect(el.value, ''); |
- |
- el.value = 'pong'; |
- dispatchEvent('input', el); |
- expect(new PropertyPath('a.b.c').getValueFrom(model), null); |
+ rejector.close(); |
}); |
}); |
@@ -338,7 +345,7 @@ |
el.type = 'checkbox'; |
var model = toObservable({'x': true}); |
- nodeBind(el).bind('checked', new PathObserver(model, 'x')); |
+ bindings.add(nodeBind(el).bind('checked', new PathObserver(model, 'x'))); |
expect(el.checked, true); |
model['x'] = false; |
@@ -358,7 +365,7 @@ |
test('Checkbox Input.checked - oneTime', () { |
var input = testDiv.append(new InputElement()); |
input.type = 'checkbox'; |
- nodeBind(input).bind('checked', true, oneTime: true); |
+ bindings.add(nodeBind(input).bind('checked', true, oneTime: true)); |
expect(input.checked, true, reason: 'checked was set'); |
}); |
@@ -366,7 +373,7 @@ |
var input = testDiv.append(new InputElement()); |
input.type = 'checkbox'; |
var model = toObservable({}); |
- nodeBind(input).bind('checked', new PathObserver(model, 'x')); |
+ bindings.add(nodeBind(input).bind('checked', new PathObserver(model, 'x'))); |
expect(input.checked, false); |
}); |
@@ -375,7 +382,7 @@ |
var el = testDiv.append(new InputElement()); |
el.type = 'checkbox'; |
- nodeBind(el).bind('checked', new PathObserver(model, 'val')); |
+ bindings.add(nodeBind(el).bind('checked', new PathObserver(model, 'val'))); |
return new Future(() { |
expect(el.checked, true); |
@@ -406,7 +413,7 @@ |
var el = new InputElement(); |
testDiv.append(el); |
el.type = 'checkbox'; |
- nodeBind(el).bind('checked', new PathObserver(model, 'val')); |
+ bindings.add(nodeBind(el).bind('checked', new PathObserver(model, 'val'))); |
return new Future(() { |
expect(el.checked, true); |
@@ -428,7 +435,7 @@ |
var el = new InputElement(); |
testDiv.append(el); |
el.type = 'checkbox'; |
- nodeBind(el).bind('checked', new PathObserver(model, 'val')); |
+ bindings.add(nodeBind(el).bind('checked', new PathObserver(model, 'val'))); |
return new Future(() { |
expect(el.checked, true); |
@@ -448,7 +455,7 @@ |
var input = testDiv.append(new InputElement()); |
input.type = 'radio'; |
var model = toObservable({'x': true}); |
- nodeBind(input).bind('checked', new PathObserver(model, 'x')); |
+ bindings.add(nodeBind(input).bind('checked', new PathObserver(model, 'x'))); |
expect(input.checked, true); |
model['x'] = false; |
@@ -459,19 +466,13 @@ |
input.checked = true; |
dispatchEvent('change', input); |
expect(model['x'], true); |
- |
- nodeBind(input).unbind('checked'); |
- |
- input.checked = false; |
- dispatchEvent('change', input); |
- expect(model['x'], true); |
}); |
}); |
test('Radio Input.checked - oneTime', () { |
var input = testDiv.append(new InputElement()); |
input.type = 'radio'; |
- nodeBind(input).bind('checked', true, oneTime: true); |
+ bindings.add(nodeBind(input).bind('checked', true, oneTime: true)); |
expect(input.checked, true, reason: 'checked was set'); |
}); |
@@ -485,22 +486,26 @@ |
var el1 = container.append(new InputElement()); |
el1.type = 'radio'; |
el1.name = RADIO_GROUP_NAME; |
- nodeBind(el1).bind('checked', new PathObserver(model, 'val1')); |
+ bindings.add( |
+ nodeBind(el1).bind('checked', new PathObserver(model, 'val1'))); |
var el2 = container.append(new InputElement()); |
el2.type = 'radio'; |
el2.name = RADIO_GROUP_NAME; |
- nodeBind(el2).bind('checked', new PathObserver(model, 'val2')); |
+ bindings.add( |
+ nodeBind(el2).bind('checked', new PathObserver(model, 'val2'))); |
var el3 = container.append(new InputElement()); |
el3.type = 'radio'; |
el3.name = RADIO_GROUP_NAME; |
- nodeBind(el3).bind('checked', new PathObserver(model, 'val3')); |
+ bindings.add( |
+ nodeBind(el3).bind('checked', new PathObserver(model, 'val3'))); |
var el4 = container.append(new InputElement()); |
el4.type = 'radio'; |
el4.name = 'othergroup'; |
- nodeBind(el4).bind('checked', new PathObserver(model, 'val4')); |
+ bindings.add( |
+ nodeBind(el4).bind('checked', new PathObserver(model, 'val4'))); |
return new Future(() { |
expect(el1.checked, true); |
@@ -538,8 +543,7 @@ |
if (!ShadowRoot.supported) return null; |
var shadowRoot = new DivElement().createShadowRoot(); |
- return radioInputChecked2(shadowRoot) |
- .whenComplete(() => unbindAll(shadowRoot)); |
+ return radioInputChecked2(shadowRoot); |
}); |
radioInputCheckedMultipleForms(host) { |
@@ -557,25 +561,29 @@ |
form1.append(el1); |
el1.type = 'radio'; |
el1.name = RADIO_GROUP_NAME; |
- nodeBind(el1).bind('checked', new PathObserver(model, 'val1')); |
+ bindings.add( |
+ nodeBind(el1).bind('checked', new PathObserver(model, 'val1'))); |
var el2 = new InputElement(); |
form1.append(el2); |
el2.type = 'radio'; |
el2.name = RADIO_GROUP_NAME; |
- nodeBind(el2).bind('checked', new PathObserver(model, 'val2')); |
+ bindings.add( |
+ nodeBind(el2).bind('checked', new PathObserver(model, 'val2'))); |
var el3 = new InputElement(); |
form2.append(el3); |
el3.type = 'radio'; |
el3.name = RADIO_GROUP_NAME; |
- nodeBind(el3).bind('checked', new PathObserver(model, 'val3')); |
+ bindings.add( |
+ nodeBind(el3).bind('checked', new PathObserver(model, 'val3'))); |
var el4 = new InputElement(); |
form2.append(el4); |
el4.type = 'radio'; |
el4.name = RADIO_GROUP_NAME; |
- nodeBind(el4).bind('checked', new PathObserver(model, 'val4')); |
+ bindings.add( |
+ nodeBind(el4).bind('checked', new PathObserver(model, 'val4'))); |
return new Future(() { |
expect(el1.checked, true); |
@@ -611,8 +619,7 @@ |
if (!ShadowRoot.supported) return null; |
var shadowRoot = new DivElement().createShadowRoot(); |
- return radioInputCheckedMultipleForms(shadowRoot) |
- .whenComplete(() => unbindAll(shadowRoot)); |
+ return radioInputCheckedMultipleForms(shadowRoot); |
}); |
test('Select.selectedIndex', () { |
@@ -624,7 +631,8 @@ |
var model = toObservable({'val': 2}); |
- nodeBind(select).bind('selectedIndex', new PathObserver(model, 'val')); |
+ bindings.add( |
+ nodeBind(select).bind('selectedIndex', new PathObserver(model, 'val'))); |
return new Future(() { |
expect(select.selectedIndex, 2); |
@@ -641,7 +649,7 @@ |
var option1 = select.append(new OptionElement()); |
var option2 = select.append(new OptionElement()); |
- nodeBind(select).bind('selectedIndex', 2, oneTime: true); |
+ bindings.add(nodeBind(select).bind('selectedIndex', 2, oneTime: true)); |
return new Future(() => expect(select.selectedIndex, 2)); |
}); |
@@ -655,7 +663,8 @@ |
var model = toObservable({'val': 'foo'}); |
- nodeBind(select).bind('selectedIndex', new PathObserver(model, 'val')); |
+ bindings.add( |
+ nodeBind(select).bind('selectedIndex', new PathObserver(model, 'val'))); |
return new Future(() => expect(select.selectedIndex, 0)); |
}); |
@@ -669,14 +678,15 @@ |
var model = toObservable({}); |
- nodeBind(select).bind('selectedIndex', new PathObserver(model, 'val')); |
+ bindings.add( |
+ nodeBind(select).bind('selectedIndex', new PathObserver(model, 'val'))); |
return new Future(() => expect(select.selectedIndex, 0)); |
}); |
test('Option.value', () { |
var option = testDiv.append(new OptionElement()); |
var model = toObservable({'x': 42}); |
- nodeBind(option).bind('value', new PathObserver(model, 'x')); |
+ bindings.add(nodeBind(option).bind('value', new PathObserver(model, 'x'))); |
expect(option.value, '42'); |
model['x'] = 'Hi'; |
@@ -686,7 +696,7 @@ |
test('Option.value - oneTime', () { |
var option = testDiv.append(new OptionElement()); |
- nodeBind(option).bind('value', 42, oneTime: true); |
+ bindings.add(nodeBind(option).bind('value', 42, oneTime: true)); |
expect(option.value, '42'); |
}); |
@@ -704,11 +714,14 @@ |
'selected': 'b' |
}); |
- nodeBind(option0).bind('value', new PathObserver(model, 'opt0')); |
- nodeBind(option1).bind('value', new PathObserver(model, 'opt1')); |
- nodeBind(option2).bind('value', new PathObserver(model, 'opt2')); |
- |
- nodeBind(select).bind('value', new PathObserver(model, 'selected')); |
+ bindings.add( |
+ nodeBind(option0).bind('value', new PathObserver(model, 'opt0'))); |
+ bindings.add( |
+ nodeBind(option1).bind('value', new PathObserver(model, 'opt1'))); |
+ bindings.add( |
+ nodeBind(option2).bind('value', new PathObserver(model, 'opt2'))); |
+ bindings.add( |
+ nodeBind(select).bind('value', new PathObserver(model, 'selected'))); |
return new Future(() { |
expect(select.value, 'b'); |