@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
284 lines (247 loc) • 8.97 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 dir="rtl">
<head>
<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="../../lib/mixins/disable-upgrade-mixin.html">
</head>
<body>
<dom-module id="x-disabled">
<template>
<style>
:host {
display: block;
}
h2 {
letter-spacing: 1em;
}
</style>
<h2 id="element">[[prop]]</h2>
</template>
<script>
addEventListener('WebComponentsReady', function() {
const Disabled = Polymer.DisableUpgradeMixin(class extends Polymer.Element {
static get is() { return 'x-disabled'; }
static get properties() {
return {
prop: {
type: String
}
};
}
constructor() {
super();
this.prop = 'enabled!';
}
ready() {
super.ready();
this.enabled = true;
}
});
customElements.define(Disabled.is, Disabled);
});
</script>
</dom-module>
<dom-module id="x-disabled-legacy">
<template>
<style>
:host {
display: block;
}
h2 {
letter-spacing: 1em;
}
</style>
<h2 id="element">[[prop]]</h2>
</template>
<script>
addEventListener('WebComponentsReady', function() {
// enable disable upgrade!
const polymerClass = Polymer.Class;
Polymer.Class = function(info) {
const ctor = polymerClass(info);
return Polymer.DisableUpgradeMixin(ctor);
};
Polymer({
is: 'x-disabled-legacy',
properties: {
prop: {
type: String
}
},
listeners: {
foo: 'fooHandler'
},
created() {
this.hasCreated = true;
this.prop = 'enabled!';
},
ready() {
this.enabled = true;
},
fooHandler: function() {}
});
Polymer({
is: 'x-disabled-legacy-reg1',
registered() {
this.hasRegistered = true;
}
});
Polymer({
is: 'x-disabled-legacy-reg2',
registered() {
this.hasRegistered = true;
}
});
});
</script>
</dom-module>
<dom-module id="my-element">
<template>
<x-disabled id="enabledEl">Disabled</x-disabled>
<x-disabled id="disabledEl" disable-upgrade>Disabled</x-disabled>
<x-disabled id="disabledBoundEl" disable-upgrade$="[[upgradeDisabled]]">Disabled</x-disabled>
</template>
<script>
addEventListener('WebComponentsReady', function() {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
upgradeDisabled: {value: true}
};
}
enable() {
this.$.disabledEl.removeAttribute('disable-upgrade');
this.upgradeDisabled = false;
}
}
customElements.define(MyElement.is, MyElement);
});
</script>
</dom-module>
<dom-module id="my-element-legacy">
<template>
<x-disabled-legacy id="enabledEl">Disabled</x-disabled-legacy>
<x-disabled-legacy id="disabledEl" disable-upgrade>Disabled</x-disabled-legacy>
<x-disabled-legacy id="disabledBoundEl" disable-upgrade$="[[upgradeDisabled]]">Disabled</x-disabled-legacy>
<x-disabled-legacy-reg1 id="disabledRegEl" disable-upgrade>Disabled</x-disabled-legacy-reg1>
<x-disabled-legacy-reg2 id="disabledRegBoundEl" disable-upgrade$="[[upgradeDisabled]]">Disabled</x-disabled-legacy-reg2>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'my-element-legacy',
properties: {
upgradeDisabled: { type: String, value: true }
},
enable() {
this.$.disabledEl.removeAttribute('disable-upgrade');
this.$.disabledRegEl.removeAttribute('disable-upgrade');
this.upgradeDisabled = false;
}
});
});
</script>
</dom-module>
<script>
suite('disable-upgrade', function() {
let el;
setup(() => {
el = document.createElement('my-element');
document.body.appendChild(el);
});
teardown(function() {
document.body.removeChild(el);
});
test('elements upgrade as expected with and without `disable-upgrade`', function() {
assert.ok(el.$.enabledEl.enabled);
assert.ok(el.$.enabledEl.$.element);
assert.equal(el.$.enabledEl.$.element.textContent, 'enabled!');
assert.notOk(el.$.disabledEl.enabled);
assert.notOk(el.$.disabledEl.$);
assert.notOk(el.$.disabledBoundEl.enabled);
assert.notOk(el.$.disabledBoundEl.$);
});
test('elements upgrade when `disable-upgrade` removed', function() {
assert.notOk(el.$.disabledEl.enabled);
assert.notOk(el.$.disabledEl.$);
assert.notOk(el.$.disabledBoundEl.enabled);
assert.notOk(el.$.disabledBoundEl.$);
el.enable();
assert.ok(el.$.disabledEl.enabled);
assert.ok(el.$.disabledEl.$.element);
assert.equal(el.$.disabledEl.$.element.textContent, 'enabled!');
assert.ok(el.$.disabledBoundEl.enabled);
assert.ok(el.$.disabledBoundEl.$.element);
assert.equal(el.$.disabledBoundEl.$.element.textContent, 'enabled!');
});
});
suite('disable-upgrade-legacy', function() {
let el;
setup(() => {
el = document.createElement('my-element-legacy');
document.body.appendChild(el);
});
teardown(function() {
document.body.removeChild(el);
});
test('elements call `registered` as expected with `disable-upgrade`', function() {
assert.notOk(el.$.disabledRegEl.hasRegistered);
assert.notOk(el.$.disabledRegBoundEl.hasRegistered);
el.enable();
assert.ok(el.$.disabledRegEl.hasRegistered);
assert.ok(el.$.disabledRegBoundEl.hasRegistered);
});
test('elements upgrade as expected with and without `disable-upgrade`', function() {
assert.ok(el.$.enabledEl.hasCreated);
assert.ok(el.$.enabledEl.enabled);
assert.ok(el.$.enabledEl.$.element);
assert.equal(el.$.enabledEl.$.element.textContent, 'enabled!');
el.$.enabledEl.fooHandler = sinon.spy();
el.$.enabledEl.fire('foo');
assert.equal(el.$.enabledEl.fooHandler.callCount, 1);
assert.notOk(el.$.disabledEl.hasCreated);
assert.notOk(el.$.disabledEl.enabled);
assert.notOk(el.$.disabledEl.$);
el.$.disabledEl.fooHandler = sinon.spy();
el.$.disabledEl.fire('foo');
assert.equal(el.$.disabledEl.fooHandler.callCount, 0);
assert.notOk(el.$.disabledBoundEl.hasCreated);
assert.notOk(el.$.disabledBoundEl.enabled);
assert.notOk(el.$.disabledBoundEl.$);
el.$.disabledBoundEl.fooHandler = sinon.spy();
el.$.disabledBoundEl.fire('foo');
assert.equal(el.$.disabledBoundEl.fooHandler.callCount, 0);
});
test('elements upgrade when `disable-upgrade` removed', function() {
el.enable();
assert.ok(el.$.disabledEl.hasCreated);
assert.ok(el.$.disabledEl.enabled);
assert.ok(el.$.disabledEl.$.element);
assert.equal(el.$.disabledEl.$.element.textContent, 'enabled!');
el.$.disabledEl.fooHandler = sinon.spy();
el.$.disabledEl.fire('foo');
assert.equal(el.$.disabledEl.fooHandler.callCount, 1);
assert.ok(el.$.disabledBoundEl.hasCreated);
assert.ok(el.$.disabledBoundEl.enabled);
assert.ok(el.$.disabledBoundEl.$.element);
assert.equal(el.$.disabledBoundEl.$.element.textContent, 'enabled!');
el.$.disabledBoundEl.fooHandler = sinon.spy();
el.$.disabledBoundEl.fire('foo');
assert.equal(el.$.disabledBoundEl.fooHandler.callCount, 1);
});
});
</script>
</body>
</html>