poncho

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

Usage no npm install needed!

<script type="module">
  import poncho from 'https://cdn.skypack.dev/poncho';
</script>

README

PhantomJS + Mocha + Blanket = Poncho

Build Status

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 PhantomJS + Mocha client-side tests (with mocha-phantomjs, for example), something like this test/test.html:

<!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>window.mochaPhantomJS ? mochaPhantomJS.run() : 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 --reporter num test/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/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.