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.
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 CodeQuality to your PaaS of choice.
Example using Heroku.
-
Create your account.
-
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.
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.
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.
-
Add
CodeQualityCLI
as a dependency to the project for which you want to do codeQuality. -
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"
- 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
- 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.
If you have followed all the steps. You should at this point have a functional CodeQuality application.
- Login into your travis account.
- Select the your project.
- Go to Settings
- 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.
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. :)