@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
194 lines (149 loc) • 4.71 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>
<dom-module id="my-element">
<template>
<div id="content"></div>
</template>
<script>
HTMLImports.whenReady(function() {
class MyElement extends Polymer.LegacyElementMixin(HTMLElement) {
static get is() { return 'my-element'; }
static get properties() {
return {
prop: {
value: 'base'
}
};
}
created() {
super.created();
this._calledCreated++;
}
attached() {
super.attached();
this._calledAttached++;
}
attributeChanged() {
super.attributeChanged.apply(this, arguments);
this._callAttributeChanged++;
}
ready() {
super.ready();
this._calledReady++;
}
}
MyElement.prototype._calledCreated = 0;
MyElement.prototype._calledAttached = 0;
MyElement.prototype._calledReady = 0;
MyElement.prototype._callAttributeChanged = 0;
customElements.define(MyElement.is, MyElement);
window.MyElement = MyElement;
});
</script>
</dom-module>
<dom-module id="sub-element">
<script>
HTMLImports.whenReady(function() {
class SubElement extends window.MyElement {
static get is() { return 'sub-element'; }
created() {
super.created();
this._calledCreated++;
}
attached() {
super.attached();
this._calledAttached++;
}
ready() {
super.ready();
this._calledReady++;
}
}
customElements.define(SubElement.is, SubElement);
window.SubElement = SubElement;
});
</script>
</dom-module>
<test-fixture id="my-element-attr">
<template>
<my-element prop="attr"></my-element>
</template>
</test-fixture>
<script>
suite('class extends Polymer.LegacyElementMixin(HTMLElement)', function() {
var el;
setup(function() {
el = document.createElement('my-element');
document.body.appendChild(el);
});
teardown(function() {
document.body.removeChild(el);
});
test('instanceof', function() {
assert.instanceOf(el, HTMLElement);
assert.instanceOf(el, Polymer.Element);
assert.instanceOf(el, window.MyElement);
});
test('lifecycle', function() {
assert.equal(el._calledCreated, 1);
assert.equal(el._calledAttached, 1);
assert.equal(el._calledReady, 1);
assert.equal(el._callAttributeChanged, 0);
});
test('attributes', function() {
var fixtureEl = fixture('my-element-attr');
assert.equal(fixtureEl.prop, 'attr');
assert.equal(fixtureEl._callAttributeChanged, 1);
});
});
suite('subclass', function() {
var el;
setup(function() {
el = document.createElement('sub-element');
document.body.appendChild(el);
});
teardown(function() {
document.body.removeChild(el);
});
test('instanceof', function() {
assert.instanceOf(el, HTMLElement);
assert.instanceOf(el, Polymer.Element);
assert.instanceOf(el, window.MyElement);
assert.instanceOf(el, window.SubElement);
});
test('lifecycle', function() {
assert.equal(el._calledCreated, 2);
assert.equal(el._calledAttached, 2);
assert.equal(el._calledReady, 2);
assert.equal(el._callAttributeChanged, 0);
});
});
suite('misc', function() {
test('Polymer.ElementMixin caches', function() {
assert.equal(Polymer.Element, Polymer.ElementMixin(HTMLElement));
assert.equal(Polymer.ElementMixin(HTMLElement),
Polymer.ElementMixin(HTMLElement));
});
test('Polymer.LegacyElementMixin caches', function() {
assert.equal(Polymer.LegacyElementMixin(HTMLElement),
Polymer.LegacyElementMixin(HTMLElement));
});
});
</script>
</body>
</html>