Εισαγωγή

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

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

Σε αυτό το σεμινάριο, πρόκειται να αναιρέσουμε το επίπεδο λογικής της εφαρμογής και να μάθουμε πώς να κάνουμε τη σωστή ρύθμιση του έργου AngularJS, συμπεριλαμβανομένων των σκαλωσιάς, της διαχείρισης εξάρτησης και να το προετοιμάσουμε για δοκιμή (τόσο μονάδα όσο και από άκρο σε άκρο). Θα το κάνουμε χρησιμοποιώντας αυτά τα εργαλεία AngularJS: Yeoman, Grunt και Bower. Στη συνέχεια, θα εξετάσουμε τη διαδικασία σύνταξης και εκτέλεσης δοκιμών Jasmine χρησιμοποιώντας το Karma.

Karma, Jasmine, Grunt, Bower, Yeoman… Ποια είναι όλα αυτά τα εργαλεία;

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

• Κάρμα (παλαιότερα γνωστό ως Testacular) είναι ο δρομέας δοκιμών JavaScript της Google και η φυσική επιλογή για τη δοκιμή του AngularJS. Εκτός από το ότι σας επιτρέπει να εκτελείτε τις δοκιμές σας σε πραγματικά προγράμματα περιήγησης (συμπεριλαμβανομένων των προγραμμάτων περιήγησης τηλεφώνου / tablet), είναι επίσης αγνωστικό πλαίσιο δοκιμής ; που σημαίνει ότι μπορείτε να το χρησιμοποιήσετε σε συνδυασμό με όποιος δοκιμαστικό πλαίσιο της επιλογής σας (όπως γιασεμί, Μόκα , ή Πλήρης , μεταξύ άλλων).

  
  
  

• Γιασεμί θα είναι το δοκιμαστικό πλαίσιο επιλογής μας, τουλάχιστον για αυτήν τη θέση. Η σύνταξή του είναι αρκετά παρόμοια με εκείνη του RSpec , αν έχετε δουλέψει ποτέ με αυτό. (Εάν δεν το έχετε, μην ανησυχείτε. Θα το ελέγξουμε λεπτομερέστερα αργότερα σε αυτό το σεμινάριο.)

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

  
  
  

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

• Μικροκτηματίας είναι ένα σύνολο εργαλείων που περιέχει 3 βασικά συστατικά: Grunt, Bower και το εργαλείο σκαλωσιάς Εγώ . Το Yo δημιουργεί κώδικα boilerplate με τη βοήθεια γεννητριών (που είναι απλά πρότυπα σκαλωσιάς) και ρυθμίζει αυτόματα το Grunt and Bower για το έργο σας. Μπορείτε να βρείτε γεννήτριες για σχεδόν οποιοδήποτε πλαίσιο JavaScript (Angular, Backbone, Ember κ.λπ.), αλλά επειδή εστιάζουμε εδώ στο Angular, θα χρησιμοποιήσουμε το γεννήτρια-γωνιακή έργο.

  
  
  

Λοιπόν, από πού ξεκινάμε;

Λοιπόν, το πρώτο πράγμα που πρέπει να κάνουμε είναι να εγκαταστήσουμε τα εργαλεία που θα χρειαζόμαστε.

Παραδείγματα επίδειξης angularjs για αρχάριους

Εάν δεν έχετε πηγαίνω , node.js , και πάνω από το επίπεδο της θάλασσας ήδη εγκατεστημένο, προχωρήστε και εγκαταστήστε τα.

Στη συνέχεια, θα μεταβούμε στη γραμμή εντολών και θα εκτελέσουμε την ακόλουθη εντολή για να εγκαταστήσουμε τα εργαλεία του Yeoman:

npm install -g yo grunt-cli bower

Ω, και μην ξεχνάτε, θα χρησιμοποιήσουμε τη γεννήτρια AngularJS, οπότε θα πρέπει να την εγκαταστήσετε επίσης:

npm install -g generator-angular

Εντάξει, τώρα είμαστε έτοιμοι να…

Σκαλωσιά / δημιουργία της εφαρμογής μας AngularJS

Τελευταία φορά , δανειστήκαμε με μη αυτόματο τρόπο τον κωδικό boilerplate από το γωνιακός-σπόρος έργο. Αυτή τη φορά, θα αφήσουμε το yo (σε συνδυασμό με τη γωνιακή γεννήτρια) να το κάνει για εμάς.

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

yo angular

Θα παρουσιαστούν ορισμένες επιλογές, όπως εάν θα συμπεριληφθεί ή όχι Μπότα και Πυξίδα . Για τώρα, ας πούμε όχι στην πυξίδα και Ναί στο Bootstrap. Στη συνέχεια, όταν σας ζητηθεί ποιες ενότητες θα συμπεριληφθούν (πόρος, cookie, απολύμανση και διαδρομή), θα επιλέξουμε μόνο angular-route.js.

Το ικρίωμα του έργου μας πρέπει τώρα να δημιουργηθεί (μπορεί να διαρκέσει ένα λεπτό), ενσωματωμένο με το Karma και όλα τα προκαθορισμένα.

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

Τώρα, δεδομένου ότι πρόκειται να χρησιμοποιήσουμε το Jasmine, ας προσθέσουμε το karma-jasmine προσαρμογέας στο έργο μας:

npm install karma-jasmine --save-dev

Σε περίπτωση που θέλουμε να εκτελούνται οι δοκιμές μας σε μια παρουσία Chrome, ας προσθέσουμε επίσης το karma-chrome-launcher:

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

Εντάξει, αν κάναμε τα πάντα σωστά, το δέντρο αρχείων του έργου μας θα πρέπει τώρα να μοιάζει με αυτό:

Ο στατικός μας κωδικός εφαρμογής μπαίνει στο app/ κατάλογος και το test/ Ο κατάλογος θα περιέχει (ναι, το μαντέψατε!) τις δοκιμές μας. Τα αρχεία που βλέπουμε στη ρίζα είναι τα αρχεία διαμόρφωσης του έργου μας. Πρέπει να μάθουμε πολλά για κάθε ένα από αυτά, αλλά προς το παρόν θα παραμείνουμε στην προεπιλεγμένη διαμόρφωση. Ας τρέξουμε λοιπόν την εφαρμογή μας για πρώτη φορά, την οποία μπορούμε να κάνουμε απλά με την ακόλουθη εντολή:

grunt serve

Και voila! Η εφαρμογή μας πρέπει τώρα να εμφανιστεί μπροστά μας!

Λίγο για το Bower για AngularJS

Πριν μπείτε στο πραγματικά σημαντικό μέρος (δηλαδή στη δοκιμή), ας αφιερώσουμε ένα λεπτό για να μάθουμε λίγο περισσότερα Κληματαριά . Όπως αναφέρθηκε προηγουμένως, η Bower είναι ο διαχειριστής πακέτων μας. Η προσθήκη lib ή πρόσθετου στο έργο μας μπορεί απλά να γίνει χρησιμοποιώντας το bower install εντολή. Για παράδειγμα, για να συμπεριλάβουμε modernizr, το μόνο που χρειάζεται να κάνουμε είναι το εξής (φυσικά στον κατάλογο έργων μας):

bower install modernizr

Σημειώστε, ωστόσο, ότι ενώ αυτό κάνει modernizr μέρος του έργου μας (θα βρίσκεται στον κατάλογο app/bower_components), είμαστε ακόμη υπεύθυνοι για τη συμπερίληψή του στην αίτησή μας (ή τη διαχείριση του πότε πρέπει να συμπεριληφθεί), όπως θα έπρεπε να κάνουμε με οποιαδήποτε χειροκίνητη προσθήκη lib. Ένας τρόπος για να γίνει αυτό θα ήταν απλώς να προσθέσετε την ακόλουθη ετικέτα στο index.html

bower.json

Εναλλακτικά, μπορούμε να χρησιμοποιήσουμε το bower.json αρχείο για τη διαχείριση των εξαρτήσεων μας. Αφού ακολουθήσετε προσεκτικά κάθε βήμα μέχρι τώρα, το { 'name': 'F1FeederApp', 'version': '0.0.0', 'dependencies': { 'angular': '1.2.15', 'json3': '~3.2.6', 'es5-shim': '~2.1.0', 'jquery': '~1.11.0', 'bootstrap': '~3.0.3', 'angular-route': '1.2.15' }, 'devDependencies': { 'angular-mocks': '1.2.15', 'angular-scenario': '1.2.15' } } το αρχείο πρέπει να έχει την εξής μορφή:

bower install

Η σύνταξη είναι αρκετά αυτονόητη, αλλά υπάρχουν περισσότερες πληροφορίες εδώ .

Μπορούμε στη συνέχεια να προσθέσουμε τυχόν νέες εξαρτήσεις που θέλουμε και έπειτα το μόνο που χρειαζόμαστε είναι η ακόλουθη εντολή για να τις εγκαταστήσουμε:

app

Τώρα ας γράψουμε μερικές δοκιμές!

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

Αλλά πρώτα, υπάρχει ένα μικρό πρόβλημα που πρέπει να αντιμετωπίσουμε: Αν και οι προγραμματιστές του γεννήτρια-γωνιακή βασίστηκε το πρότυπο έργου τους στο γωνιακός-σπόρος project (το οποίο είναι η επίσημη γωνιακή πλάκα), για κάποιο λόγο που δεν καταλαβαίνω πραγματικά, αποφάσισαν να αλλάξουν το css συμβάσεις ονομασίας φακέλων (αλλαγή styles σε js, scripts σε tests/spec/controllers και ούτω καθεξής).

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

Μετά τη λήψη της εφαρμογής, μεταβείτε στο drivers.js φάκελο και δημιουργήστε ένα αρχείο με το όνομα describe('Controller: driversController', function () { // First, we load the app's module beforeEach(module('F1FeederApp')); // Then we create some variables we're going to use var driversController, scope; beforeEach(inject(function ($controller, $rootScope, $httpBackend) { // Here, we create a mock scope variable, to replace the actual $scope variable // the controller would take as parameter scope = $rootScope.$new(); // Then we create an $httpBackend instance. I'll talk about it below. httpMock = $httpBackend; // Here, we set the httpBackend standard reponse to the URL the controller is // supposed to retrieve from the API httpMock.expectJSONP( 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK').respond( {'MRData': {'StandingsTable': {'StandingsLists' : [{'DriverStandings':[ { 'Driver': { 'givenName': 'Sebastian', 'familyName': 'Vettel' }, 'points': '397', 'nationality': 'German', 'Constructors': [ {'name': 'Red Bull'} ] }, { 'Driver': { 'givenName': 'Fernando', 'familyName': 'Alonso' }, 'points': '242', 'nationality': 'Spanish', 'Constructors': [ {'name': 'Ferrari'} ] }, { 'Driver': { 'givenName': 'Mark', 'familyName': 'Webber' }, 'points': '199', 'nationality': 'Australian', 'Constructors': [ {'name': 'Red Bull'} ] } ]}]}}} ); // Here, we actually initialize our controller, passing our new mock scope as parameter driversController = $controller('driversController', { $scope: scope }); // Then we flush the httpBackend to resolve the fake http call httpMock.flush(); })); // Now, for the actual test, let's check if the driversList is actually retrieving // the mock driver array it('should return a list with three drivers', function () { expect(scope.driversList.length).toBe(3); }); // Let's also make a second test checking if the drivers attributes match against // the expected values it('should retrieve the family names of the drivers', function () { expect(scope.driversList[0].Driver.familyName).toBe('Vettel'); expect(scope.driversList[1].Driver.familyName).toBe('Alonso'); expect(scope.driversList[2].Driver.familyName).toBe('Webber'); }); }); που περιέχει τα ακόλουθα:

driverscontroller

Αυτή είναι η δοκιμαστική σουίτα για το describe(). Μπορεί να μοιάζει με πολύ κώδικα, αλλά το μεγαλύτερο μέρος του είναι πραγματικά απλή δήλωση δεδομένων. Ας ρίξουμε μια γρήγορη ματιά στα πραγματικά σημαντικά στοιχεία:

• Το it() Η μέθοδος καθορίζει τη δοκιμαστική σουίτα.
• Κάθε beforeEach() είναι μια σωστή προδιαγραφή δοκιμής.
• Κάθε $httpBackend η λειτουργία εκτελείται ακριβώς πριν από κάθε δοκιμή.

Το πιο σημαντικό (και ενδεχομένως μπερδεμένο) στοιχείο εδώ είναι το httpMock υπηρεσία που δημιουργήσαμε στο expectJSONP() μεταβλητός. Αυτή η υπηρεσία λειτουργεί ως ψεύτικο back-end και ανταποκρίνεται στις κλήσεις API μας στις δοκιμές, όπως ακριβώς θα έκανε ο πραγματικός διακομιστής μας στην παραγωγή. Σε αυτήν την περίπτωση, χρησιμοποιώντας το expect() Λειτουργία, το ρυθμίσαμε ώστε να παρακολουθούν τυχόν αιτήματα JSONP στη δεδομένη διεύθυνση URL (την ίδια που χρησιμοποιούμε για να λάβουμε τις πληροφορίες από το διακομιστή) και αντ 'αυτού, επιστρέψτε μια στατική λίστα με τρία προγράμματα οδήγησης, μιμείται την πραγματική απόκριση του διακομιστή. Αυτό μας επιτρέπει να γνωρίζουμε με βεβαιότητα τι πρέπει να επιστρέψει από τον ελεγκτή. Μπορούμε λοιπόν να συγκρίνουμε τα αποτελέσματα με τα αναμενόμενα, χρησιμοποιώντας το grunt test λειτουργία. Εάν ταιριάζουν, το τεστ θα περάσει.

Η εκτέλεση των δοκιμών γίνεται απλά με την εντολή:

drivercontroller

Η δοκιμαστική σουίτα για τον ελεγκτή λεπτομερειών προγράμματος οδήγησης (generator-angular) πρέπει να είναι αρκετά παρόμοια με αυτήν που μόλις είδαμε. Σας συνιστώ να προσπαθήσετε να το καταλάβετε ως άσκηση (ή μπορείτε απλώς να ρίξετε μια ματιά εδώ , αν δεν είστε σε αυτό).

Τι γίνεται με τις δοκιμές AngularJS από άκρο σε άκρο;

Η ομάδα Angular παρουσίασε πρόσφατα έναν νέο δρομέα για δοκιμές end-to-end που ονομάζεται Μοιρογνωμόνιο . Χρησιμοποιεί πρόγραμμα οδήγησης ιστού για να αλληλεπιδράσει με την εφαρμογή που εκτελείται στο πρόγραμμα περιήγησης και χρησιμοποιεί επίσης το πλαίσιο δοκιμών Jasmine από προεπιλογή, έτσι η σύνταξη θα είναι πολύ συνεπής με αυτήν των δοκιμών μονάδας μας.

Δεδομένου ότι το Protractor είναι ένα αρκετά νέο εργαλείο, ωστόσο, είναι η ενσωμάτωση στο Yeoman stack και yo εξακολουθεί να απαιτεί αρκετό έργο διαμόρφωσης. Έχοντας αυτό υπόψη, και την πρόθεσή μου να κρατήσω αυτό το σεμινάριο όσο το δυνατόν πιο απλό, το σχέδιό μου είναι να αφιερώσω μια μελλοντική ανάρτηση αποκλειστικά για την κάλυψη των δοκιμών end-to-end στο AngularJS σε βάθος.

συμπέρασμα

Σε αυτό το σημείο της σειράς μαθημάτων, μάθαμε πώς να σκαλωσιάζουμε την εφαρμογή Angular με bower, να διαχειριζόμαστε τις εξαρτήσεις της με karma και να γράφουμε / να εκτελούμε μερικές δοκιμές χρησιμοποιώντας protractor και

|_+_|

. Λάβετε υπόψη, ωστόσο, ότι αυτό το σεμινάριο προορίζεται μόνο ως εισαγωγή σε αυτά τα εργαλεία και πρακτικές του AngularJS. δεν αναλύσαμε κανένα από αυτά εδώ σε βάθος.

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

Παράρτημα: Μερικές (σημαντικές) σημειώσεις του συγγραφέα

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

Η σύντομη απάντησή μου σε αυτό είναι όχι . Όπως είδαμε στο πρώτο μέρος, δεν χρειάζεται να γνωρίζετε όλα αυτά τα πράγματα για να κωδικοποιήσετε την πρώτη σας γωνιακή εφαρμογή. Αντίθετα, τα περισσότερα από τα εργαλεία που έχουμε συζητήσει σε αυτήν την ανάρτηση έχουν σχεδιαστεί για να σας βοηθήσουν να βελτιστοποιήσετε τη ροή εργασιών ανάπτυξης και να εφαρμόσετε το Test-Driven Development (TDD).

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

Προσωπικά πιστεύω ότι αυτός είναι ο κύριος λόγος για τον οποίο τα επίσημα μαθήματα Angular μπορεί να αισθάνονται τόσο περίπλοκα και μπορεί να είναι σχεδόν αδύνατο να ακολουθηθούν για άτομα χωρίς προηγούμενη εμπειρία MVC / TDD. Αυτός είναι ένας από τους κύριους λόγους για τους οποίους ξεκίνησα αυτήν τη σειρά μαθημάτων.

Οι προσωπικές μου συμβουλές για όσους μαθαίνουν να περιηγούνται στον κόσμο του AngularJS είναι: Μην είσαι πολύ σκληρός για τον εαυτό σου. Δεν χρειάζεται να μάθετε τα πάντα ταυτόχρονα (παρά τους άλλους που σας λένε διαφορετικά!). Ανάλογα με την προηγούμενη εμπειρία σας με άλλα πλαίσια front-end / testing, το AngularJS μπορεί να είναι αρκετά δύσκολο να κατανοηθεί αρχικά. Μάθετε λοιπόν όλα όσα πρέπει να μάθετε έως ότου μπορέσετε να γράψετε τις δικές σας απλές εφαρμογές και, στη συνέχεια, μόλις είστε ικανοποιημένοι με τα βασικά του πλαισίου, μπορείτε να ασχοληθείτε με την επιλογή και την εφαρμογή των μακροπρόθεσμων πρακτικών ανάπτυξης που λειτουργούν καλύτερα για εσείς.

Φυσικά, αυτή είναι η ταπεινή μου γνώμη και δεν θα συμφωνήσουν όλοι με αυτήν την προσέγγιση (και η ομάδα του Angular dev μπορεί να στείλει έναν μισθωμένο δολοφόνο μετά από εμένα όταν το δημοσιεύσω), αλλά αυτό είναι το όραμά μου και είμαι πολύ σίγουρος ότι είναι πολλοί άνθρωποι εκεί έξω που θα συμφωνήσουν μαζί μου.

Σχετίζεται με: Tutorial Angular 6: Νέες δυνατότητες με νέα ισχύ