Μια μικρή εισαγωγή στη δοκιμή μονάδων JS και στο πλαίσιο και τα εργαλεία της
Το σενάριο κωδικοποίησης ανάπτυξης Ιστού έχει αλλάξει εκθετικά τα τελευταία χρόνια. Ο κόσμος έχει αλλάξει από τις συμβατικές γλώσσες προγραμματισμού όπως η Java, το .NET και η PHP. Έχουν αρχίσει να προσαρμόζονται στο πλαίσιο JavaScript λόγω της ευκολίας χρήσης του στο frontend καθώς και των δυνατοτήτων backend και ταχείας δημιουργίας πρωτοτύπων.
Με αυτή τη μετάβαση, έρχεται και η ανάγκη για εξαιρετικά εργαλεία δοκιμών. Σε αυτό το άρθρο, θα σας μεταφέρω σε μερικά από τα καλύτερα εργαλεία δοκιμών μονάδων javascript που χρησιμοποιούνται στον κλάδο.
Πίνακας περιεχομένων
Σημασία της δοκιμής μονάδας
Προτού κατανοήσουμε τα διαθέσιμα εργαλεία και τα πλεονεκτήματά τους, ας καταλάβουμε γιατί είναι σημαντική η δοκιμή μονάδας.
Ο έλεγχος μονάδας είναι η διαδικασία δοκιμής του εφαρμοζόμενου κώδικα σε επίπεδο ενότητας. Η δοκιμή μονάδας σάς επιτρέπει να διασφαλίσετε ότι οι αναπτυγμένες μονάδες σας πληρούν τις απαιτήσεις που καθορίζονται στο επιχειρηματικό έγγραφο. Αυτά τα τεστ γράφονται για κάθε ενότητα καθώς δημιουργούνται. Μετά από κάθε ανάπτυξη νέας ενότητας, εκτελείται ολόκληρη η σειρά δοκιμαστικών περιπτώσεων για να διασφαλιστεί ότι καμία υπάρχουσα ενότητα δεν επηρεάζεται από την αναπτυγμένη ενότητα.
Η ανάπτυξη Javascript θα μπορούσε να γίνει αρκετά ανοργάνωτη εάν δεν ακολουθηθούν οι σωστές συμβάσεις. Αυτό καθιστά απαραίτητη τη χρήση των κατάλληλων εργαλείων ανάπτυξης και δοκιμής μονάδων. Οι δοκιμές μονάδων Javascript για το frontend εκτελούνται κυρίως σε πραγματικά ή χωρίς κεφάλι προγράμματα περιήγησης
Αυτές οι δοκιμές επικεντρώνονται στη δοκιμή της χρηστικότητας και της ανταπόκρισης της εφαρμογής. Τα πλαίσια δοκιμών μονάδων υποστήριξης επικεντρώνονται στη δοκιμή επιχειρηματικής λογικής και τελικών σημείων υπηρεσιών για κώδικα υποστήριξης που βασίζεται στο NodeJS.
MochaJS
MochaJS είναι το πιο δημοφιλές πλαίσιο δοκιμών που υποστηρίζει δοκιμές backend και frontend. Το MochaJS είναι μια ευέλικτη βάση για την ανάπτυξη δοκιμών όπως χρειάζεστε. Εκτελεί τις δοκιμές ασύγχρονα στη μηχανή Chrome v8 ή σε οποιοδήποτε άλλο πρόγραμμα περιήγησης.
Τα κύρια οφέλη της μόκας περιλαμβάνουν:
- Λειτουργεί τόσο για το frontend όσο και για το backend
- Υποστήριξη προγράμματος εντοπισμού σφαλμάτων NodeJS
- Παρέχει μια καθαρή βάση για την ανάπτυξη δοκιμών σύμφωνα με την ευκολία του προγραμματιστή
- Υποστηρίζει οποιοδήποτε πρόγραμμα περιήγησης, συμπεριλαμβανομένης της ακεφαλικής βιβλιοθήκης chrome
- Υποστηρίζει την κοροϊδία αντικειμένων για την εκτέλεση εύκαμπτων δοκιμών υποστήριξης
Γιασεμί
Γιασεμί είναι ένας μιμητής συμπεριφοράς χρήστη που σας επιτρέπει να εκτελείτε δοκιμαστικές περιπτώσεις παρόμοιες με τη συμπεριφορά των χρηστών στον ιστότοπό σας. Το Jasmine είναι χρήσιμο για μια διεπαφή δοκιμών για ορατότητα, καθαρότητα κλικ καθώς και για ανταπόκριση του UI σε διαφορετικές αναλύσεις. Το Jasmine επιτρέπει την αυτοματοποίηση της συμπεριφοράς των χρηστών με τελωνειακές καθυστερήσεις και χρόνο αναμονής για την προσομοίωση της πραγματικής συμπεριφοράς του χρήστη.
Τα κύρια οφέλη από τη χρήση του Jasmine περιλαμβάνουν:
- Χαμηλότερα γενικά έξοδα λόγω σχεδόν μηδενικών εξωτερικών εξαρτήσεων
- Συνοδεύεται από σχεδόν όλα τα απαραίτητα εργαλεία
- Υποστηρίζει δοκιμές Frontend καθώς και Backend
- Η κωδικοποίηση είναι αρκετά παρόμοια με τη γραφή σε φυσική γλώσσα
- Εκτεταμένη τεκμηρίωση για χρήση με διάφορα πλαίσια
Δείτε αυτό το λαμπρό δοκιμή μονάδας με το διαδικτυακό μάθημα Jasmine.
AVA
AVA είναι ένα μινιμαλιστικό πλαίσιο δοκιμών ελαφρού βάρους που αξιοποιεί την ασύγχρονη φύση του Javascript. Το AVA μπορεί να εκτελέσει δοκιμές ταυτόχρονα.
Σας επιτρέπει σχεδόν πλήρη έλεγχο σε αυτό που κάνετε. Επικεντρώνεται κυρίως στην εκτέλεση δοκιμών για κώδικα που βασίζεται στο NodeJS. Μερικά από τα οφέλη περιλαμβάνουν:
- Το ελαφρύ αποτύπωμα το κάνει πιο γρήγορο
- Εκτελεί δοκιμές ασύγχρονα και ταυτόχρονα
- Ταχύτερα από τα περισσότερα άλλα δοκιμαστικά πλαίσια
- Η απλούστερη σύνταξη για δοκιμές Javascript
- Καθαρότερα ίχνη στοίβας για τυχόν πιθανά σφάλματα που εντοπίζονται
ΑΣΤΕΙΟ
ΑΣΤΕΙΟ είναι ένα από τα πιο δημοφιλή πλαίσια που διατηρείται τακτικά από το Facebook. Είναι ένα προτιμώμενο πλαίσιο για τις εφαρμογές που βασίζονται στο React καθώς απαιτεί μηδενική διαμόρφωση.
Ωστόσο, δεν περιορίζεται στη χρήση με το React. Μερικά από τα χαρακτηριστικά του JEST είναι:
- Ενιαίο πλαίσιο κατάλληλο για NodeJS, VueJS, React, Angular και άλλα έργα που βασίζονται στην Babel
- Πιο εύκολο να κατέβεις από το έδαφος
- Τεκμηρίωση καλά και τυπική σύνταξη κωδικοποίησης
- Με τα ζωντανά στιγμιότυπα, επιτρέπει τη διαχείριση δοκιμών με μεγαλύτερα αντικείμενα
Κάρμα
Κάρμα είναι ένα παραγωγικό περιβάλλον δοκιμών που υποστηρίζει όλο το δημοφιλές πλαίσιο περιγραφής δοκιμών μέσα του. Παρέχει στην εφαρμογή σας την υποστήριξη για την εκτέλεση δοκιμών σε διαφορετικά περιβάλλοντα. Διαθέτει ευρεία υποστήριξη για την εκτέλεση δοκιμών σε διαφορετικές συσκευές και εφαρμογές.
Ο πρωταρχικός παράγοντας για να επιλέξετε το Karma έγκειται στην υποστήριξή του για ενσωμάτωση με κινητήρες CI/CD και τα ακόλουθα χαρακτηριστικά.
- Μπορεί να χρησιμοποιηθεί για την εκτέλεση δοκιμών σε προγράμματα περιήγησης, περιβάλλοντα χωρίς κεφάλι όπως το PhantomJS καθώς και σε συσκευές
- Υποστηρίζει δοκιμές γραμμένες στα περισσότερα από τα δημοφιλή πλαίσια
- Επιτρέπει την απομακρυσμένη εκτέλεση δοκιμών σε άλλες συσκευές με την άφιξη των αρχείων
- Υποστηρίζει τον εντοπισμό σφαλμάτων δοκιμαστικών περιπτώσεων χρησιμοποιώντας Chrome καθώς και Webstorm
Ταινία-κασέτα
Ταινία-κασέτα είναι αρκετά παρόμοιο με το AVA στην αρχιτεκτονική του. Δεν υποστηρίζει καθολικά, και ως εκ τούτου πρέπει να συμπεριλάβετε την ταινία σε κάθε αρχείο δοκιμής. Αυτή η απόφαση περιορισμού της σφαιροποίησης των μεταβλητών έχει επίσης τα πλεονεκτήματά της. Ορισμένα από τα χαρακτηριστικά τονίζουν:
- Καθαρό, ελαφρύ αποτύπωμα
- Παρέχει απλώς γυμνό μεταλλικό κώδικα και δίνει στον προγραμματιστή πλήρη ελευθερία να γράφει δοκιμαστικές περιπτώσεις
- Υποστηρίζει πρότυπα ES6, Typescript και σεναρίου καφέ
- Υποστηρίζει την εκτέλεση δοκιμών στα περισσότερα σύγχρονα προγράμματα περιήγησης
Cypress.io
Κυπαρίσσι είναι ένα συναρπαστικό πλαίσιο δοκιμών που εκτελείται πρακτικά στο πρόγραμμα περιήγησης. Παρέχει μια διαδραστική διεπαφή χρήστη στο πρόγραμμα περιήγησης με τη μορφή ιστοσελίδας. Μπορεί να εγκατασταθεί εύκολα σε Mac, Windows καθώς και Linux. Είναι ένας ανεξάρτητος δοκιμαστικός δρομέας που δεν χρειάζεται να ενσωματωθεί στενά με τον κώδικά σας.
Κουκλοπαίχτης
Κουκλοπαίχτης είναι ένα εξαιρετικό πλαίσιο εκτέλεσης δοκιμών που δημιουργήθηκε από μια ομάδα της Google. Παρέχει ένα API χωρίς κεφάλι χρωμίου για εφαρμογές NodeJS.
Το Puppeteer χρησιμοποιείται κυρίως για εφαρμογές συγκεκριμένες για το πρόγραμμα περιήγησης, όπως δοκιμή ανίχνευσης, δοκιμή δομής σελίδας, λήψη στιγμιότυπων οθόνης και ακόμη και λήψη προ-απόδοσης περιεχομένου για εφαρμογές μιας σελίδας. Πρόσθετα οφέλη από τη χρήση του κουκλοθέατρου είναι:
- Δυνατότητα ορισμού προσαρμοσμένων αναλύσεων και μεγεθών για το πρόγραμμα περιήγησης
- Υποστήριξη για δοκιμή επεκτάσεων chrome
- Υποστήριξη αυτοματισμού για υποβολή φόρμας, δοκιμή διεπαφής χρήστη και εισόδους πληκτρολογίου
- Υποστηρίζει λειτουργίες ES6 όπως η αναμονή και η ασυγχρονισμός
ChaiJS
ChaiJS πλαίσιο επικεντρώνεται σε δοκιμές με γνώμονα τη συμπεριφορά. Μπορεί να χρησιμοποιηθεί παράλληλα με οποιοδήποτε άλλο πλαίσιο. Υπάρχει εδώ και αρκετό καιρό και έχει εξελιχθεί με την εξέλιξη στα πρότυπα Javascript.
Το ChaiJS συνεργάζεται με το Node, το πρόγραμμα περιήγησης, το rail και έχει εξαιρετική κοινότητα υποστήριξης και τεκμηρίωση.
Qunit
Qunit – ένα ισχυρό πλαίσιο δοκιμών αφιερωμένο στη χρήση με ένα frontend. Είναι η πρώτη επιλογή από τους προγραμματιστές των βιβλιοθηκών JQuery, JQuery Mobile και JQuery UI.
Μπορεί να γραφτεί ως ανεξάρτητο αρχείο JS και να εκτελεστεί σε οποιαδήποτε ιστοσελίδα. Η τυπική μέθοδος δοκιμής με χρήση του Qunit είναι η συμπερίληψη του αρχείου στην ιστοσελίδα και η εκτέλεση δοκιμών χρησιμοποιώντας την προσθήκη Qunit. Τα οφέλη του QUnit περιλαμβάνουν:
- Μπορεί να χρησιμοποιηθεί για τη δημιουργία επαναχρησιμοποιήσιμων δοκιμαστικών σεναρίων
- Παρέχει μια έτοιμη για ανάπτυξη διεπαφή ιστού για οπτική προβολή εξόδων δοκιμαστικής περίπτωσης
- Μια δεξαμενή προσθηκών που είναι χτισμένη πάνω της επιτρέπει ταχύτερη ανάπτυξη δοκιμαστικών περιπτώσεων
Sinon
Sinon.js συμπληρώνει το πλαίσιο δοκιμών της μονάδας για να πλαστογραφεί/εικονίζει τα αληθινά πράγματα. Γιατί κατά τη διάρκεια της δοκιμής – δεν θα έχετε όλα τα δεδομένα! Υποστηρίζει χρόνους εκτέλεσης Chrome, IE 11, Firefox, Edge, Safari και Node.js.
Μια καλή εναλλακτική για τη Sinon θα ήταν testdouble.js
συμπέρασμα
Η δοκιμή μονάδας είναι απαραίτητη για να διασφαλιστεί ότι οι αλλαγές στον κώδικα δεν θα σπάσουν την εφαρμογή και λειτουργεί σύμφωνα με τις επιχειρηματικές απαιτήσεις. Και ελπίζω τα παραπάνω να σας βοηθήσουν σε αυτό. Εάν είστε αρχάριος, τότε μπορεί να σας αρέσει αυτό διαδικτυακό μάθημα που σας διδάσκει να κάνετε δοκιμές μονάδων JS με ChaiJS, Sinon και Mocha.