While playing around with Blanket.js, an annoying ANSI color code in Chrome’s console has prompted me to fix the color display issues once and for all.

[Update: The below post is now out of date, as my recommended changes to Blanket.js to fix this problem have since been accepted.]

Console problem with ANSI

Blanket.js helps to give you code coverage when testing code, but I’ve been finding myself annoyed by the following entries in the Chrome console:


[32mInit cards: 4 of 4 passed.[0m
[32mDraw cards: 7 of 7 passed.[0m

The 32m part is an ANSI color code that’s supposed to make the text green, but these color codes are not supported by Chrome’s developer console.

Possible solutions

After exploring the Jasmine blanket test I came to realize that test/helpers/console_runner.js is the cause of my problems. It works great on command prompt-type consoles, but the log section within it is not so good on Chrome’s web browser console.

Further investigation about Chrome’s console revealed that yes, it is possible to style console output with CSS, but ANSI color codes aren’t supported.

it is possible to to edit console_runner.js to support this Chrome console format, but I don’t want to sabotage that when it’s used outside of Google Chrome either.

At the end of the SpecRunner.html file is a section of code for Jasmine compatibility with Blanket, which looks to be a good place for my update, but I don’t like the idea of duplicating this fix across all the html files used for testing.

Fixing the Problem

We can keep the changes to console_runner.js limited only to when using Chrome by using one of the dreaded browser-checking techniques from within console_runner.js, by checking if window.chrome exists:

proto.log = function(str, color) {
  var text = (color !== undefined)? ANSI.colorize_text(str, color) : str;
  console.log(text);
};
if (window && !!window.chrome) {
  proto.log = function (str, color) {
    if (!color) {
        console.log(str);
    } else {
        console.log('%c' + str, 'color: ' + color);
    }
  };
}

Everything Is Awesome!

With the above addition in place, it now results in the following pleasingly colored Chrome console output:


waiting for blanket...
Starting...
Init cards: 4 of 4 passed.
Draw cards: 7 of 7 passed.
Add cards: 4 of 4 passed.
Orders: 5 of 5 passed.
Deal cards: 3 of 3 passed.

Finished
—————–
17 specs, 0 failures in 0.043s.

ConsoleReporter finished

Hopefully this will be of help to other developers that have been looking for a solution to fixing the console display issues, when using Blanket.js and Google’s Chrome web browser.

Bonus: Everything Is Awesome video.

Advertisements