Files
polymer/test/unit/template-stamp.html

100 lines
3.4 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>
<head>
<meta charset="UTF-8">
<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="../../lib/mixins/template-stamp.js"></script>
</head>
<body>
<template id="test-template" strip-whitespace>
<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>
<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;
});
let template = document.getElementById('test-template');
this.dom = this._stampTemplate(template);
this.attachShadow({mode:'open'}).appendChild(this.dom);
}
}
customElements.define('template-stamper', TemplateStamper);
</script>
<script type="module">
import '../../lib/mixins/template-stamp.js';
suite('template-stamp', () => {
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);
});
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);
});
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);
});
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);
});
});
// Note template parsing API is tested in `property-effects-template.html`,
// combined with adding property effects
</script>
</body>
</html>