mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
288 lines
8.2 KiB
HTML
288 lines
8.2 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 dir="rtl">
|
|
<head>
|
|
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.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>
|
|
<script type="module" src="../../lib/mixins/disable-upgrade-mixin.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<dom-module id="x-disabled">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
h2 {
|
|
letter-spacing: 1em;
|
|
}
|
|
</style>
|
|
<h2 id="element">[[prop]]</h2>
|
|
</template>
|
|
|
|
<script type="module">
|
|
import { DisableUpgradeMixin } from '../../lib/mixins/disable-upgrade-mixin.js';
|
|
import { PolymerElement } from '../../polymer-element.js';
|
|
const Disabled = DisableUpgradeMixin(class extends PolymerElement {
|
|
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 type="module">
|
|
import { DisableUpgradeMixin } from '../../lib/mixins/disable-upgrade-mixin.js';
|
|
import { Class as PolymerClass } from '../../lib/legacy/class.js';
|
|
import { Polymer } from '../../lib/legacy/polymer-fn.js';
|
|
|
|
// enable disable upgrade!
|
|
const origPolymerClass = PolymerClass;
|
|
|
|
Polymer.Class = function(info) {
|
|
const ctor = origPolymerClass(info);
|
|
return 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() {}
|
|
});
|
|
|
|
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 type="module">
|
|
import '../../lib/mixins/disable-upgrade-mixin.js';
|
|
import { PolymerElement } from '../../polymer-element.js';
|
|
class MyElement extends PolymerElement {
|
|
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 type="module">
|
|
import '../../lib/mixins/disable-upgrade-mixin.js';
|
|
import { Polymer } from '../../lib/legacy/polymer-fn.js';
|
|
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 type="module">
|
|
import '../../lib/mixins/disable-upgrade-mixin.js';
|
|
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>
|