123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- /**
- * Module dependencies.
- */
- var Base = require('./base')
- , utils = require('../utils')
- , Progress = require('../browser/progress')
- , escape = utils.escape;
- /**
- * Save timer references to avoid Sinon interfering (see GH-237).
- */
- var Date = global.Date
- , setTimeout = global.setTimeout
- , setInterval = global.setInterval
- , clearTimeout = global.clearTimeout
- , clearInterval = global.clearInterval;
- /**
- * Expose `Doc`.
- */
- exports = module.exports = HTML;
- /**
- * Stats template.
- */
- var statsTemplate = '<ul id="mocha-stats">'
- + '<li class="progress"><canvas width="40" height="40"></canvas></li>'
- + '<li class="passes"><a href="#">passes:</a> <em>0</em></li>'
- + '<li class="failures"><a href="#">failures:</a> <em>0</em></li>'
- + '<li class="duration">duration: <em>0</em>s</li>'
- + '</ul>';
- /**
- * Initialize a new `Doc` reporter.
- *
- * @param {Runner} runner
- * @api public
- */
- function HTML(runner, root) {
- Base.call(this, runner);
- var self = this
- , stats = this.stats
- , total = runner.total
- , stat = fragment(statsTemplate)
- , items = stat.getElementsByTagName('li')
- , passes = items[1].getElementsByTagName('em')[0]
- , passesLink = items[1].getElementsByTagName('a')[0]
- , failures = items[2].getElementsByTagName('em')[0]
- , failuresLink = items[2].getElementsByTagName('a')[0]
- , duration = items[3].getElementsByTagName('em')[0]
- , canvas = stat.getElementsByTagName('canvas')[0]
- , report = fragment('<ul id="mocha-report"></ul>')
- , stack = [report]
- , progress
- , ctx
- root = root || document.getElementById('mocha');
- if (canvas.getContext) {
- var ratio = window.devicePixelRatio || 1;
- canvas.style.width = canvas.width;
- canvas.style.height = canvas.height;
- canvas.width *= ratio;
- canvas.height *= ratio;
- ctx = canvas.getContext('2d');
- ctx.scale(ratio, ratio);
- progress = new Progress;
- }
- if (!root) return error('#mocha div missing, add it to your document');
- // pass toggle
- on(passesLink, 'click', function(){
- unhide();
- var name = /pass/.test(report.className) ? '' : ' pass';
- report.className = report.className.replace(/fail|pass/g, '') + name;
- if (report.className.trim()) hideSuitesWithout('test pass');
- });
- // failure toggle
- on(failuresLink, 'click', function(){
- unhide();
- var name = /fail/.test(report.className) ? '' : ' fail';
- report.className = report.className.replace(/fail|pass/g, '') + name;
- if (report.className.trim()) hideSuitesWithout('test fail');
- });
- root.appendChild(stat);
- root.appendChild(report);
- if (progress) progress.size(40);
- runner.on('suite', function(suite){
- if (suite.root) return;
- // suite
- var url = '?grep=' + encodeURIComponent(suite.fullTitle());
- var el = fragment('<li class="suite"><h1><a href="%s">%s</a></h1></li>', url, escape(suite.title));
- // container
- stack[0].appendChild(el);
- stack.unshift(document.createElement('ul'));
- el.appendChild(stack[0]);
- });
- runner.on('suite end', function(suite){
- if (suite.root) return;
- stack.shift();
- });
- runner.on('fail', function(test, err){
- if ('hook' == test.type) runner.emit('test end', test);
- });
- runner.on('test end', function(test){
- // TODO: add to stats
- var percent = stats.tests / this.total * 100 | 0;
- if (progress) progress.update(percent).draw(ctx);
- // update stats
- var ms = new Date - stats.start;
- text(passes, stats.passes);
- text(failures, stats.failures);
- text(duration, (ms / 1000).toFixed(2));
- // test
- if ('passed' == test.state) {
- var el = fragment('<li class="test pass %e"><h2>%e<span class="duration">%ems</span> <a href="?grep=%e" class="replay">‣</a></h2></li>', test.speed, test.title, test.duration, encodeURIComponent(test.fullTitle()));
- } else if (test.pending) {
- var el = fragment('<li class="test pass pending"><h2>%e</h2></li>', test.title);
- } else {
- var el = fragment('<li class="test fail"><h2>%e <a href="?grep=%e" class="replay">‣</a></h2></li>', test.title, encodeURIComponent(test.fullTitle()));
- var str = test.err.stack || test.err.toString();
- // FF / Opera do not add the message
- if (!~str.indexOf(test.err.message)) {
- str = test.err.message + '\n' + str;
- }
- // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
- // check for the result of the stringifying.
- if ('[object Error]' == str) str = test.err.message;
- // Safari doesn't give you a stack. Let's at least provide a source line.
- if (!test.err.stack && test.err.sourceURL && test.err.line !== undefined) {
- str += "\n(" + test.err.sourceURL + ":" + test.err.line + ")";
- }
- el.appendChild(fragment('<pre class="error">%e</pre>', str));
- }
- // toggle code
- // TODO: defer
- if (!test.pending) {
- var h2 = el.getElementsByTagName('h2')[0];
- on(h2, 'click', function(){
- pre.style.display = 'none' == pre.style.display
- ? 'block'
- : 'none';
- });
- var pre = fragment('<pre><code>%e</code></pre>', utils.clean(test.fn.toString()));
- el.appendChild(pre);
- pre.style.display = 'none';
- }
- // Don't call .appendChild if #mocha-report was already .shift()'ed off the stack.
- if (stack[0]) stack[0].appendChild(el);
- });
- }
- /**
- * Display error `msg`.
- */
- function error(msg) {
- document.body.appendChild(fragment('<div id="mocha-error">%s</div>', msg));
- }
- /**
- * Return a DOM fragment from `html`.
- */
- function fragment(html) {
- var args = arguments
- , div = document.createElement('div')
- , i = 1;
- div.innerHTML = html.replace(/%([se])/g, function(_, type){
- switch (type) {
- case 's': return String(args[i++]);
- case 'e': return escape(args[i++]);
- }
- });
- return div.firstChild;
- }
- /**
- * Check for suites that do not have elements
- * with `classname`, and hide them.
- */
- function hideSuitesWithout(classname) {
- var suites = document.getElementsByClassName('suite');
- for (var i = 0; i < suites.length; i++) {
- var els = suites[i].getElementsByClassName(classname);
- if (0 == els.length) suites[i].className += ' hidden';
- }
- }
- /**
- * Unhide .hidden suites.
- */
- function unhide() {
- var els = document.getElementsByClassName('suite hidden');
- for (var i = 0; i < els.length; ++i) {
- els[i].className = els[i].className.replace('suite hidden', 'suite');
- }
- }
- /**
- * Set `el` text to `str`.
- */
- function text(el, str) {
- if (el.textContent) {
- el.textContent = str;
- } else {
- el.innerText = str;
- }
- }
- /**
- * Listen on `event` with callback `fn`.
- */
- function on(el, event, fn) {
- if (el.addEventListener) {
- el.addEventListener(event, fn, false);
- } else {
- el.attachEvent('on' + event, fn);
- }
- }
|