@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
122 lines (108 loc) • 3.82 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>
<script>
HTMLImports.whenReady(function() {
class XFoo extends Polymer.LegacyElementMixin(HTMLElement) {
ready() {
super.ready();
sinon.spy(this, 'beforeNextRender');
sinon.spy(this, 'stillBeforeNextRender');
Polymer.RenderStatus.beforeNextRender(this, this.beforeNextRender,
['before']);
}
beforeNextRender() {
Polymer.RenderStatus.beforeNextRender(this, this.stillBeforeNextRender,
['still-before']);
}
stillBeforeNextRender() {
if (this.beforeDone) {
this.beforeDone();
}
}
}
customElements.define('x-foo', XFoo);
class XBar extends Polymer.LegacyElementMixin(HTMLElement) {
ready() {
super.ready();
sinon.spy(this, 'afterNextRender');
sinon.spy(this, 'afterAfterNextRender');
Polymer.RenderStatus.afterNextRender(this, (a) => {
this.afterNextRender(a);
}, ['after']);
}
afterNextRender() {
Polymer.RenderStatus.afterNextRender(this, (a) => {
this.afterAfterNextRender(a);
}, ['after-after']);
}
afterAfterNextRender() {
if (this.afterDone) {
this.afterDone();
}
}
}
customElements.define('x-bar', XBar);
});
</script>
<script>
suite('render-status', function() {
test('beforeNextRender', function(done) {
let el = document.createElement('x-foo');
document.body.appendChild(el);
el.beforeDone = function() {
assert.ok(el.beforeNextRender.withArgs('before').calledOnce);
assert.ok(el.stillBeforeNextRender.withArgs('still-before').calledOnce);
// break out of this raf so next test is not tainted.
requestAnimationFrame(() => { done(); });
};
});
test('afterNextRender', function(done) {
let el = document.createElement('x-bar');
let raf1 = sinon.spy();
let raf2 = sinon.spy();
requestAnimationFrame(() => {
raf1();
requestAnimationFrame(() => {
raf2();
});
});
el.afterDone = function() {
assert.ok(el.afterNextRender.withArgs('after').calledOnce);
assert.ok(el.afterNextRender.calledAfter(raf1));
assert.ok(el.afterAfterNextRender.withArgs('after-after').calledOnce);
assert.ok(el.afterAfterNextRender.calledAfter(raf2));
// break out of this raf so next test is not tainted.
requestAnimationFrame(() => { done(); });
};
document.body.appendChild(el);
});
test('flush', function() {
let el1 = document.createElement('x-foo');
let el2 = document.createElement('x-bar');
document.body.appendChild(el1);
document.body.appendChild(el2);
Polymer.RenderStatus.flush();
assert.ok(el1.beforeNextRender.withArgs('before').calledOnce);
assert.ok(el1.stillBeforeNextRender.withArgs('still-before').calledOnce);
assert.ok(el2.afterNextRender.withArgs('after').calledOnce);
assert.ok(el2.afterAfterNextRender.withArgs('after-after').calledOnce);
});
});
</script>
</body>
</html>