html.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. /* eslint-env browser */
  2. /**
  3. * Module dependencies.
  4. */
  5. var Base = require('./base');
  6. var utils = require('../utils');
  7. var Progress = require('../browser/progress');
  8. var escapeRe = require('escape-string-regexp');
  9. var escape = utils.escape;
  10. /**
  11. * Save timer references to avoid Sinon interfering (see GH-237).
  12. */
  13. /* eslint-disable no-unused-vars, no-native-reassign */
  14. var Date = global.Date;
  15. var setTimeout = global.setTimeout;
  16. var setInterval = global.setInterval;
  17. var clearTimeout = global.clearTimeout;
  18. var clearInterval = global.clearInterval;
  19. /* eslint-enable no-unused-vars, no-native-reassign */
  20. /**
  21. * Expose `HTML`.
  22. */
  23. exports = module.exports = HTML;
  24. /**
  25. * Stats template.
  26. */
  27. var statsTemplate = '<ul id="mocha-stats">'
  28. + '<li class="progress"><canvas width="40" height="40"></canvas></li>'
  29. + '<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>'
  30. + '<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>'
  31. + '<li class="duration">duration: <em>0</em>s</li>'
  32. + '</ul>';
  33. /**
  34. * Initialize a new `HTML` reporter.
  35. *
  36. * @api public
  37. * @param {Runner} runner
  38. */
  39. function HTML(runner) {
  40. Base.call(this, runner);
  41. var self = this;
  42. var stats = this.stats;
  43. var stat = fragment(statsTemplate);
  44. var items = stat.getElementsByTagName('li');
  45. var passes = items[1].getElementsByTagName('em')[0];
  46. var passesLink = items[1].getElementsByTagName('a')[0];
  47. var failures = items[2].getElementsByTagName('em')[0];
  48. var failuresLink = items[2].getElementsByTagName('a')[0];
  49. var duration = items[3].getElementsByTagName('em')[0];
  50. var canvas = stat.getElementsByTagName('canvas')[0];
  51. var report = fragment('<ul id="mocha-report"></ul>');
  52. var stack = [report];
  53. var progress;
  54. var ctx;
  55. var root = document.getElementById('mocha');
  56. if (canvas.getContext) {
  57. var ratio = window.devicePixelRatio || 1;
  58. canvas.style.width = canvas.width;
  59. canvas.style.height = canvas.height;
  60. canvas.width *= ratio;
  61. canvas.height *= ratio;
  62. ctx = canvas.getContext('2d');
  63. ctx.scale(ratio, ratio);
  64. progress = new Progress();
  65. }
  66. if (!root) {
  67. return error('#mocha div missing, add it to your document');
  68. }
  69. // pass toggle
  70. on(passesLink, 'click', function(evt) {
  71. evt.preventDefault();
  72. unhide();
  73. var name = (/pass/).test(report.className) ? '' : ' pass';
  74. report.className = report.className.replace(/fail|pass/g, '') + name;
  75. if (report.className.trim()) {
  76. hideSuitesWithout('test pass');
  77. }
  78. });
  79. // failure toggle
  80. on(failuresLink, 'click', function(evt) {
  81. evt.preventDefault();
  82. unhide();
  83. var name = (/fail/).test(report.className) ? '' : ' fail';
  84. report.className = report.className.replace(/fail|pass/g, '') + name;
  85. if (report.className.trim()) {
  86. hideSuitesWithout('test fail');
  87. }
  88. });
  89. root.appendChild(stat);
  90. root.appendChild(report);
  91. if (progress) {
  92. progress.size(40);
  93. }
  94. runner.on('suite', function(suite) {
  95. if (suite.root) {
  96. return;
  97. }
  98. // suite
  99. var url = self.suiteURL(suite);
  100. var el = fragment('<li class="suite"><h1><a href="%s">%s</a></h1></li>', url, escape(suite.title));
  101. // container
  102. stack[0].appendChild(el);
  103. stack.unshift(document.createElement('ul'));
  104. el.appendChild(stack[0]);
  105. });
  106. runner.on('suite end', function(suite) {
  107. if (suite.root) {
  108. return;
  109. }
  110. stack.shift();
  111. });
  112. runner.on('pass', function(test) {
  113. var url = self.testURL(test);
  114. var markup = '<li class="test pass %e"><h2>%e<span class="duration">%ems</span> '
  115. + '<a href="%s" class="replay">‣</a></h2></li>';
  116. var el = fragment(markup, test.speed, test.title, test.duration, url);
  117. self.addCodeToggle(el, test.body);
  118. appendToStack(el);
  119. updateStats();
  120. });
  121. runner.on('fail', function(test) {
  122. var el = fragment('<li class="test fail"><h2>%e <a href="%e" class="replay">‣</a></h2></li>',
  123. test.title, self.testURL(test));
  124. var stackString; // Note: Includes leading newline
  125. var message = test.err.toString();
  126. // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
  127. // check for the result of the stringifying.
  128. if (message === '[object Error]') {
  129. message = test.err.message;
  130. }
  131. if (test.err.stack) {
  132. var indexOfMessage = test.err.stack.indexOf(test.err.message);
  133. if (indexOfMessage === -1) {
  134. stackString = test.err.stack;
  135. } else {
  136. stackString = test.err.stack.substr(test.err.message.length + indexOfMessage);
  137. }
  138. } else if (test.err.sourceURL && test.err.line !== undefined) {
  139. // Safari doesn't give you a stack. Let's at least provide a source line.
  140. stackString = '\n(' + test.err.sourceURL + ':' + test.err.line + ')';
  141. }
  142. stackString = stackString || '';
  143. if (test.err.htmlMessage && stackString) {
  144. el.appendChild(fragment('<div class="html-error">%s\n<pre class="error">%e</pre></div>',
  145. test.err.htmlMessage, stackString));
  146. } else if (test.err.htmlMessage) {
  147. el.appendChild(fragment('<div class="html-error">%s</div>', test.err.htmlMessage));
  148. } else {
  149. el.appendChild(fragment('<pre class="error">%e%e</pre>', message, stackString));
  150. }
  151. self.addCodeToggle(el, test.body);
  152. appendToStack(el);
  153. updateStats();
  154. });
  155. runner.on('pending', function(test) {
  156. var el = fragment('<li class="test pass pending"><h2>%e</h2></li>', test.title);
  157. appendToStack(el);
  158. updateStats();
  159. });
  160. function appendToStack(el) {
  161. // Don't call .appendChild if #mocha-report was already .shift()'ed off the stack.
  162. if (stack[0]) {
  163. stack[0].appendChild(el);
  164. }
  165. }
  166. function updateStats() {
  167. // TODO: add to stats
  168. var percent = stats.tests / this.total * 100 | 0;
  169. if (progress) {
  170. progress.update(percent).draw(ctx);
  171. }
  172. // update stats
  173. var ms = new Date() - stats.start;
  174. text(passes, stats.passes);
  175. text(failures, stats.failures);
  176. text(duration, (ms / 1000).toFixed(2));
  177. }
  178. }
  179. /**
  180. * Makes a URL, preserving querystring ("search") parameters.
  181. *
  182. * @param {string} s
  183. * @return {string} A new URL.
  184. */
  185. function makeUrl(s) {
  186. var search = window.location.search;
  187. // Remove previous grep query parameter if present
  188. if (search) {
  189. search = search.replace(/[?&]grep=[^&\s]*/g, '').replace(/^&/, '?');
  190. }
  191. return window.location.pathname + (search ? search + '&' : '?') + 'grep=' + encodeURIComponent(escapeRe(s));
  192. }
  193. /**
  194. * Provide suite URL.
  195. *
  196. * @param {Object} [suite]
  197. */
  198. HTML.prototype.suiteURL = function(suite) {
  199. return makeUrl(suite.fullTitle());
  200. };
  201. /**
  202. * Provide test URL.
  203. *
  204. * @param {Object} [test]
  205. */
  206. HTML.prototype.testURL = function(test) {
  207. return makeUrl(test.fullTitle());
  208. };
  209. /**
  210. * Adds code toggle functionality for the provided test's list element.
  211. *
  212. * @param {HTMLLIElement} el
  213. * @param {string} contents
  214. */
  215. HTML.prototype.addCodeToggle = function(el, contents) {
  216. var h2 = el.getElementsByTagName('h2')[0];
  217. on(h2, 'click', function() {
  218. pre.style.display = pre.style.display === 'none' ? 'block' : 'none';
  219. });
  220. var pre = fragment('<pre><code>%e</code></pre>', utils.clean(contents));
  221. el.appendChild(pre);
  222. pre.style.display = 'none';
  223. };
  224. /**
  225. * Display error `msg`.
  226. *
  227. * @param {string} msg
  228. */
  229. function error(msg) {
  230. document.body.appendChild(fragment('<div id="mocha-error">%s</div>', msg));
  231. }
  232. /**
  233. * Return a DOM fragment from `html`.
  234. *
  235. * @param {string} html
  236. */
  237. function fragment(html) {
  238. var args = arguments;
  239. var div = document.createElement('div');
  240. var i = 1;
  241. div.innerHTML = html.replace(/%([se])/g, function(_, type) {
  242. switch (type) {
  243. case 's': return String(args[i++]);
  244. case 'e': return escape(args[i++]);
  245. // no default
  246. }
  247. });
  248. return div.firstChild;
  249. }
  250. /**
  251. * Check for suites that do not have elements
  252. * with `classname`, and hide them.
  253. *
  254. * @param {text} classname
  255. */
  256. function hideSuitesWithout(classname) {
  257. var suites = document.getElementsByClassName('suite');
  258. for (var i = 0; i < suites.length; i++) {
  259. var els = suites[i].getElementsByClassName(classname);
  260. if (!els.length) {
  261. suites[i].className += ' hidden';
  262. }
  263. }
  264. }
  265. /**
  266. * Unhide .hidden suites.
  267. */
  268. function unhide() {
  269. var els = document.getElementsByClassName('suite hidden');
  270. for (var i = 0; i < els.length; ++i) {
  271. els[i].className = els[i].className.replace('suite hidden', 'suite');
  272. }
  273. }
  274. /**
  275. * Set an element's text contents.
  276. *
  277. * @param {HTMLElement} el
  278. * @param {string} contents
  279. */
  280. function text(el, contents) {
  281. if (el.textContent) {
  282. el.textContent = contents;
  283. } else {
  284. el.innerText = contents;
  285. }
  286. }
  287. /**
  288. * Listen on `event` with callback `fn`.
  289. */
  290. function on(el, event, fn) {
  291. if (el.addEventListener) {
  292. el.addEventListener(event, fn, false);
  293. } else {
  294. el.attachEvent('on' + event, fn);
  295. }
  296. }