@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
100 lines (85 loc) • 3.52 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="../../lib/mixins/template-stamp.html">
</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>
HTMLImports.whenReady(() => {
class TemplateStamper extends Polymer.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>
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>