What is code coverage and how do we measure it?

I

n this article, we will learn about the code coverage and also we will learn how we can generate the code coverage UI for node application. We can generate the code coverage for front part as well as backend part of the project.
Our final product will look like as:

What is code coverage and how do we measure it?

What is code coverage ?

Code coverage is basically a measurement of how many lines of code or blocks of our app's code are executed while the automated tests are running. The code coverage is related to the automated tests. Code coverage is collected by a tool. A best code coverage tool will give you the percentage of the code that is executed with facilities to dive into the code and provide the UI to see the exactly which lines of code were executed at the time of test command.
We can get the code coverage in percentage in terms of code statements, code branches, code functions and code lines. Your code coverage will be in percentage, so for example, we have 90% of our code coverage it means our 10% of code is not covered under the test. It is obvious that we can think that we have our 90% code coverage but for the 10% of code we need to think from different aspect and different angle.

We need to think why our 10% of code is not covered, what logic would be there? for example:

                                if(SONETHING_TRUE){
                                    // Code covered
                                  }
                                  else {
                                      // Code not covered
                                  }

In the above code example, if our condition is true every time, then the only "if" block would be covered and "else" part would not be covered. In this case we need to write our test logic to cover all the scenario.

Inside this article:

In this article, we will create a simple nodejs application and will write some test suits. After this we will run our test case then we will implement the code coverage tool and configure this code coverage tool, and then we will run the command to get the code coverage. Also we will see how we configure the code coverage tool and explore this tool with best example.

Let's create a node app:

Create a folder with name "code-coverage-demo" and inside this folder create a file with name "package.json" and "server.js" and write the below codes in respective files:
code-coverage-demo/package.json:

                    {
                        "name": "code-coverage-demo",
                        "version": "1.0.0",
                        "description": "this is to understand the demo.",
                        "main": "server.js",
                        "directories": {
                             "test": "test"
                        },
                        "scripts": {
                             "test": "cross-env DEBUG=* mocha 'test/api.test.js' - timeout 20000",
                             "start": "node server.js",
                             "coverage": "nyc npm run test"
                        },
                        "author": "Shubham Verma",
                        "license": "ISC",
                        "devDependencies": {
                             "chai": "4.2.0",
                             "chai-http": "4.2.1",
                             "cross-env": "^7.0.2",
                             "mocha": "5.2.0",
                             "nyc": "^15.1.0"
                        },
                        "dependencies": {
                             "express": "4.16.4"
                        }
                    }
                    

Now go to the project location and run below command:

npm install

npm install: What is code coverage and how do we measure it?

Ater this, write the code in "server.js" file:

code-coverage-demo/server.js:

                    const express = require('express');
                    const app = express();
                    const port = 3300;
                    const lib = require('./lib/helper');
                    
                    app.get('/message', function (req, res) {
                         res.send('This is the message');
                    });
                    app.get('/media', function (req, res) {
                    
                         lib.testFunction()
                              .then(result => {
                                   console.log(result);
                                   if (result === true) {
                                        var response = {
                                             podcasts: [{
                                                  "description": "some text",
                                                  "id": 574,
                                                  "title": "Why long-term value is a winning bet",
                                                  "media": "podcast",
                                                  "publishedDate": "2018-12-19T18:00:00.000Z",
                                                  "isLive": true,
                                                  "isDeleted": false,
                                                  "link": "https://podcasts.com/574",
                                                  "createdAt": "2018-12-20T06:30:00.618Z",
                                                  "updatedAt": "2019-01-31T06:30:00.864Z"
                                             }],
                                             total: 1
                                        }
                                        if (response.podcasts.length > 0) {
                                             res.send(response);
                                        } else {
                                             var errorObj = {
                                                  httpCode: 404,
                                                  message: 'NOT_FOUND',
                                                  description: 'The resource referenced by request does not exists.',
                                                  details: 'Podcast is not available'
                                             }
                                             res.status(404);
                                             res.send(errorObj)
                                        }
                                   }
                    
                              })
                              .catch(err => {
                                   console.log(err);
                              })
                    });
                    
                    app.listen(port, function () {
                         console.log("\nServer is running on port " + port);
                    });
                    module.exports = app; // for testing
                    

Let's understand the above code:

                                        const express = require('express');
                                        const app = express();
                                        const port = 3300;
                                        const lib = require('./lib/helper');
                                    

In the above code, we have simply imported the "express" and called the exprss(), defined the port and imported the "lib" from folder "lib/helper". we will write the helper.js later.

In the below code, we have created 2 end point as:

                    app.get('/message', function (req, res) {
                            res.send('This is the message');
                    });
                    

app.get('/media', function (req, res) { .... })

In the below code, server is listining on defined port.

                        app.listen(port, function () {
                            console.log("\nServer is running on port " + port);
                       });
                        

Let's create a another folder with name "lib" and create a file "helper.js" in this folder. This will a demo code, and we will try to cover this part of code in our code coverage percentage.

lib/helper.js:

                        exports.testFunction = function () {
                            return new Promise((resolve, reject) => {
                                resolve(true);
                            })
                        };
                    

The above code is just for an example, this code is not doing any specific, its a promise which is resolved only with value "true".

Now we have created the server, it's time to run the server and see the endpoints, run the server using below command:

npm start

npm start: What is code coverage and how do we measure it?

After running the above command, open browser and hit the below URL to test the endpints:

http://localhost:3300/message

What is code coverage and how do we measure it?

http://localhost:3300/media

What is code coverage and how do we measure it?

Write test cases for endpoints:

If you don't know how to write the test case thrn go through this link and after come back here.
After the successfull server up, uts time to write the test cases to test the endpoints.
Now crete a directory "test" and inside this create a file named "api.test.js" and write the below codes:
code-coverage-demo/test/api.test.js:

                            let chai = require("chai");
                            let chaiHttp = require("chai-http");
                            var should = chai.should();
                            chai.use(chaiHttp);
                            let server = require("../server");
                            
                            //Our parent block
                             describe("/GET media", () => {
                                 it("it should GET all the podcast", (done) => {
                                 chai.request(server)
                                   .get("/media")
                                   .end((err, res) => {
                                         (res).should.have.status(200);
                                         (res.body).should.be.a("object");
                                         (res.body.podcasts.length).should.be.eql(1);
                                         done();
                                      });
                                   });
                              });
                            
                            describe("/GET message", () => {
                                 it("it should GET a message", (done) => {
                                 chai.request(server)
                                     .get("/message")
                                     .end((err, res) => {
                                           (res).should.have.status(200);
                                           (res.body).should.be.a("object");
                                           done();
                                        });
                                     });
                                 });
                                    

# Description and understanding of file api.test.js:

                                let chai = require("chai");
                                let chaiHttp = require("chai-http");
                                var should = chai.should();
                                chai.use(chaiHttp);
                                

In the above code we have imported the "chai", "chai-http", and will use accordingly.

                                describe("/GET media", () => {
                                    it("it should GET all the podcast", (done) => {
                                    chai.request(server)
                                      .get("/media")
                                      .end((err, res) => {
                                            (res).should.have.status(200);
                                            (res.body).should.be.a("object");
                                            (res.body.podcasts.length).should.be.eql(1);
                                            done();
                                         });
                                      });
                                 });
                                

In the above code we have a described a test case for "/media" this test case will ensure that the endpoint "/media" will get the correct response.

                        describe("/GET message", () => {
                            it("it should GET a message", (done) => {
                            chai.request(server)
                                .get("/message")
                                .end((err, res) => {
                                      (res).should.have.status(200);
                                      (res.body).should.be.a("object");
                                      done();
                                   });
                                });
                            });
                        

In the above code we have a described a test case for "/message" this test case will ensure that the endpoint "/message" will get the correct response.

It's time to work for code coverage of our node app:

To get the code coverage report of our node app, we will use a npm module nyc. We have already instlled in our app, you can see in the package.json file, there would be an entry for "nyc" in devDependencies{} object.

nyc

is a best tool to generate the coverage report of our code, it provide the facilities to configure the code coverage as per the requirements and it provide the rice feature like Statement coverage, Branches coverage, Functions coverage and Lines coverage. It provide facilities to see the covered files and you can also see the which line of code is covered and which is not covered.

Configure the nyc:

We need to create a file with name .nycrc.json at the root location ( "code-coverage/.nycrc.json" and don't forget to put dot in the starting ). In the ".nycrc.json" write the below codes:
code-coverage/.nycrc.json:

                    {
                        "check-coverage": true,
                        "all": true,
                        "include": [
                            "server.js",
                            "lib/**"
                        ],
                        "exclude": [
                        ],
                        "branches": 85,
                        "lines": 85,
                        "functions": 90,
                        "statements": 85,
                        "reporter": ["html"],
                        "report-dir": "./coverage",
                        "watermarks": {
                            "lines": [80, 90],
                            "functions": [50, 65],
                            "branches": [64, 80],
                            "statements": [80, 95]
                          }
                    }
                    

Let's understand the file .nycrc.json:

in the below code, we can add the files that we want to cover :

                            "include": [
                                "server.js",
                                "lib/**"
                            ],
                    

If we want to excude any file then we need to add in the below code:

                        "exclude": [
                        ],
                    

In the below code, we are configuring the nyc to get the code coverage in percentage as:

                                "branches": 85,
                                "lines": 85,
                                "functions": 90,
                                "statements": 85,
                    

In the above code, we will cover :

* Branches atleast 85%.
* Lines atleast 85%.
* Functions atleast 90%.
* Statements atleast 85%.

In the below code, we need to write the directory path where we need the code coverage directory, it will create a directory with named "coverage", we will see it later.

                        "report-dir": "./coverage"
                    

The below code is for color the coverage report:

                    "watermarks": {
                        "lines": [80, 90],
                        "functions": [50, 65],
                        "branches": [64, 80],
                        "statements": [80, 95]
                      }
                    

Now we have done in coding, now it's time to run the test cases by using below command:

npm run test

After running the above command, you can see the result: 2 passing, as we have only 2 test cases. see the below snapshot:

npm install: What is code coverage and how do we measure it?

Now we need to generate the code coverage:

To generate the code coverage report run the below command:

                        npm run coverage
                    

snapshot:

npm run coverage: What is code coverage and how do we measure it?

After running the above command, you can see the directory .nyc_output is automatically created and also coverage directory will be created:

coverage directory created: What is code coverage and how do we measure it?

Here we go, we have our app's coverage directory, lets have a look inside the coverage directory:

You can see our coverage directory has following files as:

coverage directory: What is code coverage and how do we measure it?

Now we have "index.html" file inside the coverage directory, double click on it, it will open in the browser as:

coverage report: What is code coverage and how do we measure it?

The above report is our coverage report, click on any file ( code-coverage-demo) :

coverage report: What is code coverage and how do we measure it?

In the above snapshot, we can see the coverage like statements are covered 75%, Branches are covered 50%, Functons are covered 60% and Lines are covered 75%.

Now click on server.js:

coverage report: What is code coverage and how do we measure it?

You can see the file "server.js" and also see which line is covered and which line is not covered.

Congratulation.. Now you can create coverage report of you node application

Based on this article, you can create your coverage report of frontend code ( Reactjs ) also.

Conclusion:

In this article we got the answer of following questions:

* What is Code Coverage?

* How do we measure it?

* How we can create a code coverage graph of our nodejs application?

* How to create a node server?

* How to write the test case for node application?

* What is nyc?

* How to configure nyc module?

* How to use nyc to create coverage report of application?