Δοκιμή μονάδας AngularJS: Karma Jasmine Tutorial

Ένα από τα πιο λαμπρά χαρακτηριστικά του Angular.JS είναι το στοιχείο Testing. Όταν οι προγραμματιστές της Google ανέπτυξαν το AngularJS, συνέχισαν τις δοκιμές και εξασφάλισαν ότι ολόκληρο το πλαίσιο του AngularJS ήταν ελεγχόμενο.

Στο AngularJS, η δοκιμή πραγματοποιείται κανονικά με χρήση του Karma (framework). Η γωνιακή δοκιμή JS μπορεί να πραγματοποιηθεί χωρίς Karma, αλλά το πλαίσιο Karma έχει μια τόσο λαμπρή λειτουργικότητα για τη δοκιμή κώδικα AngularJS, που έχει νόημα να χρησιμοποιήσετε αυτό το πλαίσιο.

Στο AngularJS, μπορούμε να εκτελέσουμε τη δοκιμή μονάδας ξεχωριστά για ελεγκτές και οδηγίες.
Μπορούμε επίσης να πραγματοποιήσουμε δοκιμές στο τέλος του τέλους του AngularJS, το οποίο δοκιμάζει από την πλευρά του χρήστη.

Σε αυτό το σεμινάριο, θα μάθετε-

Εισαγωγή & Εγκατάσταση του πλαισίου Karma

Εγκατάσταση του Κάρμα
Διαμόρφωση του πλαισίου του Κάρμα

Δοκιμή ελεγκτών AngularJS
Δοκιμή οδηγιών AngularJS
End to End Testing AngularJS JS εφαρμογές

Εισαγωγή & Εγκατάσταση του πλαισίου Karma

Το Karma είναι ένα εργαλείο δοκιμής αυτοματισμού που δημιουργήθηκε από την ομάδα Angular JS της Google. Το πρώτο βήμα για τη χρήση του Karma είναι η εγκατάσταση του Karma. Το Karma εγκαθίσταται μέσω npm (το οποίο είναι διαχειριστής πακέτων που χρησιμοποιείται για εύκολη εγκατάσταση μονάδων σε τοπικό μηχάνημα).

Εγκατάσταση του Κάρμα

Η εγκατάσταση του Karma μέσω npm γίνεται σε διαδικασία δύο βημάτων.

Βήμα 1) Εκτελέστε την παρακάτω γραμμή μέσα από τη γραμμή εντολών

npm install karma karma-chrome-launcher karma-jasmine

Εν

Το npm είναι το βοηθητικό πρόγραμμα γραμμής εντολών για τον διαχειριστή πακέτων κόμβων που χρησιμοποιείται για την εγκατάσταση προσαρμοσμένων ενοτήτων σε οποιοδήποτε μηχάνημα.
Η παράμετρος εγκατάστασης δίνει εντολή στο βοηθητικό πρόγραμμα γραμμής εντολών npm ότι απαιτείται εγκατάσταση.
Υπάρχουν 3 βιβλιοθήκες που καθορίζονται στη γραμμή εντολών που απαιτούνται για την εργασία με το κάρμα
- Το karma είναι η βασική βιβλιοθήκη που θα χρησιμοποιηθεί για δοκιμές.
- Το karma-chrome-launcher είναι μια ξεχωριστή βιβλιοθήκη που επιτρέπει την αναγνώριση των εντολών karma από το πρόγραμμα περιήγησης chrome.
- karma-γιασεμί - Αυτό εγκαθιστά το γιασεμί που είναι ένα εξαρτημένο πλαίσιο για το Κάρμα.

Βήμα 2) Το επόμενο βήμα είναι να εγκαταστήσετε το βοηθητικό πρόγραμμα γραμμής εντολών karma. Αυτό απαιτείται για την εκτέλεση εντολών γραμμής κάρμα. Το βοηθητικό πρόγραμμα γραμμής κάρμα θα χρησιμοποιηθεί για την προετοιμασία του περιβάλλοντος του κάρμα για δοκιμή.

Για να εγκαταστήσετε το βοηθητικό πρόγραμμα γραμμής εντολών εκτελέστε την παρακάτω γραμμή μέσα από τη γραμμή εντολών

npm install karma-cli

εν,

Το karma-cli χρησιμοποιείται για την εγκατάσταση της διεπαφής γραμμής εντολών για το karma που θα χρησιμοποιηθεί για την εγγραφή των εντολών karma στη διεπαφή της γραμμής εντολών.

Διαμόρφωση του πλαισίου του Κάρμα

Το επόμενο βήμα είναι να διαμορφώσετε το κάρμα που μπορεί να γίνει μέσω της εντολής

"karma -init"

Μετά την εκτέλεση του παραπάνω βήματος, το karma θα δημιουργήσει ένα αρχείο karma.conf.js. Το αρχείο πιθανότατα θα μοιάζει με το απόσπασμα που φαίνεται παρακάτω

files: ['Your application Name'/AngularJS/AngularJS.js','Your application Name'/AngularJS-mocks/AngularJS-mocks.js','lib/app.js','tests/*.js']

Τα παραπάνω αρχεία διαμόρφωσης λένε στον κινητήρα χρόνου εκτέλεσης του κάρμα τα ακόλουθα πράγματα

«Το όνομα της αίτησής σας» - Αυτό θα αντικατασταθεί από το όνομα της αίτησής σας.
« Όνομα της εφαρμογής σας» / AngularJS / AngularJS.js » - Αυτό λέει στο κάρμα ότι η εφαρμογή σας εξαρτάται από τις βασικές ενότητες του AngularJS
«Όνομα της αίτησής σας» / AngularJS-mocks / AngularJS-mocks.js » - Αυτό λέει στο karma να χρησιμοποιήσει τη λειτουργικότητα Unit Testing για AngularJS από το αρχείο Angular.JS-mocks.js.
Όλα τα αρχεία της κύριας εφαρμογής ή της επιχειρηματικής λογικής υπάρχουν στον φάκελο lib της εφαρμογής σας.
Ο φάκελος δοκιμών θα περιέχει όλες τις δοκιμές μονάδας

Για να ελέγξετε αν το κάρμα λειτουργεί, δημιουργήστε ένα αρχείο με το όνομα Sample.js, τοποθετήστε τον παρακάτω κώδικα και τοποθετήστε το στον κατάλογο δοκιμών.

describe('Sample test', function() {it('Condition is true', function() {expect('AngularJS').toBe('AngularJS');});});

Ο παραπάνω κώδικας έχει τις ακόλουθες πτυχές

Η συνάρτηση περιγραφής χρησιμοποιείται για να δώσει μια περιγραφή του τεστ. Στην περίπτωσή μας, δίνουμε την περιγραφή «Δοκιμή δείγματος» στη δοκιμή μας.
Η συνάρτηση «it» χρησιμοποιείται για να δώσει ένα όνομα στο τεστ. Στην περίπτωσή μας, δίνουμε το όνομα της δοκιμής μας ως «Η κατάσταση είναι αλήθεια». Το όνομα του τεστ πρέπει να έχει νόημα.
Ο συνδυασμός της λέξης-κλειδιού «expect» και «toBe» αναφέρει ποια είναι η αναμενόμενη και πραγματική αξία του αποτελέσματος της δοκιμής. Εάν η πραγματική και αναμενόμενη τιμή είναι η ίδια, τότε το τεστ θα περάσει αλλιώς θα αποτύχει.

Όταν εκτελέσετε την ακόλουθη γραμμή στη γραμμή εντολών, θα εκτελέσει το παραπάνω αρχείο δοκιμής

KARMA start

Η παρακάτω έξοδος προέρχεται από την IDE Webstorm στην οποία πραγματοποιήθηκαν τα παραπάνω βήματα.

Η έξοδος έρχεται στον εξερευνητή Karma στο Webstorm. Αυτό το παράθυρο δείχνει την εκτέλεση όλων των δοκιμών που ορίζονται στο πλαίσιο του κάρμα.
Εδώ μπορείτε να δείτε ότι εμφανίζεται η περιγραφή του τεστ που εκτελείται που είναι "Δοκιμή δειγμάτων".
Στη συνέχεια, μπορείτε να δείτε ότι εκτελείται η ίδια η δοκιμή που έχει το όνομα "Condition is true".
Σημειώστε ότι αφού όλες οι δοκιμές έχουν το πράσινο εικονίδιο "Ok" δίπλα του, το οποίο συμβολίζει την επιτυχία όλων των δοκιμών.

Δοκιμή ελεγκτών AngularJS

Το πλαίσιο δοκιμών karma έχει επίσης τη λειτουργικότητα να ελέγχει τους ελεγκτές από άκρο σε άκρο. Αυτό περιλαμβάνει τη δοκιμή του αντικειμένου $ lingkup που χρησιμοποιείται στους Ελεγκτές.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε.

Στο παράδειγμά μας,

Πρέπει πρώτα να ορίσουμε έναν ελεγκτή. Αυτός ο ελεγκτής θα πραγματοποιήσει τα παρακάτω βήματα

Δημιουργήστε μια μεταβλητή ID και εκχωρήστε την τιμή 5 σε αυτήν.
Αντιστοιχίστε τη μεταβλητή ID στο αντικείμενο εύρους $.

Η δοκιμή μας θα ελέγξει την ύπαρξη αυτού του ελεγκτή και θα ελέγξει επίσης για να δει εάν η μεταβλητή ID του αντικειμένου $ lingkup έχει οριστεί σε 5.

Πρώτα πρέπει να διασφαλίσουμε ότι υπάρχει η ακόλουθη προϋπόθεση

Εγκαταστήστε τη βιβλιοθήκη Angular.JS-mocks μέσω npm. Αυτό μπορεί να γίνει εκτελώντας την παρακάτω γραμμή στη γραμμή εντολών

npm install Angular JS-mocks

Επόμενο είναι να τροποποιήσετε το αρχείο karma.conf.js για να βεβαιωθείτε ότι τα σωστά αρχεία περιλαμβάνονται για τη δοκιμή. Το παρακάτω τμήμα δείχνει απλώς το τμήμα αρχείων του karma.conf.js που πρέπει να τροποποιηθεί
```
files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
```

Η παράμετρος «αρχεία» λέει βασικά στον Κάρμα όλα τα αρχεία που απαιτούνται κατά την εκτέλεση των δοκιμών.
Το αρχείο AngularJS.js και AngularJS-mocks.js απαιτείται για την εκτέλεση δοκιμών μονάδας AngularJS
Το αρχείο index.js πρόκειται να περιέχει τον κωδικό μας για τον ελεγκτή
Ο δοκιμαστικός φάκελος θα περιέχει όλες τις δοκιμές AngularJS

Ακολουθεί ο κώδικας Angular.JS που θα αποθηκευτεί ως αρχείο Index.js στον δοκιμαστικό φάκελο της εφαρμογής μας.

Ο παρακάτω κώδικας κάνει ακριβώς τα ακόλουθα πράγματα

Δημιουργήστε μια γωνιακή μονάδα JS που ονομάζεται sampleApp
Δημιουργήστε έναν ελεγκτή που ονομάζεται AngularJSController
Δημιουργήστε μια μεταβλητή που ονομάζεται ID, δώστε της μια τιμή 5 και αντιστοιχίστε την στο αντικείμενο εύρους $

var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Μόλις ο παραπάνω κώδικας εκτελεστεί με επιτυχία, το επόμενο βήμα θα ήταν να δημιουργήσετε μια δοκιμαστική θήκη για να βεβαιωθείτε ότι ο κώδικας έχει γραφτεί και εκτελεστεί σωστά.

Ο κωδικός για τη δοκιμή μας θα είναι όπως φαίνεται παρακάτω.

Ο κωδικός θα βρίσκεται σε ξεχωριστό αρχείο που ονομάζεται ControllerTest.js, το οποίο θα τοποθετηθεί στον δοκιμαστικό φάκελο. Ο παρακάτω κώδικας κάνει τα ακόλουθα βασικά πράγματα

BeforeEach function - Αυτή η λειτουργία χρησιμοποιείται για τη φόρτωση της μονάδας AngularJS.JS που ονομάζεται «sampleApp» πριν από την εκτέλεση της δοκιμής. Σημειώστε ότι αυτό είναι το όνομα της λειτουργικής μονάδας σε ένα αρχείο index.js.
Το αντικείμενο $ controller δημιουργείται ως αντικείμενο mockup για τον ελεγκτή "Angular JSController" το οποίο ορίζεται στο αρχείο index.js. Σε οποιοδήποτε είδος Unit Testing, ένα πλαστό αντικείμενο αντιπροσωπεύει ένα πλαστό αντικείμενο που θα χρησιμοποιηθεί στην πραγματικότητα για τη δοκιμή. Αυτό το πλαστό αντικείμενο θα προσομοιώσει πραγματικά τη συμπεριφορά του ελεγκτή μας.
BeforeEach (inject (function (_ $ controller_) - Χρησιμοποιείται για την ένεση του ψεύτικου αντικειμένου στη δοκιμή μας, έτσι ώστε να συμπεριφέρεται όπως ο πραγματικός ελεγκτής.
var $ εύρος = {}; Αυτό είναι ένα πλαστό αντικείμενο που δημιουργείται για το αντικείμενο $ lingkup.
var controller = $ controller ('AngularJSController', {$ εύρος: $ εύρος}); - Εδώ ελέγχουμε την ύπαρξη ενός ελεγκτή που ονομάζεται «Angular.JSController». Εδώ αναθέτουμε επίσης όλες τις μεταβλητές από το αντικείμενο $ lingkup στον ελεγκτή μας στο αρχείο Index.js στο αντικείμενο
Τέλος, συγκρίνουμε το $ lingkup.ID με το 5

describe('AngularJSController', function() {beforeEach(module('sampleApp'));var $controller;beforeEach(inject(function(_$controller_){$controller = _$controller_;}));describe('$scope.ID', function() {it('Check the scope object', function() {var $scope = {};var controller = $controller('AngularJSController', { $scope: $scope });expect($scope.ID).toEqual(5);});});});

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

Δοκιμή γωνιακών οδηγιών JS

Το πλαίσιο δοκιμών karma έχει επίσης τη λειτουργικότητα για τη δοκιμή προσαρμοσμένων οδηγιών. Αυτό περιλαμβάνει τα templateURL's που χρησιμοποιούνται σε προσαρμοσμένες οδηγίες.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε.

Στο παράδειγμά μας, θα καθορίσουμε πρώτα μια προσαρμοσμένη οδηγία που κάνει τα ακόλουθα πράγματα

Δημιουργήστε μια μονάδα AngularJS που ονομάζεται sampleApp
Δημιουργήστε μια προσαρμοσμένη οδηγία με το όνομα - Guru99
Δημιουργήστε μια συνάρτηση που επιστρέφει ένα πρότυπο με μια ετικέτα κεφαλίδας που εμφανίζει το κείμενο "This is AngularJS Testing."

var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '
This is AngularJS Testing
'};});

Ο κωδικός θα βρίσκεται σε ξεχωριστό αρχείο που ονομάζεται DirectiveTest.js, το οποίο θα τοποθετηθεί στον δοκιμαστικό φάκελο. Ο παρακάτω κώδικας κάνει τα ακόλουθα βασικά πράγματα

BeforeEach function - Αυτή η λειτουργία χρησιμοποιείται για τη φόρτωση της μονάδας Angular JS που ονομάζεται «sampleApp» πριν από την εκτέλεση της δοκιμής.
Η υπηρεσία $ compile χρησιμοποιείται για τη σύνταξη της οδηγίας. Αυτή η υπηρεσία είναι υποχρεωτική και πρέπει να δηλωθεί έτσι ώστε το Angular.JS να μπορεί να τη χρησιμοποιήσει για να συντάξει την προσαρμοσμένη οδηγία.
Το $ rootscope είναι το κύριο πεδίο οποιασδήποτε εφαρμογής AngularJS.JS. Έχουμε δει το αντικείμενο εύρους $ του ελεγκτή σε προηγούμενα κεφάλαια. Λοιπόν, το αντικείμενο $ lingkup είναι το θυγατρικό αντικείμενο του αντικειμένου $ rootscope. Ο λόγος που δηλώνεται εδώ είναι επειδή κάνουμε μια αλλαγή σε μια πραγματική ετικέτα HTML στο DOM μέσω της προσαρμοσμένης οδηγίας. Ως εκ τούτου, πρέπει να χρησιμοποιήσουμε την υπηρεσία $ rootscope που στην πραγματικότητα ακούει ή γνωρίζει πότε θα πραγματοποιηθεί οποιαδήποτε αλλαγή από ένα έγγραφο HTML.
var element = $ compile (" ") - Χρησιμοποιείται για να ελεγχθεί εάν η οδηγία μας εγχέεται όπως θα έπρεπε. Το όνομα της προσαρμοσμένης οδηγίας μας είναι Guru99 και γνωρίζουμε από το κεφάλαιο προσαρμοσμένων οδηγιών ότι όταν η οδηγία εγχέεται στον HTML μας, θα εισαχθεί ως « ». Ως εκ τούτου, αυτή η δήλωση χρησιμοποιείται για να γίνει αυτός ο έλεγχος.
توقع (element.html ()). toContain ("This is AngularJS Testing") - Αυτό χρησιμοποιείται για να καθοδηγήσει τη λειτουργία αναμενόμενης κατάστασης που θα πρέπει να βρει το στοιχείο (στην περίπτωσή μας η ετικέτα div) να περιέχει το εσωτερικό κείμενο HTML Δοκιμή AngularJS ".

describe('Unit testing directives', function() {var $compile,$rootScope;beforeEach(module('sampleApp'));beforeEach(inject(function(_$compile_, _$rootScope_){$compile = _$compile_;$rootScope = _$rootScope_;}));it('Check the directive', function() {// Compile a piece of HTML containing the directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

End to End Testing AngularJS JS εφαρμογές

Το πλαίσιο δοκιμών κάρμα μαζί με ένα πλαίσιο που ονομάζεται Protractor έχει τη λειτουργικότητα της δοκιμής μιας εφαρμογής ιστού από άκρη σε άκρη.

Επομένως, δεν είναι μόνο έλεγχος οδηγιών και ελεγκτών, αλλά και έλεγχος οτιδήποτε άλλο μπορεί να εμφανίζεται σε μια σελίδα HTML.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε.

Στο παρακάτω παράδειγμά μας, θα έχουμε μια εφαρμογή AngularJS που δημιουργεί έναν πίνακα δεδομένων χρησιμοποιώντας την οδηγία ng-repeat.

Αρχικά δημιουργούμε μια μεταβλητή που ονομάζεται "φροντιστήριο" και της εκχωρούμε μερικά ζεύγη κλειδιών-τιμών σε ένα βήμα. Κάθε ζεύγος κλειδιού-τιμής θα χρησιμοποιηθεί ως δεδομένα κατά την εμφάνιση του πίνακα. Στη συνέχεια, η μεταβλητή εκμάθησης αντιστοιχίζεται στο αντικείμενο εύρους έτσι ώστε να είναι προσβάσιμη από την άποψή μας.
Για κάθε σειρά δεδομένων στον πίνακα, χρησιμοποιούμε την οδηγία ng-repeat. Αυτή η οδηγία περνά από κάθε ζεύγος κλειδιού-τιμής στο αντικείμενο πεδίου φροντιστηρίου χρησιμοποιώντας τη μεταβλητή ptutor.
Τέλος, χρησιμοποιούμε την ετικέτα μαζί με τα ζεύγη τιμών κλειδιών (ptutor.Name και ptutor.Description) για να εμφανίσουμε τα δεδομένα πίνακα.


{{ ptutor.Name }} {{ ptutor.Description }}

Πίνακας περιεχομένων:

Εισαγωγή & Εγκατάσταση του πλαισίου Karma

Εγκατάσταση του Κάρμα

Διαμόρφωση του πλαισίου του Κάρμα

Δοκιμή ελεγκτών AngularJS

Δοκιμή γωνιακών οδηγιών JS

This is AngularJS Testing

End to End Testing AngularJS JS εφαρμογές