@polymer/polymer
Version:
The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to
170 lines (149 loc) • 5.83 kB
HTML
<!--
@license
Copyright (c) 2017 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">
<body>
<x-foo prop1="a" prop2="b"></x-foo>
<script>
HTMLImports.whenReady(function() {
class XFoo extends Polymer.PropertiesChanged(HTMLElement) {
static get observedAttributes() {
return ['prop1', 'prop2'];
}
constructor() {
super();
this._propertiesChanged = sinon.spy();
}
connectedCallback() {
this._enableProperties();
}
attributeChangedCallback(name, old, value) {
if (value !== old) {
this._setProperty(name, value);
}
}
get prop1() {
return this._getProperty('prop1');
}
set prop1(value) {
this.setAttribute('prop1', value);
}
get prop2() {
return this._getProperty('prop2');
}
set prop2(value) {
this.setAttribute('prop2', value);
}
}
window.XFoo = XFoo;
customElements.define('x-foo', XFoo);
class ShouldPropertiesChange extends Polymer.PropertiesChanged(HTMLElement) {
constructor() {
super();
this._propertiesChanged = sinon.spy();
}
connectedCallback() {
this._enableProperties();
//this._flushProperties();
}
_shouldPropertiesChange() {
return true;
}
}
customElements.define('should-properties-change', ShouldPropertiesChange);
});
</script>
<script>
suite('properties-changed', function() {
test('attributes reflected to properties via upgrade', function() {
var el = document.querySelector('x-foo');
assert.equal(el.prop1, 'a');
assert.equal(el.prop2, 'b');
});
test('setting properties results in _propertiesChanged', function(done) {
var el = document.createElement('x-foo');
document.body.appendChild(el);
el.prop1 = 'a';
el.prop2 = 'b';
assert.equal(el._propertiesChanged.callCount, 0, '_propertiesChanged is not async');
setTimeout(function() {
assert.isTrue(el._propertiesChanged.calledOnce);
assert.equal(el._propertiesChanged.getCall(0).args[0].prop1, 'a');
assert.equal(el._propertiesChanged.getCall(0).args[0].prop2, 'b');
assert.equal(el._propertiesChanged.getCall(0).args[1].prop1, 'a');
assert.equal(el._propertiesChanged.getCall(0).args[1].prop2, 'b');
assert.equal(el._propertiesChanged.getCall(0).args[2].prop1, undefined);
assert.equal(el._propertiesChanged.getCall(0).args[2].prop2, undefined);
assert.equal(el.prop1, 'a');
assert.equal(el.prop2, 'b');
el.prop1 = 'aa';
setTimeout(function() {
assert.isTrue(el._propertiesChanged.calledTwice);
assert.equal(el._propertiesChanged.getCall(1).args[0].prop1, 'aa');
assert.equal(el._propertiesChanged.getCall(1).args[0].prop2, 'b');
assert.equal(el._propertiesChanged.getCall(1).args[1].prop1, 'aa');
assert.equal(el._propertiesChanged.getCall(1).args[2].prop1, 'a');
assert.isFalse('prop2' in el._propertiesChanged.getCall(1).args[1]);
assert.isFalse('prop2' in el._propertiesChanged.getCall(1).args[2]);
done();
});
});
});
test('setting attributes results in _propertiesChanged', function(done) {
var el = document.createElement('x-foo');
document.body.appendChild(el);
el.setAttribute('prop1', 'a');
el.setAttribute('prop2', 'b');
setTimeout(function() {
assert.isTrue(el._propertiesChanged.calledOnce);
assert.equal(el._propertiesChanged.getCall(0).args[0].prop1, 'a');
assert.equal(el._propertiesChanged.getCall(0).args[0].prop2, 'b');
assert.equal(el._propertiesChanged.getCall(0).args[1].prop1, 'a');
assert.equal(el._propertiesChanged.getCall(0).args[1].prop2, 'b');
assert.equal(el._propertiesChanged.getCall(0).args[2].prop1, undefined);
assert.equal(el._propertiesChanged.getCall(0).args[2].prop2, undefined);
assert.equal(el.prop1, 'a');
assert.equal(el.prop2, 'b');
el.setAttribute('prop1', 'aa');
setTimeout(function() {
assert.isTrue(el._propertiesChanged.calledTwice);
assert.equal(el._propertiesChanged.getCall(1).args[0].prop1, 'aa');
assert.equal(el._propertiesChanged.getCall(1).args[0].prop2, 'b');
assert.equal(el._propertiesChanged.getCall(1).args[1].prop1, 'aa');
assert.equal(el._propertiesChanged.getCall(1).args[2].prop1, 'a');
assert.isFalse('prop2' in el._propertiesChanged.getCall(1).args[1]);
assert.isFalse('prop2' in el._propertiesChanged.getCall(1).args[2]);
done();
});
});
});
test('shouldPropertiesChange', function(done) {
const el = document.createElement('should-properties-change');
document.body.appendChild(el);
assert.isTrue(el._propertiesChanged.calledOnce);
el._invalidateProperties();
setTimeout(function() {
assert.isTrue(el._propertiesChanged.calledTwice);
el._setProperty('foo', true);
setTimeout(function() {
assert.isTrue(el._propertiesChanged.calledThrice);
done();
});
});
});
});
</script>
</body>
</html>