Výukový program Karma: Testovanie front-endových jednotiek pomocou nástroja Karma Test Runner

karma tutorial front end unit testing using karma test runner

Tento výukový program vysvetľuje, ako nastaviť Karma a automatizovať testovanie front-endových jednotiek pomocou Karmy, základné možnosti konfigurácie pre súbor Karma.conf.js atď .:

Tento tutoriál vysvetľuje postup automatizácie Unit Testing front-endu softvéru pomocou Karmy a niektorých súvisiacich nástrojov.

Začneme webovými aplikáciami vyvinutými pomocou knižnice JavaScript: „Jquery“ a runtime JavaScriptu: „NodeJS“; a neskôr sa pozrieme na niektoré rámce JavaScriptu ako AngularJS a ReactJS.

=>POSUNÚŤ NADOLzobraziť celý zoznam výučby karmy

Čo sa dozviete:

• Zoznam výučby karmy
• Prehľad výučby karmy v tejto sérii
• Čo je testovanie front-endovej jednotky?
• Čo je testovací bežec Karma?
  • Ako funguje Karma ako tester?
• Čo je NodeJS?
  • Čo je správca balíkov uzlov (Npm)?
• Ako nainštalovať Karma?
  • Prehľad možností konfigurácie súboru Karma.conf.js
• Karma init Otázky
  • Iný obsah súboru karma.conf.js
  • Spúšťače prehliadača Karma
• Záver
  • Odporúčané čítanie

Zoznam výučby karmy

Výukový program č. 1: Výukový program Karma: Testovanie front-endových jednotiek pomocou nástroja Karma Test Runner
Výukový program č. 2: Jasmine Framework Tutorial Vrátane Jasmine Jquery s príkladmi
Výukový program č. 3: Ukážkový projekt testovania front-endových jednotiek pomocou KARMA a JASMINE

Prehľad výučby karmy v tejto sérii

Čo je testovanie front-endovej jednotky?

Front-end každého softvérového systému je jednoducho rozhranie, v ktorom má používateľ prístup ku všetkým funkciám poskytovaným systémom. Na zaručenie čo najlepšej používateľskej skúsenosti je potrebné zabezpečiť, aby front-endoví vývojári kódovali front-end tak, že budú mať na pamäti všetky požiadavky používateľov.

Jediným spôsobom, ako to vynútiť, je písanie a vykonávanie testov cez kódy vývojárov. Výstup by mal byť prijatý ako kvalitný front-endový kód / funkcia iba vtedy, keď sú všetky tieto výsledky testov v stave „splnené“.

Testovanie jednotiek je druh metódy testovania softvéru, pri ktorej sa testuje každá samostatná a nezávislá časť zdrojového kódu, aby sa zistilo, či je dostatočne dobrá na použitie.

Keď sme vykonajte toto testovanie jednotky na klientskom rozhraní (klientskej strane) softvéru, nazýva sa to testovanie jednotky typu front-end. Opakom front-end testovania je back-end testovanie (na strane servera).

Testovanie prednej jednotky je možné vykonať ručne alebo automaticky. V dnešnej dobe je trendom automatické testovanie frontendových jednotiek, ktoré sú efektívnejšie a šetria čas. Existuje niekoľko nástrojov, ktoré sú k dispozícii na testovanie front-endových jednotiek na rôznych programovacích platformách.

AngularJS a ReactJS sú dva populárne front-endové rámce JavaScriptu, aj keď ReactJS je celkom nový.

Na vykonávanie jednotkového testovania v aplikácii sa používajú klientske rozhrania vytvorené pomocou týchto front-endových rámcov alebo dokonca tie, ktoré sú postavené bez týchto rámcov, určité nástroje na automatizáciu testovania, ako sú Karma, moka, Jasmine, jest, enzým atď.

Najskôr by sme sa učili, ako vykonávať front-end testovanie jednotiek pomocou Karmy a Jasmine, a potom si neskôr môžeme pozrieť aj ďalšie nástroje.

Začneme spustením testov front-endových jednotiek pomocou zariadení pre front-endy postavené bez akýchkoľvek rámcov JavaScriptu pre front-endy. Celkovo naše poznatky v tejto sérii rozdelíme do troch tutoriálov.

V tomto úplne prvom tutoriáli by sme sa pokúsili pochopiť, ako sa nastavuje Karma, druhý tutoriál podrobne vysvetlí Jasmine, nakoniec sa v treťom tutoriále pozrieme na jeho praktické použitie.

najlepší youtube downloader pre Windows 10

Čo je testovací bežec Karma?

Karma je testovací nástroj založený na uzloch, ktorý vám umožňuje testovať kódy JavaScript vo viacerých skutočných prehliadačoch. Nástrojom založeným na uzloch je akýkoľvek nástroj, ktorý vyžaduje pre svoju prevádzku nainštalovaný motor Nodejs a je k nemu prístup (inštalácia) prostredníctvom správcu balíkov uzlov (npm).

Karma je nástroj, vďaka ktorému je náš vývoj zameraný na testy rýchly, zábavný a ľahký. Odborne sa nazýva testovací bežec. Tu je potrebné spomenúť, že Karma bola vyvinutá tímom Angular.

Ako funguje Karma ako tester?

Ako skúšobná bežkyňa robí Karma tri dôležité veci:

• Spustí webový server a slúži vášmu zdroju JavaScriptu a testovacím súborom na tomto serveri.
• Načíta všetky zdrojové a testovacie súbory v správnom poradí.
• Nakoniec to roztočí prehliadače na vykonanie testov.

Čo iné môže Karma robiť?

Okrem vyššie uvedených funkcií Karmy je možné nakonfigurovať aj niekoľko ďalších vecí. Napríklad, zverejniť pokrytie testom kódu v kombinéza.io ; preniesť kód z formátu es6 do es5, zoskupiť viac súborov do jedného súboru a vygenerovať zdrojové mapy.

V našich ďalších tutoriáloch uvidíme, ako niektoré z týchto vecí fungujú.

Požiadavky na začatie práce s karmou

Aby ste mohli začať s Karmou, musíte porozumieť NodeJS a správcovi balíkov Node.

Čo je NodeJS?

Nodejs rieši blokovaciu povahu asynchrónnych volaní JavaScriptu, t. J. Keď sa k asynchrónnej funkcii pristupuje v JavaScripte, zabraňuje spusteniu ostatných častí kódu, kým sa asynchrónne volanie nevráti. S NodeJS je však možné uskutočniť asynchrónne neblokujúce volania funkcií.

Z technického hľadiska možno o NodeJS povedať, že je to asynchrónny runtime JavaScript riadený udalosťami, ktorý umožňuje ľahké a možné vytváranie škálovateľných sieťových aplikácií.

Začíname s NodeJS

Musíte si jednoducho nainštalovať rámec NodeJS. Musíte len navštíviť ich webovú stránku a na základe vášho operačného systému si musíte stiahnuť inštalátor a postupovať podľa pokynov na jeho stránke o jeho inštalácii.

Čo je správca balíkov uzlov (Npm)?

Správca balíkov uzlov (npm) je správca balíkov JavaScriptu, ktorý sa používa na inštaláciu ďalších vopred pripravených aplikácií alebo modulov založených na uzloch, ktoré môžete vo svojej vlastnej aplikácii znova použiť.

Npm sa nainštaluje pri inštalácii NodeJS, ale npm sa aktualizuje rýchlejšie ako uzol. Preto môže byť niekedy potrebné aktualizovať vaše NPM. Ak chcete nainštalovať najnovšiu verziu npm, musíte tento príkaz spustiť z príkazového riadku: npm nainštalovať npm @ latest -g

Vyššie uvedený príkaz označuje, že žiadate od operačného systému OS, aby spustil aplikáciu npm a aplikácia by mala vykonať inštaláciu balíka npm. @latest označuje, že by mala byť nainštalovaná najnovšia verzia balíka, voľba -g označuje, že balík by mal byť nainštalovaný globálne.

Viac podrobností o NPM nájdete tu .

Tu by ste mali spomenúť dve dôležité veci, t. J. Inštalácia balíka s voľbou –save a –save-dev.

Počas testov by sa mal akýkoľvek nainštalovaný balík inštalovať pomocou voľby –save-dev, t. J. Podľa pokynov správcu balíkov, aby nainštaloval balík ako závislosť od vývoja, a nie ako závislosť od projektu (keď používam –save).

Závislosť na vývoji by sa mala zvoliť, pretože balík nie je aplikáciou potrebný počas fázy výroby, ale je potrebný iba počas fázy vývoja na účely zabezpečenia kvality.

Ako nainštalovať Karma?

Ak chcete začať s programom Karma, musíte vytvoriť priečinok pre projekt, pre ktorý sa chystáte napísať jednotkové testy. Môžete to pomenovať ako „basicUT“. Ako textový editor používam Visual Studio Code, preto vám ho tiež odporúčam stiahnuť a nainštalovať. Nájdete to tu .

Otvorte zabudované okno terminálu kódu Visual Studio, kliknite na „Zobraziť ponuku“ a potom vyberte podponuku integrovaného terminálu.

V okne terminálu zadajte „npminit“, ako je znázornené na nasledujúcom obrázku. Tento príkaz vás prevedie automatickým nastavením súboru ‘package.json’, ktorý musí mať každá aplikácia založená na uzloch.

Súbor package.json ukladá informácie o vašej aplikácii, ako je jej názov, číslo verzie, autor, závislosti od aplikácie, závislosti od vývoja, testovací príkaz alebo skript a skript na spustenie aplikácie alebo zostavenie aplikácie do spustiteľnej formy.

Kliknite tu ďalšie informácie o súbore „package.json“.

Screenshot z inicializácie súboru package.json pomocou npminit

Ako je popísané vyššie, na inštaláciu Karmy stačí spustiť príkaz npm nainštalujte Karma @ latest –save-dev . Dúfam, že teraz budete môcť interpretovať, čo tento príkaz znamená.

Teraz sme úspešne nainštalovali Karma, čo je ďalšia vec, ktorú musíte urobiť, aby ste mohli Karma používať na testovanie front-end jednotky?

Všetko, čo musíte urobiť, je napísať pre ňu konfiguračný súbor a ten sa pre JavaScript zvyčajne nazýva Karma.conf.js. Pre CoffeeScript je to však iné. Kliknite tu preskúmať viac informácií o konfiguračnom súbore Karma.

Prehľad možností konfigurácie súboru Karma.conf.js

Konfiguračný súbor Karma.conf.js by mal obsahovať inštalačné pokyny, ktoré Karma musí dodržiavať, aby mohla vykonávať tri dôležité funkcie Karmy.

Tento konfiguračný súbor je možné vytvoriť ručne alebo automaticky pomocou príkazu „karma init“, ktorý začne zobrazovať rôzne otázky, na ktoré musíte odpovedať, a Karma použije poskytnuté odpovede na nastavenie konfiguračného súboru.

Už by ste zistili, že spustenie príkazu: „karma init“ spôsobí chybu „ Karma nie je rozpoznaná ako interný alebo externý príkazom spustiteľný program alebo dávkový súbor “.

Je to tak preto, lebo Karma bola nainštalovaná lokálne a nie globálne do projektu, na ktorom pracujete. Váš operačný systém preto nemôže nájsť aplikáciu Karma v nastaveniach prostredia cesty, ak používate Windows, alebo v súbore .bash_profile, ak používate Mac.

Aby sme túto chybu napravili, je potrebné globálne nainštalovať Karma. Nielen Karma, ale balík špeciálne navrhnutý tak, aby umožňoval použitie Karmy na príkazovom riadku, ktorým je Karma-cli. Jednoducho spustite príkaz, „Npm install -g karma-cli“ .

Teraz znova spustite príkaz karma-init a na nasledujúcom obrázku môžete vidieť otázky. Po zodpovedaní každej otázky a stlačení klávesu „ENTER“ sa zobrazí ďalšia otázka.

Spustenie príkazu Karma init na príkazovom riadku.

V nasledujúcej tabuľke je uvedený zoznam otázok, ich význam a význam odpovedí v rámci tohto tutoriálu.

Karma init Otázky

Otázka 1) Ktorý testovací rámec chcete použiť?

aké typy testov ti pomáha uhorka?

Vysvetlenie: Testovací rámec je balík, ktorý poskytuje funkcie a rutiny potrebné na automatizáciu procesu kódovania testov pre akýkoľvek softvérový produkt konkrétneho jazyka. Napríklad, jazmín a moka testujú rámce pre softvérové ​​balíčky JavaScriptu, Junit a JTest testujú rámce pre Javu, skontrolujte toto pre viac detailov.

Odpoveď: Zobrazí sa pokyn, ktorý vás žiada, aby ste pomocou karty zobrazili ďalšie dostupné testovacie rámce pre aplikáciu založenú na uzloch. V predvolenom nastavení však vidíte jazmín, takže stačí kliknúť na kláves Enter.

Otázka č. 2) Chcete používať súbor Require.js?

Vysvetlenie: Require.js je zavádzač súborov a modulov JavaScript. Mohlo by vás zaujímať: prečo potrebujete zavádzač súborov alebo modulov? Čítať toto

Odpoveď: V kóde, ktorý budeme písať, by som nepoužíval require.js, takže jednoducho odpovedzte nie. otázka je, čo by sme použili? Aby sme mohli pomocou príkazov require priviesť externé súbory do iného súboru, potrebujeme načítavač modulov, takže by sme sa rozhodli pre Browserify. Ďalej uvidíte ďalšie podrobnosti.

Otázka č. 3) Chcete automaticky zachytávať akékoľvek prehľadávače?

Vysvetlenie: Pripomeňme si, že karma je nástroj, ktorý vám pomôže otestovať vaše klientske rozhranie v rôznych prehliadačoch, a preto je táto otázka určená na výber prehliadačov, ktoré by ste chceli roztočiť, kedykoľvek spustíte test so spustením karmy.

Odpoveď: V tejto lekcii vyberte možnosti Chrome, Firefox a Phantomjs. Otázkou teraz je, čo je PhantomJS? PhantomJS je bezhlavý webový prehliadač, ktorý je určený na bezhlavé testovanie webových stránok, snímanie obrazovky, automatizáciu stránok a monitorovanie siete. Môžete vidieť podrobnosti tu .

Ďalšia otázka, čo je bezhlavý webový prehliadač? Bezhlavý webový prehliadač je prehľadávač bez grafického užívateľského rozhrania, kódy sa vykonávajú v konzolovom prostredí.

Otázka č. 4) Aké je umiestnenie vášho zdrojového a testovacieho súboru?

Vysvetlenie: Táto otázka má odhaliť cestu, kam budete ukladať klientske súbory a testovacie súbory, ktoré na nich vykonajú testovanie jednotiek.

Odpoveď: Pre tento projekt zadajte public / js / *. Js pre cestu k zdrojovým súborom a test / * Spec.js pre cestu k testovacím súborom. * Spec.js naznačuje, že všetky testovacie súbory je možné nazvať akokoľvek, ale musia na konci obsahovať Spec s príponou súboru .js.

Otázka č. 5) Mal by byť vylúčený niektorý zo súborov zahrnutých v predchádzajúcich vzoroch?

Vysvetlenie: Niekedy môže byť potrebné, aby sa určité zdrojové a testovacie súbory nenačítali. Táto otázka slúži na to, aby ste určili také súbory, ktoré by Karma nemala načítať v prehliadači.

Odpoveď: Jednoducho zadajte prázdny reťazec stlačením klávesu Enter. Videli ste vyhlásenie „Môžete použiť globálne vzory, Napríklad, „** / *. Swp“. “. Vzory globusu sa používajú na zadanie množiny názvov súborov v prostredí podobnom systému Unix pomocou zástupného znaku.
V našom prípade public / js / *. Js predstavuje akýkoľvek súbor s názvom ľubovoľná sada znakov, ako je označené znakom (*), má príponu súboru .js a nachádza sa v ceste public / js. Čítaj viac tu

Otázka č. 6) Chcete, aby Karma sledovala všetky súbory a vykonávala testy zmien?

Vysvetlenie: Keď bežec úlohy / testu sleduje vaše súbory, znamená to len to, že kedykoľvek upravujete súbory počas vývoja, bežec testu / úlohy znova načíta súbor alebo znova vykoná túto funkciu, bez toho, aby ste sa museli ručne pýtať urobiť to znova.

Odpoveď: Takže jednoducho odpovedzte áno.

Iný obsah súboru karma.conf.js

# 1) basePath : Táto konfigurácia nesie názov ľubovoľného priečinka, ktorý by sa mal použiť na vyriešenie informácií o ceste poskytnutých pre testovacie a zdrojové súbory.

# 2) preprocesory : Toto nesie názov programových súborov, ktoré by sa mali použiť na spracovanie zdrojových a testovacích súborov pred ich načítaním do prehliadača.

Prečo je to potrebné?

S príchodom štýlu kódovania ES6, ktorému prehliadače zatiaľ nerozumejú, je potrebné preniesť kód z formátu ES6 do formátu ES5, ktorému prehliadač rozumie, a preto je možné špecifikovať, že na prepracovanie kódu je možné použiť babelský preprocesor pre Karma. kód z ES6 na ES5 pred načítaním do prehliadača.

Existujú aj ďalšie použitia preprocesora, Napr. publikovanie pokrytia testom kódu na coveralls.io, viď tu pre viac detailov.

# 3) reportéri : Táto voľba konfigurácie určuje balík, ktorý sa má použiť na hlásenie výsledkov testu. Existuje niekoľko reportérov, ktorí hlásia pokrytie testom kódu; Napr. pokrytie. Ale predvolene je nastavený na postup. Upozorňujeme, že ide o pole, a preto môžete pridať aj ďalších reportérov.

# 4) port : Toto určuje port, na ktorom je prehliadač otočený.

# 5) farby : Určuje, či majú reportéri pripraviť správy s farbami.

# 6) logLevel : Toto určuje úroveň protokolovania. Predvolene je nastavená na config.LOG_INFO, čo znamená, že sa zaznamenávajú iba informácie.

# 7) singleRun : Toto určuje, či má Karma ukončiť test po jednom spustení. Ak je nastavená hodnota true, Karma spustí test a ukončí ho so stavom 0 alebo 1 v závislosti od toho, či bol test neúspešný alebo úspešný, inak sa Karma nezastaví.

Táto konfigurácia je vyžadovaná na účely testovania nepretržitej integrácie pomocou nástrojov ako TravisCI a CircleCI.

# 8) súbežnosť : Toto určuje, koľko prehliadačov by mala Karma spustiť súčasne. Predvolene je nastavená na nekonečno.

Kliknite tu pre podrobné informácie o možnostiach konfigurácie Karma.

Ak ste pozorný študent, potom ste určite videli tieto tri riadky.

Pozrime sa na to v nasledujúcej časti.

Spúšťače prehliadača Karma

Spúšťač Karma-firefox-launcher, Karma-chrome-launcher a Karma-phantomjs-launcher možno všeobecne označiť ako spúšťače prehliadača pre Karma.

Karma musí roztočiť tieto nezávislé nezávislé aplikácie prehľadávača, takže je potrebné, aby aplikácia tretej strany poskytovala rozhraniu Karma na spustenie príkazu shellu, ktorý roztočí prehliadače v ľubovoľnom operačnom systéme, na ktorom Karma testuje.

Sú to teda spúšťače prehliadača Karma pre prehliadače firefox, chrome a phantomjs. Karma zobrazuje tieto vyhlásenia, aby nás informovala o svojej neschopnosti nainštalovať tieto požiadavky, a potom nás žiada, aby sme si ich nainštalovali sami.

Použijeme na to správcu balíkov uzlov a z príkazového riadku spustíme tieto príkazy: npm install Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Každý z nás musí mať nainštalovaný prehliadač Chrome a Firefox, bez nainštalovaných phantomjs. Ak je to pravda, musíte si ju nainštalovať, viď tu pre podrobnosti a kliknite tu pre rýchleho sprievodcu spustením.

Záver

V tomto tutoriáli sme sa pokúsili pochopiť, o čom je testovanie front-endových jednotiek. Taktiež sme predstavili hlavný front-endový nástroj na testovanie jednotiek pre softvér JavaScript známy ako Karma, ktorý je nástrojom založeným na uzloch. Predstavili sme tiež základné možnosti konfigurácie súboru Karma.conf.js a čo všetko z nich vyplýva.

Jedlo so sebou

• Testovanie jednotiek je druh testovacej metódy softvéru, pri ktorej sa testuje každá samostatná a nezávislá časť zdrojového kódu, aby sa zistilo, či je na použitie dostatočne dobrý.
• Keď toto jednotkové testovanie vykonávame na klientskom rozhraní (front-end) softvéru, je známe ako front-end testovanie jednotiek.
• Karma je testovací nástroj založený na uzloch, ktorý vám umožňuje testovať kódy JavaScript vo viacerých skutočných prehliadačoch. Preto sa nazýva testovací bežec.
• Nodejs je asynchrónny runtime modul založený na udalostiach, ktorý umožňuje ľahké a možné vytváranie škálovateľných sieťových aplikácií.
• Správca balíkov uzlov (npm) je správca balíkov JavaScriptu, ktorý sa používa na inštaláciu ďalších vopred pripravených aplikácií alebo modulov založených na uzloch, ktoré môžete vo svojej vlastnej aplikácii znova použiť.

Ďalšia príručka

Samotná Karma nemôže automatizovať testovanie front-endových jednotiek aplikácií JavaScriptu, musí tiež pracovať s ďalšími testovacími nástrojmi, ako je testovací rámec, ktorý uľahčí písanie našich testovacích prípadov.

V našom nadchádzajúcom tutoriáli sa dozvieme viac o Jasmine a balíku Jasmine-Jquery, ktorý rozširuje funkčnosť Jasmine o možnosť testovať doplnky HTML, ktoré využívajú knižnicu JavaScript: Jquery.

Odporúčané čítanie

• 20 najpopulárnejších nástrojov na testovanie jednotiek v roku 2021
• Kľúč k úspešnému testovaniu jednotiek - Ako vývojári testujú svoj vlastný kód?
• TOP 45 otázok s rozhovorom v jazyku JavaScript s podrobnými odpoveďami
• Výukový program AngularJS pre úplných začiatočníkov (s inštalačnou príručkou)
• Rozdiel medzi uhlovými verziami: Angular Vs AngularJS
• Testovanie pokrytia pri testovaní softvéru (Tipy na maximalizáciu pokrytia testovania)
• 48 najčastejších otázok a odpovedí z rozhovoru pre AngularJS (ZOZNAM 2021)
• Ako nastaviť testovací rámec Node.js: Výukový program Node.js