2017-05-23 10:23:05 -07:00
|
|
|
<!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">
|
|
|
|
|
|
2018-04-26 15:43:17 -07:00
|
|
|
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
2018-04-19 16:27:06 -07:00
|
|
|
<script src="wct-browser-config.js"></script>
|
2018-04-19 18:19:39 -07:00
|
|
|
<script src="../../node_modules/wct-browser-legacy/browser.js"></script>
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
<script type="module" src="../../lib/mixins/template-stamp.js"></script>
|
2017-05-23 10:23:05 -07:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2017-05-24 10:23:05 -07:00
|
|
|
<template id="test-template" strip-whitespace>
|
2017-05-23 10:23:05 -07:00
|
|
|
<div id="a">a</div>
|
|
|
|
|
<div id="eventHandler" on-click="handleClick"></div>
|
|
|
|
|
<div id="b">b</div>
|
|
|
|
|
<template id="nestedTemplate">
|
|
|
|
|
<div on-click="handleClick"></div>
|
|
|
|
|
</template>
|
|
|
|
|
<template id="preservedTemplate" preserve-content>
|
|
|
|
|
<div on-click="shouldNotBeRemoved"></div>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
<script type="module">
|
|
|
|
|
import { TemplateStamp } from '../../lib/mixins/template-stamp.js';
|
|
|
|
|
class TemplateStamper extends TemplateStamp(HTMLElement) {
|
|
|
|
|
connectedCallback() {
|
|
|
|
|
this.handleClick = sinon.spy(event => {
|
|
|
|
|
this.handleClickTarget = event.target;
|
2017-05-23 10:23:05 -07:00
|
|
|
});
|
2018-04-13 16:40:26 -07:00
|
|
|
let template = document.getElementById('test-template');
|
|
|
|
|
this.dom = this._stampTemplate(template);
|
|
|
|
|
this.attachShadow({mode:'open'}).appendChild(this.dom);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
customElements.define('template-stamper', TemplateStamper);
|
|
|
|
|
</script>
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
<script type="module">
|
|
|
|
|
import '../../lib/mixins/template-stamp.js';
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
suite('template-stamp', () => {
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
test('id map', () => {
|
|
|
|
|
let el = document.createElement('template-stamper');
|
|
|
|
|
document.body.appendChild(el);
|
|
|
|
|
assert.equal(el.dom.$.a.textContent, 'a');
|
|
|
|
|
assert.equal(el.dom.$.b.textContent, 'b');
|
|
|
|
|
document.body.removeChild(el);
|
|
|
|
|
});
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
test('declarative events', () => {
|
|
|
|
|
let el = document.createElement('template-stamper');
|
|
|
|
|
document.body.appendChild(el);
|
|
|
|
|
el.dom.$.eventHandler.click();
|
|
|
|
|
assert.equal(el.handleClick.callCount, 1);
|
|
|
|
|
assert.equal(el.handleClick.firstCall.args[0].type, 'click');
|
|
|
|
|
assert.equal(el.handleClickTarget, el.dom.$.eventHandler);
|
|
|
|
|
document.body.removeChild(el);
|
|
|
|
|
});
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
test('cached template content', () => {
|
|
|
|
|
let el = document.createElement('template-stamper');
|
|
|
|
|
document.body.appendChild(el);
|
|
|
|
|
let content = el.constructor._contentForTemplate(el.dom.$.nestedTemplate);
|
|
|
|
|
assert.isTrue(content instanceof DocumentFragment);
|
|
|
|
|
assert.notOk(content.ownerDocument.defaultView);
|
|
|
|
|
assert.equal(content.firstChild.getAttribute('on-click'), null);
|
|
|
|
|
document.body.removeChild(el);
|
|
|
|
|
});
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
test('preserved template content', () => {
|
|
|
|
|
let el = document.createElement('template-stamper');
|
|
|
|
|
document.body.appendChild(el);
|
|
|
|
|
let content = el.dom.$.preservedTemplate.content;
|
|
|
|
|
assert.isTrue(content instanceof DocumentFragment);
|
|
|
|
|
assert.equal(content.childNodes[1].getAttribute('on-click'), 'shouldNotBeRemoved');
|
|
|
|
|
document.body.removeChild(el);
|
|
|
|
|
});
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
});
|
2017-05-23 10:23:05 -07:00
|
|
|
|
2018-04-13 16:40:26 -07:00
|
|
|
// Note template parsing API is tested in `property-effects-template.html`,
|
|
|
|
|
// combined with adding property effects
|
|
|
|
|
</script>
|
2017-05-23 10:23:05 -07:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
