template.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. const html = require('html-template-tag')
  2. const path = require('path')
  3. const { forceCovertToBrowserPath } = require('./utils')
  4. const webRoot = path.resolve(__dirname, '../../../../../');
  5. const mochaDir = forceCovertToBrowserPath(path.relative(webRoot, path.dirname(require.resolve('mocha'))))
  6. const chaiDir = forceCovertToBrowserPath(path.relative(webRoot, path.dirname(require.resolve('chai'))))
  7. const mochaTeamCityDir = forceCovertToBrowserPath(path.relative(webRoot, path.dirname(require.resolve('mocha-teamcity-reporter'))))
  8. /**
  9. * Generates HTML templates from list of test sheets
  10. */
  11. module.exports = (stylesheets, helpers, spec, less) => {
  12. if (!Array.isArray(helpers)) {
  13. helpers = [helpers]
  14. }
  15. return html`
  16. <!DOCTYPE html>
  17. <html lang="en">
  18. <head>
  19. <meta charset="utf-8">
  20. <title>Less.js Spec Runner</title>
  21. <!-- for each test, generate CSS/LESS link tags -->
  22. $${stylesheets.map(function(fullLessName) {
  23. var pathParts = fullLessName.split('/');
  24. var fullCssName = fullLessName
  25. .replace(/\/(browser|test-data)\/less\//g, '/$1/css/')
  26. .replace(/less$/, 'css')
  27. var lessName = pathParts[pathParts.length - 1];
  28. var name = lessName.split('.')[0];
  29. return `
  30. <!-- the tags to be generated -->
  31. <link id="original-less:test-less-${name}" title="test-less-${name}" rel="stylesheet/less" type="text/css" href="/${path.relative(webRoot, fullLessName)}">
  32. <link id="expected-less:test-less-${name}" rel="stylesheet" type="text/css" href="/${path.relative(webRoot, fullCssName)}">
  33. ` }).join('')}
  34. $${helpers.map(helper => `
  35. <script src="../../${helper}"></script>
  36. `).join('')}
  37. <link rel="stylesheet" href="/${mochaDir}/mocha.css">
  38. </head>
  39. <body>
  40. <!-- content -->
  41. <div id="mocha"></div>
  42. <script src="/${mochaDir}/mocha.js"></script>
  43. <script src="/${mochaTeamCityDir}/teamcityBrowser.js"></script>
  44. <script src="/${chaiDir}/chai.js"></script>
  45. <script>
  46. expect = chai.expect
  47. mocha.setup({
  48. ui: 'bdd',
  49. timeout: 2500
  50. });
  51. </script>
  52. <script src="common.js"></script>
  53. <script src="../../${spec}"></script>
  54. <script src="${less || 'less.min.js'}"></script>
  55. <script>
  56. /** Saucelabs config */
  57. onload = function() {
  58. var runner = mocha.run();
  59. var failedTests = [];
  60. runner.on('end', function() {
  61. window.mochaResults = runner.stats;
  62. window.mochaResults.reports = failedTests;
  63. });
  64. runner.on('fail', logFailure);
  65. function logFailure(test, err){
  66. var flattenTitles = function(test){
  67. var titles = [];
  68. while (test.parent.title) {
  69. titles.push(test.parent.title);
  70. test = test.parent;
  71. }
  72. return titles.reverse();
  73. };
  74. failedTests.push({name: test.title, result: false, message: err.message, stack: err.stack, titles: flattenTitles(test) });
  75. };
  76. };
  77. </script>
  78. </body>
  79. </html>
  80. `
  81. }