mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
169 lines
5.7 KiB
HTML
169 lines
5.7 KiB
HTML
<!doctype 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="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
|
<script src="wct-browser-config.js"></script>
|
|
<script src="../../node_modules/wct-browser-legacy/browser.js"></script>
|
|
<script type="module" src="../../polymer-legacy.js"></script>
|
|
<body>
|
|
|
|
<x-foo prop1="a" prop2="b"></x-foo>
|
|
|
|
<script type="module">
|
|
import { PropertiesChanged } from '../../lib/mixins/properties-changed.js';
|
|
class XFoo extends 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 PropertiesChanged(HTMLElement) {
|
|
constructor() {
|
|
super();
|
|
this._propertiesChanged = sinon.spy();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this._enableProperties();
|
|
//this._flushProperties();
|
|
}
|
|
|
|
_shouldPropertiesChange() {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
customElements.define('should-properties-change', ShouldPropertiesChange);
|
|
</script>
|
|
|
|
<script type="module">
|
|
|
|
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>
|