@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
106 lines (105 loc) • 3.53 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="../../polymer.html">
</head>
<body>
<dom-module id="x-logging">
<script>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-logging',
properties: {
stream: {
value: () => [],
type: Array
}
},
_logger(level, args) {
this.stream.push({level, args});
}
});
});
</script>
</dom-module>
<script>
HTMLImports.whenReady(() => {
class XMixin extends Polymer.LegacyElementMixin(HTMLElement) {
static get is() { return 'x-mixin'; }
static get properties() {
return {
stream: {
value: () => [],
type: Array
}
};
}
_logger(level, args) {
this.stream.push({level, args});
}
}
customElements.define(XMixin.is, XMixin);
});
</script>
<script>
suite('Logging', () => {
let fnEl, classEl;
suiteSetup(() => {
fnEl = document.createElement('x-logging');
document.body.appendChild(fnEl);
classEl = document.createElement('x-mixin');
document.body.appendChild(classEl);
});
test('API', () => {
['_log', '_warn', '_error', '_logf', '_logger'].forEach((n) => {
assert.isFunction(fnEl[n], `${n} not defined on Polymer() element`);
assert.isFunction(classEl[n], `${n} not defined on Polymer.Element element`);
});
});
test('_log, _warn_, and _error go through _logger', () => {
fnEl._log('fn');
classEl._log('class');
fnEl._warn('fn');
classEl._warn('class');
fnEl._error('fn');
classEl._error('class');
assert.deepEqual(fnEl.stream, [{level: 'log', args: ['fn']}, {level: 'warn', args: ['fn']}, {level: 'error', args: ['fn']}]);
assert.deepEqual(classEl.stream, [{level: 'log', args: ['class']}, {level: 'warn', args: ['class']}, {level: 'error', args: ['class']}]);
});
test('_logf', () => {
let args = ['hi', 'there'];
let output = fnEl._logf(...args);
assert.oneOf(fnEl.is, output, `${fnEl.is} should be in ${output}`);
assert.includeMembers(output, args, `${args} should be in ${output}`);
});
});
suite('_logger', () => {
test('_log with single parameter', () => {
const msg = 'log test';
const orgConsole = console;
const spy = sinon.spy();
window.console = {
log: spy
};
Polymer.Base._log(msg);
window.console = orgConsole;
assert.equal(spy.callCount, 1, 'console.log called more than one time');
assert.equal(spy.args[0].length, 1, 'console.log called with more than one argument');
assert.equal(spy.args[0][0], msg, 'message not pass properly to log');
});
});
</script>
</body>
</html>