Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
webpack-jasmine-html-runner-plugin
Advanced tools
Readme
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.
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
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).
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: []
)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
)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' ]
)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 using expect( 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.
FAQs
Use webpack with interactive browser testing
The npm package webpack-jasmine-html-runner-plugin receives a total of 1,173 weekly downloads. As such, webpack-jasmine-html-runner-plugin popularity was classified as popular.
We found that webpack-jasmine-html-runner-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.