testem 3.20.2 → 3.21.1

package/README.md

@@ -1,7 +1,7 @@
 Got Scripts? Test’em!
 =================
 
-[![Build Status](https://github.com/testem/testem/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/testem/testem/actions/workflows/ci.yml?query=branch%3Amaster) [![npm version](https://badge.fury.io/js/testem.svg)](https://badge.fury.io/js/testem)
+[![Build Status](https://github.com/testem/testem/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/testem/testem/actions/workflows/ci.yml?query=branch%3Amain) [![npm version](https://badge.fury.io/js/testem.svg)](https://badge.fury.io/js/testem)
 
 Testem is a **JavaScript test runner** that runs your tests in **real desktop browsers**—Chrome, Firefox, Safari, Edge, and others you launch—so your specs execute in the same browser engines and DOM your users get, not a pretend environment. It also runs tests in **[Node](https://nodejs.org/)**, **Chrome** (including **headless** runs via `browser_args`, e.g. `--headless`), or any launcher you configure. It is **framework-agnostic** and aimed at **any kind of tests** you want to run: unit, integration, end-to-end style suites, or custom setups—you pick the style; Testem wires it to the browser or process.
 
@@ -33,7 +33,7 @@ Features
 
 Installation
 ------------
-Testem needs a supported **[Node.js](https://nodejs.org/)** runtime. The required range is defined in [`package.json`](package.json) under `engines` (currently **^20.19.0**, **^22.12.0**, or **>=24.0.0**).
+Testem needs a supported **[Node.js](https://nodejs.org/)** runtime. The required range is defined in [`package.json`](package.json) under `engines` (currently **^20.19.0**, **^22.12.0**, **^24.0.0**, or **>= 26.0.0**).
 
 **Recommended:** install Testem **both** as a **dev dependency** (so your project pins a version) **and** **globally** (so the `testem` command is always available on your `PATH`):
 
@@ -60,11 +60,11 @@ The simplest way to use Testem, in the TDD spirit, is to start in an empty direc
 
 You will see a terminal-based interface which looks like this
 
-![Initial interface](https://github.com/testem/testem/raw/master/images/initial.png)
+![Initial interface](https://github.com/testem/testem/raw/main/images/initial.png)
 
 Now open a **real browser** (the URL Testem prints is a normal page in Chrome, Firefox, Safari, etc.) and go to the specified URL. You should now see
 
-![Zero of zero](https://github.com/testem/testem/raw/master/images/zeros.png)
+![Zero of zero](https://github.com/testem/testem/raw/main/images/zeros.png)
 
 We see 0/0 for tests because at this point we haven't written any code. As we write them, Testem will pick up any `.js` files
 that were added, include them, and if there are tests, run them automatically. So let's first write `hello_spec.js` in the spirit of "test first" (written in Jasmine)
@@ -78,7 +78,7 @@ describe('hello', function(){
 ```
 Save that file and now you should see
 
-![Red](https://github.com/testem/testem/raw/master/images/red.png)
+![Red](https://github.com/testem/testem/raw/main/images/red.png)
 
 Testem should automatically pick up the new files you've added and also any changes that you make to them and rerun the tests. The test fails as we'd expect. Now we implement the spec like so in `hello.js`
 
@@ -90,7 +90,7 @@ function hello(){
 
 So you should now see
 
-![Green](https://github.com/testem/testem/raw/master/images/green.png)
+![Green](https://github.com/testem/testem/raw/main/images/green.png)
 
 ### Using the Text User Interface
 
@@ -143,7 +143,7 @@ To use Testem for continuous integration
 
     testem ci
 
-**GitHub Actions** is a common way to run Testem in CI: add a workflow job that runs `testem ci` (often with the **Headless Chrome** or **Chromium** launcher). This project’s own workflow is in [`.github/workflows/ci.yml`](https://github.com/testem/testem/blob/master/.github/workflows/ci.yml).
+**GitHub Actions** is a common way to run Testem in CI: add a workflow job that runs `testem ci` (often with the **Headless Chrome** or **Chromium** launcher). This project’s own workflow is in [`.github/workflows/ci.yml`](https://github.com/testem/testem/blob/main/.github/workflows/ci.yml).
 
 In CI mode, Testem runs your tests on all the browsers that are available on the system one after another.
 
@@ -178,9 +178,9 @@ When you run `testem ci` to run tests, it outputs the results in the [TAP](https
 
     # ok
 
-TAP is a human-readable and language-agnostic test result format. On **GitHub Actions**, a typical pattern is a step that runs `testem ci` and relies on the exit code to fail the job (see [`.github/workflows/ci.yml`](https://github.com/testem/testem/blob/master/.github/workflows/ci.yml) in this repository). For **Jenkins** and **TeamCity**, use TAP plugins:
+TAP is a human-readable and language-agnostic test result format. On **GitHub Actions**, a typical pattern is a step that runs `testem ci` and relies on the exit code to fail the job (see [`.github/workflows/ci.yml`](https://github.com/testem/testem/blob/main/.github/workflows/ci.yml) in this repository). For **Jenkins** and **TeamCity**, use TAP plugins:
 
-* [Jenkins TAP plugin](https://plugins.jenkins.io/tap/) - I've added [detailed instructions](https://github.com/testem/testem/blob/master/docs/use_with_jenkins.md) for setup with Jenkins.
+* [Jenkins TAP plugin](https://plugins.jenkins.io/tap/) - I've added [detailed instructions](https://github.com/testem/testem/blob/main/docs/use_with_jenkins.md) for setup with Jenkins.
 * [TeamCity TAP plugin](https://github.com/pavelsher/teamcity-tap-parser)
 
 ## TAP Options
@@ -278,7 +278,7 @@ This calls for the `testem.json` configuration file (you can also alternatively
 
 ```json
 {
-  "framework": "jasmine",
+  "framework": "jasmine2",
   "src_files": [
     "hello.js",
     "hello_spec.js"
@@ -286,6 +286,8 @@ This calls for the `testem.json` configuration file (you can also alternatively
 }
 ```
 
+The default `framework` is still `"jasmine"` (Jasmine 1.x). That default is **deprecated** and will be removed in the next version of Testem. New projects should use `"jasmine2"` with `jasmine-core` (see [Browser framework dependencies](#browser-framework-dependencies)).
+
 The `src_files` can also be unix glob patterns.
 
 ```json
@@ -312,6 +314,48 @@ You can also ignore certain files using `src_files_ignore`.
 
 Read [more details](docs/config_file.md) about the config options.
 
+Browser framework dependencies
+------------------------------
+
+Built-in `mocha`, `mocha+chai`, `qunit`, and `jasmine2` runners **prefer** files from `/node_modules/` in the project `cwd`. If those packages are not installed, Testem still loads the previous CDN URLs (Mocha 2.3.4, Chai 3.4.1, QUnit 1.20.0, Jasmine 2.4.1). Installing the packages is optional on this version and required in the next major version.
+
+| `framework` | Install for modern versions |
+|---|---|
+| `jasmine2` | `jasmine-core` |
+| `qunit` | `qunit` |
+| `mocha` | `mocha` |
+| `mocha+chai` | `mocha` and `chai` |
+
+Run `npm install` in the project directory. In a monorepo, or when `cwd` is not the install root, map the path with `routes`:
+
+```json
+{
+  "routes": {
+    "/node_modules": "../node_modules"
+  }
+}
+```
+
+The `mocha+chai` runner loads local Chai when Mocha is also local. Chai 4 uses the UMD build `chai/chai.js` as a classic script. Chai 5+ (`"type": "module"`) is imported as an ES module, then your spec files load as classic scripts (`var expect = chai.expect` still works).
+
+`jasmine2` uses `jasmine-core` 5 `boot0.js`/`boot1.js` when those files are present, and `boot.js` for jasmine-core 3/4. Incomplete installs fall back to the CDN pin.
+
+### Jasmine 1.x deprecation
+
+`framework: "jasmine"` (the default) still runs Jasmine 1.3.1 from CDN. Testem logs a deprecation warning on the server, and the Jasmine 1 adapter logs a warning in the browser (including custom `test_page`s that still load Jasmine 1).
+
+**The next version of Testem will not support Jasmine 1.** Migrate with:
+
+```json
+{
+  "framework": "jasmine2"
+}
+```
+
+```bash
+npm install --save-dev jasmine-core
+```
+
 Custom Test Pages
 -----------------
 
@@ -330,7 +374,7 @@ Next, the test page you use needs to have the adapter code installed on them, as
 
 ### Include Snippet
 
-Include this snippet directly after your `jasmine.js`, `qunit.js` or `mocha.js` scripts to enable *Testem* with your test page.
+Include this snippet directly after your `jasmine.js`, `qunit.js` or `mocha.js` scripts to enable *Testem* with your test page. Prefer loading those frameworks from `/node_modules/...` (see [examples/qunit_lazy](examples/qunit_lazy) and [examples/vite](examples/vite)); CDN URLs still work.
 
 ```html
 <script src="/testem.js"></script>
@@ -340,9 +384,11 @@ Or if you are using require.js or another loader, just make sure you load `/test
 
 '/testem.js' here is dynamically generated to be used client-side and it should not be confused with server-side 'testem.js'.
 
-### Dynamic Substitution
+### Dynamic Substitution (deprecated)
 
-To enable dynamic substitutions within the JavaScript files in your custom test page, you must
+Naming `test_page` with a `.mustache` extension to interpolate `serve_files` / `css_files` is **deprecated** and will be removed in Testem 4. Prefer a static HTML page and include `<script src="/testem.js"></script>` as shown above.
+
+On Testem 3.x the old form still works:
 
 1. name your test page using `.mustache` as the extension
 2. use `{{#serve_files}}` to loop over the set of JavaScript files to be served, and then reference its `src` property to access their path (or `{{#css_files}}` for stylesheets)
@@ -357,6 +403,28 @@ Example:
     <link rel="stylesheet" href="{{src}}">
     {{/css_files}}
 
+To migrate, rename the page to `.html`, list the same scripts and styles as tags, and point `test_page` at that file. `serve_files` can stay in config for watching or compilation; it no longer needs to be injected.
+
+Before:
+
+```html
+{{#serve_files}}
+<script src="{{src}}"></script>
+{{/serve_files}}
+{{#css_files}}
+<link rel="stylesheet" href="{{src}}">
+{{/css_files}}
+```
+
+After, if config has `"serve_files": ["test-bundle.js"]` and `"css_files": ["app.css"]`:
+
+```html
+<script src="test-bundle.js"></script>
+<link rel="stylesheet" href="app.css">
+```
+
+Keep `/testem.js` and your test framework scripts in the same order as a normal custom page. If you interpolated other config keys (`{{port}}`, custom options), bake those values into the HTML or generate the page in `before_tests`.
+
 ### Multiple Test Pages
 
 You can also specify multiple test pages to run by passing an array to the `test_page` option.
@@ -443,6 +511,8 @@ When you run `testem`, it will auto-launch the mocha process based on the specif
 Processes with TAP Output
 -------------------------
 
+Node's built-in test runner emits TAP with `node --test --test-reporter=tap` plus `"protocol": "tap"`. See the [node:test example](examples/node_test).
+
 If your process outputs test results in [TAP](https://en.wikipedia.org/wiki/Test_Anything_Protocol) format, you can tell that to testem via the `protocol` property. For example
 
 ```javascript
@@ -454,8 +524,12 @@ If your process outputs test results in [TAP](https://en.wikipedia.org/wiki/Test
 }
 ```
 
+Vitest emits TAP with `--reporter=tap-flat` (use `vitest run`, not watch mode) plus `"protocol": "tap"`. See the [Vitest example](examples/vitest).
+
 When this is done, Testem will read in the process's stdout and parse it as TAP, and then display the test results in Testem's normal format. It will also hide the process's stdout output from the console log panel, although it will still display the stderr.
 
+Jest has no built-in TAP reporter, so the equivalent is a package such as [`jest-tap-reporter`](https://www.npmjs.com/package/jest-tap-reporter) plus `"protocol": "tap"`. See the [Jest example](examples/jest).
+
 Headless Chrome
 ---------------
 
@@ -538,7 +612,7 @@ Let's say you want to serve `tests.html` at the top level url `/tests.html`, all
 DIY: Use Any Test Framework
 ---------------------------
 
-If you want to use Testem with a test framework that's not supported out of the box, you can write your own custom test framework adapter. See [customAdapter.js](https://github.com/testem/testem/blob/master/examples/custom_adapter/customAdapter.js) for an example of how to write a custom adapter.
+If you want to use Testem with a test framework that's not supported out of the box, you can write your own custom test framework adapter. See [customAdapter.js](https://github.com/testem/testem/blob/main/examples/custom_adapter/customAdapter.js) for an example of how to write a custom adapter.
 
 Then, to use it, in your config file simply set
 
@@ -546,7 +620,7 @@ Then, to use it, in your config file simply set
 "framework": "custom"
 ```
 
-And then make sure you include the adapter code in your test suite and you are ready to go. See here for the [full example](https://github.com/testem/testem/tree/master/examples/custom_adapter).
+And then make sure you include the adapter code in your test suite and you are ready to go. See here for the [full example](https://github.com/testem/testem/tree/main/examples/custom_adapter).
 
 Native notifications
 --------------------------------
@@ -576,7 +650,7 @@ Simply add a `proxies` section to the `testem.json` configuration file.
 ```
 
 This functionality is implemented as a *transparent proxy*, hence a request to
-`http://localhost:7357/api/posts.json` will be proxied to `http://localhost:4200/api/posts.json` without removing the `/api` prefix. Setting the `secure` option to `false` as in the above `/xmlapi` configuration block will ignore TLS certificate validation and allow tests to successfully reach that URL even if testem was launched over HTTP. Other available options can be found here: https://github.com/http-party/node-http-proxy#options
+`http://localhost:7357/api/posts.json` will be proxied to `http://localhost:4200/api/posts.json` without removing the `/api` prefix. Setting the `secure` option to `false` as in the above `/xmlapi` configuration block will ignore TLS certificate validation and allow tests to successfully reach that URL even if testem was launched over HTTP. Other available options can be found here: https://github.com/unjs/httpxy#options
 
 To limit the functionality to only certain content types, use "onlyContentTypes".
 
@@ -585,16 +659,22 @@ Preprocessors (Babel, TypeScript, LESS, Sass, Browserify, CoffeeScript, etc)
 
 If you need to run a preprocessor (or indeed any shell command before the start of the tests) use the `before_tests` option, such as
 
-    "before_tests": "coffee -c *.coffee"
+    "before_tests": "coffee -c hello.coffee tests.coffee"
+
+On Windows, list files explicitly in string hooks like this—cmd.exe does not expand `*` for external programs (see [Available hooks](docs/config_file.md#available-hooks) and the [coffeescript example](examples/coffeescript)). Testem's own `src_files` / `watch_files` globs are expanded by Testem, not by the hook shell.
 
-or, with Babel (see the [Babel example](https://github.com/testem/testem/tree/master/examples/babel)):
+or, with Babel (see the [Babel example](https://github.com/testem/testem/tree/main/examples/babel)):
 
     "before_tests": "babel src --out-dir ."
 
-or, with a `tsconfig.json` that emits JavaScript next to your project (see the [TypeScript example](https://github.com/testem/testem/tree/master/examples/typescript)):
+or, with a `tsconfig.json` that emits JavaScript next to your project (see the [TypeScript example](https://github.com/testem/testem/tree/main/examples/typescript)):
 
     "before_tests": "tsc"
 
+or, with Webpack + React (see the [Webpack + React example](https://github.com/testem/testem/tree/main/examples/webpack_react)):
+
+    "before_tests": "npx webpack"
+
 And Testem will run it before each test run. Point **`src_files`** at the sources you want
 watched (see **File watching** under Development Mode above).
 
@@ -625,29 +705,34 @@ If you would prefer simply to clean up when Testem exits, you can use the `on_ex
 Example Projects
 ----------------
 
-I've created [examples](https://github.com/testem/testem/tree/master/examples/) for various setups
-
-* [Vite (middleware + plugin)](https://github.com/testem/testem/tree/master/examples/vite)
-* [Electron](https://github.com/testem/testem/tree/master/examples/electron)
-* [TypeScript Project](https://github.com/testem/testem/tree/master/examples/typescript)
-* [ESLint Example](https://github.com/testem/testem/tree/master/examples/eslint)
-* [Babel Project](https://github.com/testem/testem/tree/master/examples/babel)
-* [Simple QUnit project](https://github.com/testem/testem/tree/master/examples/qunit_simple)
-* [Simple Jasmine project](https://github.com/testem/testem/tree/master/examples/jasmine_simple)
-* [Jasmine 2](https://github.com/testem/testem/tree/master/examples/jasmine2)
-* [Custom Jasmine project](https://github.com/testem/testem/tree/master/examples/jasmine_custom)
-* [Simple Mocha Project](https://github.com/testem/testem/tree/master/examples/mocha_simple)
-* [Mocha + Chai](https://github.com/testem/testem/tree/master/examples/mocha_chai_simple)
-* [Hybrid Project](https://github.com/testem/testem/tree/master/examples/hybrid_simple) - Mocha tests running in both the browser and Node.
-* [Custom Test Framework](https://github.com/testem/testem/tree/master/examples/custom_adapter)
-* [Tape Example](https://github.com/testem/testem/tree/master/examples/tape_example)
-* [Browserify Project](https://github.com/testem/testem/tree/master/examples/browserify)
-* [JSHint Example](https://github.com/testem/testem/tree/master/examples/jshint)
-* [Coffeescript Project](https://github.com/testem/testem/tree/master/examples/coffeescript)
-* [Custom Jasmine project using Require.js](https://github.com/testem/testem/tree/master/examples/jasmine_requirejs)
-* [BrowserStack Integration](https://github.com/testem/testem/tree/master/examples/browserstack)
-* [SauceLabs Integration](https://github.com/testem/testem/tree/master/examples/saucelabs)
-* [Code Coverage with Istanbul](https://github.com/testem/testem/tree/master/examples/coverage_istanbul)
+I've created [examples](https://github.com/testem/testem/tree/main/examples/) for various setups
+
+* [Vite (middleware + plugin)](https://github.com/testem/testem/tree/main/examples/vite)
+* [Vitest](https://github.com/testem/testem/tree/main/examples/vitest) - Vitest via a TAP process launcher (`tap-flat`).
+* [Electron](https://github.com/testem/testem/tree/main/examples/electron)
+* [TypeScript Project](https://github.com/testem/testem/tree/main/examples/typescript)
+* [ESLint Example](https://github.com/testem/testem/tree/main/examples/eslint)
+* [Babel Project](https://github.com/testem/testem/tree/main/examples/babel)
+* [Simple QUnit project](https://github.com/testem/testem/tree/main/examples/qunit_simple)
+* [Simple Jasmine project](https://github.com/testem/testem/tree/main/examples/jasmine_simple)
+* [Jasmine 2](https://github.com/testem/testem/tree/main/examples/jasmine2)
+* [Custom Jasmine project](https://github.com/testem/testem/tree/main/examples/jasmine_custom)
+* [Simple Mocha Project](https://github.com/testem/testem/tree/main/examples/mocha_simple)
+* [Simple React](https://github.com/testem/testem/tree/main/examples/react_simple) - React 19 in a real browser via import maps, no bundler.
+* [Mocha + Chai](https://github.com/testem/testem/tree/main/examples/mocha_chai_simple)
+* [Hybrid Project](https://github.com/testem/testem/tree/main/examples/hybrid_simple) - Mocha tests running in both the browser and Node.
+* [Jest](https://github.com/testem/testem/tree/main/examples/jest) - Node Jest via a TAP process launcher (`jest-tap-reporter`).
+* [Custom Test Framework](https://github.com/testem/testem/tree/main/examples/custom_adapter)
+* [Tape Example](https://github.com/testem/testem/tree/main/examples/tape_example)
+* [Node.js test runner](https://github.com/testem/testem/tree/main/examples/node_test) - `node:test` via a TAP process launcher.
+* [Browserify Project](https://github.com/testem/testem/tree/main/examples/browserify)
+* [Webpack + React](https://github.com/testem/testem/tree/main/examples/webpack_react) - React Testing Library in a real browser via Webpack and Mocha.
+* [JSHint Example](https://github.com/testem/testem/tree/main/examples/jshint)
+* [Coffeescript Project](https://github.com/testem/testem/tree/main/examples/coffeescript)
+* [Custom Jasmine project using Require.js](https://github.com/testem/testem/tree/main/examples/jasmine_requirejs)
+* [BrowserStack Integration](https://github.com/testem/testem/tree/main/examples/browserstack)
+* [SauceLabs Integration](https://github.com/testem/testem/tree/main/examples/saucelabs)
+* [Code Coverage with Istanbul](https://github.com/testem/testem/tree/main/examples/coverage_istanbul)
 
 Historical Screencasts
 ----------------------
@@ -661,7 +746,7 @@ These YouTube screencasts are from around **2012** and may not match the current
 Contributing
 ------------
 
-If you want to [contribute to the project](https://github.com/testem/testem/blob/master/CONTRIBUTING.md), I am going to do my best to stay out of your way.
+If you want to [contribute to the project](https://github.com/testem/testem/blob/main/CONTRIBUTING.md), I am going to do my best to stay out of your way.
 
 Core Maintainer(s)
 ------------------

package/lib/api.js

@@ -25,7 +25,7 @@ const Server = require('./server');
   launch_in_dev:        [Array]   list of launchers to use for dev runs
   launch_in_ci:         [Array]   list of launchers to use for CI runs
   timeout:              [Number]  timeout for a browser
-  framework:            [String]  test framework to use
+  framework:            [String]  test framework to use (jasmine [deprecated Jasmine 1.x], jasmine2, qunit, mocha, mocha+chai, custom, tap)
   url:                  [String]  url server runs at (http://{host}:{port}/)
   src_files:            [Array]   list of files or file patterns to use
   src_files_ignore:     [Array]   list of files or file patterns to exclude from usage

package/lib/reporters/dot_reporter.js

@@ -1,7 +1,7 @@
 
 
+const { inspect } = require('util');
 const indent = require('../utils/strutils').indent;
-const printf = require('printf');
 const displayutils = require('../utils/displayutils');
 
 module.exports = class DotReporter {
@@ -78,20 +78,20 @@ module.exports = class DotReporter {
         return;
       }
 
-      printf(this.out, '%*d) [%s] %s\n', idx + 1, 3, data.launcher, result.name);
+      this.out.write(`${String(idx + 1).padStart(3)}) [${data.launcher}] ${result.name}\n`);
 
       if (error.message) {
-        printf(this.out, '     %s\n', error.message);
+        this.out.write(`     ${error.message}\n`);
       }
 
       if ('expected' in error && 'actual' in error) {
-        printf(this.out, '\n' +
-               '     expected: %s%O\n' +
-               '       actual: %O\n', (error.negative ? 'NOT ' : ''), error.expected, error.actual);
+        this.out.write('\n' +
+               `     expected: ${error.negative ? 'NOT ' : ''}${inspect(error.expected)}\n` +
+               `       actual: ${inspect(error.actual)}\n`);
       }
 
       if (error.stack) {
-        printf(this.out, '\n%s', indent(error.stack, 5));
+        this.out.write(`\n${indent(error.stack, 5)}`);
       }
 
       this.out.write('\n\n');

package/lib/runner_pages/custom.js

@@ -0,0 +1,18 @@
+const { scriptTags, styleTags } = require('./html');
+
+module.exports = function renderCustomRunner({
+  scripts, styles, footer_scripts
+}) {
+  return `<!doctype html>
+<html>
+<head>
+  <title>Test'em</title>
+  <script src="/testem.js"></script>
+  ${scriptTags(scripts)}
+  ${styleTags(styles)}
+</head>
+<body>
+</body>
+${scriptTags(footer_scripts)}
+</html>`;
+};

package/lib/runner_pages/directory.js

@@ -0,0 +1,12 @@
+const { escapeHtml } = require('./html');
+
+module.exports = function renderDirectoryListing({ files }) {
+  const items = (files || []).map(name => {
+    const safe = escapeHtml(name);
+    return `<li><a href="${safe}">${safe}</a></li>`;
+  }).join('');
+  return `<h1>Files In This Directory</h1>
+<ul>
+${items}
+</ul>`;
+};

package/lib/runner_pages/html.js

@@ -0,0 +1,45 @@
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function attrSuffix(attrs) {
+  return (attrs || []).map(attr => ` ${attr}`).join('');
+}
+
+function scriptTags(files) {
+  return (files || [])
+    .map(file => `<script src="${file.src}"${attrSuffix(file.attrs)}></script>`)
+    .join('');
+}
+
+function asHrefList(hrefs) {
+  if (hrefs === undefined || hrefs === null || hrefs === '') {
+    return [];
+  }
+  return Array.isArray(hrefs) ? hrefs : [hrefs];
+}
+
+function styleTags(hrefs) {
+  return asHrefList(hrefs)
+    .map(href => `<link rel="stylesheet" href="${escapeHtml(href)}">`)
+    .join('');
+}
+
+function loadScriptCalls(files) {
+  return (files || []).map(file => {
+    const extra = (file.attrs || []).map(attr => `, '${attr}'`).join('');
+    return `await loadScript('${file.src}'${extra});`;
+  }).join('\n');
+}
+
+module.exports = {
+  escapeHtml,
+  attrSuffix,
+  scriptTags,
+  styleTags,
+  loadScriptCalls
+};

package/lib/runner_pages/index.js

@@ -0,0 +1,19 @@
+const pages = {
+  jasmine: require('./jasmine'),
+  jasmine2: require('./jasmine2'),
+  qunit: require('./qunit'),
+  mocha: require('./mocha'),
+  'mocha+chai': require('./mocha_chai'),
+  custom: require('./custom'),
+  tap: require('./tap')
+};
+
+function renderRunner(framework, data) {
+  const render = pages[framework];
+  return render ? render(data) : null;
+}
+
+module.exports = {
+  renderRunner,
+  renderDirectoryListing: require('./directory')
+};

package/{views/jasminerunner.mustache → lib/runner_pages/jasmine.js}

@@ -1,4 +1,9 @@
-<!doctype html>
+const { scriptTags, styleTags } = require('./html');
+
+module.exports = function renderJasmineRunner({
+  scripts, styles, footer_scripts
+}) {
+  return `<!doctype html>
 <html>
 <head>
   <title>Test'em</title>
@@ -16,14 +21,15 @@
     })();
   </script>
 
-  {{#scripts}}<script src="{{{src}}}"{{#attrs}} {{&.}}{{/attrs}}></script>{{/scripts}}
+  ${scriptTags(scripts)}
 
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.css">
 
-  {{#styles}}<link rel="stylesheet" href="{{.}}">{{/styles}}
+  ${styleTags(styles)}
 </head>
 <body>
   <div id="jasmine_content"></div>
 </body>
-{{#footer_scripts}}<script src="{{{src}}}"{{#attrs}} {{&.}}{{/attrs}}></script>{{/footer_scripts}}
-</html>
+${scriptTags(footer_scripts)}
+</html>`;
+};

package/lib/runner_pages/jasmine2.js

@@ -0,0 +1,38 @@
+const { scriptTags, styleTags } = require('./html');
+
+module.exports = function renderJasmine2Runner({
+  jasmineJs,
+  jasmineHtml,
+  jasmineCss,
+  jasmineBoot,
+  jasmineCoreV5,
+  scripts,
+  styles,
+  footer_scripts
+}) {
+  const boot = jasmineCoreV5
+    ? `<script src="/node_modules/jasmine-core/lib/jasmine-core/boot0.js"></script>
+  <script src="/node_modules/jasmine-core/lib/jasmine-core/boot1.js"></script>`
+    : `<script src="${jasmineBoot || ''}"></script>`;
+
+  return `<!doctype html>
+<html>
+<head>
+  <title>Test'em</title>
+  <script src="${jasmineJs}"></script>
+  <script src="${jasmineHtml}"></script>
+  ${boot}
+  <script src="/testem.js"></script>
+
+  ${scriptTags(scripts)}
+
+  <link rel="stylesheet" href="${jasmineCss}">
+
+  ${styleTags(styles)}
+</head>
+<body>
+  <div id="jasmine_content"></div>
+</body>
+${scriptTags(footer_scripts)}
+</html>`;
+};

package/lib/runner_pages/mocha.js

@@ -0,0 +1,25 @@
+const { scriptTags, styleTags } = require('./html');
+
+module.exports = function renderMochaRunner({
+  mochaCss, mochaJs, scripts, styles, footer_scripts
+}) {
+  return `<!doctype html>
+<html>
+<head>
+<title>Test'em</title>
+<link rel="stylesheet" href="${mochaCss}">
+<script src="${mochaJs}"></script>
+<script src="/testem.js"></script>
+<script>mocha.setup('bdd')</script>
+${scriptTags(scripts)}
+${styleTags(styles)}
+</head>
+<body>
+<div id="mocha"></div>
+${scriptTags(footer_scripts)}
+<script>
+mocha.run()
+</script>
+</body>
+</html>`;
+};