D3 Examples - tap-grid.js

tap-grid

This little utility is for taking the output of your testem test suite continuous integration results across a few browsers, and turning it into a nice grid style overview, a bit like I did with this SVG test suite. (related testem issue)

You run it like this:

testem --timeout 60 ci | tap-grid.js

Which gives you the array of test names, the json for the success (0) / fail ({id, message, stacktrace} or {id, raw}) grid and the array of browser names participating.

Then you finish up the d3 integration. :-)

xxxxxxxxxx
 
<!DOCTYPE html>
<html><head>
  <title>on.js test suite results by browser</title>
  <link rel="stylesheet" type="text/css" href="grid.css">
  <script src="https://d3js.org/d3.v2.js"></script>
</head>
<body>
  <h1>on.js test suite results by browser</h1>
  <p>
    This is example data from <a href="https://git.io/on.js">on.js</a>, modded to
    actually show a failure so it gets a little interesting. Generating your own
    real data is easy: just run <code>testem ci | tap-grid.js > tap.json</code>
    / Johan Sundström
  </p>
  <table id="chart" class="grid" rules="groups" cellspacing="0" cellpadding="2">
    <thead><tr>
      <th><table border="0"><tbody>
        <tr><td class="none"></td><td>Not tested</td></tr>
        <tr><td class="pass"></td><td>Test passed</td></tr>
        <!--tr><td class="warn"></td><td>See notes</td></tr-->
        <tr><td class="fail"></td><td>Test failed</td></tr>
        <!--tr><td class="died"></td><td>Test crashed!</td></tr-->
      </tbody></table></th>
    </thead>
  </table>
  <script src="vis.js"></script>
</body></html>
​
    