Fedezze le NPM-csomagját Jest és Codecov ☂️

Bevezetés

Beszéljünk a kód lefedettségéről, és arról, hogyan lehet lefedettségi jelentéseket készíteni Jestben és Codecovban.

Mi az a kód lefedettség?

Ha ismeri a tesztelést. Tudja annak fő célját:

A tesztek szabadságot adnak a fejlesztőknek arra, hogy változtatásokat végezzenek és refaktorkódot biztosítsanak abban, hogy mindennek rendben kell működnie mindaddig, amíg az összes automatizált teszt sikeres lesz.

Ha azonban az egységtesztek nem fedik le az összes forgatókönyvet, akkor is fennáll annak az esélye, hogy a változtatások megtörhetnek valamit. Ezért van kód lefedettségünk: annak mérése, hogy a kód-alap mekkora részét fedik le automatizált tesztek.

A Code lefedettség elemzése nélkül a tesztek elveszítették a fő céljukat.

Ez akkor fontos, ha a projekt növekszik, és sok fejlesztő vesz részt benne.

New Meg tudjuk tartani a teszt minőségét, amikor új kódot adunk hozzá.

✅ A meglévő teszteket mélyebben megismerjük.

✅ Adjon bizalmat a fejlesztőknek a refrakter kóddal anélkül, hogy aggódnia kellene a dolgok elrontása miatt.

✅ Még be nem fogható áramlásokat foghatunk el, mielőtt azok gondot okoznának.

Ok, most, hogy tudjuk, mi a kód lefedettsége, hajtsuk végre! ?

Előfeltételek

Annak érdekében, hogy ez a cikk rövid és tömör legyen, itt kezdem: lépésről lépésre épület és kiadó, valamint az NPM tipográfiai csomag.

Mi történt eddig:

✅ Állítson be egy alap NPM-csomagot

✅ Tegyen tesztet a Jest segítségével

✅ Írjon alaptesztet

Ha a projektedet már beállítottad a Jesttel, akkor jó vagy. ? Ha nem, akkor azt javaslom, hogy klónozza vagy forkolja a cikk tárházát, hogy az NPM-csomag alapjaitól induljon:

git clone [email protected]:caki0915/my-awesome-greeter.git && cd my-awesome-greeter &&git checkout basic-package && npm install

Ha érdekel, hogyan készítsen NPM csomagokat, ajánlom az előző cikkemet itt.

Rendben, most, ha minden be van állítva, menjünk!

Hozzon létre lefedettségi jelentéseket a Jest alkalmazásban

A lefedettségi jelentések elkészítése a Jestben egyszerű. Csak adja hozzá ezt a sort a jest config fájljába:

"collectCoverage":true

collectCoverage: Igaznak kell lennie, ha azt akarja, hogy a tesztek futtatása közben a vicc összegyűjtse a lefedettségi információkat. (A tesztek kicsit lassabban fognak futni, így alapértelmezés szerint hamis.)

Győződjön meg arról, hogy testa package.json fájlban található parancsfájl a Jest-et futtatja a konfigurációs fájljával.

“test”: “jest --config jestconfig.json”

Rendben! Fussnpm testa terminálodban, és voilà! Létrehoz egy új mappát, amely kódfedezeti fájlokat generál az Ön számára.

Ne felejtse el hozzáadni a lefedettségi mappát .gitignore. Nem akarunk build-fájlokat a tárunkba. ?

Készítsen valami hasznosat a jelentéseiből

Ok, ez klassz, létrehoztunk egy mappát néhány fájllal, de mit kezdjünk ezekkel az információkkal? ?

Először is manuálisan ellenőrizheti a lefedettségi jelentést egy létrehozott HTML-oldalon. Nyissa /coverage/lcov-report/index.htmlmeg a böngészőben:

Ok, ez szép, de TÉNYLEG muszáj manuálisan átnéznünk minden egyes build jelentését ??

Nem, nem szabad. A jelentéseket online kell közzétennie, hogy hasznos legyen belőlük. Ebben a cikkben a codecov.io nevű lefedettségjelentési eszközt fogjuk használni.

Codecov ingyenes a nyílt forráskódú projektek számára. A kód lefedettségről szóló jelentéseket a következő szintre emeli. A Codecov segítségével automatikusan generálhatunk jelvényeket is, és folyamatos integrációs buildeken futtathatjuk. (Bővebben később.)

Iratkozzon fel a //codecov.io/ webhelyre, és kövesse az útmutatót, hogy csatlakozzon a Githubhoz és az adattárához. Ezt követően egy ilyen képernyőt kell látnia:

Szép! Egyelőre ez az oldal üres lesz, mivel még nem töltött fel jelentéseket, ezért javítsuk ki. A terminálon futtassa:

npm install --save-dev codecov

Normál esetben a folyamatos integrációs összeállítás végén szeretne jelentéseket feltölteni, de ehhez a cikkhez a jelentéseket a helyi gépünkről töltjük fel. A terminál futtatásakor:

(Cserélje le az ov.io kodekben található repository- tokenre)

./node_modules/.bin/codecov --token=""

Siker! Most online megtekintheti a jelentését a codecov.io címen.? ?

//codecov.io/gh///

Jelvény hozzáadása a README.md fájlhoz

A jelvények fontosak, különösen az NPM csomagok esetében. Kiváló minőségű első benyomást kelt, amikor egy gyönyörű kódfedezeti jelvényt lát az npmjs-ben és a Github-ban.

A README.md fájlba írja be a következő sort:

(Replace , and with your information)

[![Codecov Coverage](//img.shields.io/codecov/c/github///
    
     .svg?style=flat-square)](//codecov.io/gh///)
    

In my case, it will look like this:

[![Codecov Coverage](//img.shields.io/codecov/c/github/caki0915/my-awesome-greeter/coverage.svg?style=flat-square)](//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.

Good luck building your awesome package! ? ?