test/unit/bind.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>
  <template id="class-repeat" is="dom-repeat" items='["class1", "class2"]'>
    <div class$=[[item]] clazz$="[[item]]">[[item]]</div>
  </template>
<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() {
      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() {
      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.$.boundChild.computedFromTrickyLiterals3, '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() {
      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.computedInline3, 20, 'computedInline3 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');
    assert.equal(el.$.boundChild.getAttribute('computedattribute2'), 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);
  });

  test('binding with dash', function() {
    el.objectWithDash = {
      'binding-with-dash': 'yes'
    };
    assert.equal(el.$.boundWithDash.textContent, 'yes');
  });

  test('class attribute without template scope not erased', function() {
    var el = document.querySelector('.class1');
    assert.notEqual(el, null, 'class without template scope is undefined');
    var el2 = document.querySelector('.class2');
    assert.notEqual(el2, null, 'class without template scope is undefined');
  });

});

</script>

<script>

suite('computed bindings with dynamic functions', function() {

  var el;

  teardown(function() {
    document.body.removeChild(el);
  });

  test('annotated computation with dynamic function', function() {
    el = document.createElement('x-bind-computed-property');
    document.body.appendChild(el);

    assert.equal(el.$.check.textContent, 'translated: Hello World.');

    el.translator = function(message) {
      return 'changed: ' + message;
    };

    assert.equal(el.$.check.textContent, 'changed: Hello World.');
  });

  test('annotated computation / late resolved dynamic function', function() {
    el = document.createElement('x-bind-computed-property-late-translator');
    document.body.appendChild(el);

    assert.equal(el.$.check.textContent.trim(), '');

    el.translator = function(message) {
      return 'translated: ' + message;
    };

    assert.equal(el.$.check.textContent, 'translated: Hello');
  });

  test('observer with dynamic function', function() {
    Polymer({
      is: 'x-observer-with-dynamic-function',
      properties: {
        translateMessage: {
          type: Function
        },
        message: {
          type: String,
          value: 'Hello'
        }
      },

      observers: ['translateMessage(message)']

    });

    el = document.createElement('x-observer-with-dynamic-function');
    document.body.appendChild(el);

    var called = 0;
    el.translateMessage = function() {
      called += 1;
    };

    assert.equal(called, 1);

  });

  test('computed property with dynamic function', function() {
    Polymer({
      is: 'x-computed-property-with-dynamic-function',
      properties: {
        computedValue: {
          computed: "translateMessage('Hello')"
        },
        translateMessage: {
          type: Function
        }
      }
    });

    el = document.createElement('x-computed-property-with-dynamic-function');
    document.body.appendChild(el);

    assert.equal(el.computedValue, undefined);

    var called = 0;
    el.translateMessage = function(message) {
      called += 1;
      return 'translated: ' + message;
    };

    assert.equal(called, 1);
    assert.equal(el.computedValue, 'translated: Hello');

  });

  test('ensure annotator can pass dynamic fn to parent props', function(done) {
    el = document.createElement('x-child-template-with-dynamic-fn');
    document.body.appendChild(el);

    setTimeout(function() {
      var check = Polymer.dom(el.root).querySelector('p');
      assert.equal(check.textContent, 'text');
      done();
    });

  });

});

</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() {
    if (!Polymer.Settings.suppressBindingNotifications) {
      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);
    }
  });    

  test('negated binding update negates value for parent', function() {
    assert.equal(el.negatedValue, false);
    assert.equal(el.$.basic4.notifyingvalue, true);
    el.$.basic4.notifyingvalue = false;
    assert.equal(el.negatedValue, true);
  });

});

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; //eslint-disable-line no-unused-vars

  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');
  });

  test('binding to a bad attribute warns', function() {
    var el = document.createElement('x-bind-bad-attribute-name');
    assert.equal(el.__warnedAboutUPCASE, true, 'no warning for setting a bad attribute');
  });

});

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');
  });

  test('bind to isAttached', function() {
    var el = document.createElement('x-bind-is-attached');
    sinon.spy(el, '_isAttachedChanged');
    document.body.appendChild(el);
    Polymer.dom.flush();
    assert.equal(el.$.check.textContent, 'true');
    assert.isTrue(el._isAttachedChanged.calledOnce);
    document.body.removeChild(el);
  });

  test('do not override property when going downwards', function() {
    var value = 5, value_set_again = false, targetObj = {
      get value () {
        return value;
      },
      set value (v) {
        value = v;
        value_set_again = true;
      }
    };
    Polymer.Bind._modelApi.__setProperty('value', 5, false, targetObj);
    assert.isFalse(value_set_again);
  });
});

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);
  });

});

suite('order of effects', function() {

  var el;

  setup(function() {
    el = document.createElement('x-order-of-effects-grand-parent').$.child;
  });

  test('effects are sorted', function() {
    assert.equal(el.invocations.length, 0);
    el.base = 'changed';

    var expected = [
      'compute',
      'annotation',            // as observed by child
      'annotatedComputation',  // as observed by child
      'reflect',
      'notify',                // as observed by grand-parent
      'observer',
      'complexObserver'
    ];

    assert.deepEqual(el.invocations, expected);
  });
});

suite('value propagation', function() {
  test('effects forward propagate value', function() {
    var el = document.createElement('x-propagate');
    document.body.appendChild(el);
    assert.equal(el.value, 1, 'observers did not receive latest value for property');
  });
});

</script>

</body>
</html>