@cumulusds/flow-coverage-report

Generate an HTML report of the flow coverage data


Keywords
flowtype, flow, coverage, report, generator
License
MIT
Install
npm install @cumulusds/flow-coverage-report@0.0.3

Documentation

flow-coverage-report

Greenkeeper badge

Build Status

flow-coverage-report is a node command line tool to help projects which are using flow types in their JavaScript code to keep track and visualize the coverage of the flow types checks.

Screenshot flow coverage report summary in the console

Screenshot flow coverage report summary

Screenshot flow coverage report sourcefile

How to generate flow coverage reports for your project

Install the command line tool (globally or as a dev dependency of your project)

$ npm install -g @cumulusds/flow-coverage-report

or

$ npm install --save-dev @cumulusds/flow-coverage-report

If you use yarn instead of npm:

$ yarn global add @cumulusds/flow-coverage-report

or

$ yarn add --dev @cumulusds/flow-coverage-report

Run the flow reporter (-i configures the include globs, -x the exclude patterns, --threshold to configure a minimum coverage below which the build should fail, which defaults to 80%, and -t the report types enabled):

flow-coverage-report -i 'src/**/*.js' -i 'src/**/*.jsx' -x 'src/test/**' -t html -t json -t text --threshold 90

If the flow executable is not in your PATH, you can specified it using the -f option:

flow-coverage-report -f /path/to/flow ...

To customize the output dir (which defaults to flow-coverage/). you can use the -o option:

flow-coverage-report -o my-custom-flow-coverage-dir/

Load default options from a JSON config file

The --config flag allows specifying a path to a config file. The config file is a JSON file with the following structure:

{
  "concurrentFiles": 1,
  "excludeGlob": [
    "node_modules/**"
  ],
  "flowCommandPath": "path/to/flow/bin",
  "includeGlob": [
    "src/**/*.js"
  ],
  "outputDir": "path/to/output",
  "projectDir": "path/to/project",
  "threshold": 90,
  "type": "text"
}

type can be one of "text", "html", or "json". The default is "text".

Load default options from package.json

For an npm package, the default options can also be configured by including them in a "flow-coverage-report" package.json property property:

{
  "name": "my-npm-package",
  "version": "1.0.1",
  "scripts": {
    "flow-coverage": "flow-coverage-report",
    ...
  },
  ...
  "flow-coverage-report": {
    "includeGlob": [
      "src/lib/**/*.js",
      "src/lib/**/*.jsx"
    ],
    "type": [
      "text",
      "html",
      "json"
    ]
  }
}

Background

As a gradual typing system for JavaScript, flow will help you to statically checks parts of your JavaScript code by:

  • supporting syntaxes to annotate your code with types;
  • supporting syntaxes to declare, export and import new types implicitly and explicitly;
  • inferencing the type of the identifier used in your code as much as possible;

Unfortunately, even with a good amount of powerful inferencing strategies, sometimes flow is not able to inference the types in some chunks of our code.

That's usually the source of a "Meh!" moment, and we blame flow for not being able to catch some issue that we thought it would catch statically.

Fortunately, flow has a coverage command which can give us a quantitative info of the flow types coverage, and optionally a color-based visualization of the parts of the source file that are not covered, for a single file.

How to generate this quantitative info and this very useful visualization of the uncoverage parts of our sources for our entire project?

You have just found it ;-)

Changelog

0.0.1

Update yargs to version 14.0.0 because of memory leak WS-2018-0236 in dependency mem. Publish cumulusds fork, since the author rpl is unresponsive.