npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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 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.