Support the devtools console.log api (multiple strings) for polymer l…

…ogging Fixes #3574
Polymer · Apr 11, 2016 · 909ee82 · 909ee82
1 parent 1b02e96
commit 909ee82
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 8 deletions.
diff --git a/src/lib/base.html b/src/lib/base.html
@@ -156,17 +156,40 @@
       }
     },
 
-    _log: console.log.apply.bind(console.log, console),
-    _warn: console.warn.apply.bind(console.warn, console),
-    _error: console.error.apply.bind(console.error, console),
+    _logger: function(level, args) {
+      // accept ['foo', 'bar'] and [['foo', 'bar']]
+      if (args.length === 1 && Array.isArray(args[0])) {
+        args = args[0];
+      }
+      // only accept logging functions
+      switch(level) {
+        case 'log':
+        case 'warn':
+        case 'error':
+          console[level].apply(console, args);
+          break;
+      }
+    },
+    _log: function() {
+      var args = Array.prototype.slice.call(arguments, 0);
+      this._logger('log', args);
+    },
+    _warn: function() {
+      var args = Array.prototype.slice.call(arguments, 0);
+      this._logger('warn', args);
+    },
+    _error: function() {
+      var args = Array.prototype.slice.call(arguments, 0);
+      this._logger('error', args);
+    },
     _logf: function(/* args*/) {
-      return this._logPrefix.concat([this.is]).concat(Array.prototype.slice.call(arguments, 0));
+      return this._logPrefix.concat(this.is).concat(Array.prototype.slice.call(arguments, 0));
     }
-
   };
 
   Polymer.Base._logPrefix = (function(){
-    var color = window.chrome || (/firefox/i.test(navigator.userAgent));
+    // only Firefox, Chrome, and Safari support colors in console logging
+    var color = (window.chrome && !(/edge/i.test(navigator.userAgent))) || (/firefox/i.test(navigator.userAgent));
     return color ? ['%c[%s::%s]:', 'font-weight: bold; background-color:#EEEE00;'] : ['[%s::%s]:'];
   })();
 

diff --git a/test/unit/base.html b/test/unit/base.html
@@ -23,7 +23,7 @@
 </head>
 <body>
 <script>
-(function() {
+suite('Polymer.Base', function() {
 
 var Child;
 var instance;
@@ -139,7 +139,59 @@
 
 });
 
-})();
+suite('Logging', function() {
+  var logStub;
+  setup(function() {
+    logStub = sinon.stub(console, 'log');
+  });
+  teardown(function() {
+    logStub.restore();
+  });
+
+  test('logger is an entry point for console', function() {
+    Polymer.Base._logger('log', ['hi']);
+    assert.equal(logStub.callCount, 1);
+  });
+
+  test('only allow logging methods', function() {
+    var warnStub = sinon.stub(console, 'warn');
+    var errorStub = sinon.stub(console, 'error');
+    var tableStub = sinon.stub(console, 'table');
+    var args = ['hi'];
+    Polymer.Base._logger('warn', args);
+    Polymer.Base._logger('error', args);
+    Polymer.Base._logger('table', args);
+    warnStub.restore();
+    errorStub.restore();
+    tableStub.restore();
+    assert.equal(warnStub.callCount, 1);
+    assert.equal(errorStub.callCount, 1);
+    assert.equal(tableStub.callCount, 0);
+  });
+
+  test('logging methods accept strings or an array', function() {
+    var expected = ['hello', 'world'];
+    Polymer.Base._log('hello', 'world');
+    assert.deepEqual(logStub.args[0], expected, 'strings');
+    Polymer.Base._log(['hello', 'world']);
+    assert.deepEqual(logStub.args[1], expected, 'array');
+  });
+
+  test('logf will print the element name and function', function() {
+    Child.created = function() {
+      this._log(this._logf('ready', 'ready now!'));
+    }
+    instance.createdCallback();
+    assert.equal(logStub.callCount, 1);
+    var expected = Polymer.Base._logPrefix.concat([
+      'x-child',
+      'ready',
+      'ready now!'
+    ]);
+    assert.deepEqual(logStub.args[0], expected);
+  });
+});
+});
 </script>
 </body>
 </html>