Whispers of Test Failures

April 19, 2014

Yesterday, I learned that support for the speech synthesis portion of the Web Speech API spec landed in Chrome stable. I also learned that I'm behind the curve given that the HTML5 Rocks Speech Synthesis tutorial was published nearly four months ago. I immediately set out to rectify this situation by having my browser whisper my frontend test failures to me.

I've been playing the part of frontend web dev recently at work. While I'm developing, I keep my Mocha test runner page open in Chrome with LiveReload automatically refreshing the page every time I save a file. As I write new tests and code, I keep an eye on the Mocha results to ensure I'm not seriously regressing previous work. It's a decent, single-browser sanity check, but it does take up valuable screen space and requires flickers of my visual attention.

Enter Chrome text-to-speech. I added a bit of JavaScript to our Mocha test runner that speaks aloud the test case failure count. With this addition, I keep the test page tab in the background and simply listen for failure announcements to get an idea of how badly I've broken my sandbox.

Here's the relevant code in the context of a RequireJS callback.

requirejs(
  ["jquery", "mocha", "should", "test_foo", "test_bar"],
  function ($, mocha) {
    // Ignore livereload if used
    mocha.checkLeaks(["LiveReload"]);

    if (window.speechSynthesis) {
      // I want my Mac whispering, so I have to wait for the voiceschanged
      // event to fire. If I weren't so picky, I wouldn't need this listener.
      $(speechSynthesis).on("voiceschanged", function () {
        // Run my tests
        var run = mocha.run(function () {
          // Got failures? Fire up the text-to-speech!
          if (run.failures) {
            // I've got a Mac. I know this voice exists. I'm primarily doing this
            // for myself so ... hardcode!
            var v = speechSynthesis.getVoices().filter(function (voice) {
              return voice.name == "Whisper";
            });
            // Build an utterance
            var msg = new SpeechSynthesisUtterance(run.failures + "failed");
            // Set the voice properties
            if (v.length) msg.voice = v[0];
            msg.rate = 1;
            // And ...
            speechSynthesis.speak(msg);
          }
        });
      });
    } else {
      // Don't break mute browsers
      mocha.run();
    }
  }
);

The upgrade works wonderfully, with a rare browser tab crash that I'm sure the Chrome devs will iron out in due time. Beyond that, one change might make it better: an appropriately villainous robotic voice.

All images on this page are third-party works derived from robots of the Doctor Who universe, copyright the BBC, producers of quintessential synthetic voices.