test/unit/html-tag.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="../../polymer-legacy.js"></script>
</head>
<body>
  <script type="module">
import { html, htmlLiteral } from '../../lib/utils/html-tag.js';
import { PolymerElement } from '../../polymer-element.js';
import { Polymer } from '../../lib/legacy/polymer-fn.js';
suite('html function', function() {
  test('html makes an HTML template', function() {
    let t = html``;
    assert.instanceOf(t, HTMLTemplateElement);
  });
  test('template output has elements', function() {
    let t = html`<div><span></span></div><!-- hi -->`;
    assert(t.content.querySelector('div'));
    assert(t.content.querySelector('span'));
    assert.instanceOf(t.content.lastChild, Comment);
  });
  test('escaping works as expected', function() {
    let t = html`<span>the \`price\` is \${{foo}}\n</span>`;
    assert.equal(t.innerHTML, '<span>the `price` is ${{foo}}\n</span>');
  });
  test('interpolation of non-templates throw', function() {
    assert.throws(() => html`<div>${'a'}</div>`);
  });
  test('interpolation of templates include the template contents', function() {
    let t1 = html`<div></div>`;
    let t2 = html`<span>${t1}</span>`;
    assert.equal(t2.innerHTML, '<span><div></div></span>');
  });
  test('interpolation of literal values', function() {
    let s1 = htmlLiteral`hello`;
    assert.equal(s1.value, `hello`);
    let s2 = htmlLiteral`hello${htmlLiteral` ${htmlLiteral`world`}!`}!`;
    assert.equal(s2.value, 'hello world!!');
  });
  test('interpolation of literal values within html values', function() {
    let s1 = htmlLiteral`foo`;
    let s2 = htmlLiteral`display: block;`;
    let t = html`<style>:host {${s2}}</style><div ${s1}></div>`;
    assert.equal(t.innerHTML, `<style>:host {display: block;}</style><div foo=""></div>`);
  });
});
suite('Polymer + html fn', function() {
  suiteSetup(function() {

    class HtmlFn extends PolymerElement {
      static get is() {return 'html-fn';}
      static get template() {
        return html`
        <style>
          :host {
            display: block;
          }
        </style>
        <div id="child">
          [[databoundProperty]]
        </div>
        `;
      }
      static get properties() {
        return {
          databoundProperty: String
        };
      }
      ready() {
        super.ready();
        this.databoundProperty = 'first';
      }
    }

    customElements.define(HtmlFn.is, HtmlFn);

    class HtmlFnSub extends HtmlFn {
      static get is() {return 'html-fn-sub';}
      static get template() {
        return html`
        <div id="super">
          ${super.template}
        </div>
        `;
      }
      ready() {
        super.ready();
        this.databoundProperty = 'second';
      }
    }

    customElements.define(HtmlFnSub.is, HtmlFnSub);

    Polymer({
      is: 'html-legacy',
      _template: html`
        <div id="child">[[databoundProperty]]</div>
      `,
      properties: {
        databoundProperty: {
          type: String,
          value: 'legacy'
        }
      }
    });
  });

  test('Polymer elements can use html fn', function () {
    let el = document.createElement('html-fn');
    document.body.appendChild(el);
    assert(el.shadowRoot);
    assert.equal(el.$.child.textContent.trim(), 'first');
  });

  test('subclass elements can embed the superclass template', function() {
    let el = document.createElement('html-fn-sub');
    document.body.appendChild(el);
    assert(el.$.super);
    assert(el.$.child);
    assert.equal(el.$.child.textContent.trim(), 'second');
  });

  test('legacy element works with html fn', function() {
    let el = document.createElement('html-legacy');
    document.body.appendChild(el);
    assert(el.shadowRoot);
    assert.equal(el.$.child.textContent.trim(), 'legacy');
  });
});
</script>
</body>
</html>