Code Quality

Code Quality is a platform to track and visualize testing code coverage during the entire development cycle. So you can easily see all changes and trends.

Why tracking and visualizing your test coverage results?

• It allows seamless cooperation and transparency between Team members.
• Develop with the peace of mind that your code is covered.
• Track the progress of your project.
• Track all Branches in your project.
• Clearly see every commit and its essential data.
• Takes the pain out of tracking your code coverage.

Code Quality is an isomorphic app built using MongoDB, Express.js, React.js, Material-UI, Node.js and Socket.IO for real time updates.

Demo

Getting Started

Installation

Clone project.

$ git clone https://github.com/jmariomejiap/codeQuality.git

install dependencies.

$ npm install

If you want to running the App localy, Make sure you have mongo installed and running.

Deploy

---

Deploy CodeQuality to your PaaS of choice.

Example using Heroku.

1. Create your account.

2. Create new app.

• Under resources tab. add mLab MongoDB add on.

  • Go to settings and add a new env variable.
  • Copy the value under MONGODB_URI
  • Add a new key MONGO_URL and paste the copied value. (needed to connect mongo to CQ app)

• under deploy tab. follow instructions to deploy existing app to heroku.

Your app should be up and running.

How to create a project

To create a project, click on the menu button located at the top left corner to open up the drawer menu.

The key generated will be used as a token when you are configuring the CI for the project you wish to track its code coverage.

Configure your App to report and visualize its code coverage.

In order for the codeQuality Platform to receive and track the progress you make while developing your App you must add CodeQualityCLI dependency to your project and enable a Continues Integration service of your choice.

The idea is to use CI to run your tests on every new commit to your repository. Once the tests are run a summary will be generated (make sure your the testing framework is configured to generate this report) and automatically sent to codeQuality.

1. Add CodeQualityCLI as a dependency to the project for which you want to do codeQuality.

2. Add two scripts to your package.json to generate coverage report and to send its results to codeQuality. (--coverage flag may vary across testing frameworks, example below uses jest)

"coverage-report": "npm test -— -—coverage",
"report-codeQuality": "cd ./node_modules/code-quality-cli && npm install && npm run start:dev"

3. Add jest configuration to your package.json.

"jest": {
  "coverageReporters": [
    "text",
    "json-summary"
  ]
}

CodeQualityCLI needs the output generated by istanbul (json-summary) to extract the data that will be send for visualization. You must specify the type of reporter your test framework will use.

Almost done...

Now, let's add a .yml file and the scripts needed to send the report.

This is an example using Travis-CI

4. Add a .travis.yml file to your project.

language: node_js
node_js:
  - "9"

install:
  - npm install

services: mongodb

script:
  - npm run test
  - npm run coverage-report
  - npm run report-codeQuality

All set on this end.

---

Configure Travis

If you have followed all the steps. You should at this point have a functional CodeQuality application.

1. Login into your travis account.
2. Select the your project.
3. Go to Settings
4. Under Environment Variables section.

• You must provide 3 environment variables to your CI/CD configuration.

  CODE_QUALITY_SERVER_URL = https://<..........>/api/v1/commit
  CODE_QUALITY_TOKEN = fa2331-dfadfa-1223fs
  CODE_QUALITY_JSON_COVERAGE = path to coverage data. (ex. ../../coverage/coverage-summary.json)

What is CODE-QUALITY-SERVER-URL ?

The CodeQuality Application that you have already deployed and running, exposes an endpoint /api/v1/commit. You will need to add this to your domain so the your code coverage summary can be received and visualized

example.

https://codeq-meetup.herokuapp.com/api/v1/commit

What is CODE-QUALITY-TOKEN ?

When you create a new project (HowToSection) a projectKey is generated. This key is your CODE_QUALITY_TOKEN. Since you can manage and visualize multiple projects with CodeQuality, this token helps the platform know where to put an incoming report.

What is CODE-QUALITY-JSON-COVERAGE ?

Since CodeQualityCLI dependency is located inside your node_modules we need to pass the correct path to the coverage folder that was generated when test were run.

Normally this path will be ../../coverage/coverage-summary.json. Make sure the output generate is coverage-summary.json, in case it is not, verify your jest config.

Contributing

I welcome contributions! Please open an issue if you have any feature ideas or find any bugs. I also accept pull requests with open arms. I will go over the issues when I have time. :)