Client-side JS code coverage using PhantomJS, Mocha and Blanket
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
examples
lib
.editorconfig init Nov 30, 2013
.eslintrc
.gitignore
.jscs.json
.travis.yml
LICENSE
Makefile bump Dec 1, 2013
README.md
index.js
package.json 0.1.1 Dec 1, 2013

README.md

Poncho

Build Status NPM version Dependency Status license MIT

Client-side JS code coverage using PhantomJS, Mocha and Blanket.

Install

$ npm i --save-dev poncho
Usage: poncho [options] <file>

Options:

  -h, --help             output usage information
  -V, --version          output the version number
  -R, --reporter [type]  reporter: plain (default) | lcov | json

Usage

Let's imagine that you already have Mocha client-side tests, something like this:

<!DOCTYPE html>

<head>
    <meta charset="utf-8"/>
    <title>Mocha Test</title>
    <link rel="stylesheet" href="mocha/mocha.css"/>
</head>

<body>
    <div id="mocha"></div>

    <!-- mocha -->
    <script src="mocha/mocha.js"></script>
    <script>mocha.setup('bdd');</script>

    <!-- target script -->
    <script src="script.js"></script>
    <!-- test file -->
    <script src="test.js"></script>

    <!-- run -->
    <script>mocha.run();</script>
</body>

All you need to do is add data-cover attribute to the target script tag:

<script src="script.js" data-cover></script>

…and run Poncho:

$ poncho test.html

Send data to coveralls.io

Install node-coveralls:

$ npm i --save-dev coveralls

…and pipe Poncho's lcov reporter to it:

$ poncho --reporter lcov test.html | coveralls

How it works?

You don't want to know. Seriosly. It's so hacky way that it can cause the blood from your eyes.