html.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. /**
  2. * Module dependencies.
  3. */
  4. var Base = require('./base')
  5. , utils = require('../utils')
  6. , Progress = require('../browser/progress')
  7. , escape = utils.escape;
  8. /**
  9. * Save timer references to avoid Sinon interfering (see GH-237).
  10. */
  11. var Date = global.Date
  12. , setTimeout = global.setTimeout
  13. , setInterval = global.setInterval
  14. , clearTimeout = global.clearTimeout
  15. , clearInterval = global.clearInterval;
  16. /**
  17. * Expose `Doc`.
  18. */
  19. exports = module.exports = HTML;
  20. /**
  21. * Stats template.
  22. */
  23. var statsTemplate = '<ul id="mocha-stats">'
  24. + '<li class="progress"><canvas width="40" height="40"></canvas></li>'
  25. + '<li class="passes"><a href="#">passes:</a> <em>0</em></li>'
  26. + '<li class="failures"><a href="#">failures:</a> <em>0</em></li>'
  27. + '<li class="duration">duration: <em>0</em>s</li>'
  28. + '</ul>';
  29. /**
  30. * Initialize a new `Doc` reporter.
  31. *
  32. * @param {Runner} runner
  33. * @api public
  34. */
  35. function HTML(runner, root) {
  36. Base.call(this, runner);
  37. var self = this
  38. , stats = this.stats
  39. , total = runner.total
  40. , stat = fragment(statsTemplate)
  41. , items = stat.getElementsByTagName('li')
  42. , passes = items[1].getElementsByTagName('em')[0]
  43. , passesLink = items[1].getElementsByTagName('a')[0]
  44. , failures = items[2].getElementsByTagName('em')[0]
  45. , failuresLink = items[2].getElementsByTagName('a')[0]
  46. , duration = items[3].getElementsByTagName('em')[0]
  47. , canvas = stat.getElementsByTagName('canvas')[0]
  48. , report = fragment('<ul id="mocha-report"></ul>')
  49. , stack = [report]
  50. , progress
  51. , ctx
  52. root = root || document.getElementById('mocha');
  53. if (canvas.getContext) {
  54. var ratio = window.devicePixelRatio || 1;
  55. canvas.style.width = canvas.width;
  56. canvas.style.height = canvas.height;
  57. canvas.width *= ratio;
  58. canvas.height *= ratio;
  59. ctx = canvas.getContext('2d');
  60. ctx.scale(ratio, ratio);
  61. progress = new Progress;
  62. }
  63. if (!root) return error('#mocha div missing, add it to your document');
  64. // pass toggle
  65. on(passesLink, 'click', function(){
  66. unhide();
  67. var name = /pass/.test(report.className) ? '' : ' pass';
  68. report.className = report.className.replace(/fail|pass/g, '') + name;
  69. if (report.className.trim()) hideSuitesWithout('test pass');
  70. });
  71. // failure toggle
  72. on(failuresLink, 'click', function(){
  73. unhide();
  74. var name = /fail/.test(report.className) ? '' : ' fail';
  75. report.className = report.className.replace(/fail|pass/g, '') + name;
  76. if (report.className.trim()) hideSuitesWithout('test fail');
  77. });
  78. root.appendChild(stat);
  79. root.appendChild(report);
  80. if (progress) progress.size(40);
  81. runner.on('suite', function(suite){
  82. if (suite.root) return;
  83. // suite
  84. var url = '?grep=' + encodeURIComponent(suite.fullTitle());
  85. var el = fragment('<li class="suite"><h1><a href="%s">%s</a></h1></li>', url, escape(suite.title));
  86. // container
  87. stack[0].appendChild(el);
  88. stack.unshift(document.createElement('ul'));
  89. el.appendChild(stack[0]);
  90. });
  91. runner.on('suite end', function(suite){
  92. if (suite.root) return;
  93. stack.shift();
  94. });
  95. runner.on('fail', function(test, err){
  96. if ('hook' == test.type) runner.emit('test end', test);
  97. });
  98. runner.on('test end', function(test){
  99. // TODO: add to stats
  100. var percent = stats.tests / this.total * 100 | 0;
  101. if (progress) progress.update(percent).draw(ctx);
  102. // update stats
  103. var ms = new Date - stats.start;
  104. text(passes, stats.passes);
  105. text(failures, stats.failures);
  106. text(duration, (ms / 1000).toFixed(2));
  107. // test
  108. if ('passed' == test.state) {
  109. 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()));
  110. } else if (test.pending) {
  111. var el = fragment('<li class="test pass pending"><h2>%e</h2></li>', test.title);
  112. } else {
  113. var el = fragment('<li class="test fail"><h2>%e <a href="?grep=%e" class="replay">‣</a></h2></li>', test.title, encodeURIComponent(test.fullTitle()));
  114. var str = test.err.stack || test.err.toString();
  115. // FF / Opera do not add the message
  116. if (!~str.indexOf(test.err.message)) {
  117. str = test.err.message + '\n' + str;
  118. }
  119. // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
  120. // check for the result of the stringifying.
  121. if ('[object Error]' == str) str = test.err.message;
  122. // Safari doesn't give you a stack. Let's at least provide a source line.
  123. if (!test.err.stack && test.err.sourceURL && test.err.line !== undefined) {
  124. str += "\n(" + test.err.sourceURL + ":" + test.err.line + ")";
  125. }
  126. el.appendChild(fragment('<pre class="error">%e</pre>', str));
  127. }
  128. // toggle code
  129. // TODO: defer
  130. if (!test.pending) {
  131. var h2 = el.getElementsByTagName('h2')[0];
  132. on(h2, 'click', function(){
  133. pre.style.display = 'none' == pre.style.display
  134. ? 'block'
  135. : 'none';
  136. });
  137. var pre = fragment('<pre><code>%e</code></pre>', utils.clean(test.fn.toString()));
  138. el.appendChild(pre);
  139. pre.style.display = 'none';
  140. }
  141. // Don't call .appendChild if #mocha-report was already .shift()'ed off the stack.
  142. if (stack[0]) stack[0].appendChild(el);
  143. });
  144. }
  145. /**
  146. * Display error `msg`.
  147. */
  148. function error(msg) {
  149. document.body.appendChild(fragment('<div id="mocha-error">%s</div>', msg));
  150. }
  151. /**
  152. * Return a DOM fragment from `html`.
  153. */
  154. function fragment(html) {
  155. var args = arguments
  156. , div = document.createElement('div')
  157. , i = 1;
  158. div.innerHTML = html.replace(/%([se])/g, function(_, type){
  159. switch (type) {
  160. case 's': return String(args[i++]);
  161. case 'e': return escape(args[i++]);
  162. }
  163. });
  164. return div.firstChild;
  165. }
  166. /**
  167. * Check for suites that do not have elements
  168. * with `classname`, and hide them.
  169. */
  170. function hideSuitesWithout(classname) {
  171. var suites = document.getElementsByClassName('suite');
  172. for (var i = 0; i < suites.length; i++) {
  173. var els = suites[i].getElementsByClassName(classname);
  174. if (0 == els.length) suites[i].className += ' hidden';
  175. }
  176. }
  177. /**
  178. * Unhide .hidden suites.
  179. */
  180. function unhide() {
  181. var els = document.getElementsByClassName('suite hidden');
  182. for (var i = 0; i < els.length; ++i) {
  183. els[i].className = els[i].className.replace('suite hidden', 'suite');
  184. }
  185. }
  186. /**
  187. * Set `el` text to `str`.
  188. */
  189. function text(el, str) {
  190. if (el.textContent) {
  191. el.textContent = str;
  192. } else {
  193. el.innerText = str;
  194. }
  195. }
  196. /**
  197. * Listen on `event` with callback `fn`.
  198. */
  199. function on(el, event, fn) {
  200. if (el.addEventListener) {
  201. el.addEventListener(event, fn, false);
  202. } else {
  203. el.attachEvent('on' + event, fn);
  204. }
  205. }