| // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file |
| // for details. All rights reserved. Use of this source code is governed by a |
| // BSD-style license that can be found in the LICENSE file. |
| |
| library node_bindings_test; |
| |
| import 'dart:async'; |
| import 'dart:html'; |
| import 'package:mdv/mdv.dart' as mdv; |
| import 'package:observe/observe.dart'; |
| import 'package:unittest/html_config.dart'; |
| import 'package:unittest/unittest.dart'; |
| import 'mdv_test_utils.dart'; |
| |
| // Note: this file ported from |
| // https://github.com/toolkitchen/mdv/blob/master/tests/element_bindings.js |
| |
| main() { |
| mdv.initialize(); |
| useHtmlConfiguration(); |
| group('Element Bindings', elementBindingTests); |
| } |
| |
| sym(x) => new Symbol(x); |
| |
| observePath(obj, path) => new PathObserver(obj, path); |
| |
| elementBindingTests() { |
| var testDiv; |
| |
| setUp(() { |
| document.body.append(testDiv = new DivElement()); |
| }); |
| |
| tearDown(() { |
| testDiv.remove(); |
| testDiv = null; |
| }); |
| |
| observeTest('Text', () { |
| var template = new Element.html('<template bind>{{a}} and {{b}}'); |
| testDiv.append(template); |
| var model = toSymbolMap({'a': 1, 'b': 2}); |
| template.model = model; |
| performMicrotaskCheckpoint(); |
| var text = testDiv.nodes[1]; |
| expect(text.text, '1 and 2'); |
| |
| model[sym('a')] = 3; |
| performMicrotaskCheckpoint(); |
| expect(text.text, '3 and 2'); |
| }); |
| |
| observeTest('SimpleBinding', () { |
| var el = new DivElement(); |
| var model = toSymbolMap({'a': '1'}); |
| el.bind('foo', model, 'a'); |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo'], '1'); |
| |
| model[sym('a')] = '2'; |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo'], '2'); |
| |
| model[sym('a')] = 232.2; |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo'], '232.2'); |
| |
| model[sym('a')] = 232; |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo'], '232'); |
| |
| model[sym('a')] = null; |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo'], ''); |
| }); |
| |
| observeTest('SimpleBindingWithDashes', () { |
| var el = new DivElement(); |
| var model = toSymbolMap({'a': '1'}); |
| el.bind('foo-bar', model, 'a'); |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo-bar'], '1'); |
| |
| model[sym('a')] = '2'; |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo-bar'], '2'); |
| }); |
| |
| observeTest('SimpleBindingWithComment', () { |
| var el = new DivElement(); |
| el.innerHtml = '<!-- Comment -->'; |
| var model = toSymbolMap({'a': '1'}); |
| el.bind('foo-bar', model, 'a'); |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo-bar'], '1'); |
| |
| model[sym('a')] = '2'; |
| performMicrotaskCheckpoint(); |
| expect(el.attributes['foo-bar'], '2'); |
| }); |
| |
| observeTest('PlaceHolderBindingText', () { |
| var model = toSymbolMap({ |
| 'adj': 'cruel', |
| 'noun': 'world' |
| }); |
| |
| var el = new DivElement(); |
| el.text = 'dummy'; |
| el.nodes.first.text = 'Hello {{ adj }} {{noun}}!'; |
| var template = new Element.html('<template bind>'); |
| template.content.append(el); |
| testDiv.append(template); |
| template.model = model; |
| |
| performMicrotaskCheckpoint(); |
| el = testDiv.nodes[1].nodes.first; |
| expect(el.text, 'Hello cruel world!'); |
| |
| model[sym('adj')] = 'happy'; |
| performMicrotaskCheckpoint(); |
| expect(el.text, 'Hello happy world!'); |
| }); |
| |
| observeTest('InputElementTextBinding', () { |
| var model = toSymbolMap({'val': 'ping'}); |
| |
| var el = new InputElement(); |
| el.bind('value', model, 'val'); |
| performMicrotaskCheckpoint(); |
| expect(el.value, 'ping'); |
| |
| el.value = 'pong'; |
| dispatchEvent('input', el); |
| expect(model[sym('val')], 'pong'); |
| |
| // Try a deep path. |
| model = toSymbolMap({'a': {'b': {'c': 'ping'}}}); |
| |
| el.bind('value', model, 'a.b.c'); |
| performMicrotaskCheckpoint(); |
| expect(el.value, 'ping'); |
| |
| el.value = 'pong'; |
| dispatchEvent('input', el); |
| expect(observePath(model, 'a.b.c').value, 'pong'); |
| |
| // Start with the model property being absent. |
| model[sym('a')][sym('b')].remove(sym('c')); |
| performMicrotaskCheckpoint(); |
| expect(el.value, ''); |
| |
| el.value = 'pong'; |
| dispatchEvent('input', el); |
| expect(observePath(model, 'a.b.c').value, 'pong'); |
| performMicrotaskCheckpoint(); |
| |
| // Model property unreachable (and unsettable). |
| model[sym('a')].remove(sym('b')); |
| performMicrotaskCheckpoint(); |
| expect(el.value, ''); |
| |
| el.value = 'pong'; |
| dispatchEvent('input', el); |
| expect(observePath(model, 'a.b.c').value, null); |
| }); |
| |
| observeTest('InputElementCheckbox', () { |
| var model = toSymbolMap({'val': true}); |
| |
| var el = new InputElement(); |
| testDiv.append(el); |
| el.type = 'checkbox'; |
| el.bind('checked', model, 'val'); |
| performMicrotaskCheckpoint(); |
| expect(el.checked, true); |
| |
| model[sym('val')] = false; |
| performMicrotaskCheckpoint(); |
| expect(el.checked, false); |
| |
| el.click(); |
| expect(model[sym('val')], true); |
| |
| el.click(); |
| expect(model[sym('val')], false); |
| |
| el.onClick.listen((_) { |
| expect(model[sym('val')], true); |
| }); |
| el.onChange.listen((_) { |
| expect(model[sym('val')], true); |
| }); |
| |
| el.dispatchEvent(new MouseEvent('click', view: window)); |
| }); |
| |
| observeTest('InputElementCheckbox - binding updated on click', () { |
| var model = toSymbolMap({'val': true}); |
| |
| var el = new InputElement(); |
| testDiv.append(el); |
| el.type = 'checkbox'; |
| el.bind('checked', model, 'val'); |
| performMicrotaskCheckpoint(); |
| expect(el.checked, true); |
| |
| el.onClick.listen((_) { |
| expect(model[sym('val')], false); |
| }); |
| |
| el.dispatchEvent(new MouseEvent('click', view: window)); |
| }); |
| |
| observeTest('InputElementCheckbox - binding updated on change', () { |
| var model = toSymbolMap({'val': true}); |
| |
| var el = new InputElement(); |
| testDiv.append(el); |
| el.type = 'checkbox'; |
| el.bind('checked', model, 'val'); |
| performMicrotaskCheckpoint(); |
| expect(el.checked, true); |
| |
| el.onChange.listen((_) { |
| expect(model[sym('val')], false); |
| }); |
| |
| el.dispatchEvent(new MouseEvent('click', view: window)); |
| }); |
| |
| observeTest('InputElementRadio', () { |
| var model = toSymbolMap({'val1': true, 'val2': false, 'val3': false, |
| 'val4': true}); |
| var RADIO_GROUP_NAME = 'observeTest'; |
| |
| var container = testDiv; |
| |
| var el1 = new InputElement(); |
| testDiv.append(el1); |
| el1.type = 'radio'; |
| el1.name = RADIO_GROUP_NAME; |
| el1.bind('checked', model, 'val1'); |
| |
| var el2 = new InputElement(); |
| testDiv.append(el2); |
| el2.type = 'radio'; |
| el2.name = RADIO_GROUP_NAME; |
| el2.bind('checked', model, 'val2'); |
| |
| var el3 = new InputElement(); |
| testDiv.append(el3); |
| el3.type = 'radio'; |
| el3.name = RADIO_GROUP_NAME; |
| el3.bind('checked', model, 'val3'); |
| |
| var el4 = new InputElement(); |
| testDiv.append(el4); |
| el4.type = 'radio'; |
| el4.name = 'othergroup'; |
| el4.bind('checked', model, 'val4'); |
| |
| performMicrotaskCheckpoint(); |
| expect(el1.checked, true); |
| expect(el2.checked, false); |
| expect(el3.checked, false); |
| expect(el4.checked, true); |
| |
| model[sym('val1')] = false; |
| model[sym('val2')] = true; |
| performMicrotaskCheckpoint(); |
| expect(el1.checked, false); |
| expect(el2.checked, true); |
| expect(el3.checked, false); |
| expect(el4.checked, true); |
| |
| el1.checked = true; |
| dispatchEvent('change', el1); |
| expect(model[sym('val1')], true); |
| expect(model[sym('val2')], false); |
| expect(model[sym('val3')], false); |
| expect(model[sym('val4')], true); |
| |
| el3.checked = true; |
| dispatchEvent('change', el3); |
| expect(model[sym('val1')], false); |
| expect(model[sym('val2')], false); |
| expect(model[sym('val3')], true); |
| expect(model[sym('val4')], true); |
| }); |
| |
| observeTest('InputElementRadioMultipleForms', () { |
| var model = toSymbolMap({'val1': true, 'val2': false, 'val3': false, |
| 'val4': true}); |
| var RADIO_GROUP_NAME = 'observeTest'; |
| |
| var form1 = new FormElement(); |
| testDiv.append(form1); |
| var form2 = new FormElement(); |
| testDiv.append(form2); |
| |
| var el1 = new InputElement(); |
| form1.append(el1); |
| el1.type = 'radio'; |
| el1.name = RADIO_GROUP_NAME; |
| el1.bind('checked', model, 'val1'); |
| |
| var el2 = new InputElement(); |
| form1.append(el2); |
| el2.type = 'radio'; |
| el2.name = RADIO_GROUP_NAME; |
| el2.bind('checked', model, 'val2'); |
| |
| var el3 = new InputElement(); |
| form2.append(el3); |
| el3.type = 'radio'; |
| el3.name = RADIO_GROUP_NAME; |
| el3.bind('checked', model, 'val3'); |
| |
| var el4 = new InputElement(); |
| form2.append(el4); |
| el4.type = 'radio'; |
| el4.name = RADIO_GROUP_NAME; |
| el4.bind('checked', model, 'val4'); |
| |
| performMicrotaskCheckpoint(); |
| expect(el1.checked, true); |
| expect(el2.checked, false); |
| expect(el3.checked, false); |
| expect(el4.checked, true); |
| |
| el2.checked = true; |
| dispatchEvent('change', el2); |
| expect(model[sym('val1')], false); |
| expect(model[sym('val2')], true); |
| |
| // Radio buttons in form2 should be unaffected |
| expect(model[sym('val3')], false); |
| expect(model[sym('val4')], true); |
| |
| el3.checked = true; |
| dispatchEvent('change', el3); |
| expect(model[sym('val3')], true); |
| expect(model[sym('val4')], false); |
| |
| // Radio buttons in form1 should be unaffected |
| expect(model[sym('val1')], false); |
| expect(model[sym('val2')], true); |
| }); |
| |
| observeTest('BindToChecked', () { |
| var div = new DivElement(); |
| testDiv.append(div); |
| var child = new DivElement(); |
| div.append(child); |
| var input = new InputElement(); |
| child.append(input); |
| input.type = 'checkbox'; |
| |
| var model = toSymbolMap({'a': {'b': false}}); |
| input.bind('checked', model, 'a.b'); |
| |
| input.click(); |
| expect(model[sym('a')][sym('b')], true); |
| |
| input.click(); |
| expect(model[sym('a')][sym('b')], false); |
| }); |
| |
| observeTest('Select selectedIndex', () { |
| var select = new SelectElement(); |
| testDiv.append(select); |
| var option0 = select.append(new OptionElement()); |
| var option1 = select.append(new OptionElement()); |
| var option2 = select.append(new OptionElement()); |
| |
| var model = toSymbolMap({'val': 2}); |
| |
| select.bind('selectedIndex', model, 'val'); |
| performMicrotaskCheckpoint(); |
| expect(select.selectedIndex, 2); |
| |
| select.selectedIndex = 1; |
| dispatchEvent('change', select); |
| expect(model[sym('val')], 1); |
| }); |
| |
| observeTest('MultipleReferences', () { |
| var el = new DivElement(); |
| var template = new Element.html('<template bind>'); |
| template.content.append(el); |
| testDiv.append(template); |
| |
| var model = toSymbolMap({'foo': 'bar'}); |
| el.attributes['foo'] = '{{foo}} {{foo}}'; |
| template.model = model; |
| |
| performMicrotaskCheckpoint(); |
| el = testDiv.nodes[1]; |
| expect(el.attributes['foo'], 'bar bar'); |
| }); |
| } |