html.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. 'use strict';
  2. /**
  3. * @typedef {import('../runner.js')} Runner
  4. */
  5. /* eslint-env browser */
  6. /**
  7. * @module HTML
  8. */
  9. /**
  10. * Module dependencies.
  11. */
  12. var Base = require('./base');
  13. var utils = require('../utils');
  14. var escapeRe = require('escape-string-regexp');
  15. var constants = require('../runner').constants;
  16. var EVENT_TEST_PASS = constants.EVENT_TEST_PASS;
  17. var EVENT_TEST_FAIL = constants.EVENT_TEST_FAIL;
  18. var EVENT_SUITE_BEGIN = constants.EVENT_SUITE_BEGIN;
  19. var EVENT_SUITE_END = constants.EVENT_SUITE_END;
  20. var EVENT_TEST_PENDING = constants.EVENT_TEST_PENDING;
  21. var escape = utils.escape;
  22. /**
  23. * Save timer references to avoid Sinon interfering (see GH-237).
  24. */
  25. var Date = global.Date;
  26. /**
  27. * Expose `HTML`.
  28. */
  29. exports = module.exports = HTML;
  30. /**
  31. * Stats template: Result, progress, passes, failures, and duration.
  32. */
  33. var statsTemplate =
  34. '<ul id="mocha-stats">' +
  35. '<li class="result"></li>' +
  36. '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-flatlight" stroke-dasharray="100%,0%"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text">0%</div></li>' +
  37. '<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>' +
  38. '<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
  39. '<li class="duration">duration: <em>0</em>s</li>' +
  40. '</ul>';
  41. var playIcon = '&#x2023;';
  42. /**
  43. * Constructs a new `HTML` reporter instance.
  44. *
  45. * @public
  46. * @class
  47. * @memberof Mocha.reporters
  48. * @extends Mocha.reporters.Base
  49. * @param {Runner} runner - Instance triggers reporter actions.
  50. * @param {Object} [options] - runner options
  51. */
  52. function HTML(runner, options) {
  53. Base.call(this, runner, options);
  54. var self = this;
  55. var stats = this.stats;
  56. var stat = fragment(statsTemplate);
  57. var items = stat.getElementsByTagName('li');
  58. const resultIndex = 0;
  59. const progressIndex = 1;
  60. const passesIndex = 2;
  61. const failuresIndex = 3;
  62. const durationIndex = 4;
  63. /** Stat item containing the root suite pass or fail indicator (hasFailures ? '✖' : '✓') */
  64. var resultIndicator = items[resultIndex];
  65. /** Passes text and count */
  66. const passesStat = items[passesIndex];
  67. /** Stat item containing the pass count (not the word, just the number) */
  68. const passesCount = passesStat.getElementsByTagName('em')[0];
  69. /** Stat item linking to filter to show only passing tests */
  70. const passesLink = passesStat.getElementsByTagName('a')[0];
  71. /** Failures text and count */
  72. const failuresStat = items[failuresIndex];
  73. /** Stat item containing the failure count (not the word, just the number) */
  74. const failuresCount = failuresStat.getElementsByTagName('em')[0];
  75. /** Stat item linking to filter to show only failing tests */
  76. const failuresLink = failuresStat.getElementsByTagName('a')[0];
  77. /** Stat item linking to the duration time (not the word or unit, just the number) */
  78. var duration = items[durationIndex].getElementsByTagName('em')[0];
  79. var report = fragment('<ul id="mocha-report"></ul>');
  80. var stack = [report];
  81. var progressText = items[progressIndex].getElementsByTagName('div')[0];
  82. var progressBar = items[progressIndex].getElementsByTagName('progress')[0];
  83. var progressRing = [
  84. items[progressIndex].getElementsByClassName('ring-flatlight')[0],
  85. items[progressIndex].getElementsByClassName('ring-highlight')[0]
  86. ];
  87. var root = document.getElementById('mocha');
  88. if (!root) {
  89. return error('#mocha div missing, add it to your document');
  90. }
  91. // pass toggle
  92. on(passesLink, 'click', function (evt) {
  93. evt.preventDefault();
  94. unhide();
  95. var name = /pass/.test(report.className) ? '' : ' pass';
  96. report.className = report.className.replace(/fail|pass/g, '') + name;
  97. if (report.className.trim()) {
  98. hideSuitesWithout('test pass');
  99. }
  100. });
  101. // failure toggle
  102. on(failuresLink, 'click', function (evt) {
  103. evt.preventDefault();
  104. unhide();
  105. var name = /fail/.test(report.className) ? '' : ' fail';
  106. report.className = report.className.replace(/fail|pass/g, '') + name;
  107. if (report.className.trim()) {
  108. hideSuitesWithout('test fail');
  109. }
  110. });
  111. root.appendChild(stat);
  112. root.appendChild(report);
  113. runner.on(EVENT_SUITE_BEGIN, function (suite) {
  114. if (suite.root) {
  115. return;
  116. }
  117. // suite
  118. var url = self.suiteURL(suite);
  119. var el = fragment(
  120. '<li class="suite"><h1><a href="%s">%s</a></h1></li>',
  121. url,
  122. escape(suite.title)
  123. );
  124. // container
  125. stack[0].appendChild(el);
  126. stack.unshift(document.createElement('ul'));
  127. el.appendChild(stack[0]);
  128. });
  129. runner.on(EVENT_SUITE_END, function (suite) {
  130. if (suite.root) {
  131. if (stats.failures === 0) {
  132. text(resultIndicator, '✓');
  133. stat.className += ' pass';
  134. }
  135. updateStats();
  136. return;
  137. }
  138. stack.shift();
  139. });
  140. runner.on(EVENT_TEST_PASS, function (test) {
  141. var url = self.testURL(test);
  142. var markup =
  143. '<li class="test pass %e"><h2>%e<span class="duration">%ems</span> ' +
  144. '<a href="%s" class="replay">' +
  145. playIcon +
  146. '</a></h2></li>';
  147. var el = fragment(markup, test.speed, test.title, test.duration, url);
  148. self.addCodeToggle(el, test.body);
  149. appendToStack(el);
  150. updateStats();
  151. });
  152. runner.on(EVENT_TEST_FAIL, function (test) {
  153. // Update stat items
  154. text(resultIndicator, '✖');
  155. stat.className += ' fail';
  156. var el = fragment(
  157. '<li class="test fail"><h2>%e <a href="%e" class="replay">' +
  158. playIcon +
  159. '</a></h2></li>',
  160. test.title,
  161. self.testURL(test)
  162. );
  163. var stackString; // Note: Includes leading newline
  164. var message = test.err.toString();
  165. // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
  166. // check for the result of the stringifying.
  167. if (message === '[object Error]') {
  168. message = test.err.message;
  169. }
  170. if (test.err.stack) {
  171. var indexOfMessage = test.err.stack.indexOf(test.err.message);
  172. if (indexOfMessage === -1) {
  173. stackString = test.err.stack;
  174. } else {
  175. stackString = test.err.stack.slice(
  176. test.err.message.length + indexOfMessage
  177. );
  178. }
  179. } else if (test.err.sourceURL && test.err.line !== undefined) {
  180. // Safari doesn't give you a stack. Let's at least provide a source line.
  181. stackString = '\n(' + test.err.sourceURL + ':' + test.err.line + ')';
  182. }
  183. stackString = stackString || '';
  184. if (test.err.htmlMessage && stackString) {
  185. el.appendChild(
  186. fragment(
  187. '<div class="html-error">%s\n<pre class="error">%e</pre></div>',
  188. test.err.htmlMessage,
  189. stackString
  190. )
  191. );
  192. } else if (test.err.htmlMessage) {
  193. el.appendChild(
  194. fragment('<div class="html-error">%s</div>', test.err.htmlMessage)
  195. );
  196. } else {
  197. el.appendChild(
  198. fragment('<pre class="error">%e%e</pre>', message, stackString)
  199. );
  200. }
  201. self.addCodeToggle(el, test.body);
  202. appendToStack(el);
  203. updateStats();
  204. });
  205. runner.on(EVENT_TEST_PENDING, function (test) {
  206. var el = fragment(
  207. '<li class="test pass pending"><h2>%e</h2></li>',
  208. test.title
  209. );
  210. appendToStack(el);
  211. updateStats();
  212. });
  213. function appendToStack(el) {
  214. // Don't call .appendChild if #mocha-report was already .shift()'ed off the stack.
  215. if (stack[0]) {
  216. stack[0].appendChild(el);
  217. }
  218. }
  219. function updateStats() {
  220. var percent = ((stats.tests / runner.total) * 100) | 0;
  221. progressBar.value = percent;
  222. if (progressText) {
  223. // setting a toFixed that is too low, makes small changes to progress not shown
  224. // setting it too high, makes the progress text longer then it needs to
  225. // to address this, calculate the toFixed based on the magnitude of total
  226. var decimalPlaces = Math.ceil(Math.log10(runner.total / 100));
  227. text(
  228. progressText,
  229. percent.toFixed(Math.min(Math.max(decimalPlaces, 0), 100)) + '%'
  230. );
  231. }
  232. if (progressRing) {
  233. var radius = parseFloat(getComputedStyle(progressRing[0]).getPropertyValue('r'));
  234. var wholeArc = Math.PI * 2 * radius;
  235. var highlightArc = percent * (wholeArc / 100);
  236. // The progress ring is in 2 parts, the flatlight color and highlight color.
  237. // Rendering both on top of the other, seems to make a 3rd color on the edges.
  238. // To create 1 whole ring with 2 colors, both parts are inverse of the other.
  239. progressRing[0].style['stroke-dasharray'] = `0,${highlightArc}px,${wholeArc}px`;
  240. progressRing[1].style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`;
  241. }
  242. // update stats
  243. var ms = new Date() - stats.start;
  244. text(passesCount, stats.passes);
  245. text(failuresCount, stats.failures);
  246. text(duration, (ms / 1000).toFixed(2));
  247. }
  248. }
  249. /**
  250. * Makes a URL, preserving querystring ("search") parameters.
  251. *
  252. * @param {string} s
  253. * @return {string} A new URL.
  254. */
  255. function makeUrl(s) {
  256. var search = window.location.search;
  257. // Remove previous {grep, fgrep, invert} query parameters if present
  258. if (search) {
  259. search = search.replace(/[?&](?:f?grep|invert)=[^&\s]*/g, '').replace(/^&/, '?');
  260. }
  261. return (
  262. window.location.pathname +
  263. (search ? search + '&' : '?') +
  264. 'grep=' +
  265. encodeURIComponent(s)
  266. );
  267. }
  268. /**
  269. * Provide suite URL.
  270. *
  271. * @param {Object} [suite]
  272. */
  273. HTML.prototype.suiteURL = function (suite) {
  274. return makeUrl('^' + escapeRe(suite.fullTitle()) + ' ');
  275. };
  276. /**
  277. * Provide test URL.
  278. *
  279. * @param {Object} [test]
  280. */
  281. HTML.prototype.testURL = function (test) {
  282. return makeUrl('^' + escapeRe(test.fullTitle()) + '$');
  283. };
  284. /**
  285. * Adds code toggle functionality for the provided test's list element.
  286. *
  287. * @param {HTMLLIElement} el
  288. * @param {string} contents
  289. */
  290. HTML.prototype.addCodeToggle = function (el, contents) {
  291. var h2 = el.getElementsByTagName('h2')[0];
  292. on(h2, 'click', function () {
  293. pre.style.display = pre.style.display === 'none' ? 'block' : 'none';
  294. });
  295. var pre = fragment('<pre><code>%e</code></pre>', utils.clean(contents));
  296. el.appendChild(pre);
  297. pre.style.display = 'none';
  298. };
  299. /**
  300. * Display error `msg`.
  301. *
  302. * @param {string} msg
  303. */
  304. function error(msg) {
  305. document.body.appendChild(fragment('<div id="mocha-error">%s</div>', msg));
  306. }
  307. /**
  308. * Return a DOM fragment from `html`.
  309. *
  310. * @param {string} html
  311. */
  312. function fragment(html) {
  313. var args = arguments;
  314. var div = document.createElement('div');
  315. var i = 1;
  316. div.innerHTML = html.replace(/%([se])/g, function (_, type) {
  317. switch (type) {
  318. case 's':
  319. return String(args[i++]);
  320. case 'e':
  321. return escape(args[i++]);
  322. // no default
  323. }
  324. });
  325. return div.firstChild;
  326. }
  327. /**
  328. * Check for suites that do not have elements
  329. * with `classname`, and hide them.
  330. *
  331. * @param {text} classname
  332. */
  333. function hideSuitesWithout(classname) {
  334. var suites = document.getElementsByClassName('suite');
  335. for (var i = 0; i < suites.length; i++) {
  336. var els = suites[i].getElementsByClassName(classname);
  337. if (!els.length) {
  338. suites[i].className += ' hidden';
  339. }
  340. }
  341. }
  342. /**
  343. * Unhide .hidden suites.
  344. */
  345. function unhide() {
  346. var els = document.getElementsByClassName('suite hidden');
  347. while (els.length > 0) {
  348. els[0].className = els[0].className.replace('suite hidden', 'suite');
  349. }
  350. }
  351. /**
  352. * Set an element's text contents.
  353. *
  354. * @param {HTMLElement} el
  355. * @param {string} contents
  356. */
  357. function text(el, contents) {
  358. if (el.textContent) {
  359. el.textContent = contents;
  360. } else {
  361. el.innerText = contents;
  362. }
  363. }
  364. /**
  365. * Listen on `event` with callback `fn`.
  366. */
  367. function on(el, event, fn) {
  368. if (el.addEventListener) {
  369. el.addEventListener(event, fn, false);
  370. } else {
  371. el.attachEvent('on' + event, fn);
  372. }
  373. }
  374. HTML.browserOnly = true;