webpack-jasmine-html-runner-plugin
v0.9.0
Published
Use webpack with interactive browser testing
Downloads
3,687
Readme
webpack-jasmine-html-runner-plugin
interactive in-browser testing with webpack and Jasmine
This webpack plugin helps to use webpack and the webpack-dev-server for loading and running in-browser Jasmine 2 tests.
It generates an spec-runner.html
webpack entry for each of your JavaScript spec-files, specified by a pattern. It uses sourcemapped-stacktrace to fix stack traces in the Jasmine HTML reporter so that reported bundle locations (file, line, column) are replaced with their actual source location.
Installation
First make sure that webpack
and webpack-dev-server
are installed and configured for your project.
Make sure that Jasmine 2 is installed in your project, and that your spec-tests use the Jasmine APIs (describe
, beforeEach
, etc.) as global functions.
npm install --save-dev webpack-jasmine-html-runner-plugin
Usage
Create a webpack configuration for your tests, e.g. webpack.spec.config.js
:
const webpack = require( 'webpack' );
const WebpackJasmineHtmlRunnerPlugin = require(
'webpack-jasmine-html-runner-plugin'
);
// Alternatively, `require` your base `webpack.config.js`
// to add your custom loaders, modules, etc.
const config = {};
// In this example, your spec-runners are named
// e.g. 'lib/some-module/spec/spec-runner.js'.
// Pass more string arguments to process additional files.
config.entry = WebpackJasmineHtmlRunnerPlugin.entry(
'./lib/**/spec/spec-runner.js'
);
config.output = {
path: './spec-output',
publicPath: '/spec-output/',
filename: '[name].bundle.js'
};
config.plugins = [
new webpack.SourceMapDevToolPlugin( {
filename: '[name].bundle.js.map'
} ),
new WebpackJasmineHtmlRunnerPlugin( {
fixupScripts: []
} )
];
module.exports = config;
Now, run webpack and the webpack-dev-server:
webpack --config webpack.spec.config.js
webpack-dev-server --inline --config webpack.spec.config.js
You may skip the first step (running webpack
), but doing so allows you to conveniently browse through a file listing in your web browser, in order to navigate to your spec-tests.
When the webpack dev server has finished setting up, you can visit your spec-tests under localhost:8080/webpack-dev-server/spec-output/ (append lib/some-module/spec/spec-runner.html
to view the test for some-module
from above).
Options
There are some options to customize the behavior of the plugins. You can pass them as an object argument to the plugin constructor.
includePaths
(default: []
)
Loading user-defined additional scripts
Let's assume that your project or its tests need additional polyfills or framework scripts to be loaded.
You could try to shoehorn those scripts into the webpack entry points generated above, but the WebpackJasmineHtmlRunnerPlugin
also provides the convenient option includePaths
for this:
Create a file containing your additional dependencies, e.g. polyfills.js
, and modify your configuration like this:
const config = require( /* see above */ );
config.entry = WebpackJasmineHtmlRunnerPlugin.entry( /* see above */ );
config.output = { /* see above */ };
// add a webpack entry to also generate the polyfills bundle
config.entry.polyfills = './polyfills.js';
config.plugins = [
new webpack.SourceMapDevToolPlugin( {
filename: '[name].bundle.js.map'
} ),
new WebpackJasmineHtmlRunnerPlugin( {
// add an include path to load the polyfills
includePaths: [ path.resolve( process.cwd(), 'spec-output/polyfills.bundle.js' ) ]
} )
];
module.exports = config;
pattern
(default: /.*\bspec\b.*/i
)
Filtering spec runners
When adding webpack entry points for polyfills and other script-loaded dependencies, you do not want to create HTML spec runners for them. HTML will only be generated for entry paths matching this pattern. If your tests follow a different naming conventions, you may need to change this.
fixupScripts
(default: [ 'fixup-stacktraces', 'fixup-json-messages' ]
)
Loading pre-bundled fixup scripts
To improve debugging convenience, the plugin comes with several fixup scripts that augment the Jasmine 2 HTML reporter.
They can be controlled using the option fixupScripts
, which takes an array of strings:
fixup-stacktraces
: uses sourcemapped-stacktrace to improve Jasmine stacktraces by looking them up against a source map (if available).fixup-json-messages
: improves formatting of Jasmine error reports when usingexpect( objectA ).toEqual( objectB )
. The builtin error messages are relatively hard to read. When using this script, the JSON objects are reformatted, and you can click on them to get a nice colored diff generated by jsondiffpatch.