gabel/karma-webpack-example

Karma + Webpack + Mocha + Chai + Istanbul

karma-webpack-example

Karma + Webpack + Mocha + Chai + Istanbul

Hint: This example still shows a valid approach but getting outdated. Please have a look at https://jestjs.io/ a testing framework including istanbul coverage reporter.

Installation

npm install

Run

npm test

Use npm test -- --no-single-run to keep karma running. It will watch any changes on the test files and rerun instantly.

Output

$ npm test

> [email protected] test /Users/d060690/karma-webpack-example
> node ./node_modules/karma/bin/karma start --single-run --browsers PhantomJS

# ...

03 02 2017 08:31:17.038:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
03 02 2017 08:31:17.044:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 02 2017 08:31:17.067:INFO [launcher]: Starting browser PhantomJS
03 02 2017 08:31:18.045:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket yME3wmuxdm0t5GHIAAAA with id 92073047

  hexColorLuminance
    ✓ should return a luminanced color
    ✓ should change the background of an element

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 2 of 2 SUCCESS (0.02 secs / 0.002 secs)
TOTAL: 2 SUCCESS


-----------------------|----------|----------|----------|----------|----------------|
File                   |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
-----------------------|----------|----------|----------|----------|----------------|
 Example/              |    83.33 |       50 |      100 |    83.33 |                |
  hexColorLuminance.js |    83.33 |       50 |      100 |    83.33 |       10,14,17 |
-----------------------|----------|----------|----------|----------|----------------|
All files              |    83.33 |       50 |      100 |    83.33 |                |
-----------------------|----------|----------|----------|----------|----------------|


=============================== Coverage summary ===============================
Statements   : 83.33% ( 15/18 )
Branches     : 50% ( 5/10 )
Functions    : 100% ( 3/3 )
Lines        : 83.33% ( 15/18 )
================================================================================

Gulp

added usage in a gulp scenario

try it via "npm run test-gulp" or simply "gulp" in the projects directory if you have gulp installed globally

Istanbul Coverage

karma-webpack-example's Issues

ES6 Sources

How would you update this to use ES6 sources? The coverage stuff works (thanks), but all of my coverage reports are on the transpiled sources.

Any advice you could give would be amazing!

Webpack?!

I don't see webpack anywhere in the project except for the package.json file. Are you not using it at all or am I missing some secret way of doing webpack? I ask because it is the second time I hit upon a github project that is supposed to be an example of js testing with webpack that doesn't have a shred of webpack related code in it..

should --save-dev karma

istanbul needs karma >0.9