Hanki NPM-paketti Jest ja Codecov ☂️

Johdanto

Puhutaan koodin kattavuudesta ja siitä, miten voit tehdä kattavuusraportteja Jestissä ja Codecovissa.

Mikä on koodin kattavuus?

Jos olet perehtynyt testaukseen. Tiedät sen päätarkoituksen:

Testit antavat kehittäjille vapauden tehdä muutoksia ja refaktorikoodia luottavaisin mielin, että kaiken pitäisi toimia hyvin niin kauan kuin kaikki automaattiset testit läpäisevät.

Jos yksikötestit eivät kuitenkaan kata kaikkia skenaarioita, on silti mahdollista, että muutokset voivat rikkoa jotain. Siksi meillä on koodin kattavuus: mitta, kuinka suuri osa koodikannasta on automatisoitujen testien peittämä.

Ilman koodin kattavuusanalyysiä testisi ovat menettäneet päätarkoituksensa.

Tämä on tärkeää, kun projektisi kasvaa ja monet kehittäjät ovat mukana.

✅ Voimme ylläpitää testimme laatua, kun uusi koodi lisätään.

✅ Saamme syvemmän käsityksen olemassa olevista testeistä.

✅ Anna kehittäjille luottamusta refaktorikoodiin huolimatta asioiden rikkomisesta.

✅ Voimme saada kiinni testaamattomat virrat ennen kuin ne aiheuttavat ongelmia.

Ok, nyt kun tiedämme mikä koodin kattavuus on, toteutetaan se! ?

Edellytykset

Jotta tämä artikkeli olisi lyhyt ja tiivis, aloitan tästä: askel askeleelta rakennus- ja julkaisutoiminta sekä NPM-kirjoituspaketti.

Mitä tähän mennessä on tehty:

✅ Määritä NPM-peruspaketti

✅ Lisää testaus Jestillä

✅ Kirjoita perustesti

Jos projektisi on jo määritetty Jestin kanssa, olet hyvä mennä. ? Jos ei, suosittelen, että kloonat tai haaroitat tämän artikkelin arkistoa aloittaaksesi NPM-paketin perustason:

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

Jos olet kiinnostunut rakentamaan NPM-paketteja, suosittelen edellistä artikkeliani täällä.

Selvä, nyt kun kaikki on asetettu, mennään!

Luo kattavuusraportit Jestissä

Kattavuusraporttien luominen Jestissä on helppoa. Lisää vain tämä rivi jest-määritystiedostoon:

"collectCoverage":true

collectCoverage: Tämän asetuksen pitäisi olla tosi, jos haluat, että jest kerää kattavuustietoja testien suorittamisen aikana. (Testit suoritetaan hieman hitaammin, joten se on oletusarvoisesti väärä.)

Varmista, että komentosarjakomentojen testomassa package.json tiedosto ajaa Jest kanssa asetustiedostoon.

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

Hyvä on! Juostanpm testterminaalissasi, ja voilà! Sinulle on luotu uusi kansio, joka sisältää koodikattotiedostot.

Älä unohda lisätä kattavuuskansiota .gitignore. Emme halua rakentaa tiedostoja arkistoon. ?

Tee raporteista jotain hyödyllistä

Ok, se on hienoa, loimme kansion, jossa oli joitain tiedostoja, mutta mitä meidän pitäisi tehdä näiden tietojen kanssa? ?

Ensinnäkin voit tarkistaa manuaalisesti kattavuusraportin luotavasta HTML-sivusta. Avaa /coverage/lcov-report/index.htmlselaimessasi:

Ok, se on mukavaa, mutta onko meidän TODELLA tarve tarkistaa manuaalisesti jokaisen koontiraportin raportit?

Ei, sinun ei pitäisi. Sinun tulisi julkaista raportit verkossa, jotta niistä olisi jotain hyödyllistä. Tässä artikkelissa aiomme käyttää kattavuusraportointityökalua nimeltä codecov.io.

Codecov on ilmainen avoimen lähdekoodin projekteille. Se vie koodin kattavuusraportit seuraavalle tasolle. Codecovin avulla voimme myös luoda tunnuksia automaattisesti ja käyttää sitä jatkuvan integraation rakenteissa. (Lisää myöhemmin.)

Rekisteröidy osoitteessa //codecov.io/ ja seuraa opasta muodostaaksesi yhteyden Githubiin ja arkistoon. Sen jälkeen sinun pitäisi päätyä näkemään tällainen näyttö:

Kiva! Tällä hetkellä tämä sivu on tyhjä, koska et ole vielä ladannut yhtään raporttia, joten korjataan se. Suorita terminaalissa:

npm install --save-dev codecov

Normaalisti haluat ladata raportteja jatkuvan integrointirakenteen lopussa, mutta tälle artikkelille lähetämme raportit paikalliselta koneeltamme. Terminaalin ajon aikana:

(Korvaa arkki -tunnuksellasi, joka löytyy koodekista ov.io)

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

Menestys! Nyt voit tarkastella raporttiasi verkossa osoitteessa codecov.io.? ?

//codecov.io/gh///

Lisää merkki README.md-tiedostoon

Merkit ovat tärkeitä erityisesti NPM-paketeille. Se antaa ensivaikutelman korkeasta laadusta, kun näet kauniin koodin kattavuusmerkin npmjs: ssä ja Githubissa.

Omassa README.md lisää seuraava rivi:

(Korvaa ja tietojesi kanssa)

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

Minun tapauksessani se näyttää tältä:

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

Mahtava! Nyt voit näyttää muulle maailmalle, että käytät yksikkötestaus- ja koodikattaraportteja! ? ?

Yhteenveto

Jos käytät testejä, koodin kattavuusraportointi on välttämätöntä, ja sen pitäisi toimia aina, kun teet vetopyynnön tai teet muutoksia haaroihisi.

Löydät NPM-starter-pakettini täältä Githubista.

Se on koulutusperusta parhaiden käytäntöjen NPM-paketin kehittämiselle. Kommentit, haarukat ja PR: t ovat tervetulleita. ?

Mitä seuraavaksi?

Jos et vielä käytä jatkuvaa integraatiota (CI), on aika määrittää se.

Seuraavassa artikkelissani aion käsitellä jatkuvaa integraatiota NPM-pakettien koodikattavuuteen.

Jos pidät tästä artikkelista hyödyllistä, anna sille taputuksia ja seuraa minua saadaksesi lisää artikkeleita kehityksestä.

Onnea mahtavan pakettisi rakentamisessa! ? ?