AngularJS Unit Testing: Karma Jasmine Tutorial

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

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

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

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

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

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

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

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

npm install karma karma-chrome-launcher karma-jasmine

Εν,

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

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

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

npm install karma-cli

εν,

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

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

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

"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'
]

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

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

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

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

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

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

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

KARMA start

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

1. Η έξοδος έρχεται στον εξερευνητή Κάρμα μέσα Webstorm. Αυτό το παράθυρο δείχνει την εκτέλεση όλων των δοκιμών που ορίζονται στο πλαίσιο του κάρμα.
2. Εδώ μπορείτε να δείτε ότι εμφανίζεται η περιγραφή της δοκιμής που εκτελέστηκε η οποία είναι "Δείγμα δοκιμής".
3. Στη συνέχεια, μπορείτε να δείτε ότι εκτελείται η ίδια η δοκιμή που έχει το όνομα "Ο όρος είναι αληθής".
4. Σημειώστε ότι επειδή όλες οι δοκιμές έχουν το πράσινο εικονίδιο "Ok" δίπλα που συμβολίζει ότι όλα τα τεστ πέρασαν.

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

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

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

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

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

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

Η δοκιμή μας θα ελέγξει την ύπαρξη αυτού του ελεγκτή και επίσης θα ελέγξει εάν η μεταβλητή ID του αντικειμένου $scope έχει οριστεί σε 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']

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

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

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

1. Δημιουργία ενός Μονάδα AngularJS ονομάζεται sampleApp
2. Δημιουργήστε έναν ελεγκτή που ονομάζεται AngularJSController
3. Δημιουργήστε μια μεταβλητή που ονομάζεται ID, δώστε της μια τιμή 5 και αντιστοιχίστε την στο αντικείμενο $scope

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

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

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

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

1. Πριν από κάθε συνάρτηση – Αυτή η συνάρτηση χρησιμοποιείται για τη φόρτωση της λειτουργικής μονάδας AngularJS.JS που ονομάζεται «sampleApp» πριν από τη δοκιμαστική εκτέλεση. Σημειώστε ότι αυτό είναι το όνομα της λειτουργικής μονάδας σε ένα αρχείο index.js.
2. Το αντικείμενο $controller δημιουργείται ως αντικείμενο μακέτας για τον ελεγκτή "Angular JSController" που ορίζεται στο αρχείο μας index.js. Σε κάθε είδους δοκιμή μονάδας, ένα εικονικό αντικείμενο αντιπροσωπεύει ένα εικονικό αντικείμενο το οποίο θα χρησιμοποιηθεί πραγματικά για τη δοκιμή. Αυτό το εικονικό αντικείμενο θα προσομοιώσει πραγματικά τη συμπεριφορά του ελεγκτή μας.
3. BeforeEach(inject(function(_$controller_)) – Χρησιμοποιείται για την έγχυση του εικονικού αντικειμένου στη δοκιμή μας, έτσι ώστε να συμπεριφέρεται όπως ο πραγματικός ελεγκτής.
4. var $scope = {}; Αυτό είναι ένα εικονικό αντικείμενο που δημιουργείται για το αντικείμενο $scope.
5. var controller = $controller('AngularJSController', { $scope: $scope }); – Εδώ ελέγχουμε για την ύπαρξη ενός ελεγκτή με το όνομα 'Angular.JSController'. Εδώ εκχωρούμε επίσης όλες τις μεταβλητές από το αντικείμενο $scope στον ελεγκτή μας στο αρχείο Index.js στο αντικείμενο $scope στο αρχείο δοκιμής μας
6. Τέλος, συγκρίνουμε το $scope.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 και θα δώσει το ίδιο αποτέλεσμα επιτυχίας όπως παρουσιάστηκε στο προηγούμενο θέμα.

Δοκιμή Οδηγιών AngularJS

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

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

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

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

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

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

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

1. Πριν από κάθε συνάρτηση – Αυτή η συνάρτηση χρησιμοποιείται για τη φόρτωση της μονάδας Angular JS που ονομάζεται «sampleApp» πριν από τη δοκιμαστική εκτέλεση.
2. Η υπηρεσία $compile χρησιμοποιείται για τη σύνταξη της οδηγίας. Αυτή η υπηρεσία είναι υποχρεωτική και πρέπει να δηλωθεί έτσι ώστε το Angular.JS να μπορεί να τη χρησιμοποιήσει για να συντάξει την προσαρμοσμένη οδηγία μας.
3. Το $rootscope είναι το κύριο πεδίο οποιασδήποτε εφαρμογής AngularJS.JS. Έχουμε δει το αντικείμενο $scope του ελεγκτή σε προηγούμενα κεφάλαια. Λοιπόν, το αντικείμενο $scope είναι το θυγατρικό αντικείμενο του αντικειμένου $rootscope. Ο λόγος που δηλώνεται εδώ είναι επειδή κάνουμε μια αλλαγή σε μια πραγματική ετικέτα HTML στο DOM μέσω της προσαρμοσμένης μας οδηγίας. Ως εκ τούτου, πρέπει να χρησιμοποιήσουμε την υπηρεσία $rootscope η οποία πραγματικά ακούει ή γνωρίζει πότε συμβαίνει οποιαδήποτε αλλαγή μέσα από ένα έγγραφο HTML.
4. var στοιχείο = $compile(" ”) – Χρησιμοποιείται για να ελέγξουμε εάν η οδηγία μας εγχέεται όπως θα έπρεπε. Το όνομα της προσαρμοσμένης οδηγίας μας είναι Guru99 και γνωρίζουμε από το κεφάλαιο προσαρμοσμένων οδηγιών μας ότι όταν η οδηγία εισαχθεί στο HTML μας, θα εγχυθεί ως " '. Ως εκ τούτου, αυτή η δήλωση χρησιμοποιείται για να γίνει αυτός ο έλεγχος.
5. expect(element.html()).toContain("This is AngularJS Testing") – Χρησιμοποιείται για να δώσει εντολή στη συνάρτηση expect ότι πρέπει να βρει το στοιχείο (στην περίπτωσή μας την ετικέτα div) να περιέχει το κείμενο innerHTML του "This is AngularJS Testing”.

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 directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

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

Δοκιμές από άκρη σε άκρη εφαρμογών AngularJS JS

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

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

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

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

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

<table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

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

Η δοκιμή μας πρόκειται στην πραγματικότητα να δοκιμάσει την οδηγία ng-repeat και να διασφαλίσει ότι περιέχει 3 σειρές δεδομένων όπως θα έπρεπε από το παραπάνω παράδειγμα.

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

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

"npm install protractor"

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

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

1. Η λειτουργία του προγράμματος περιήγησης παρέχεται από τη βιβλιοθήκη μοιρογνωμόνιου και προϋποθέτει ότι η εφαρμογή AngularJS (με τον κώδικα που φαίνεται παραπάνω) εκτελείται στη διεύθυνση URL του ιστότοπού μας – http://localhost:8080/Guru99/
2. var list=element.all(by.repeater(ptutor in tutorial')); -Αυτή η γραμμή κώδικα λαμβάνει στην πραγματικότητα την οδηγία ng-repeat, η οποία συμπληρώνεται από τον κώδικα «ptutor in tutorial». Το στοιχείο και το by.repeater είναι ειδικές λέξεις-κλειδιά που παρέχονται από τη βιβλιοθήκη μοιρογνωμόνιου που μας επιτρέπει να λαμβάνουμε λεπτομέρειες για την οδηγία ng-repeat.
3. expect(list.count()).toEqual(3); – Τέλος, χρησιμοποιούμε τη συνάρτηση αναμονής για να δούμε ότι όντως λαμβάνουμε 3 στοιχεία που συμπληρώνονται στον πίνακά μας ως αποτέλεσμα της οδηγίας ng-repeat.

Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

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

Περίληψη

• Η δοκιμή στο AngularJS επιτυγχάνεται χρησιμοποιώντας το πλαίσιο karma, ένα πλαίσιο που έχει αναπτυχθεί από την ίδια την Google.
• Το πλαίσιο κάρμα εγκαθίσταται χρησιμοποιώντας τον διαχειριστή πακέτων κόμβου. Οι βασικές μονάδες που απαιτείται να εγκατασταθούν για τη βασική δοκιμή είναι το karma, το karma-chrome-launcher, το karma-jasmine και το karma-cli.
• Οι δοκιμές είναι γραμμένες σε ξεχωριστά αρχεία js, που συνήθως φυλάσσονται στον φάκελο δοκιμής της εφαρμογής σας. Η θέση αυτών των αρχείων δοκιμής πρέπει να αναφέρεται σε ένα ειδικό αρχείο διαμόρφωσης που ονομάζεται karma.conf.js. Το Karma χρησιμοποιεί αυτό το αρχείο διαμόρφωσης κατά την εκτέλεση όλων των δοκιμών.
• Το Karma μπορεί να χρησιμοποιηθεί για τη δοκιμή ελεγκτών και προσαρμοσμένων οδηγιών επίσης.
• Για μια ολοκληρωμένη δοκιμή web, ένα άλλο πλαίσιο που ονομάζεται μοιρογνωμόνιο πρέπει να εγκατασταθεί μέσω του Node, διαχείρισης πακέτων. Αυτό το πλαίσιο παρέχει ειδικές μεθόδους που μπορούν να χρησιμοποιηθούν για τον έλεγχο όλων των στοιχείων σε μια σελίδα HTML.