Exercise: Tracking Code Coverage with Codecov

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kent C. Dodds: Now that we have our builds running, we want to be able to keep track of our code coverage as people are contributing to the project. And we also, when somebody makes a pull request, we'll get integration with the Codecov bot to tell us whether we've increased or decreased our code coverage.

[00:00:23]
And so we're going to add support for Codecov here. So the first thing that we'll do here is we're gonna npm, I'm actually going to install things now through the command line. So npm install --save-dev, or -D codecov. I'm pretty sure that's the one, yep. And that should,

[00:00:56]
>> Kent C. Dodds: Install Codecov 1.0.1 right here. With that installed, we're going to add a script for reporting our coverage. So I'll add that right below our test scripts, report coverage. And the Codecov takes the lcov report that we're generating, you can find that in the coverage lcov.info. It takes that report as through standard in, which you can get with cat ./coverage/lcov.info.

[00:01:39]
And pipe that into the Codecov binary. And then from that it will just, yeah, magically report that to Codecov. It actually has really great integration with Travis, and so you don't need to even have keys or anything like that. Yeah, it's just integrated with Travis really well. Before you actually commit though, I'm gonna show you one other thing that you're gonna wanna do.

[00:02:09]
And I go to codecov.io, and log in. So I guess sign up with GitHub, and that will log you in. Yeah, and then once you make sure that you have an account on there and you can login, then you can add this report-coverage script to your travis.yml file.

[00:02:35]
You could add it just do the script bit here, but we only really care to report coverage if this ends up being successful. And so there is another property in this travis.yml that we can use, called after_success.
>> Kent C. Dodds: And it will be npm run report-coverage.
>> Kent C. Dodds: And so I'll just do a git dif here so you can see the changes that I made.

[00:03:03]
We added after_success scripts to out travis.yml, a report-coverage script to our package.json scripts, and the codecov dependency. If you have those things, then you can commit those, add codecov reporting, and push that. Once you have that pushed,
>> Kent C. Dodds: Actually by the way, while we're waiting for the Travis build, here, github-names.

[00:03:44]
So while we're waiting for this Travis build to finish, I should mention that if you were unsuccessful in getting all this Travis stuff to work, you will still be able to publish your repo, it just won't be automated. Or so when we're all said and done, for those of you who didn't get through automating this stuff through Travis, you can still run npm-publish and you'll get your repo and your name's module up on the registry.

[00:04:12]
And I'll show you how to do that toward the end here. So there is still hope, you may still get something on the registry today. Okay cool. So now Travis is running, add Codecov reporting. It should actually run a little bit quicker the second time because it doesn't need to reinstall all of the node modules, which is great.

[00:04:35]
And yeah, let's see. Let me make sure I covered everything for this one.
>> Kent C. Dodds: Yep, that's pretty much it, so we'll just wait for this.
>> Kent C. Dodds: Anybody have this build running? Getting ready to see their coverage stats?
>> Kent C. Dodds: So if you, once your build has finished running, you can see the npm run report-coverage script.

[00:05:14]
And they collapse that by default, but you can pop it open and see all the output there, which is pretty fun. And then you can see at the end here it says view report at, you can copy that. Yeah, click handlers, that's fun. Copy that and go to that.

[00:05:35]
Your URL will simply be codecov.io/github/yourusername/yourreponame, and we'll just go directly to that URL. And you'll see that you have 100% code coverage on master. It'll show the sun bursting, actually lots of these graphs are kind of boring when you have 100% code coverage. Which is actually a good thing you want it to be boring.

[00:06:01]
But you can look at specific commits and how they effected your code coverage and compare commits, look at poll requests. I totally like just gave everybody my token, so I'll fix that later. [LAUGH] And yeah, it's pretty cool. There should be a file explorer here somewhere. Yeah, here we go.

[00:06:25]
Files, you can look at the lines of coverage for your files, which is pretty cool.
>> Kent C. Dodds: Anybody here have their Codecov report?
>> Kent C. Dodds: No, we're failing pretty hard? Is there anything, any specific questions that you have, stuff that you're missing?
>> Speaker 2: So this semantic release CLI-
>> Kent C. Dodds: You're jumping ahead, man.

[00:06:52]
[LAUGH] Yeah, go ahead and ask. I was just joking.
>> Speaker 2: It requires Python?
>> Kent C. Dodds: No, it shouldn't. Yeah, it should all just be JavaScript.
>> Kent C. Dodds: Any other questions or?
>> Speaker 3: Did I miss something about a repository token we need for Codecov?
>> Kent C. Dodds: No, you shouldn't need to do anything special with tokens.

[00:07:17]
>> Speaker 3: Okay.
>> Kent C. Dodds: I need to do something special with tokens cuz that just got on video. [LAUGH]
>> Speaker 3: But yeah, when I run the Codecov in the command line it just failed.
>> Kent C. Dodds: If you run it yourself, then yeah, you'll need to have a token. So Codecov actually integrates with Travis to know whether or not it's okay to accept the coverage report.

[00:07:40]
And so you don't need to worry about tokens when you use Travis with Codecov. But if you run Codecov locally to send a report, then it does require authentication. And you can actually get your token, as we saw, from your settings. You can copy that and set the variable, I think, I don't remember what the variable name is, enviroment variable name is, but if you wanted to run it locally.

[00:08:05]
Cool, so Codecov also has a badge I'm gonna just show you really quick. Badges are actually a really great way to communicate to people using your project that you can, of the status of the project, whether the project has a passing build and coverage and all kinds of things.

[00:08:32]
There are a lot of badges on here. So lots of different services have their own way that you can get a badge that look kind of similar. I like to use shields.io because they use SBG, and so it works great for retin displays and others. And they have support for a ton of different services, and they also have the ability for you to make your own badge.

[00:08:57]
So awesome and then we'll do sunglasses. We'll do, yeah, sunglass, boom, and we'll say blue, make a badge. [SOUND] And boom, I've got this awesome badge which is really cool, woah. Yeah, so that's fun. So I like shields.io for that reason. They have support for Travis, so you can actually click on this, copy that, and then replace everything from rust-lang here to your user name.

[00:09:41]
So mine is javascriptair/github-names.svg. And that will give me my green build is passing, which is pretty cool. I like to have this flat squared style. So you can have the plastic style, the style flat, and the style flat squared. So you can do that by adding style equals flat squared, and than it looks like, wait, flat square.

[00:10:16]
Did I spell something wrong? Yeah, it's flat square. And then it will look like a flat square, I like that, I don't know, I'm into that. But yeah, there's also Codecov badge here so you can, yeah, use Codecov too if you want. Just copy that URL, paste it up here, and update the username,

[00:10:44]
>> Kent C. Dodds: Or the repo name. And then you get your coverage report there too, your badge. Then you can just use mark down to stick that right in there. I'll show you an example of that a little bit later. But budges are a great way to communicate the commitment level of the project, and then whether this stuff's the project.

[00:11:09]
Sweet, so any questions? It looks like Brent has a question. Does Codecov have integration with CircleCI? I think it does, I'm pretty positive that Steve, the guy who makes Codecov, he's really good at integrating with lots of different things. And he's also asking about a preference between CircleCI and Travis.

[00:11:32]
That's actually, I have a blog post for everything. So let's see, git c.travis/circleci/snap. It is called continuous delivery. And here I compare five different CI services. But this comparison was for applications. But you can see kinda my thought process when choosing a CI service. I explain in Travis that I prefer it for my open source stuff, just because it really works really, really well with lots of different tools for open source.

[00:12:18]
But ultimately I chose SnapCI for my applications. If I were to do it over again, I might actually choose Worker. So something to look into. Cool, sweet. Tim has Codecov success. Anybody else have Codecov success?
>> Kent C. Dodds: Nope, well okay. This is some fun homework to do after the fact.

[00:12:44]
I knew this was gonna be risky. But yeah, hopefully you can at least publish, when we're all finished here, you'll be able to publish your stuff.