olavoparno/jest-badges-readme

View on GitHub
README.md

Summary

Maintainability
Test Coverage
# Deprecated

## Please use [istanbul-badges-readme](https://www.npmjs.com/package/istanbul-badges-readme) instead.
## The usage has not changed at all, it has only been made simpler and **hopefully** bug free.


<img align="right" width="200" src="https://github.com/olavoparno/olavoparno.github.io/raw/master/images/jest-badges-readme-logo4.png" />

# [Jest Badges Readme](https://www.npmjs.com/package/@olavoparno/jest-badges-readme)

[![CodeClimate](https://img.shields.io/codeclimate/maintainability/olavoparno/jest-badges-readme.svg)](https://codeclimate.com/github/olavoparno/jest-badges-readme) [![DevDeps](https://david-dm.org/olavoparno/jest-badges-readme/dev-status.svg)](https://david-dm.org/olavoparno/jest-badges-readme/dev-status.svg) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/olavoparno/jest-badges-readme/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@olavoparno/jest-badges-readme.svg?style=flat)](https://www.npmjs.com/package/@olavoparno/jest-badges-readme) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/olavoparno/jest-badges-readme/pulls) ![BuiltBy](https://img.shields.io/badge/TypeScript-Lovers-black.svg "img.shields.io") ![ForTheBadge](https://img.shields.io/badge/Using-Badges-red.svg "ForTheBadge")

### Creates Jest Coverage badges for your README.md file

| Statements | Branches | Functions | Lines | Build Status |
| -----------|----------|-----------|-------| ------------ |
| ![Statements](https://img.shields.io/badge/Coverage-96.89%25-brightgreen.svg "Make me better!") | ![Branches](https://img.shields.io/badge/Coverage-94.59%25-brightgreen.svg "Make me better!") | ![Functions](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg "Make me better!") | ![Lines](https://img.shields.io/badge/Coverage-96.89%25-brightgreen.svg "Make me better!") | ![BuildStatus](https://img.shields.io/badge/Build-Passing-brightgreen.svg "Building Status") |

### TL;DR

- To be short, all it does is: **Creates your README.md dynamically with your Jest Coverage Badges based on your README-template.md file**

### Installation

- Global Installation
  ```bash
    npm i -g @olavoparno/jest-badges-readme
  ```

- Local Installation
  ```bash
    npm i @olavoparno/jest-badges-readme --save-dev
  ```

### Configuration and requirements

  1. Have Jest installed and with its Coverage Reporting configuration as below
  
  - It may be set inside your Jest config within `package.json` or inside your jest config file i.e. `jest.config.js` or `jestconfig.json`

    ```js
      "coverageReporters": [
        "json-summary",
        "lcov"
      ]
    ```
  
  2. Have a _*README-template.md*_ file created with the following template (please do feel free to change its presentation structure, e.g. in a table or not)

  ```md
  | Statements | Branches | Functions | Lines |
  | -----------|----------|-----------|-------|
  | ![Statements](#statements# "Make me better!") | ![Branches](#branches# "Make me better!") | ![Functions](#functions# "Make me better!") | ![Lines](#lines# "Make me better!") |
  ```

  3. Call if from your terminal or from your NPM/YARN Scripts
 
  - For locally installed library

    ```json
      "make-badges": "node_modules/.bin/jest-badges-readme"
    ```

  - For globally installed library

    ```json
      "make-badges": "npm run jest-badges-readme"
    ```

  - You may also provide a different coverage folder path passed as arguments

    ```json
      "make-badges": "npm run jest-badges-readme --coverageDir='./my-custom-coverage-folder'"
    ```

  - And finally via the very terminal

    ```bash
      jest-badges-readme --coverageDir='./my-custom-coverage-folder'
    ```

### Short summary onto what Jest and Jest Badges Readme covers for us

  - % Stmts (which states for Statements)
  - % Branch (pretty self explanatory)
  - % Functions (won't repeat myself)
  - % Lines (last but not least)

#### This library will create badges URLs for these former 4 items into your _*README-template.md*_ if you followed the previous steps

  - Open up your _*README-template.md*_ and add 4 _*markers*_ inside it for each Jest coverage item respectively. These _*markers*_ must be as follows:

    1. '#statements#'
    2. '#branches#'
    3. '#functions#'
    4. '#lines#'

#### If you feel you might need a local building badge indicator, add these NPM scripts in order to manage your local building badge as well

  ```json
    "prebuild": "echo nok > .buildstatus",
    "postbuild": "echo ok > .buildstatus"
  ```

  - Add one more marker like the example below. This is going to create a file called _*.buildstatus*_ in your project's root telling this library if your build is either successful or a failure
    1. '#buildstatus#'
  
#### Example of _*README-template.md*_ with building status too

  ```md
  | Statements | Branches | Functions | Lines | Build Status |
  | -----------|----------|-----------|-------| ------------ |
  | ![Statements](#statements# "Make me better!") | ![Branches](#branches# "Make me better!") | ![Functions](#functions# "Make me better!") | ![Lines](#lines# "Make me better!") | ![BuildStatus](#buildstatus# "Building Status") |
  ```

### Using as a part of your githooks
  
  - If you want to have this run on the precommit hook and update the commit in place, just install husky and add the `precommit` script to your package.json

  1. Install Husky
   
  ```bash
    npm install --save-dev husky 
  ```

  2. Add your precommit script
    
  ```json
    "husky": {
      "hooks": {
        "pre-commit": "jest && node_modules/.bin/jest-badges-readme && git add 'README.md'"
      }
    }
  ```

  3. Git Commit and Push. Just use your workflow as usual. If your tests fail, no commit. If they pass, update the README.md and add the file to the commit. Nice!

### Contributing

The purpose of this library is to motivate developers to constantly write a solid documentation and testing. A complete and nice looking documentation is key to a successful development and code maintainability.
Please feel free to open any issues you might come up with and to submit your own PRs. There is not a contributing guide yet

### Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://olavoparno.github.io"><img src="https://avatars1.githubusercontent.com/u/7513162?v=4" width="70px;" alt=""/><br /><sub><b>Olavo Parno</b></sub></a><br /><a href="#ideas-olavoparno" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/olavoparno/jest-badges-readme/commits?author=olavoparno" title="Code">💻</a> <a href="https://github.com/olavoparno/jest-badges-readme/commits?author=olavoparno" title="Tests">⚠️</a></td>
    <td align="center"><a href="https://github.com/nothingismagick"><img src="https://avatars1.githubusercontent.com/u/35242872?v=4" width="70px;" alt=""/><br /><sub><b>nothingismagick</b></sub></a><br /><a href="#ideas-nothingismagick" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/olavoparno/jest-badges-readme/issues?q=author%3Anothingismagick" title="Bug reports">🐛</a> <a href="#content-nothingismagick" title="Content">🖋</a></td>
    <td align="center"><a href="http://www.fallenclient.co.uk"><img src="https://avatars2.githubusercontent.com/u/326470?v=4" width="70px;" alt=""/><br /><sub><b>Dave Fisher</b></sub></a><br /><a href="https://github.com/olavoparno/jest-badges-readme/issues?q=author%3Afallenclient" title="Bug reports">🐛</a></td>
    <td align="center"><a href="http://twitter.com/zaggino"><img src="https://avatars1.githubusercontent.com/u/1067319?v=4" width="70px;" alt=""/><br /><sub><b>Martin Zagora</b></sub></a><br /><a href="#ideas-zaggino" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/olavoparno/jest-badges-readme/issues?q=author%3Azaggino" title="Bug reports">🐛</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

### License

Jest Badges Readme is [MIT licensed](./LICENSE).

<div style="display: none; visibility: hidden; opacity: 0;">
  <img height=0 width=0 style="display: none; visibility: hidden; opacity: 0;" src="http://hits.dwyl.com/olavoparno/jest-badges-readme.svg" />
</div>