mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
854 lines
31 KiB
HTML
854 lines
31 KiB
HTML
<!doctype html>
|
|
<!--
|
|
@license
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
<script src="../../../web-component-tester/browser.js"></script>
|
|
<link rel="import" href="../../polymer.html">
|
|
<link rel="import" href="bind-elements.html">
|
|
<body>
|
|
<script>
|
|
|
|
suite('single-element binding effects', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('x-basic');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('undefined input value', function() {
|
|
assert.equal(el.$.boundInput.value, '', 'undefined input value not blank');
|
|
el.text = 'this is a test';
|
|
assert.equal(el.$.boundInput.value, 'this is a test', 'binding to input didn\'t go');
|
|
el.text = undefined;
|
|
assert.equal(el.$.boundInput.value, '', 'undefined input value not blank');
|
|
});
|
|
|
|
test('id is bindable', function() {
|
|
assert.equal(Polymer.dom(el.root).querySelector('span[idtest]').id, 'span', 'id bound to <span> not found');
|
|
});
|
|
|
|
test('textContent binding updates', function() {
|
|
el.text = 'this is a test';
|
|
assert.equal(el.$.boundText.textContent, 'this is a test', 'Value not propagated to textContent');
|
|
});
|
|
|
|
test('textContent binding to undefined is empty string', function() {
|
|
el.text = 'this is a test';
|
|
el.text = undefined;
|
|
assert.equal(el.$.boundText.textContent, '', 'undefined bound to textContent should be empty string');
|
|
});
|
|
|
|
test('textContent binding to null is empty string', function() {
|
|
el.text = null;
|
|
assert.equal(el.$.boundText.textContent, '', 'null bound to textContent should be empty string');
|
|
});
|
|
|
|
test('textContent binding to zero is empty correct', function() {
|
|
el.text = 0;
|
|
assert.equal(el.$.boundText.textContent, '0', 'zero bound to textContent should be empty string');
|
|
});
|
|
|
|
test('camel-case binding updates', function() {
|
|
el.value = 41;
|
|
assert.equal(el.$.boundChild.camelCase, 41, 'Value not propagated to camelCase property');
|
|
});
|
|
|
|
test('annotation binding updates', function() {
|
|
el.value = 42;
|
|
assert.equal(el.$.boundChild.value, 42, 'Value not propagated to bound child');
|
|
});
|
|
|
|
test('negated annotation binding updates', function() {
|
|
el.bool = true;
|
|
assert.equal(el.$.boundChild.negvalue, false, 'Value not negated');
|
|
el.bool = false;
|
|
assert.equal(el.$.boundChild.negvalue, true, 'Value not negated');
|
|
});
|
|
|
|
test('observer called', function() {
|
|
assert.equal(el.observerCounts.valueChanged, 1, 'observer not called once for default value at configure');
|
|
el.value = 43;
|
|
assert.equal(el.observerCounts.valueChanged, 2, 'observer not called after property change');
|
|
});
|
|
|
|
test('computed value updates', function() {
|
|
el.value = 44;
|
|
assert.equal(el.computedvalue, 45, 'Computed value not correct');
|
|
assert.equal(el.$.boundChild.computedvalue, 45, 'Computed value not propagated to bound child');
|
|
});
|
|
|
|
test('computed value readOnly from imperative set', function() {
|
|
el.value = 44;
|
|
// Should have no effect
|
|
el.computedvalue = 99;
|
|
assert.equal(el.computedvalue, 45, 'Computed value not correct');
|
|
assert.equal(el.$.boundChild.computedvalue, 45, 'Computed value not propagated to bound child');
|
|
});
|
|
|
|
test('computed values to same method updates', function() {
|
|
el.value = 44;
|
|
el.valuetwo = 144;
|
|
assert.equal(el.computedvalue, 45, 'Computed value not correct');
|
|
assert.equal(el.computedvaluetwo, 145, 'Computed value not correct');
|
|
assert.equal(el.$.boundChild.computedvalue, 45, 'Computed value not propagated to bound child');
|
|
});
|
|
|
|
test('notification sent', function() {
|
|
var notified = 0;
|
|
el.addEventListener('notifyingvalue-changed', function(e) {
|
|
assert.equal(e.detail.value, 45);
|
|
notified++;
|
|
});
|
|
el.addEventListener('camel-notifying-value-changed', function(e) {
|
|
assert.equal(e.detail.value, 45);
|
|
notified++;
|
|
});
|
|
el.notifyingvalue = 45;
|
|
el.camelNotifyingValue = 45;
|
|
assert.equal(notified, 2, 'Notification events not sent');
|
|
});
|
|
|
|
test('computed observer called', function() {
|
|
el.clearObserverCounts();
|
|
el.value = 46;
|
|
assert.equal(el.observerCounts.computedvalueChanged, 1, 'observer not called');
|
|
});
|
|
|
|
test('NaN does not loop observers', function() {
|
|
el.clearObserverCounts();
|
|
el.addEventListener('notifierwithoutcomputing-changed', function(e) {
|
|
if (el.observerCounts.notifierWithoutComputingChanged >= 3) {
|
|
throw new Error('infinite loop!');
|
|
}
|
|
});
|
|
el.notifierWithoutComputing = NaN;
|
|
assert.equal(el.observerCounts.notifierWithoutComputingChanged, 1,
|
|
'NaN was not handled as expected');
|
|
});
|
|
|
|
|
|
test('computed notification sent', function() {
|
|
var notified = 0;
|
|
el.addEventListener('computednotifyingvalue-changed', function(e) {
|
|
assert.equal(e.detail.value, 49);
|
|
notified++;
|
|
});
|
|
el.notifyingvalue = 47;
|
|
assert.equal(notified, 1, 'Notification event not sent');
|
|
});
|
|
|
|
test('computed property with multiple dependencies', function() {
|
|
var notified = 0;
|
|
el.addEventListener('computed-from-multiple-values-changed', function(e) {
|
|
notified++;
|
|
});
|
|
el.sum1 = 10;
|
|
el.sum2 = 20;
|
|
el.divide = 2;
|
|
assert.equal(el.computedFromMultipleValues, 15, 'Computed value wrong');
|
|
assert.equal(notified, 1, 'Notification event not sent');
|
|
assert.equal(el.observerCounts.computedFromMultipleValuesChanged, 1, 'observer not called');
|
|
});
|
|
|
|
test('computed annotation with literals', function() {
|
|
el.bool = true;
|
|
assert.equal(el.$.boundChild.computedFromMixedLiterals, '3foo', 'Wrong result from mixed literal arg computation');
|
|
assert.equal(el.$.boundChild.computedFromPureLiterals, '3foo', 'Wrong result from pure literal arg computation');
|
|
assert.equal(el.$.boundChild.computedFromTrickyFunction, '3foo', 'Wrong result from tricky function with pure literal arg computation');
|
|
assert.equal(el.$.boundChild.computedFromTrickyLiterals, '3tricky,\'zot\'', 'Wrong result from tricky literal arg computation');
|
|
assert.equal(el.$.boundChild.computedFromTrickyLiterals2, '3tricky,\'zot\'', 'Wrong result from tricky literal arg computation');
|
|
assert.equal(el.$.computedContent.textContent, '3tricky,\'zot\'', 'Wrong textContent from tricky literal arg computation');
|
|
assert.equal(el.$.computedContent2.textContent, '(3', 'Wrong textContent from tricky literal arg computation');
|
|
});
|
|
|
|
test('computed annotation with no args', function() {
|
|
assert.equal(el.$.boundChild.computedFromNoArgs, 'no args!', 'Wrong content when computed has no args');
|
|
});
|
|
|
|
test('no read-only observer called with assignment', function() {
|
|
el.readolyvalue = 46;
|
|
assert.equal(el.observerCounts.readonlyvalueChanged, 0, 'observer should not be called for readOnly prop assignment');
|
|
});
|
|
|
|
test('read-only observer called with _setReadonlyvalue', function() {
|
|
el._setReadonlyvalue(46);
|
|
assert.equal(el.observerCounts.readonlyvalueChanged, 1, 'observer should be called');
|
|
assert(el.readonlyvalue == 46, 'value should be changed but was not');
|
|
});
|
|
|
|
test('no read-only notification sent with assignment', function() {
|
|
var notified = 0;
|
|
el.addEventListener('readonlyvalue-changed', function(e) {
|
|
notified++;
|
|
});
|
|
el.readonlyvalue = 47;
|
|
assert.equal(notified, 0, 'Notification should not be called for readOnly prop assignment');
|
|
});
|
|
|
|
test('read-only notification sent with _setReadonlyvalue', function() {
|
|
var notified = 0;
|
|
el.addEventListener('readonlyvalue-changed', function(e) {
|
|
assert.equal(e.detail.value, 47);
|
|
notified++;
|
|
});
|
|
el._setReadonlyvalue(47);
|
|
assert.equal(notified, 1, 'Notification event not sent');
|
|
});
|
|
|
|
test('multiple dependency observer called once', function() {
|
|
el.dep1 = true;
|
|
el.dep2 = {};
|
|
el.dep3 = 42;
|
|
assert.equal(el.observerCounts.multipleDepChangeHandler, 1, 'observer not called once');
|
|
});
|
|
|
|
test('annotated computed property', function() {
|
|
el.value = 20;
|
|
el.add = 40;
|
|
el.divide = 3;
|
|
assert.equal(el.$.boundChild.computedInline, 20, 'computedInline not correct');
|
|
assert.equal(el.$.boundChild.computedInline2, 20, 'computedInline2 not correct');
|
|
assert.equal(el.$.boundChild.negComputedInline, false, 'negComputedInline not correct');
|
|
});
|
|
|
|
test('annotated computed attribute', function() {
|
|
el.value = 20;
|
|
el.add = 40;
|
|
el.divide = 3;
|
|
assert.equal(el.$.boundChild.getAttribute('computedattribute'), 20, 'computed attribute not correct');
|
|
});
|
|
|
|
test('annotated style attribute binding', function() {
|
|
el.boundStyle = 'padding: 37px;';
|
|
assert.equal(getComputedStyle(el.$.boundChild).paddingTop, '37px', 'style attribute binding not correct');
|
|
});
|
|
|
|
test('annotated dataset attribute binding', function() {
|
|
if (el.$.boundChild.datast) { // IE10, sigh
|
|
el.dataSetId = 'yeah';
|
|
assert.equal(el.$.boundChild.dataset.id, 'yeah', 'dataset.id dataset property not set correctly');
|
|
assert.equal(el.$.boundChild.getAttribute('data-id'), 'yeah', 'data-id attribute not set correctly');
|
|
}
|
|
});
|
|
|
|
test('custom notification event to property', function() {
|
|
el.$.boundChild.customEventValue = 42;
|
|
el.fire('custom', null, {node: el.$.boundChild});
|
|
assert.equal(el.customEventValue, 42, 'custom bound property incorrect');
|
|
assert.equal(el.observerCounts.customEventValueChanged, 1, 'custom bound property observer not called');
|
|
});
|
|
|
|
test('custom notification event to path', function() {
|
|
el.clearObserverCounts();
|
|
el.$.boundChild.customEventObjectValue = 84;
|
|
el.$.boundChild.dispatchEvent(new Event('change'));
|
|
assert.equal(el.customEventObject.value, 84, 'custom bound path incorrect');
|
|
assert.equal(el.observerCounts.customEventObjectValueChanged, 1, 'custom bound path observer not called');
|
|
});
|
|
|
|
test('computed property with negative number', function() {
|
|
assert.equal(el.$.boundChild.computedNegativeNumber, -1);
|
|
});
|
|
|
|
test('computed property with negative literal', function() {
|
|
assert.equal(el.$.boundChild.computedNegativeLiteral, undefined);
|
|
});
|
|
|
|
test('computed binding with wildcard', function() {
|
|
el.a = 5;
|
|
el.b = {value: 10};
|
|
assert.equal(el.$.boundChild.computedWildcard, 15);
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
suite('2-way binding effects between elements', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('x-compose');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('binding to non-notifying property', function() {
|
|
el.boundvalue = 42;
|
|
assert.equal(el.$.basic1.value, 42, 'binding to child not updated');
|
|
el.$.basic1.value = 43;
|
|
assert.equal(el.boundvalue, 42, 'binding to non-notifying property updated and should not have been');
|
|
});
|
|
|
|
test('observer for property bound to non-notifying property', function() {
|
|
el.$.basic1.value = 44;
|
|
assert.equal(el.observerCounts.boundvalueChanged, 0, 'observer for property bound to non-notifying property called and should not have been');
|
|
});
|
|
|
|
test('binding to non-notifying computed property', function() {
|
|
el.boundcomputedvalue = 42;
|
|
el.$.basic1.value = 43;
|
|
assert.equal(el.boundcomputedvalue, 42, 'binding to non-notifying computed property updated and should not have been');
|
|
});
|
|
|
|
test('observer for property bound to non-notifying computed property', function() {
|
|
el.$.basic1.value = 44;
|
|
assert.equal(el.observerCounts.boundcomputedvalueChanged, 0, 'observer for property bound to non-notifying computed property called and should not have been');
|
|
});
|
|
|
|
test('computed value readOnly from downward binding', function() {
|
|
el.$.basic3.value = 10;
|
|
assert.equal(el.$.basic3.computedvalue, 11);
|
|
// should have no effect
|
|
el.value = 99;
|
|
assert.equal(el.$.basic3.computedvalue, 11);
|
|
});
|
|
|
|
test('computed value readOnly from upward notification', function() {
|
|
assert.equal(el.computedValue, 30);
|
|
// should have no effect
|
|
el.$.basic3.notifyingvalue = 10;
|
|
assert.equal(el.computedValue, 30);
|
|
});
|
|
|
|
test('binding to notifying property', function() {
|
|
el.boundnotifyingvalue = 42;
|
|
assert.equal(el.$.basic1.notifyingvalue, 42, 'binding to child not updated');
|
|
assert.equal(el.$.basic1.camelNotifyingValue, 42, 'camel-case binding to child not updated');
|
|
el.$.basic1.notifyingvalue = 43;
|
|
assert.equal(el.boundnotifyingvalue, 43, 'binding to notifying property not updated');
|
|
el.$.basic1.camelNotifyingValue = -43;
|
|
assert.equal(el.boundnotifyingvalue, -43, 'camel-case binding to notifying property not updated');
|
|
});
|
|
|
|
test('binding to notifying property with default', function() {
|
|
assert.equal(el.boundnotifyingvalueWithDefault, 99);
|
|
});
|
|
|
|
test('observer for property bound to notifying property', function() {
|
|
el.$.basic1.notifyingvalue = 45;
|
|
assert.equal(el.observerCounts.boundnotifyingvalueChanged, 1, 'observer for property bound to notifying property not called');
|
|
});
|
|
|
|
test('binding to notifying computed property', function() {
|
|
el.$.basic1.notifyingvalue = 43;
|
|
assert.equal(el.boundcomputednotifyingvalue, 45, 'binding to notifying computed property not updated');
|
|
});
|
|
|
|
test('observer for property bound to notifying computed property', function() {
|
|
el.$.basic1.notifyingvalue = 45;
|
|
assert.equal(el.observerCounts.boundcomputednotifyingvalueChanged, 1, 'observer for property bound to non-notifying computed property not called');
|
|
});
|
|
|
|
test('no change for binding into read-only property', function() {
|
|
el.$.basic1._setReadonlyvalue(45);
|
|
el.$.basic1.clearObserverCounts();
|
|
el.boundreadonlyvalue = 46;
|
|
assert.equal(el.$.basic1.observerCounts.readonlyvalueChanged, 0, 'observer for read-only property should not be called from change to bound value');
|
|
assert.equal(el.$.basic1.readonlyvalue, 45, 'read-only property should not change from change to bound value');
|
|
});
|
|
|
|
test('change for binding out of read-only property', function() {
|
|
el.$.basic1._setReadonlyvalue(46);
|
|
assert.equal(el.observerCounts.boundreadonlyvalueChanged, 1, 'observer for property bound to read-only property should be called from change to bound value');
|
|
assert.equal(el.boundreadonlyvalue, 46, 'property bound to read-only property should change from change to bound value');
|
|
});
|
|
|
|
test('listener for value-changed fires when value changed from host', function() {
|
|
var listener = sinon.spy();
|
|
el.$.basic1.addEventListener('notifyingvalue-changed', listener);
|
|
el.boundnotifyingvalue = 678;
|
|
assert.equal(el.$.basic1.notifyingvalue, 678);
|
|
assert.isTrue(listener.calledOnce);
|
|
assert.equal(listener.getCalls()[0].args[0].detail.value, 678);
|
|
});
|
|
|
|
});
|
|
|
|
suite('1-way binding effects between elements', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('x-compose');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('one-way binding to non-notifying property', function() {
|
|
el.boundvalue = 42;
|
|
assert.equal(el.$.basic1.value, 42, 'binding to child not updated');
|
|
el.$.basic2.value = 43;
|
|
assert.equal(el.boundvalue, 42, 'binding to non-notifying property updated and should not have been');
|
|
});
|
|
|
|
test('observer for property one-way-bound to non-notifying property', function() {
|
|
el.$.basic2.value = 44;
|
|
assert.equal(el.observerCounts.boundvalueChanged, 0, 'observer for property one-way-bound to non-notifying property called and should not have been');
|
|
});
|
|
|
|
test('one-way binding to non-notifying computed property', function() {
|
|
el.boundcomputedvalue = 42;
|
|
el.$.basic2.value = 43;
|
|
assert.equal(el.boundcomputedvalue, 42, 'binding to non-notifying computed property updated and should not have been');
|
|
});
|
|
|
|
test('observer for property one-way-bound to non-notifying computed property', function() {
|
|
el.$.basic2.value = 44;
|
|
assert.equal(el.observerCounts.boundcomputedvalueChanged, 0, 'observer for property bound to non-notifying computed property called and should not have been');
|
|
});
|
|
|
|
test('one-way binding to notifying property', function() {
|
|
el.boundnotifyingvalue = 42;
|
|
assert.equal(el.$.basic2.notifyingvalue, 42, 'binding to child not updated');
|
|
el.$.basic2.notifyingvalue = 43;
|
|
assert.equal(el.boundnotifyingvalue, 42, 'binding to notifying property updated and should not have been');
|
|
});
|
|
|
|
test('observer for property one-way-bound to notifying property', function() {
|
|
el.$.basic2.notifyingvalue = 45;
|
|
assert.equal(el.observerCounts.boundnotifyingvalueChanged, 0, 'observer for property bound to notifying property called and should not have been');
|
|
});
|
|
|
|
test('one-way binding to notifying computed property', function() {
|
|
el.boundcomputednotifyingvalue = 42;
|
|
el.$.basic2.notifyingvalue = 43;
|
|
assert.equal(el.boundcomputednotifyingvalue, 42, 'binding to notifying computed property updated and should not have been');
|
|
});
|
|
|
|
test('observer for property one-way-bound to notifying computed property', function() {
|
|
el.$.basic2.notifyingvalue = 45;
|
|
assert.equal(el.observerCounts.boundcomputednotifyingvalueChanged, 0, 'observer for property bound to non-notifying computed property called and should not have been');
|
|
});
|
|
|
|
});
|
|
|
|
suite('reflection to attribute', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('x-reflect');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('reflect object', function() {
|
|
var obj = {foo: 'bar', array: [1, '2', {3:3}]};
|
|
el.reflectedobject = obj;
|
|
assert.equal(el.getAttribute('reflectedobject'), '{"foo":"bar","array":[1,"2",{"3":3}]}');
|
|
// Ensure object wasn't re-deserialized
|
|
assert.equal(el.reflectedobject, obj);
|
|
el.reflectedobject = null;
|
|
assert(!el.hasAttribute('reflectedobject'));
|
|
});
|
|
|
|
test('reflect array', function() {
|
|
var arr = [1, '2', {3:3}, {'four': 'four'}];
|
|
el.reflectedarray = arr;
|
|
assert.equal(el.getAttribute('reflectedarray'), '[1,"2",{"3":3},{"four":"four"}]');
|
|
// Ensure array wasn't re-deserialized
|
|
assert.equal(el.reflectedarray, arr);
|
|
el.reflectedarray = null;
|
|
assert(!el.hasAttribute('reflectedarray'));
|
|
});
|
|
|
|
test('reflect string', function() {
|
|
var str = '"polymer is grrrrreat, ain\'t it?"';
|
|
el.reflectedstring = str;
|
|
assert.equal(el.getAttribute('reflectedstring'), str);
|
|
assert.equal(el.reflectedstring, str);
|
|
el.reflectedstring = '';
|
|
assert.equal(el.getAttribute('reflectedstring'), '');
|
|
assert.equal(el.reflectedstring, '');
|
|
el.reflectedstring = null;
|
|
assert(!el.hasAttribute('reflectedstring'));
|
|
assert.equal(el.reflectedstring, null);
|
|
});
|
|
|
|
test('reflect number', function() {
|
|
el.reflectedNumber = 765;
|
|
assert.equal(el.getAttribute('reflected-number'), '765');
|
|
assert.equal(el.reflectedNumber, 765);
|
|
el.reflectedNumber = 765.4321;
|
|
assert.equal(el.getAttribute('reflected-number'), '765.4321');
|
|
assert.equal(el.reflectedNumber, 765.4321);
|
|
el.reflectedNumber = null;
|
|
assert(!el.hasAttribute('reflected-number'));
|
|
assert.equal(el.reflectedNumber, null);
|
|
});
|
|
|
|
test('reflect boolean', function() {
|
|
el.reflectedboolean = true;
|
|
assert(el.hasAttribute('reflectedboolean'));
|
|
assert.equal(el.getAttribute('reflectedboolean'), '');
|
|
assert.equal(el.reflectedboolean, true);
|
|
el.reflectedboolean = false;
|
|
assert(!el.hasAttribute('reflectedboolean'));
|
|
assert.equal(el.reflectedboolean, false);
|
|
el.reflectedboolean = true;
|
|
el.reflectedboolean = null;
|
|
assert(!el.hasAttribute('reflectedboolean'));
|
|
assert.equal(el.reflectedboolean, null);
|
|
});
|
|
|
|
test('reflect date', function() {
|
|
var date = new Date('Fri Jan 23 2015 17:40:29 GMT-0800 (PST)');
|
|
el.reflecteddate = date;
|
|
assert(el.hasAttribute('reflecteddate'));
|
|
assert.equal(Date.parse(el.getAttribute('reflecteddate')),
|
|
el.reflecteddate.getTime());
|
|
assert.equal(el.reflecteddate, date);
|
|
el.reflecteddate = null;
|
|
assert(!el.hasAttribute('reflecteddate'));
|
|
assert.equal(el.reflecteddate, null);
|
|
});
|
|
|
|
test('reflect wrong type', function() {
|
|
el.reflectedstring = true;
|
|
assert(el.hasAttribute('reflectedstring'));
|
|
assert.equal(el.getAttribute('reflectedstring'), '');
|
|
// Ensure value wasn't re-deserialized
|
|
assert.strictEqual(el.reflectedstring, true);
|
|
});
|
|
|
|
});
|
|
|
|
suite('binding to attribute', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('x-basic');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('bind object to attribute', function() {
|
|
el.attrvalue = {foo: 'bar', array: [1, '2', {3:3}]};
|
|
assert.equal(el.$.boundChild.getAttribute('attrvalue'),
|
|
'{"foo":"bar","array":[1,"2",{"3":3}]}');
|
|
el.attrvalue = null;
|
|
assert(!el.$.boundChild.hasAttribute('attrvalue'));
|
|
});
|
|
|
|
test('bind array to attribute', function() {
|
|
el.attrvalue = [1, '2', {3:3}, {'four': 'four'}];
|
|
assert.equal(el.$.boundChild.getAttribute('attrvalue'),
|
|
'[1,"2",{"3":3},{"four":"four"}]');
|
|
el.attrvalue = null;
|
|
assert(!el.$.boundChild.hasAttribute('attrvalue'));
|
|
});
|
|
|
|
test('bind string to attribute', function() {
|
|
el.attrvalue = '"polymer is grrrrreat, ain\'t it?"';
|
|
assert.equal(el.$.boundChild.getAttribute('attrvalue'),
|
|
'"polymer is grrrrreat, ain\'t it?"');
|
|
el.attrvalue = '';
|
|
assert.equal(el.$.boundChild.getAttribute('attrvalue'), '');
|
|
el.attrvalue = null;
|
|
assert(!el.$.boundChild.hasAttribute('attrvalue'));
|
|
});
|
|
|
|
test('bind number to attribute', function() {
|
|
el.attrvalue = 765;
|
|
assert.equal(el.$.boundChild.getAttribute('attrvalue'), '765');
|
|
el.attrvalue = 765.4321;
|
|
assert.equal(el.$.boundChild.getAttribute('attrvalue'), '765.4321');
|
|
el.attrvalue = null;
|
|
assert(!el.$.boundChild.hasAttribute('attrvalue'));
|
|
});
|
|
|
|
test('bind boolean to attribute', function() {
|
|
el.attrvalue = true;
|
|
assert(el.$.boundChild.hasAttribute('attrvalue'));
|
|
assert.equal(el.$.boundChild.getAttribute('attrvalue'), '');
|
|
el.attrvalue = false;
|
|
assert(!el.$.boundChild.hasAttribute('attrvalue'));
|
|
el.attrvalue = true;
|
|
el.attrvalue = null;
|
|
assert(!el.$.boundChild.hasAttribute('attrvalue'));
|
|
});
|
|
|
|
test('bind date to attribute', function() {
|
|
el.attrvalue = new Date('Fri Jan 23 2015 17:40:29 GMT-0800 (PST)');
|
|
assert(el.$.boundChild.hasAttribute('attrvalue'));
|
|
assert.equal(Date.parse(el.$.boundChild.getAttribute('attrvalue')),
|
|
el.attrvalue.getTime());
|
|
el.attrvalue = null;
|
|
assert(!el.$.boundChild.hasAttribute('attrvalue'));
|
|
});
|
|
|
|
test('bind to value attribute on input should not fail', function() {
|
|
Polymer({
|
|
is: 'x-input-value'
|
|
});
|
|
|
|
var el = document.createElement('x-input-value');
|
|
el.inputValue = "the value";
|
|
assert.equal(el.$.input.value, "the value", "The value of the input is not propagated");
|
|
assert.equal(el.$.input.value$, undefined, "value$ should be removed from input");
|
|
});
|
|
|
|
});
|
|
|
|
suite('avoid non-bubbling event gotchas', function() {
|
|
|
|
var el;
|
|
var container;
|
|
|
|
setup(function() {
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
container.innerHTML = '<x-notifies3></x-notifies3>';
|
|
if (window.CustomElements) {
|
|
CustomElements.takeRecords();
|
|
}
|
|
el = container.firstChild;
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(container);
|
|
});
|
|
|
|
test('avoid non-bubbling event gotchas', function() {
|
|
el.$.notifies2.$.notifies1.notifies = 'runtimeValue';
|
|
assert.equal(el.$.notifies2.$.notifies1.notifies, 'runtimeValue');
|
|
assert.equal(el.$.notifies2.shouldChange, 'runtimeValue');
|
|
assert.notEqual(el.shouldNotChange, 'runtimeValue');
|
|
});
|
|
|
|
test('avoid non-bubbling event gotchas at ready time', function() {
|
|
assert.equal(el.$.notifies2.$.notifies1.notifies, 'readyValue');
|
|
assert.equal(el.$.notifies2.shouldChange, 'readyValue');
|
|
assert.notEqual(el.shouldNotChange, 'readyValue');
|
|
});
|
|
|
|
});
|
|
|
|
suite('warnings', function() {
|
|
|
|
var el;
|
|
var warn;
|
|
|
|
setup(function() {
|
|
el = document.createElement('x-basic');
|
|
document.body.appendChild(el);
|
|
warn = el._warn;
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('undefined observer', function() {
|
|
var warned = false;
|
|
el._warn = function() {
|
|
warned = true;
|
|
};
|
|
el.noObserver = 42;
|
|
assert.equal(warned, true, 'no warning for undefined observer');
|
|
});
|
|
|
|
test('undefined complex observer', function() {
|
|
var warned = false;
|
|
el._warn = function() {
|
|
warned = true;
|
|
};
|
|
el.noComplexObserver = {};
|
|
assert.equal(warned, true, 'no warning for undefined complex observer');
|
|
});
|
|
|
|
test('undefined computed function', function() {
|
|
var warned = false;
|
|
el._warn = function() {
|
|
warned = true;
|
|
};
|
|
el.noComputed = 99;
|
|
assert.equal(warned, true, 'no warning for undefined computed function');
|
|
});
|
|
|
|
test('undefined inline computed function', function() {
|
|
var warned = false;
|
|
el._warn = function() {
|
|
warned = true;
|
|
};
|
|
el.noInlineComputed = 99;
|
|
assert.equal(warned, true, 'no warning for undefined computed function');
|
|
});
|
|
|
|
});
|
|
|
|
suite('binding corner cases', function() {
|
|
|
|
// IE can create adjacent text nodes that split bindings; this test
|
|
// ensures the code that addresses this is functional
|
|
test('text binding after entity', function() {
|
|
var el = document.createElement('x-entity-and-binding');
|
|
assert.equal(el.$.binding.textContent, 'binding');
|
|
});
|
|
|
|
});
|
|
|
|
suite('compound binding / string interpolation', function() {
|
|
|
|
test('compound adjacent property bindings', function() {
|
|
var el = document.createElement('x-basic');
|
|
// Adjacent compound binding with no literal do not override the default
|
|
assert.equal(el.$.boundProps.prop1, 'default');
|
|
assert.isTrue(el.$.boundProps.prop1Changed.calledOnce);
|
|
el.cpnd2 = 'cpnd2';
|
|
assert.equal(el.$.boundProps.prop1, 'cpnd2');
|
|
el.cpnd1 = 'cpnd1';
|
|
el.cpnd3 = {prop: 'cpnd3'};
|
|
assert.equal(el.$.boundProps.prop1, 'cpnd1cpnd2cpnd3');
|
|
el.cpnd4 = 'cpnd4';
|
|
assert.equal(el.$.boundProps.prop1, 'cpnd1cpnd2cpnd3');
|
|
el.cpnd5 = 'cpnd5';
|
|
assert.equal(el.$.boundProps.prop1, 'cpnd1cpnd2cpnd3literalcpnd5cpnd4');
|
|
});
|
|
|
|
test('compound property bindings with literals', function() {
|
|
var el = document.createElement('x-basic');
|
|
assert.equal(el.$.boundProps.prop2, 'literal1 literal2 literal3 literal4');
|
|
assert.isTrue(el.$.boundProps.prop2Changed.calledOnce);
|
|
el.cpnd1 = 'cpnd1';
|
|
el.cpnd2 = 'cpnd2';
|
|
el.cpnd3 = {prop: 'cpnd3'};
|
|
el.cpnd4 = 'cpnd4';
|
|
el.cpnd5 = 'cpnd5';
|
|
assert.equal(el.$.boundProps.prop2, 'literal1 cpnd1 literal2 cpnd2cpnd3 literal3 literalcpnd5cpnd4 literal4');
|
|
el.cpnd1 = null;
|
|
el.cpnd2 = undefined;
|
|
el.cpnd3 = {};
|
|
el.cpnd4 = '';
|
|
el.cpnd5 = '';
|
|
assert.equal(el.$.boundProps.prop2, 'literal1 literal2 literal3 literal literal4');
|
|
});
|
|
|
|
test('compound adjacent attribute bindings', function() {
|
|
var el = document.createElement('x-basic');
|
|
// Adjacent compound binding with no literal do not override the default
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), null);
|
|
el.cpnd2 = 'cpnd2';
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), 'cpnd2');
|
|
el.cpnd1 = 'cpnd1';
|
|
el.cpnd3 = {prop: 'cpnd3'};
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), 'cpnd1cpnd2cpnd3');
|
|
el.cpnd4 = 'cpnd4';
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), 'cpnd1cpnd2cpnd3');
|
|
el.cpnd5 = 'cpnd5';
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), 'cpnd1cpnd2cpnd3literalcpnd5cpnd4');
|
|
});
|
|
|
|
test('compound property attribute with literals', function() {
|
|
var el = document.createElement('x-basic');
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr2'), 'literal1 literal2 literal3 literal4');
|
|
el.cpnd1 = 'cpnd1';
|
|
el.cpnd2 = 'cpnd2';
|
|
el.cpnd3 = {prop: 'cpnd3'};
|
|
el.cpnd4 = 'cpnd4';
|
|
el.cpnd5 = 'cpnd5';
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr2'), 'literal1 cpnd1 literal2 cpnd2cpnd3 literal3 literalcpnd5cpnd4 literal4');
|
|
el.cpnd1 = null;
|
|
el.cpnd2 = undefined;
|
|
el.cpnd3 = {};
|
|
el.cpnd4 = '';
|
|
el.cpnd5 = '';
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr2'), 'literal1 literal2 literal3 literal literal4');
|
|
});
|
|
|
|
test('compound property attribute with {} and [] in text', function() {
|
|
var el = document.createElement('x-basic');
|
|
el.cpnd1 = 'cpnd1';
|
|
assert.equal(el.$.boundChild.getAttribute('compoundAttr3'), '[yes/no]: cpnd1, Hello {0} username world');
|
|
});
|
|
|
|
test('compound adjacent textNode bindings', function() {
|
|
var el = document.createElement('x-basic');
|
|
// The single space is due to the gambit to prevent empty text nodes
|
|
// from being evacipated on IE during importNode from the template; it will
|
|
// only be there the when in the virgin state after cloning the template
|
|
assert.equal(el.$.compound1.textContent, ' ');
|
|
el.cpnd2 = 'cpnd2';
|
|
assert.equal(el.$.compound1.textContent, 'cpnd2');
|
|
el.cpnd1 = 'cpnd1';
|
|
el.cpnd3 = {prop: 'cpnd3'};
|
|
assert.equal(el.$.compound1.textContent, 'cpnd1cpnd2cpnd3');
|
|
el.cpnd4 = 'cpnd4';
|
|
assert.equal(el.$.compound1.textContent, 'cpnd1cpnd2cpnd3');
|
|
el.cpnd5 = 'cpnd5';
|
|
assert.equal(el.$.compound1.textContent, 'cpnd1cpnd2cpnd3literalcpnd5cpnd4');
|
|
// Once the binding evaluates back to '', it will in fact be ''
|
|
el.computeCompound = function() { return ''; };
|
|
el.cpnd1 = null;
|
|
el.cpnd2 = '';
|
|
el.cpnd3 = {prop: null};
|
|
el.cpnd4 = null;
|
|
el.cpnd5 = '';
|
|
assert.equal(el.$.compound1.textContent, '');
|
|
});
|
|
|
|
test('compound textNode bindings with literals', function() {
|
|
var el = document.createElement('x-basic');
|
|
assert.equal(el.$.compound2.textContent.trim(), 'literal1 literal2 literal3 literal4');
|
|
el.cpnd1 = 'cpnd1';
|
|
el.cpnd2 = 'cpnd2';
|
|
el.cpnd3 = {prop: 'cpnd3'};
|
|
el.cpnd4 = 'cpnd4';
|
|
el.cpnd5 = 'cpnd5';
|
|
assert.equal(el.$.compound2.textContent.trim(), 'literal1 cpnd1 literal2 cpnd2cpnd3 literal3 literalcpnd5cpnd4 literal4');
|
|
el.cpnd1 = null;
|
|
el.cpnd2 = undefined;
|
|
el.cpnd3 = {};
|
|
el.cpnd4 = '';
|
|
el.cpnd5 = '';
|
|
assert.equal(el.$.compound2.textContent.trim(), 'literal1 literal2 literal3 literal literal4');
|
|
});
|
|
|
|
test('malformed bindings ignored', function() {
|
|
var el = document.createElement('x-basic');
|
|
el.bool = true;
|
|
assert.isTrue(el.$.boundChild.textContent.indexOf('really.long.identifier.in.malformed.binding.should.be.ignored') >= 0, true);
|
|
assert.isTrue(el.$.boundChild.textContent.indexOf('really.long.literal.in.malformed.binding.should.be.ignored') >= 0, true);
|
|
assert.isTrue(el.$.boundChild.textContent.indexOf('3foo') >= 0, true);
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|