Add code coverage reporting
Now that we're keeping track of our coverage, let's upload our reports to a third party service so we can track our stats over time. In this lesson we'll show how easy it is to upload our stats to codecov.io.
[00:00] Now that we have coverage reporting going in our project, we want to actually send these reports to a third party service so that we can have one of those cool badges on our project that says we have 100 percent coverage. We can also browse our coverage in our project.
[00:15] We're going to use a service called Codecov. If we go to Codecov.io, you'll want to sign up for an account and log in. Then let's just go to codecov.io/github/kentcdodds/starwarsnames. This will indicate that we have no reports uploaded, but it will give us an upload token, which I will hide so you can't see.
[00:41] You'll notice that this upload token is actually not required on Travis because there's an integration there. Adding this integration with Codecov will be really easy. All that we need to do is NPM install -d as a devDependency codecov.io. Then we'll go into our package, JSON.
[01:02] We'll see that codecov.io has been added. We're going to take one of the coverage stats here, and we're going to pipe it into the Codecov binary. Let's look into our Node modules in the .bin. We have a Codecov binary that we can use in our NPM scripts.
[01:21] Let's make a new script called, "Report coverage." We will simply cut our coverage/lcov.info. We'll pipe that into Codecov. We want this to run on Travis, After our success we'll run NPM run report coverage.
[01:44] The test single will create the coverage. Then we'll check that our coverage is up to standard. Then we'll report the coverage to Codecov, that we can have that reporting and history of our coverage. If we look at our git status, we have these modified files. Let's add them and make sure that they're there.
[02:05] Now we'll run our NPM run commit. We'll expand this. We'll say that this is a chore related to test add reporting to Codecov. We'll add a description. We don't have any issues on here. It's running our test, making sure our coverage is up to snuff. Then we'll get push those changes.
[02:34] Let's go ahead and take a look at our Travis. Here in just a moment it will start our new build. It's starting our build. We'll follow the log. It fails, but the failure is from Symantec release. This is after the success of our build. It's just simply Symantec release saying, "There are no new changes that are necessary to be released because this was simply a chore."
[03:02] Our build passed. Now if we look at Codecov and we refresh, we'll see that we have our reporting stats in here, which is really handy. One of the things that I really like about Codecov is they have a Chrome extension that you can install.
[03:18] If we refresh we'll get our coverage reporting in here. We can toggle that reporting on. If we didn't have a 100 percent coverage, then we would see some red lines in here. It's integrated with GitHub, which is really nice. That's how you report coverage statistics to Codecov.
[03:36] In review, you simply install Codecov as a devDependency. You add a report coverage script to your NPM scripts, which will cut the LCOV info file to Codecov. Then you add this report coverage to your, "After success," to actually report the coverage.