Καλύψτε το πακέτο NPM σας με Jest και Codecov ☂️

Εισαγωγή

Ας μιλήσουμε για την κάλυψη κώδικα και πώς μπορείτε να κάνετε αναφορές κάλυψης στο Jest και το Codecov.

Τι είναι η Κάλυψη κώδικα;

Εάν είστε εξοικειωμένοι με τις δοκιμές. Γνωρίζετε τον κύριο σκοπό του:

Οι δοκιμές παρέχουν στους προγραμματιστές την ελευθερία να κάνουν αλλαγές και να αναπαράγουν τον κώδικα με την πεποίθηση ότι όλα πρέπει να λειτουργούν καλά όσο αρκούν όλες οι αυτόματες δοκιμές.

Ωστόσο, εάν οι δοκιμές μονάδας δεν καλύπτουν όλα τα σενάρια, υπάρχει ακόμα πιθανότητα οι αλλαγές σας να σπάσουν κάτι. Γι 'αυτό έχουμε κάλυψη κώδικα: το μέτρο του πόσο καλύπτεται η βάση κώδικα από αυτοματοποιημένες δοκιμές.

Χωρίς ανάλυση κάλυψης κώδικα, οι δοκιμές σας έχουν χάσει τον κύριο σκοπό τους.

Αυτό είναι σημαντικό όταν το έργο σας μεγαλώνει και εμπλέκονται πολλοί προγραμματιστές.

✅ Μπορούμε να διατηρήσουμε την ποιότητα της δοκιμής μας όταν προστεθεί νέος κωδικός.

✅ Παίρνουμε μια βαθύτερη κατανόηση των υπαρχόντων δοκιμών.

✅ Δώστε στους προγραμματιστές την αυτοπεποίθηση στον κωδικό refactor χωρίς να ανησυχείτε για την παραβίαση των πραγμάτων

✅ Μπορούμε να εντοπίσουμε μη δοκιμασμένες ροές προτού προκαλέσουν προβλήματα.

Εντάξει, τώρα που γνωρίζουμε τι είναι η κάλυψη κώδικα, ας το εφαρμόσουμε! ;

Προαπαιτούμενα

Για να διατηρήσω αυτό το άρθρο σύντομο και περιεκτικό, θα ξεκινήσω εδώ: Βήμα προς βήμα Δημιουργία και δημοσίευση και πακέτο τυπογραφικών στοιχείων NPM.

Τι έχει γίνει μέχρι τώρα:

✅ Ρύθμιση βασικού πακέτου NPM

✅ Προσθέστε δοκιμές με το Jest

✅ Γράψτε μια βασική δοκιμή

Εάν έχετε ήδη ρυθμίσει το έργο σας με το Jest, μπορείτε να πάτε. ; Εάν όχι, σας συνιστούμε να κλωνοποιήσετε ή να πιείτε το αποθετήριο για αυτό το άρθρο για να ξεκινήσετε από ένα βασικό ίδρυμα πακέτου NPM:

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

Εάν σας ενδιαφέρει πώς να δημιουργήσετε πακέτα NPM, προτείνω το προηγούμενο άρθρο μου εδώ.

Εντάξει, τώρα όταν όλα έχουν ρυθμιστεί, ας πάμε!

Δημιουργήστε αναφορές κάλυψης στο Jest

Η δημιουργία αναφορών κάλυψης στο Jest είναι εύκολη. Απλώς προσθέστε αυτήν τη γραμμή στο αρχείο διαμόρφωσης αστείων:

"collectCoverage":true

collectCoverage: Θα πρέπει να οριστεί ως αληθινό εάν θέλετε αστείο να συλλέγει πληροφορίες κάλυψης κατά την εκτέλεση των δοκιμών σας. (Οι δοκιμές θα εκτελεστούν λίγο πιο αργά, οπότε είναι λάθος από προεπιλογή.)

Βεβαιωθείτε ότι η εντολή σεναρίου σας testστο αρχείο package.json θα εκτελέσει το Jest με το αρχείο διαμόρφωσης.

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

Καλώς! Τρέξιμοnpm testστο τερματικό σας και voilà! Θα έχετε έναν νέο φάκελο με αρχεία κάλυψης κώδικα που δημιουργούνται για εσάς.

Μην ξεχάσετε να προσθέσετε το φάκελο κάλυψης στο .gitignore. Δεν θέλουμε αρχεία build στο αποθετήριο μας. ;

Κάντε κάτι χρήσιμο για τις αναφορές σας

Εντάξει, είναι ωραίο, δημιουργήσαμε έναν φάκελο με μερικά αρχεία, αλλά τι πρέπει να κάνουμε με αυτές τις πληροφορίες; ;

Πρώτα απ 'όλα, μπορείτε να ελέγξετε με μη αυτόματο τρόπο την αναφορά κάλυψης σε μια δημιουργημένη σελίδα HTML. Άνοιγμα /coverage/lcov-report/index.htmlστο πρόγραμμα περιήγησής σας:

Εντάξει, αυτό είναι ωραίο, αλλά πρέπει πραγματικά να ελέγξουμε με μη αυτόματο τρόπο τις αναφορές σε κάθε έκδοση;

Όχι, δεν πρέπει. Θα πρέπει να δημοσιεύσετε τις αναφορές στο διαδίκτυο για να κάνετε κάτι χρήσιμο από αυτά. Σε αυτό το άρθρο, θα χρησιμοποιήσουμε ένα εργαλείο αναφοράς κάλυψης που ονομάζεται codecov.io.

Το Codecov είναι δωρεάν για έργα ανοιχτού κώδικα. Παίρνει αναφορές κάλυψης κώδικα στο επόμενο επίπεδο. Με το Codecov, μπορούμε επίσης να δημιουργούμε αυτόματα σήματα και να το τρέχουμε σε συνεχείς ενσωματώσεις. (Περισσότερα για αυτό αργότερα.)

Εγγραφείτε στο //codecov.io/ και ακολουθήστε τον οδηγό για να συνδεθείτε στο Github και στο αποθετήριό σας. Μετά από αυτό, θα πρέπει να δείτε μια οθόνη σαν αυτή:

Ομορφη! Προς το παρόν, αυτή η σελίδα θα είναι κενή, καθώς δεν έχετε ανεβάσει ακόμη αναφορές, οπότε ας το διορθώσουμε. Στο τερματικό, εκτελέστε:

npm install --save-dev codecov

Κανονικά θέλετε να ανεβάσετε αναφορές στο τέλος μιας συνεχούς έκδοσης ενοποίησης, αλλά για αυτό το άρθρο, θα ανεβάσουμε τις αναφορές από τον τοπικό υπολογιστή μας. Στο τερματικό τρέξιμο:

(Αντικαταστήστε με το διακριτικό αποθετηρίου σας που βρίσκεται στο codec ov.io)

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

Επιτυχία! Τώρα μπορείτε να δείτε την αναφορά σας στο διαδίκτυο στο codecov.io .; ;

//codecov.io/gh///

Προσθέστε ένα σήμα στο README.md

Τα σήματα είναι σημαντικά, ειδικά για πακέτα NPM. Δίνει την πρώτη εντύπωση υψηλής ποιότητας όταν βλέπετε ένα όμορφο σήμα κάλυψης κώδικα σε npmjs και Github.

Στο README.md προσθέστε την ακόλουθη γραμμή:

(Αντικαταστήστε και με τα στοιχεία σας)

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

Στην περίπτωσή μου, θα μοιάζει με αυτό:

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

Φοβερός! Τώρα μπορείτε να δείξετε στον υπόλοιπο κόσμο ότι χρησιμοποιείτε αναφορές δοκιμών μονάδας και κάλυψης κώδικα! ; ;

Περίληψη

Εάν χρησιμοποιείτε δοκιμές, η αναφορά κάλυψης κώδικα είναι απαραίτητη και θα πρέπει να εκτελείται κάθε φορά που κάνετε ένα αίτημα έλξης ή κάνετε αλλαγές στους κλάδους σας.

Μπορείτε να βρείτε το πακέτο εκκίνησης NPM εδώ στο Github.

Είναι μια εκπαιδευτική βάση για βέλτιστες πρακτικές ανάπτυξης πακέτων NPM. Σχόλια, Forks και PR είναι ευπρόσδεκτα. ;

Τι έπεται?

Εάν δεν χρησιμοποιείτε ακόμα συνεχή ενοποίηση (CI), ήρθε η ώρα να το ρυθμίσετε.

Στο επόμενο άρθρο μου, θα καλύψω τη συνεχή ενσωμάτωση με κάλυψη κώδικα για πακέτα NPM.

Εάν βρείτε αυτό το άρθρο χρήσιμο, δώστε του μερικά χειροκρότημα και ακολουθήστε με για περισσότερα άρθρα σχετικά με την ανάπτυξη.

Καλή τύχη να φτιάξετε το φοβερό πακέτο σας! ; ;