Vadnica za Karmo: Preskušanje enote s čelnim delom z uporabo preizkusnega tekača Karma

karma tutorial front end unit testing using karma test runner

Ta vadnica razlaga, kako nastaviti Karma in avtomatizirati testiranje čelne enote z uporabo Karme, osnovne možnosti konfiguracije za datoteko Karma.conf.js itd.:

V tej vadnici je razložen postopek avtomatizacije enote za testiranje čelnega dela programske opreme z uporabo Karme in nekaterih z njo povezanih orodij.

Začeli bomo s spletnimi aplikacijami, razvitimi s pomočjo knjižnice JavaScript: ‘Jquery’ in runtime JavaScript: ‘NodeJS’; in kasneje si bomo ogledali nekatere okvire JavaScript, kot sta AngularJS in ReactJS.

=>POMAKNITE NAVZDOLda si ogledate celoten seznam vaj Karma

Kaj se boste naučili:

• Seznam vaj Karma
• Pregled vadnic Karme v tej seriji
• Kaj je testiranje prednje enote?
• Kaj je Karma Test Runner?
  • Kako Karma deluje kot Testrunner?
• Kaj je NodeJS?
  • Kaj je upravitelj paketov vozlišč (Npm)?
• Kako namestiti Karmo?
  • Pregled možnosti konfiguracije datoteke Karma.conf.js
• Vprašanja Karma init
  • Druga vsebina datoteke karma.conf.js
  • Zaganjalniki brskalnika Karma
• Zaključek
  • Priporočeno branje

Seznam vaj Karma

Vadnica št. 1: Vadnica za Karmo: Preskušanje enote s čelnim delom z uporabo preizkusnega tekača Karma
Vadnica # 2: Jasmin Framework Tutorial, ki vključuje Jasmine Jquery s primeri
Vadnica št. 3: Vzorčni projekt preskušanja enote na čelni strani z uporabo KARMA IN JASMINE

Pregled vadnic Karme v tej seriji

Kaj je testiranje prednje enote?

Čelni del katerega koli programskega sistema je preprosto vmesnik, kjer uporabnik dostopa do vseh funkcij sistema. Da bi zagotovili najboljšo uporabniško izkušnjo, je treba zagotoviti, da so front-end razvijalci front-end kodirali tako, da upoštevajo vse uporabniške zahteve.

Edini način, kako to uveljaviti, je pisanje in izvajanje preizkusov nad kodami razvijalca. Dobavo je treba sprejeti kot kakovostno interno kodo / funkcijo le, če so vsi ti rezultati preskusov v stanju 'pass'.

Enotno testiranje je neke vrste preskusna metoda programske opreme, pri kateri se preskuša vsak posamezen in neodvisen del izvorne kode, da se ugotovi, ali je dovolj dobra za uporabo.

Ko smo izvedite to enotno testiranje na čelni strani (na strani odjemalca) programske opreme, to se imenuje kot čelno enotno testiranje. Nasprotno od čelnega testiranja je zaledno testiranje (na strani strežnika).

Preskušanje enote na čelni strani se lahko izvede ročno ali samodejno. Avtomatizirano testiranje prednjih enot je danes v trendu, saj je učinkovitejše in prihrani čas. Obstajajo različna orodja, ki so na voljo za testiranje prednjih enot na različnih programskih platformah.

AngularJS in ReactJS sta dva priljubljena vmesnika JavaScript, vendar je ReactJS povsem nov.

Za enotno testiranje aplikacije se uporabljajo frontalni konci, zgrajeni s temi front-end ogrodji ali celo tisti, izdelani brez ogrodja, nekatera orodja za avtomatizacijo, kot so Karma, mocha, Jasmine, šale, encimi itd.

Najprej bi se učili, kako izvajati enotno testiranje enote s pomočjo Karme in Jasmine, nato pa si lahko pozneje ogledamo tudi druga orodja.

Začeli bomo z izvajanjem preskusov enote front-end z uporabo napeljav za front-end, zgrajene brez katerega koli okvira JavaScript za front-end. Svoja spoznanja v tej seriji bomo skupaj razdelili na tri vaje.

V tej prvi vadnici bi poskušali razumeti, kako se postavlja Karma, druga vadnica bo Jasmin podrobno razložila, nazadnje pa bomo v tretji vadnici preučili njeno praktično uporabo.

Kaj je Karma Test Runner?

Karma je orodje za preskušanje na vozlišču, ki vam omogoča preizkušanje kod JavaScript v več resničnih brskalnikih. Orodje, ki temelji na vozlišču, je katero koli orodje, ki za delovanje potrebuje nameščen motor Nodejs, do katerega je mogoče dostopati (namestiti) prek upravitelja paketov vozlišč (npm).

Karma je orodje, ki omogoča naš testni razvoj hiter, zabaven in enostaven. Tehnično ga imenujemo testni tekač. Omeniti velja omeniti, da je Karmo razvila ekipa Angular.

Kako Karma deluje kot Testrunner?

Karma kot testna tekačica naredi tri pomembne stvari:

• Zažene spletni strežnik in na njem streže izvorne in preskusne datoteke JavaScript.
• Vse izvorne in preskusne datoteke naloži v pravilnem vrstnem redu.
• Končno pa zažene brskalnike za izvajanje testov.

Kaj še lahko Karma?

Poleg zgoraj naštetih funkcij Karme obstaja tudi nekaj drugih stvari, za katere je Karma mogoče nastaviti. Na primer za objavo pokritja preskusov kode kombinezoni.io ; prevedite kodo iz formata es6 v ​​es5, združi več datotek v eno datoteko in ustvarite izvorne zemljevide.

V naslednjih vajah bomo videli, kako nekatere od teh stvari delujejo.

Zahteve za začetek uporabe Karme

Če želite začeti uporabljati Karmo, morate razumeti NodeJS in upravitelj paketov Node.

Kaj je NodeJS?

Nodejs rešuje blokirno naravo asinhronih klicev JavaScript, tj. Ko je v JavaScript dostopna asinhrona funkcija, preprečuje izvajanje drugih delov kode, dokler se asinhroni klic ne vrne. Vendar pa lahko z NodeJS izvedete asinhrone neblokirajoče klice funkcij.

V tehničnem smislu lahko rečemo, da je NodeJS asinhrono izvajalno okolje JavaScript, ki temelji na dogodkih in omogoča enostavno in mogoče graditi razširljive omrežne aplikacije.

Uvod v NodeJS

Preprosto morate namestiti ogrodje NodeJS. Vse, kar morate storiti, je, da obiščete njihovo Spletna stran in glede na svoj operacijski sistem morate prenesti namestitveni program in slediti navodilom na njegovi spletni strani o njegovi namestitvi.

Kaj je upravitelj paketov vozlišč (Npm)?

Upravitelj paketov vozlišč (npm) je upravitelj paketov JavaScript, ki se uporablja za namestitev drugih vnaprej izdelanih aplikacij ali modulov na vozlišču, ki jih boste morda želeli ponovno uporabiti v svoji aplikaciji.

pretvori YouTube v mp3 brezplačno varno

Npm se namesti, ko namestite NodeJS, vendar se npm posodablja hitreje kot vozlišče. Zato boste morda morali kdaj posodobiti svoj npm. Če želite namestiti najnovejšo različico npm, morate ta ukaz zagnati iz ukazne vrstice: npm namestite npm @ najnovejše -g

Zgornji ukaz označuje, da od lupine OS zahtevate, da zažene aplikacijo npm, aplikacija pa naj izvede namestitev paketa npm. @latest označuje, da je treba namestiti najnovejšo različico paketa, -g možnost označuje, da je treba paket namestiti globalno.

Več podrobnosti o npm najdete tukaj .

Tu je treba omeniti dve pomembni stvari, tj. Namestitev paketa z možnostma –save in –save-dev.

Med preskusi je treba vsak nameščen paket namestiti z možnostjo –save-dev, tj.ukazati upravitelju paketov, naj paket namesti kot razvojno odvisnost in ne kot odvisnost od projekta (ko uporabljam –save).

Izbrati je treba razvojno odvisnost, ker ta paket v fazi proizvodnje ne potrebuje aplikacije, temveč je potreben samo v razvojni fazi za zagotavljanje kakovosti.

datoteke swf se ne predvajajo v brskalniku

Kako namestiti Karmo?

Če želite začeti s Karmo, morate ustvariti mapo za projekt, za katerega boste napisali preskusne enote. Lahko ga poimenujete kot 'basicUT'. Kot urejevalnik besedil uporabljam Visual Studio Code, zato vam tudi priporočam, da jo prenesete in namestite. Lahko ga najdete tukaj .

Odprite okno vgrajenega terminala kode Visual studio, kliknite meni »Pogled« in nato izberite vmesnik vgrajenega terminala.

V okno terminala vnesite 'npminit', kot je prikazano na spodnji sliki. Ta ukaz vas vodi do samodejne nastavitve datoteke 'package.json', ki jo mora imeti vsaka aplikacija, ki temelji na vozlišču.

Datoteka package.json hrani podatke o vaši aplikaciji, kot so njeno ime, številka različice, avtor, odvisnosti aplikacije, razvojne odvisnosti, preskusni ukaz ali skript in skript za zagon aplikacije ali vgradnjo aplikacije v izvedljiv obrazec.

Kliknite tukaj za več podrobnosti o datoteki ‘package.json’.

Posnetek zaslona inicializacije datoteke package.json z uporabo npminit

Kot je opisano zgoraj, za namestitev Karme potrebujete le ukaz npm namestite Karma @ najnovejši –save-dev . Upam, da si lahko zdaj razlagate, kaj ta ukaz pomeni.

Zdaj smo uspešno namestili Karmo. Kaj je naslednje, kar morate storiti, da boste Karmo uporabili za testiranje prednje enote?

Vse, kar morate storiti, je, da zanjo napišete konfiguracijsko datoteko, ki se za JavaScript običajno imenuje Karma.conf.js. Vendar je pri CoffeeScriptu drugače. Kliknite tukaj da raziščete več o konfiguracijski datoteki Karma.

Pregled možnosti konfiguracije datoteke Karma.conf.js

Konfiguracijska datoteka Karma.conf.js mora vsebovati navodila za namestitev, ki jih mora Karma upoštevati za izvajanje treh pomembnih funkcij Karme.

To konfiguracijsko datoteko lahko ustvarite ročno ali samodejno z ukazom: ‘karma init’, ki začne prikazovati različna vprašanja, na katera morate odgovoriti, Karma pa za nastavitev konfiguracijske datoteke uporabi odgovore, ki jih navedete.

Zdaj bi že odkrili, da z ukazom: 'karma init' pride do napake ' „Karma“ ni prepoznana kot notranji ali zunanji ukazni program ali paketna datoteka '.

To je zato, ker je bila Karma nameščena lokalno in ne globalno pri projektu, pri katerem delate. Zato lupina vašega operacijskega sistema ne more najti aplikacije Karma v nastavitvah okolja za pot, če uporabljate Windows ali v datoteki .bash_profile, če uporabljate Mac.

Da bi odpravili to napako, moramo Karmo namestiti globalno. Ne samo Karma, ampak tudi paket, ki je posebej zasnovan tako, da omogoča uporabo Karme v ukazni vrstici Karma-cli. Preprosto zaženite ukaz, ′ Npm namestite -g karma-cli ' .

Zdaj znova zaženite ukaz karma-init in lahko vidite vprašanja, kot je prikazano na spodnji sliki. Ko odgovorite na vsako vprašanje in pritisnete tipko »ENTER«, se prikaže naslednje vprašanje.

Zagon ukaza Karma init v ukazni vrstici.

Spodnja tabela vam bo dala seznam vprašanj, njihov pomen in odgovor v kontekstu te vadnice.

Vprašanja Karma init

V # 1) Kateri preskusni okvir želite uporabiti?

Pojasnilo: Okvir za testiranje je paket, ki ponuja funkcije in rutine, potrebne za avtomatizacijo procesa kodiranja testov za kateri koli programski izdelek določenega jezika. Na primer, jasmin in mocha preizkušata ogrodja za programske pakete JavaScript, Junit in JTest preizkušata ogrodja za Javo, preverite to za več podrobnosti.

Odgovor: Pojavi se navodilo, da uporabite jeziček za ogled drugih razpoložljivih testnih okvirov za aplikacijo, ki temelji na vozlišču, vendar privzeto vidite jasmin, zato preprosto kliknite enter.

V # 2) Ali želite uporabiti Require.js?

Pojasnilo: Require.js je nalagalnik datotek in modulov JavaScript. Morda se sprašujete: zakaj potrebujete nalagalnik datotek ali modulov? Preberite to

Odgovor: V kodo bomo pisali, ne bi uporabil require.js, zato preprosto odgovorite ne. vprašanje je, kaj bi uporabili? Da lahko uporabimo stavke require za vnos zunanjih datotek v drugo datoteko, potrebujemo nalagalnik modulov, zato bi se odločili za Browserify. Več podrobnosti boste videli spodaj.

V # 3) Ali želite samodejno zajeti kateri koli brskalnik?

Pojasnilo: Spomnimo se, da je karma orodje, ki vam pomaga preizkusiti svoj front-end v različnih brskalnikih, zato je to vprašanje namenjeno vam, da izberete brskalnike, ki bi jih radi zavili, kadar koli zaženete test z zagonom karme.

Odgovor: Za to lekcijo izberite chrome, firefox in phantomjs. Zdaj je vprašanje, kaj je PhantomJS? PhantomJS je brezglavi spletni brskalnik, ki je namenjen testiranju brezglavega spletnega mesta, zajemanju zaslona, ​​avtomatizaciji strani in nadzoru omrežja, lahko vidite podrobnosti tukaj .

Še eno vprašanje, kaj je brezglavi spletni brskalnik? Brezglavi spletni brskalnik je brskalnik brez grafičnega uporabniškega vmesnika, kode se izvajajo v okolju, podobnem konzoli.

V # 4) Na katerem mestu so vaše izvorne in testne datoteke?

Pojasnilo: To vprašanje naj bi razkrilo pot, kamor boste shranili čelne datoteke in testne datoteke, ki bodo na njih izvedle enotno preskušanje.

Odgovor: Za ta projekt vnesite public / js / *. Js za pot izvornih datotek in test / * Spec.js za pot testnih datotek. * Spec.js označuje, da lahko vse testne datoteke imenujemo karkoli, vendar morajo na koncu vsebovati Spec s pripono .js.

V # 5) Ali je treba katero od datotek, vključenih v prejšnje vzorce, izključiti?

Pojasnilo: Včasih je morda treba nekatere izvorne in testne datoteke ne naložiti, to vprašanje je namenjeno vam, da določite takšne datoteke, ki jih Karma ne bi smela naložiti v brskalnik.

Odgovor: Preprosto vnesite prazen niz s pritiskom na enter. Ste videli izjavo 'Lahko uporabite vzorce globusa, Na primer, '** / *. Swp'. '. Glob vzorci se uporabljajo za določanje nabora imen datotek v okolju, podobnem Unixu, z uporabo nadomestnega znaka.
V našem primeru public / js / *. Js pomeni katero koli datoteko, imenovano poljuben nabor znakov, kot je označeno z (*), in ima pripono .js in je na poti public / js. Preberi več tukaj

V # 6) Ali želite, da si Karma ogleda vse datoteke in preizkusi spremembe?

Pojasnilo: Ko tekač opravil / preizkusov gleda vaše datoteke, vse preprosto pomeni, da vsakič, ko med razvojem datotek urejate, znova naloži datoteko ali znova izvede svojo funkcijo v datoteki, ne da bi morali ročno vprašati to ponoviti.

Odgovor: Torej preprosto odgovorite pritrdilno.

Druga vsebina datoteke karma.conf.js

# 1) basePath : Ta konfiguracija nosi ime katere koli mape, ki bi jo bilo treba uporabiti za razrešitev informacij o poti za preskusne in izvorne datoteke.

# 2) predprocesorji : Ta nosi ime programskih datotek, ki jih je treba uporabiti za obdelavo izvornih in testnih datotek, preden jih naložite v brskalnik.

Zakaj je to potrebno?

S pojavom stila kodiranja ES6, ki ga brskalniki še ne razumejo, je treba kodo prepisati iz formata ES6 v ES5, kar brskalnik lahko razume, zato je mogoče določiti predobdelovalnik babel za Karmo, ki bo uporabljen za prevajanje kodo od ES6 do ES5, preden jo naložite v brskalnik.

Obstajajo tudi druge uporabe predprocesorja, Npr. objavljanje pokritosti preskusov kode na coveralls.io, glej tukaj za več podrobnosti.

# 3) poročevalci : Ta možnost konfiguracije določa paket, ki bo uporabljen za poročanje o rezultatih preskusov. Obstaja več poročevalcev za poročanje o preskusu kode; Npr. pokritost. Vendar je privzeto nastavljen na napredek. Upoštevajte, da gre za matriko, zato lahko dodate tudi druge poročevalce.

# 4) vrata : To določa vrata, na katerih se brskalnik zavrti.

# 5) barve : Določa, ali naj poročevalci pripravijo poročila z barvami.

# 6) Nivo dnevnika : To določa raven beleženja. Privzeto je nastavljen na config.LOG_INFO, kar pomeni, da se beležijo samo informacije.

# 7) singleRun : To določa, ali naj Karma izstopi po enkratnem zagonu testa. Če je nastavljeno na true, Karma zažene test in izstopi s statusom 0 ali 1, odvisno od tega, ali je test neuspešen ali uspešno opravljen, sicer se Karma ne ustavi.

Ta konfiguracija je potrebna za preizkuse neprekinjene integracije z uporabo orodij, kot sta TravisCI in CircleCI.

# 8) sočasnost : To določa, koliko brskalnikov mora Karma zagnati hkrati. Privzeto je nastavljena na neskončnost.

Kliknite tukaj za podrobne informacije o možnostih konfiguracije Karma.

kakšne so faze življenjskega cikla razvoja programske opreme

Če ste opazen učenec, ste morali videti te tri vrstice.

To raziščimo v spodnjem poglavju.

Zaganjalniki brskalnika Karma

Karma-firefox-launcher, Karma-chrome-launcher in Karma-phantomjs-launcher lahko na splošno označimo kot zaganjalnike brskalnikov za Karmo.

Karma mora zaviti te neodvisne brskalniške programe, zato mora neodvisna aplikacija zagotoviti vmesnik Karmi za zagon ukaza lupine, ki zažene brskalnike v katerem koli operacijskem sistemu, na katerem Karma izvaja preizkus.

Tako so zaganjalniki brskalnikov Karma za firefox, chrome in phantomjs. Karma pojavlja te izjave, da bi nas obvestila o svoji nezmožnosti namestitve teh zahtev, nato pa nas prosi, da jo sami namestimo ročno.

Za to bomo uporabili upravitelja paketov vozlišč in te ukaze zagnali iz ukazne vrstice: npm namestite Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Vsi moramo imeti nameščene brskalnike chrome in firefox, pri čemer phantomjs ni nameščen. Če je to res, ga morate namestiti, glejte tukaj za podrobnosti in kliknite tukaj za hiter vodnik.

Zaključek

V tej vadnici smo poskušali razumeti, kaj sploh je testiranje prednje enote. Predstavili smo tudi glavno orodje za testiranje prednjih enot za programsko opremo JavaScript, znano kot Karma, ki je orodje na osnovi vozlišč. Predstavili smo tudi osnovne možnosti konfiguracije datoteke Karma.conf.js in kaj vse pomenijo.

Odvoz

• Enotno testiranje je neke vrste preskusna metoda programske opreme, pri kateri se preskuša vsak posamezen in neodvisen del izvorne kode, da se ugotovi, ali je dovolj dober za uporabo.
• Ko to enotno testiranje izvajamo na čelni strani (na strani odjemalca) programske opreme, je to znano kot testiranje enote na čelni strani.
• Karma je orodje za preskušanje na vozlišču, ki vam omogoča preizkušanje kod JavaScript v več resničnih brskalnikih. Zato ga imenujemo testni tekač.
• Nodejs je asinhroni JavaScript, ki ga poganja dogodek, ki omogoča enostavno in možno gradnjo razširljivih omrežnih aplikacij.
• Upravitelj paketov vozlišč (npm) je upravitelj paketov JavaScript, ki se uporablja za namestitev drugih vnaprej izdelanih aplikacij ali modulov na vozlišču, ki jih boste morda želeli ponovno uporabiti v svoji aplikaciji.

Naslednja vadnica

Karma sama ne more avtomatizirati internega testiranja enostavnih aplikacij JavaScript, prav tako mora sodelovati z drugimi orodji za testiranje, kot je testni okvir, ki bo olajšal pisanje naših testnih primerov.

V naši prihajajoči vadnici bomo raziskovali Jasmine in paket Jasmine-Jquery, ki razširja funkcionalnost Jasmine, da lahko preizkusi napeljave HTML, ki uporabljajo knjižnico JavaScript: Jquery.

Priporočeno branje

• 20 najbolj priljubljenih orodij za enotno testiranje v letu 2021
• Ključ do uspešnega testiranja enot - kako razvijalci preizkušajo lastno kodo?
• TOP 45 vprašanj za intervjuje s podrobnimi odgovori
• Vadnica AngularJS za absolutne začetnike (z navodili za namestitev)
• Razlika med kotnimi različicami: Angular Vs AngularJS
• Testna pokritost pri testiranju programske opreme (nasveti za povečanje pokritosti s testiranjem)
• 48 najboljših vprašanj in odgovorov za intervju z AngularJS (SEZNAM 2021)
• Kako nastaviti Node.js preskusno ogrodje: Vadnica za Node.js