Δοκιμή μονάδων AngularJS με Karma & Jasmine

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

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

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

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

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

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

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

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

npm install karma karma-chrome-launcher karma-jasmine --save-dev

Εν,

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

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

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

npm install -g karma-cli

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

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

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

karma init

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

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

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

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

Για να ελέγξετε εάν το κάρμα λειτουργεί, δημιουργήστε ένα αρχείο που ονομάζεται 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" δίπλα που συμβολίζει ότι όλα τα τεστ πέρασαν.

Τι είναι η Jasmine στο AngularJS Unit Testing;

Το Karma αποφασίζει πού θα εκτελούνται οι δοκιμές, ενώ η Jasmine αποφασίζει πώς θα γράφονται. Το Jasmine είναι ένα πλαίσιο προδιαγραφών που βασίζεται στη συμπεριφορά και παρέχει το λεξιλόγιο που χρησιμοποιείται σε κάθε παράδειγμα σε αυτήν τη σελίδα, γι' αυτό και ο προσαρμογέας karma-jasmine εγκαθίσταται παράλληλα με τον εκτελεστή.

Η Γιασμίν συνεισφέρει τέσσερα δομικά στοιχεία:

• περιγράφω(): Ομαδοποιεί τις σχετικές προδιαγραφές σε μια σουίτα και αποδέχεται μια ευανάγνωστη περιγραφή της υπό δοκιμή μονάδας.
• το(): Δηλώνει μία μόνο προδιαγραφή. Το όνομα θα πρέπει να δηλώνει τη συμπεριφορά που επαληθεύεται και όχι τη μέθοδο που καλείται.
• expect() με αντιστοιχίσεις: Συγκρίνει μια πραγματική τιμή με μια αναμενόμενη. Συνήθεις αντιστοιχίσεις περιλαμβάνουν τις toBe, toEqual, toContain και toBeDefined.
• πριν από κάθε() και μετά από κάθε(): Εκτελέστε εγκατάσταση και απεγκατάσταση πριν και μετά από κάθε προδιαγραφή, γεγονός που διατηρεί κάθε δοκιμή ανεξάρτητη.

Η Jasmine παρέχει επίσης κατασκόπους. Ένας κατάσκοπος αντικαθιστά μια πραγματική συνάρτηση με μια καταγεγραμμένη είσοδο, έτσι ώστε ένας ελεγκτής να μπορεί να δοκιμαστεί χωρίς να καλέσει ένα ζωντανό τελικό σημείο HTTP. Επειδή η Jasmine δεν χρειάζεται DOM και καμία δική της βιβλιοθήκη ισχυρισμών, ο συνδυασμός του Karma και της Jasmine παραμένει ο πιο εύκολος τρόπος για να εκτελέσετε το AngularJS. JavaΔοκιμές μονάδων σεναρίου.

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

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

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

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

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

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

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

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

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

npm install angular-mocks --save-dev

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

files: ['lib/angular.js', 'lib/angular-mocks.js', 'lib/index.js', 'test/*.js']

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Συνάρτηση beforeEach – Αυτή η συνάρτηση χρησιμοποιείται για τη φόρτωση της ενότητας AngularJS που ονομάζεται 'sampleApp' πριν από την εκτέλεση της δοκιμής.
2. Η υπηρεσία $compile χρησιμοποιείται για τη μεταγλώττιση της οδηγίας. Αυτή η υπηρεσία είναι υποχρεωτική και πρέπει να δηλωθεί, ώστε το AngularJS να μπορεί να τη χρησιμοποιήσει για τη μεταγλώττιση της προσαρμοσμένης οδηγίας μας.
3. Το $rootScope είναι το κύριο πεδίο εφαρμογής οποιασδήποτε εφαρμογής AngularJS. Έχουμε δει το αντικείμενο $scope του ελεγκτή σε προηγούμενα κεφάλαια. Λοιπόν, το αντικείμενο $scope είναι το θυγατρικό αντικείμενο του αντικειμένου $rootScope. Ο λόγος που δηλώνεται αυτό εδώ είναι επειδή κάνουμε μια αλλαγή σε μια πραγματική ετικέτα HTML στο DOM μέσω της προσαρμοσμένης οδηγίας μας. Ως εκ τούτου, πρέπει να χρησιμοποιήσουμε την υπηρεσία $rootScope η οποία στην πραγματικότητα ακούει ή γνωρίζει πότε συμβαίνει οποιαδήποτε αλλαγή μέσα από ένα έγγραφο HTML.
4. στοιχείο var = $compile(" ”)($rootScope) – Αυτό χρησιμοποιείται για να ελέγξουμε εάν η οδηγία μας εγχέεται όπως πρέπει. Η οδηγία έχει καταχωρηθεί με το όνομα camel case guru99, επομένως το AngularJS ταιριάζει με το στοιχείο με πεζά γράμματα στο markup. Επομένως, αυτή η πρόταση χρησιμοποιείται για να γίνει αυτός ο έλεγχος.
5. expect(element.html()).toContain(“Αυτό είναι AngularJS Testing”) – Χρησιμοποιείται για να δώσει εντολή στη συνάρτηση expect ότι θα πρέπει να βρει το στοιχείο (στην περίπτωσή μας την ετικέτα h1) που θα περιέχει το εσωτερικό κείμενο HTML του “Αυτό είναι 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("<guru99></guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

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

Ολοκληρωμένες δοκιμές εφαρμογών AngularJS

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

Επομένως, δεν είναι μόνο δοκιμή οδηγιών και ελεγκτών, αλλά και δοκιμή οποιουδήποτε άλλου μπορεί να εμφανίζεται σε μια σελίδα 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 = angular.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 σειρές δεδομένων όπως θα έπρεπε από το παραπάνω παράδειγμα.

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

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

npm install -g protractor

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

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

1. Η λειτουργία του προγράμματος περιήγησης παρέχεται από τον επαγγελματίαtracβιβλιοθήκη tor και υποθέτει ότι η εφαρμογή AngularJS μας (με τον κώδικα που φαίνεται παραπάνω) εκτελείται στον ιστότοπό μας URL – http://localhost:8080/Guru99 /
2. var list = element.all(by.repeater('ptutor in tutorial')); -Αυτή η γραμμή κώδικα στην πραγματικότητα ανακτά την οδηγία ng-repeat η οποία συμπληρώνεται από τον κώδικα 'ptutor in tutorial'. Το element και το by.repeater είναι ειδικές λέξεις-κλειδιά που παρέχονται από τον protracβιβλιοθήκη tor που μας επιτρέπει να λάβουμε λεπτομέρειες για την οδηγία 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 και θα δώσει το ίδιο αποτέλεσμα επιτυχίας όπως παρουσιάστηκε στο προηγούμενο θέμα.

Κάρμα εναντίον Τζάσμιν εναντίον Επαγγελματικούtractor: Βασικές διαφορές

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

Με λίγα λόγια, η Jasmine γράφει το τεστ, η Karma το εκτελεί και η ProtracΤο tor επεκτείνει την ίδια σύνταξη Jasmine σε μια πλήρως αποδομένη σελίδα.

καλυτερα Practices for AngularJS Unit Testing

Ένα μικρό σύνολο συνηθειών διατηρεί μια σουίτα AngularJS γρήγορη και αξιόπιστη καθώς η εφαρμογή αναπτύσσεται.

1. Δοκιμάστε μία μονάδα κάθε φορά. Φορτώστε μόνο την υπό δοκιμή ενότητα μέσα στο beforeEach και κάντε mock κάθε συνεργάτη, έτσι ώστε μια αποτυχία να υποδεικνύει ένα μόνο αρχείο.
2. Ποτέ μην καλείτε ένα πραγματικό backend. Χρησιμοποιήστε την υπηρεσία $httpBackend από το angular-mocks για να επιστρέψετε προκαθορισμένες απαντήσεις. Οι δοκιμές εκτελούνται στη συνέχεια εκτός σύνδεσης και παράγουν πανομοιότυπα αποτελέσματα σε κάθε υπολογιστή.
3. Διατηρήστε τα ονόματα των προδιαγραφών συμπεριφορικά. Ένα όνομα όπως «επιστρέφει 5 όταν ο ελεγκτής αρχικοποιείται» διαβάζεται καλύτερα σε μια αναφορά από το «test1».
4. Πάντα να ξεπλένετε τον κύκλο πέψης. Καλέστε την $rootScope.$digest() μετά την αλλαγή των δεδομένων εμβέλειας, διαφορετικά οι συνδέσεις και οι παρατηρητές δεν ενημερώνονται ποτέ και οι ισχυρισμοί αποτυγχάνουν για λάθος λόγο.
5. Μετρήστε την κάλυψη, αλλά κρίνετε την προσεκτικά. Προσθέστε κάλυψη karma για να δείτε μη δοκιμασμένους κλάδους. Η υψηλή κάλυψη με αδύναμους ισχυρισμούς εξακολουθεί να κρύβει ελαττώματα.
6. Εκτελέστε τη σουίτα σε συνεχή ενσωμάτωση. Χρησιμοποιήστε ένα headless Chrome launcher, ώστε οι ίδιες προδιαγραφές να εκτελούνται σε κάθε υποβολή και όχι μόνο σε έναν υπολογιστή προγραμματιστή.

Η εφαρμογή αυτών των κανόνων μετατρέπει τα παραπάνω παραδείγματα από μεμονωμένες επιδείξεις σε ένα δίχτυ ασφαλείας παλινδρόμησης για μια παλαιότερη βάση κώδικα AngularJS. Για μια ευρύτερη εικόνα, δείτε το Εκπαιδευτικό σεμινάριο AngularJS σειρές.

Συχνές Ερωτήσεις