'use strict';

/* eslint-env browser */ /**

* @module HTML
*/

/**

* Module dependencies.
*/

var Base = require('./base'); var utils = require('../utils'); var Progress = require('../browser/progress'); var escapeRe = require('escape-string-regexp'); var constants = require('../runner').constants; var EVENT_TEST_PASS = constants.EVENT_TEST_PASS; var EVENT_TEST_FAIL = constants.EVENT_TEST_FAIL; var EVENT_SUITE_BEGIN = constants.EVENT_SUITE_BEGIN; var EVENT_SUITE_END = constants.EVENT_SUITE_END; var EVENT_TEST_PENDING = constants.EVENT_TEST_PENDING; var escape = utils.escape;

/**

* Save timer references to avoid Sinon interfering (see GH-237).
*/

var Date = global.Date;

/**

* Expose `HTML`.
*/

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="javascript:void(0);">passes:</a> <em>0</em></li>' +
'<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
'<li class="duration">duration: <em>0</em>s</li>' +
'</ul>';

var playIcon = '&#x2023;';

/**

* Constructs a new `HTML` reporter instance.
*
* @public
* @class
* @memberof Mocha.reporters
* @extends Mocha.reporters.Base
* @param {Runner} runner - Instance triggers reporter actions.
* @param {Object} [options] - runner options
*/

function HTML(runner, options) {

Base.call(this, runner, options);

var self = this;
var stats = this.stats;
var stat = fragment(statsTemplate);
var items = stat.getElementsByTagName('li');
var passes = items[1].getElementsByTagName('em')[0];
var passesLink = items[1].getElementsByTagName('a')[0];
var failures = items[2].getElementsByTagName('em')[0];
var failuresLink = items[2].getElementsByTagName('a')[0];
var duration = items[3].getElementsByTagName('em')[0];
var canvas = stat.getElementsByTagName('canvas')[0];
var report = fragment('<ul id="mocha-report"></ul>');
var stack = [report];
var progress;
var ctx;
var 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(evt) {
  evt.preventDefault();
  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(evt) {
  evt.preventDefault();
  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(EVENT_SUITE_BEGIN, function(suite) {
  if (suite.root) {
    return;
  }

  // suite
  var url = self.suiteURL(suite);
  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(EVENT_SUITE_END, function(suite) {
  if (suite.root) {
    updateStats();
    return;
  }
  stack.shift();
});

runner.on(EVENT_TEST_PASS, function(test) {
  var url = self.testURL(test);
  var markup =
    '<li class="test pass %e"><h2>%e<span class="duration">%ems</span> ' +
    '<a href="%s" class="replay">' +
    playIcon +
    '</a></h2></li>';
  var el = fragment(markup, test.speed, test.title, test.duration, url);
  self.addCodeToggle(el, test.body);
  appendToStack(el);
  updateStats();
});

runner.on(EVENT_TEST_FAIL, function(test) {
  var el = fragment(
    '<li class="test fail"><h2>%e <a href="%e" class="replay">' +
      playIcon +
      '</a></h2></li>',
    test.title,
    self.testURL(test)
  );
  var stackString; // Note: Includes leading newline
  var message = test.err.toString();

  // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
  // check for the result of the stringifying.
  if (message === '[object Error]') {
    message = test.err.message;
  }

  if (test.err.stack) {
    var indexOfMessage = test.err.stack.indexOf(test.err.message);
    if (indexOfMessage === -1) {
      stackString = test.err.stack;
    } else {
      stackString = test.err.stack.substr(
        test.err.message.length + indexOfMessage
      );
    }
  } else if (test.err.sourceURL && test.err.line !== undefined) {
    // Safari doesn't give you a stack. Let's at least provide a source line.
    stackString = '\n(' + test.err.sourceURL + ':' + test.err.line + ')';
  }

  stackString = stackString || '';

  if (test.err.htmlMessage && stackString) {
    el.appendChild(
      fragment(
        '<div class="html-error">%s\n<pre class="error">%e</pre></div>',
        test.err.htmlMessage,
        stackString
      )
    );
  } else if (test.err.htmlMessage) {
    el.appendChild(
      fragment('<div class="html-error">%s</div>', test.err.htmlMessage)
    );
  } else {
    el.appendChild(
      fragment('<pre class="error">%e%e</pre>', message, stackString)
    );
  }

  self.addCodeToggle(el, test.body);
  appendToStack(el);
  updateStats();
});

runner.on(EVENT_TEST_PENDING, function(test) {
  var el = fragment(
    '<li class="test pass pending"><h2>%e</h2></li>',
    test.title
  );
  appendToStack(el);
  updateStats();
});

function appendToStack(el) {
  // Don't call .appendChild if #mocha-report was already .shift()'ed off the stack.
  if (stack[0]) {
    stack[0].appendChild(el);
  }
}

function updateStats() {
  // TODO: add to stats
  var percent = ((stats.tests / runner.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));
}

}

/**

* Makes a URL, preserving querystring ("search") parameters.
*
* @param {string} s
* @return {string} A new URL.
*/

function makeUrl(s) {

var search = window.location.search;

// Remove previous grep query parameter if present
if (search) {
  search = search.replace(/[?&]grep=[^&\s]*/g, '').replace(/^&/, '?');
}

return (
  window.location.pathname +
  (search ? search + '&' : '?') +
  'grep=' +
  encodeURIComponent(escapeRe(s))
);

}

/**

* Provide suite URL.
*
* @param {Object} [suite]
*/

HTML.prototype.suiteURL = function(suite) {

return makeUrl(suite.fullTitle());

};

/**

* Provide test URL.
*
* @param {Object} [test]
*/

HTML.prototype.testURL = function(test) {

return makeUrl(test.fullTitle());

};

/**

* Adds code toggle functionality for the provided test's list element.
*
* @param {HTMLLIElement} el
* @param {string} contents
*/

HTML.prototype.addCodeToggle = function(el, contents) {

var h2 = el.getElementsByTagName('h2')[0];

on(h2, 'click', function() {
  pre.style.display = pre.style.display === 'none' ? 'block' : 'none';
});

var pre = fragment('<pre><code>%e</code></pre>', utils.clean(contents));
el.appendChild(pre);
pre.style.display = 'none';

};

/**

* Display error `msg`.
*
* @param {string} msg
*/

function error(msg) {

document.body.appendChild(fragment('<div id="mocha-error">%s</div>', msg));

}

/**

* Return a DOM fragment from `html`.
*
* @param {string} html
*/

function fragment(html) {

var args = arguments;
var div = document.createElement('div');
var i = 1;

div.innerHTML = html.replace(/%([se])/g, function(_, type) {
  switch (type) {
    case 's':
      return String(args[i++]);
    case 'e':
      return escape(args[i++]);
    // no default
  }
});

return div.firstChild;

}

/**

* Check for suites that do not have elements
* with `classname`, and hide them.
*
* @param {text} classname
*/

function hideSuitesWithout(classname) {

var suites = document.getElementsByClassName('suite');
for (var i = 0; i < suites.length; i++) {
  var els = suites[i].getElementsByClassName(classname);
  if (!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 an element's text contents.
*
* @param {HTMLElement} el
* @param {string} contents
*/

function text(el, contents) {

if (el.textContent) {
  el.textContent = contents;
} else {
  el.innerText = contents;
}

}

/**

* 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);
}

}

HTML.browserOnly = true;