Uvod
Razgovarajmo o pokrivanju koda i o tome kako možete raditi izvješća o pokrivanju u Jestu i Codecovu.
Što je pokrivenost kodom?
Ako ste upoznati s testiranjem. Znate njegovu glavnu svrhu:
Testovi pružaju programerima slobodu da izvršavaju promjene i prepravljaju kôd s pouzdanjem da bi sve trebalo raditi u redu dokle god prođu sva automatizirana ispitivanja.Međutim, ako jedinični testovi ne pokrivaju sve scenarije, i dalje postoji vjerojatnost da vaše promjene mogu nešto slomiti. Zato imamo pokrivenost koda: mjera koliko baze koda pokrivaju automatizirani testovi.
Bez analize pokrivenosti Code, vaši su testovi izgubili svoju glavnu svrhu.
To je važno kad vaš projekt raste i kada su uključeni mnogi programeri.
✅ Kad dodamo novi kôd, možemo održavati kvalitetu testa.
✅ Dublje razumijevamo postojeće testove.
Dajte programerima samopouzdanje za refaktor koda bez brige o razbijanju stvari.
✅ Neuvjereni protoci možemo uhvatiti prije nego što izazovu probleme.
Ok, sad kad znamo što je pokrivenost kodom, primijenimo ga! ?
Preduvjeti
Kako bi ovaj članak bio kratak i jezgrovit, započet ću ovdje: Korak po korak Izgradnja i objavljivanje i NPM paket strojnih skripti.
Što je dosad učinjeno:
✅ Postavite osnovni NPM paket
✅ Dodajte testiranje s Jestom
✅ Napišite osnovni test
Ako već imate svoj projekt s Jestom, dobro je krenuti. ? Ako nije, preporučujem da klonirate ili račvaste spremište za ovaj članak da biste započeli s osnovnim temeljima NPM-paketa:
git clone [email protected]:caki0915/my-awesome-greeter.git && cd my-awesome-greeter &&git checkout basic-package && npm installAko vas zanima kako izraditi NPM pakete, ovdje preporučujem moj prethodni članak.
U redu, sad kad je sve postavljeno, krenimo!
Stvorite izvješća o pokrivenosti u Jestu
Stvaranje izvještaja o pokrivenosti u Jestu je jednostavno. Samo dodajte ovaj redak u svoju konfiguracijsku datoteku jest:
"collectCoverage":true
colleCoverage: Treba postaviti na true ako želite da šala prikuplja podatke o pokrivenosti tijekom izvođenja testova. (Testovi će se izvoditi malo sporije pa prema zadanim postavkama nisu.)
Obavezno pokrenite naredbu skripte testu datoteci package.json da izvrši Jest s vašom konfiguracijskom datotekom.
“test”: “jest --config jestconfig.json”U redu! Trčanjenpm testu svom terminalu i voilà! Imat ćete novu mapu s generiranim datotekama za pokrivanje koda.
Ne zaboravite dodati mapu pokrivenosti .gitignore. Ne želimo graditi datoteke u našem spremištu. ?
Napravite nešto korisno za svoja izvješća
Ok, that’s cool, we generated a folder with some files, but what should we do with this information? ?
First of all, you can manually review the coverage-report on a generated HTML-page. Open /coverage/lcov-report/index.html in your browser:
Ok, that’s nice, but do we REALLY need to manually review the reports on every build??
No, you shouldn’t. You should publish the reports online to make something useful of them. In this article, we’re going to use a coverage reporting tool called codecov.io.
Codecov is free for open-source projects. It takes code coverage reports to the next level. With Codecov, we can also auto-generate badges and run it on continuous integration builds. (More on it later.)
Sign up at //codecov.io/ and follow the guide to connect to Github and your repository. After that, you should end up seeing a screen like this:
Nice! For now, this page will be empty since you haven’t uploaded any reports yet, so let’s fix that. In the terminal, run:
npm install --save-dev codecovNormally you want to upload reports at the end of a continuous integration build, but for this article, we will upload the reports from our local machine. In the terminal run:
(Replace with your repository-token found in codecov.io)
./node_modules/.bin/codecov --token=""
Success! Now you can view your report online in codecov.io.? ?
//codecov.io/gh///Add a Badge to your README.md
Badges are important, especially for NPM packages. It gives the first impression of high quality when you see a beautiful code coverage badge in npmjs and Github.
In your README.md add the following line:
(Replace , and with your information)
[](//codecov.io/gh///) In my case, it will look like this:
[](//codecov.io/gh/caki0915/my-awesome-greeter/)Awesome! Now you can show the rest of the world that you are using unit-testing and code coverage reports! ? ?
Summary
If you’re using tests, code coverage reporting is a must and it should run every-time you make a pull-request or make changes on your branches.
You can find my NPM-starter package here on Github.
It’s an educational base for best practices NPM-package development. Comments, Forks and PR’s are welcome. ?
What’s next?
If you don’t use continuous integration (CI) yet, it’s time to set it up.
In my next article, I’m going to cover continuous integration with code-coverage for NPM packages.
If you find this article useful, please give it some claps and follow me for more articles about development.