Johdanto

Kehityksessä käytettävissä olevien monien työkalujen avulla KulmaJS monilla ihmisillä on käsitys, että se on erittäin monimutkainen kehys, mikä ei ole lainkaan. Se on yksi tärkeimmistä syistä tämän opetusohjelman aloittamiseen.

Sisään osa yksi käsittelimme AngularJS-kehyksen perusteet ja aloitimme kirjoittamalla ensimmäisen hakemuksemme. Tämä viesti on tarkoitettu aloittelijoille. Jos olet enemmän kokenut AngularJS-kehittäjä , saatat olla kiinnostunut enemmän demistifioivat direktiivit tai tarina AngularJS käytössä kasvavassa käynnistyksessä .

Tässä opetusohjelmassa aiomme jättää sovelluslogiikkatason syrjään ja oppia tekemään oikean AngularJS-projektin asennuksen, mukaan lukien rakennustelineet, riippuvuuksien hallinta ja sen valmisteleminen testausta varten (sekä yksiköt että päästä päähän). Teemme tämän käyttämällä näitä AngularJS-työkaluja: Yeoman, Grunt ja Bower. Sitten tarkastelemme Jasmine-testien kirjoittamista ja suorittamista Karman avulla.

Karma, Jasmine, Grunt, Bower, Yeoman ... Mitkä ovat kaikki nämä työkalut?

Jos käytät JavaScriptiä, on erittäin todennäköistä, että tiedät jo ainakin osan näistä työkaluista, vaikka olisit uusi Kulmikas . Mutta auttaakseni varmistamaan yhteisen lähtötilanteen, vältän tekemästä oletuksia. Tarkastellaan lyhyesti kaikkia näitä tekniikoita ja mitä niistä on hyötyä:

• Karma (aiemmin tunnettu nimellä Testacular) on Googlen JavaScript-testijuoksija ja luonnollinen valinta AngularJS: n testaamiseen. Sen lisäksi, että voit suorittaa testisi todellisilla selaimilla (mukaan lukien puhelin / tabletti-selaimet), se on myös testikehyksen agnostinen ; mikä tarkoittaa, että voit käyttää sitä yhdessä minkä tahansa valitsemasi testikehys (kuten Jasmine, Mocha tai QUnit , muiden joukossa).

• Jasmiini on testikehyksemme, ainakin tälle viestille. Sen syntakse on melko samanlainen kuin RSpec , jos olet koskaan työskennellyt sen kanssa. (Jos et ole tehnyt niin, älä huoli; tarkistamme sen myöhemmin tässä opetusohjelmassa.)

• Maa on tehtävien juoksija, joka auttaa automatisoimaan useita toistuvia tehtäviä, kuten minimointi , kääntäminen (tai koontiversio), testaus ja esikatselun määrittäminen AngularJS-sovelluksellesi.

• Bower on paketinhallinta, jonka avulla löydät ja asennat kaikki sovelluksesi riippuvuudet, kuten CSS-kehykset, JavaScript-kirjastot ja niin edelleen. Se kulkee yli git, aivan kuten Rails nippu , ja välttää tarvetta ladata ja päivittää riippuvuuksia manuaalisesti.

• Yeoman on työkalusarja, joka sisältää 3 ydinkomponenttia: Grunt, Bower ja rakennustelineet Minä . Yo luo kattilakoodin generaattoreiden avulla (jotka ovat vain rakennustelineitä) ja määrittää Gruntin ja Bowerin automaattisesti projektillesi. Löydät generaattoreita melkein mihin tahansa JavaScript-kehykseen (Angular, Backbone, Ember jne.), Mutta koska keskitymme täällä Angulariin, aiomme käyttää generaattori-kulma projekti.

Joten mistä aloitamme?

Ensimmäinen asia, joka meidän on tehtävä, on asentaa tarvitsemamme työkalut.

Jos sinulla ei ole mennä , node.js ja merenpinnan yläpuolella asennettu jo, siirry eteenpäin ja asenna ne.

Sitten menemme komentoriville ja suoritamme seuraavan komennon asentaaksesi Yeomanin työkalut:

npm install -g yo grunt-cli bower

Voi ja älä unohda, aiomme käyttää AngularJS-generaattoria, joten sinun on asennettava se myös:

npm install -g generator-angular

OK, nyt olemme valmiita ...

Teline / luo AngularJS-sovelluksemme

Viime kerta , lainasimme manuaalisesti kattilakoodin kulmasiemen projekti. Tällä kertaa annamme sinun (yhdessä generaattorin kulman kanssa) tehdä sen puolestamme.

Ainoa mitä meidän on tehtävä, on luoda uusi projektikansio, siirtyä siihen ja suorittaa:

yo angular

Meille esitetään joitain vaihtoehtoja, kuten sisällytetäänkö vai ei Bootstrap ja Kompassi . Sanotaan nyt ei Kompassille ja Joo Bootstrapiin. Sitten, kun meiltä kysytään sisällytettävistä moduuleista (resurssi, evästeet, desinfiointi ja reitti), valitsemme vain angular-route.js

Projektitelineemme tulisi nyt luoda (se voi viedä hetken), integroida Karmaan ja kaikki valmiiksi konfiguroitu.

Huomautus: Muista, että rajoitamme tässä olevat moduulit niihin, joita käytimme sisäänrakennetussa sovelluksessa osa yksi tämän opetusohjelman. Kun teet tämän omalle projektillesi, sinun on määritettävä, mitkä moduulit sinun on sisällytettävä.

Koska aiomme käyttää Jasmiinia, lisätään karma-jasmine sovitin projektiimme:

npm install karma-jasmine --save-dev

Jos haluamme testien suorittamisen Chrome-esiintymässä, lisätään myös karma-chrome-launcher:

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

OK, jos teimme kaiken oikein, projektitiedostopuun pitäisi nyt näyttää tältä:

Staattinen sovelluskoodimme menee app/ hakemisto ja test/ hakemisto sisältää (yup, arvasit sen!) Testimme. Tiedostot, jotka näemme juuressa, ovat projektin kokoonpanotiedostoja. Jokaisesta niistä on paljon opittavaa, mutta toistaiseksi pidämme kiinni vain oletusasetuksista. Suoritetaan siis sovelluksemme ensimmäistä kertaa, jonka voimme tehdä yksinkertaisesti seuraavalla komennolla:

grunt serve

Ja voila! Sovelluksemme pitäisi nyt ilmestyä edessämme!

Hieman Bower for AngularJS: stä

Ennen kuin ryhdymme todella tärkeään osaan (ts. Testaukseen), otamme hetken oppia hieman enemmän Bower . Kuten aiemmin mainittiin, Bower on pakettipäällikkömme. Lisäämällä lib tai laajennus projektiimme voidaan yksinkertaisesti tehdä bower install komento. Esimerkiksi modernizr sisällyttääksesi kaikki, mitä meidän tarvitsee tehdä, on seuraava (tietysti projektihakemistossamme):

bower install modernizr

Huomaa kuitenkin, että vaikka tämä tekee modernizr osa projektistamme (se sijaitsee app/bower_components -hakemistossa), olemme edelleen vastuussa sen sisällyttämisestä sovellukseemme (tai hallitsemme, milloin se tulisi sisällyttää), kuten meidän pitäisi tehdä minkä tahansa manuaalisesti lisätyn libin kanssa. Yksi tapa tehdä tämä olisi yksinkertaisesti lisätä seuraava tunniste index.html

bower.json

Vaihtoehtoisesti voimme käyttää bower.json tiedosto riippuvuuksien hallitsemiseksi. Seurattuaan huolellisesti jokaista vaihetta tähän asti { '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' } } tiedoston pitäisi näyttää tältä:

bower install

Syntaksi on melko itsestään selvä, mutta lisätietoja on saatavilla tässä .

Voimme sitten lisätä uusia haluamiamme uusia riippuvuuksia, ja sitten tarvitsemme vain seuraavan komennon niiden asentamiseksi:

app

Kirjoitetaan nyt testejä!

OK, nyt on aika tosiasiallisesti jatkaa siitä, mihin jäimme osa yksi ja kirjoita joitain testejä AngularJS-sovelluksellemme.

Mutta ensin on pieni ongelma, johon meidän on puututtava: Vaikka generaattori-kulma perustivat projektimallinsa kulmasiemen projekti (joka on virallinen Angular-kattilalevy), jostain syystä en oikein ymmärrä, he päättivät muuttaa css kansion nimeämiskäytännöt (muutetaan styles arvoksi js, scripts arvoksi tests/spec/controllers ja niin edelleen).

Seurauksena on, että alun perin kirjoittamallamme sovelluksella on nyt polkuja, jotka ovat ristiriidassa juuri luomamme telineen kanssa. Voit kiertää tämän lataamalla sovelluskoodin osoitteesta tässä ja työskentele kyseisen version kanssa tästä hetkestä eteenpäin (se on enimmäkseen täsmälleen sama sovellus, jonka alun perin kirjoitimme, mutta polut päivitettiin vastaamaan generaattorikulmaista nimeämistä).

Kun olet ladannut sovelluksen, siirry kohtaan drivers.js kansion ja luo tiedosto nimeltä 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'); }); }); sisältää seuraavat:

driverscontroller

Tämä on testipaketti describe() Se voi näyttää paljon koodilta, mutta suurin osa siitä on itse asiassa vain pilkkatiedon ilmoittamista. Tarkastellaan nopeasti todella tärkeitä elementtejä:

• it() menetelmä määrittelee testipakettimme.
• Kukin beforeEach() on oikea testispesifikaatio.
• Jokainen $httpBackend toiminto suoritetaan juuri ennen kutakin testiä.

Tärkein (ja mahdollisesti sekava) elementti on httpMock palvelu, jonka suoristimme expectJSONP() -palvelussa muuttuja. Tämä palvelu toimii väärennettynä taustana ja vastaa API-kutsuihimme testiajoissa, aivan kuten todellinen palvelimemme tekisi tuotannossa. Tässä tapauksessa käyttämällä expect() toiminto, asetimme sen sieppaamaan kaikki JSONP-pyynnöt annettuun URL-osoitteeseen (sama, jota käytämme saadaksemme tiedot palvelimelta) ja palauttamaan sen sijaan staattisen luettelon, jossa on kolme ohjainta jäljittelemällä todellista palvelimen vastausta. Tämän avulla voimme varmasti tietää, mitä ohjaimesta on tarkoitus palata. Siksi voimme verrata tuloksia odotettuihin tuloksiin käyttämällä grunt test toiminto. Jos ne sopivat yhteen, testi läpäisee.

Testien suorittaminen tapahtuu yksinkertaisesti komennolla:

drivercontroller

Kuljettajan yksityiskohtien ohjaimen (generator-angular) testipaketin tulisi olla melko samanlainen kuin juuri näimme. Suosittelen, että yrität selvittää sen itsellesi harjoituksena (tai voit vain katsoa tässä , jos et ole sen tasalla).

Entä end-to-end AngularJS -testit?

Angular-tiimi esitteli äskettäin uuden juoksijan nimeltään end-to-end testejä Astelevy . Se käyttää verkko-ohjain olla vuorovaikutuksessa selaimessa käynnissä olevan sovelluksen kanssa ja se käyttää oletusarvoisesti myös Jasmine-testauskehystä, joten syntaksin tulee olla erittäin johdonmukainen yksikötestiemme kanssa.

Koska Protractor on melko uusi työkalu, se integroidaan Yeoman-pinoon ja yo vaatii silti kohtuullisen määrän kokoonpanotyötä. Tässä mielessä ja aikomuksenani pitää tämä opetusohjelma mahdollisimman yksinkertaisena, aikomukseni on omistaa tuleva viesti yksinomaan kattavaan kattavaan AngularJS-testaukseen.

Johtopäätös

Tässä opetusohjelmasarjassa olemme oppineet, kuinka rakennustelineemme Angular-sovellukselle bower: lla, hallitaan sen riippuvuuksia karma: lla ja kirjoitetaan / suoritetaan testejä protractor ja

|_+_|

. Muista kuitenkin, että tämä opetusohjelma on tarkoitettu vain johdantona näihin AngularJS-työkaluihin ja -käytäntöihin; emme analysoineet yhtään niistä täällä perusteellisesti.

Tavoitteenamme on yksinkertaisesti ollut auttaa sinua pääsemään alkuun tällä polulla. Täältä on sinun tehtäväsi jatkaa ja oppia kaikki voit tästä hämmästyttävästä kehyksestä ja työkalupaketista.

Lisäys: Joitakin (tärkeitä) muistiinpanoja kirjoittajalta

Tämän opetusohjelman lukemisen jälkeen jotkut ihmiset saattavat kysyä, 'Odota. Eikö sinun pitäisi tehdä kaikki nämä asiat ennen kuin aloitat sovelluksesi koodaamisen? Eikö tämän olisi pitänyt olla osa tätä opetusohjelmaa? '

Lyhyt vastaukseni siihen on ei . Kuten näimme ensimmäisessä osassa, sinun ei todellakaan tarvitse tietää kaikkia näitä asioita ensimmäisen Angular-sovelluksesi koodaamiseksi. Pikemminkin suurin osa tässä viestissä keskustelluista työkaluista on suunniteltu auttamaan sinua optimoimaan kehitystyönkulkuasi ja harjoittamaan testausohjattua kehitystä (TDD).

Ja puhuen TDD: stä, TDD: n peruskäsite on varmasti järkevä; nimittäin, kirjoita testisi ennen koodin kirjoittamista. Jotkut ihmiset kuitenkin vievät tämän käsitteen liian pitkälle. TDD on kehityskäytäntö, ei oppimismenetelmä. Asianmukaisesti, kirjoittaminen testeilläsi ennen koodin kirjoittamista on paljon järkeä, kun taas oppiminen testien kirjoittaminen ennen koodaamisen oppimista ei ole.

Olen henkilökohtaisesti sitä mieltä, että tämä on tärkein syy siihen, miksi viralliset Angular-oppaat saattavat tuntua niin sekavilta ja niitä voi olla lähes mahdotonta seurata ihmisille, joilla ei ole aikaisempaa MVC / TDD-käyttöliittymää. Se on yksi tärkeimmistä syistä, miksi aloitin tämän opetusohjelman.

Henkilökohtainen neuvoni niille, jotka oppivat liikkumaan AngularJS-maailmassa, ovat: Älä ole liian kova itsellesi. Sinun ei tarvitse oppia kaikkea kerralla (huolimatta siitä, että ihmiset sanovat toisin!). Riippuen aikaisemmasta kokemuksestasi muista käyttöliittymän / testauksen kehyksistä, AngularJS voi olla melko vaikea ymmärtää aluksi. Joten opi kaikki tarvitsemasi oppia, kunnes pystyt kirjoittamaan omia yksinkertaisia ​​sovelluksiasi, ja sitten kun olet tyytyväinen kehyksen perusteisiin, voit huolehtia itsellesi parhaiten soveltuvien pitkän aikavälin kehityskäytäntöjen valitsemisesta ja soveltamisesta. sinä.

Tietysti tämä on nöyrä mielipiteeni, eivätkä kaikki ole samaa mieltä tästä lähestymistavasta (ja Angular dev -tiimi voi lähettää palkattua tappajaa minun jälkeeni, kun julkaisen tämän), mutta se on minun visioni ja olen melko varma, että on paljon ihmisiä kuka on samaa mieltä kanssani.

Liittyvät: Angular 6 -opetusohjelma: Uudet ominaisuudet uudella voimalla