Výukový program Karma: Testování jednotky front-end pomocí nástroje Karma Test Runner

karma tutorial front end unit testing using karma test runner

Tento výukový program vysvětluje, jak nastavit Karma a automatizovat testování front-endových jednotek pomocí Karmy, základní možnosti konfigurace pro soubor Karma.conf.js atd .:

Tento výukový program vysvětluje postup automatizace testování jednotky front-endu softwaru pomocí Karmy a některých souvisejících nástrojů.

Začneme webovými aplikacemi vyvinutými pomocí knihovny JavaScriptu: „Jquery“ a runtime JavaScriptu: „NodeJS“; a později se podíváme na některé rámce JavaScript, jako jsou AngularJS a ReactJS.

=>POSUNOUT DOLŮzobrazit celý seznam výukových programů Karma

Co se naučíte:

• Seznam výukových programů karmy
• Přehled výukových programů karmy v této sérii
• Co je testování front-endové jednotky?
• Co je Karma Test Runner?
  • Jak funguje Karma jako testovací běžec?
• Co je NodeJS?
  • Co je Správce balíčků uzlů (NPM)?
• Jak nainstalovat Karma?
  • Přehled Možnosti konfigurace souboru Karma.conf.js
• Karma init otázky
  • Jiný obsah souboru karma.conf.js
  • Spouštěče prohlížeče Karma
• Závěr
  • Doporučené čtení

Seznam výukových programů karmy

Výukový program č. 1: Výukový program Karma: Testování jednotky front-end pomocí nástroje Karma Test Runner
Výukový program č. 2: Výukový program Jasmine Framework včetně příkladů Jasmine Jquery
Výukový program č. 3: Ukázkový projekt testování front-endových jednotek pomocí KARMA a JASMINE

Přehled výukových programů karmy v této sérii

Co je testování front-endové jednotky?

Front-end jakéhokoli softwarového systému je jednoduše rozhraní, kde uživatel přistupuje ke všem funkcím poskytovaným systémem. Aby byla zaručena nejlepší uživatelská zkušenost, je třeba zajistit, aby front-end vývojáři kódovali front-end tak, že budou mít na paměti všechny uživatelské požadavky.

Jediným způsobem, jak to vynutit, je psát a provádět testy přes kódy vývojáře. Výstup by měl být přijat jako kvalitní front-endový kód / funkce, pouze pokud jsou všechny tyto výsledky testů ve stavu „vyhovět“.

Testování jednotek je druh metody testování softwaru, při které se testuje každá jednotlivá a nezávislá část zdrojového kódu, aby se zjistilo, zda je pro použití dostatečně dobrá.

Když jsme provést toto testování jednotky na front-endu (na straně klienta) softwaru, nazývá se to front-end testování jednotky. Opakem front-end testování je back-end testování (na straně serveru).

Testování jednotky front-end lze provádět ručně nebo automaticky. V dnešní době je v trendu automatické testování front-end jednotek, protože je efektivnější a časově úspornější. Pro testování front-endových jednotek na různých programovacích platformách jsou k dispozici různé nástroje.

AngularJS a ReactJS jsou dva populární front-endové rámce JavaScriptu, i když ReactJS je zcela nový.

K provádění testování jednotek v aplikaci se používají front-endy postavené pomocí těchto front-end frameworků nebo dokonce ty, které jsou postavené bez frameworků, určité nástroje pro testování automatizace jako Karma, moka, Jasmine, jest, enzym atd.

Nejprve bychom se učili, jak provádět testování front-endových jednotek pomocí Karmy a Jasmine, a později se můžeme podívat také na další nástroje.

Začneme spuštěním testů front-endových jednotek pomocí příslušenství pro front-endy postavené bez jakéhokoli rámce JavaScriptu pro front-endy. Celkově naše učení v této sérii rozdělíme do tří výukových programů.

V tomto úplně prvním tutoriálu bychom se pokusili pochopit, jak se nastavuje Karma, druhý tutoriál podrobně vysvětlí Jasmine, nakonec se ve třetím tutoriálu podíváme na jeho praktickou aplikaci.

Co je Karma Test Runner?

Karma je testovací nástroj založený na uzlech, který vám umožňuje otestovat vaše kódy JavaScript ve více reálných prohlížečích. Nástroj založený na uzlech je jakýkoli nástroj, který ke svému fungování potřebuje nainstalovaný modul Nodejs a je k němu přístup (nainstalován) prostřednictvím správce balíčků uzlů (npm).

Karma je nástroj, díky kterému je náš vývoj řízený testy rychlý, zábavný a snadný. Odborně se nazývá testovací běžec. Za zmínku stojí, že Karma byla vyvinuta týmem Angular.

Jak funguje Karma jako testovací běžec?

Jako testovací běžec dělá Karma tři důležité věci:

• Spustí webový server a slouží vašemu zdroji JavaScriptu a testovacím souborům na tomto serveru.
• Načte všechny zdrojové a testovací soubory ve správném pořadí.
• Nakonec roztočí prohlížeče a spustí testy.

Co jiného může Karma dělat?

Kromě výše uvedených funkcí karmy existuje i několik dalších věcí, ke kterým může být karma nakonfigurována. Například, publikovat pokrytí testem kódu na kombinéza.io ; převést kód z formátu es6 do es5, sloučit více souborů do jednoho souboru a generovat zdrojové mapy.

V našich dalších cvičeních uvidíme, jak některé z těchto věcí fungují.

Požadavky pro začátek používání karmy

Abyste mohli začít s Karmou, musíte porozumět NodeJS a správci balíků Node.

Co je NodeJS?

Nodejs řeší blokovací povahu asynchronních volání JavaScriptu, tj. Když je k asynchronní funkci přistupováno v JavaScriptu, brání ostatním částem kódu v běhu, dokud se asynchronní volání nevrátí. S NodeJS však lze provádět asynchronní neblokující volání funkcí.

Z technického hlediska lze NodeJS říci, že je to asynchronní runtime JavaScript řízený událostmi, díky němuž je vytváření a škálovatelné síťové aplikace snadné a možné.

Začínáme s NodeJS

Jednoduše musíte nainstalovat rámec NodeJS. Vše, co musíte udělat, je navštívit jejich webová stránka a na základě vašeho OS si musíte stáhnout instalační program a postupovat podle pokynů na jeho stránce o jeho instalaci.

Co je Správce balíčků uzlů (NPM)?

Správce balíčků uzlů (npm) je správce balíčků JavaScriptu, který se používá k instalaci dalších předem připravených aplikací nebo modulů založených na uzlech, které můžete chtít znovu použít ve své vlastní aplikaci.

Npm se nainstaluje při instalaci NodeJS, ale npm se aktualizuje rychleji než uzel. Proto může být v určitém okamžiku potřeba aktualizovat NPM. Chcete-li nainstalovat nejnovější verzi npm, musíte tento příkaz spustit z příkazového řádku: npm install npm @ latest -g

Výše uvedený příkaz označuje, že žádáte prostředí OS o spuštění aplikace npm a aplikace by měla provést instalaci balíčku npm. @latest označuje, že by měla být nainstalována nejnovější verze balíčku, volba -g označuje, že by měl být balíček nainstalován globálně.

Více podrobností o NPM naleznete tady .

Zde je třeba zmínit dvě důležité věci, tj. Instalaci balíčku s volbou –save a –save-dev.

Během testů by měl být jakýkoli nainstalovaný balíček nainstalován pomocí volby –save-dev, tj. Instruovat správce balíčků, aby nainstaloval balíček jako závislost na vývoji a ne jako závislost na projektu (když používám –save).

Závislost na vývoji by měla být zvolena, protože tento balíček aplikace během produkční fáze nepotřebuje, ale je vyžadován pouze během vývojové fáze pro účely zajištění kvality.

Jak nainstalovat Karma?

Chcete-li začít s Karmou, musíte vytvořit složku pro projekt, pro který se chystáte napsat jednotkové testy. Můžete jej pojmenovat jako „basicUT“. Jako textový editor používám Visual Studio Code, proto vám také doporučuji stáhnout a nainstalovat. Můžete to najít tady .

Otevřete vestavěné okno terminálu s kódem Visual Studio, klikněte na nabídku Zobrazit a poté vyberte dílčí nabídku integrovaného terminálu.

V okně terminálu zadejte „npminit“, jak je znázorněno na následujícím obrázku. Tento příkaz vás provede automatickým nastavením souboru „package.json“, který musí mít každá aplikace založená na uzlech.

Soubor package.json ukládá informace o vaší aplikaci, jako je její název, číslo verze, autor, závislosti aplikace, závislosti vývoje, testovací příkaz nebo skript a skript pro spuštění aplikace nebo sestavení aplikace do spustitelného formuláře.

Klepněte na tady Další informace o souboru „package.json“.

Screenshot z inicializace souboru package.json pomocí npminit

Jak je popsáno výše, k instalaci Karmy stačí spustit příkaz npm install Karma @ latest –save-dev . Doufám, že nyní můžete interpretovat, co tento příkaz znamená.

Nyní jsme úspěšně nainstalovali Karmu, jaká je další věc, kterou musíte udělat, abyste mohli používat Karmu pro testování front-end jednotky?

Vše, co musíte udělat, je napsat pro něj konfigurační soubor, který je pro JavaScript obvykle pojmenován jako Karma.conf.js. U CoffeeScript je to však jiné. Klepněte na tady prozkoumat více informací o konfiguračním souboru Karma.

Přehled Možnosti konfigurace souboru Karma.conf.js

Konfigurační soubor Karma.conf.js by měl obsahovat instrukci k nastavení, kterou musí Karma dodržovat, aby mohl provádět tři důležité funkce Karmy.

Tento konfigurační soubor lze vytvořit ručně nebo automaticky pomocí příkazu: „karma init“, který vám začne zobrazovat různé otázky k zodpovězení, a Karma použije poskytnuté odpovědi k nastavení konfiguračního souboru.

Už byste zjistili, že spuštění příkazu: „karma init“ způsobí chybu ' „Karma“ není rozpoznána jako interní nebo externí příkazem ovladatelný program nebo dávkový soubor “.

Je to proto, že Karma byla nainstalována lokálně a ne globálně na projektu, na kterém pracujete. Proto váš operační systém nemůže najít aplikaci Karma v nastavení prostředí cesty, pokud používáte Windows, nebo v souboru .bash_profile, pokud používáte Mac.

Abychom tuto chybu opravili, musíme nainstalovat Karma globálně. Nejen Karma, ale balíček speciálně navržený tak, aby umožňoval použití Karmy na příkazovém řádku, kterým je Karma-cli. Jednoduše spusťte příkaz, „Npm install -g karma-cli“ .

Nyní znovu spusťte příkaz karma-init a můžete vidět otázky, jak je znázorněno na následujícím obrázku. Když odpovíte na každou otázku a stisknete klávesu „ENTER“, objeví se další otázka.

Spuštění příkazu Karma init na příkazovém řádku.

Níže uvedená tabulka vám poskytne seznam otázek, jejich význam spolu s tím, co by měla být vaše odpověď v kontextu tohoto tutoriálu.

Karma init otázky

Otázka č. 1) Který testovací rámec chcete použít?

Vysvětlení: Testovací rámec je balíček, který poskytuje funkce a rutiny potřebné k automatizaci procesu kódovacích testů pro jakýkoli softwarový produkt konkrétního jazyka. Například, jasmine a mocha testují rámce pro softwarové balíčky JavaScriptu, Junit a JTest testují rámce pro Javu, zkontrolujte tento Více podrobností.

Odpovědět: Zobrazí se instrukce, která vás žádá, abyste pomocí karty zobrazili další dostupné testovací rámce pro aplikaci založenou na uzlech, ale ve výchozím nastavení vidíte jasmín, jednoduše klikněte na Enter.

Otázka č. 2) Chcete používat soubor Require.js?

Vysvětlení: Require.js je zavaděč souborů a modulů JavaScriptu. Možná se divíte: proč potřebujete zavaděč souborů nebo modulů? Číst tento

Odpovědět: V kódu, který budeme psát, bych nevyužil require.js, takže jednoduše odpovězte ne. Otázkou je, co bychom použili? Abychom mohli použít příkazy require k přenesení externích souborů do jiného souboru, potřebujeme zavaděč modulu, takže bychom se rozhodli pro Browserify. Níže uvidíte další podrobnosti.

Otázka č. 3) Chcete automaticky zachytit všechny prohlížeče?

Vysvětlení: Připomeňme si, že karma je nástroj, který vám pomůže otestovat váš front-end v různých prohlížečích, a proto je tato otázka určena k výběru prohlížečů, které byste rádi roztočili, kdykoli spustíte test se spuštěním karmy.

Odpovědět: V této lekci vyberte Chrome, Firefox a Phantomjs. Otázkou nyní je, co je PhantomJS? PhantomJS je bezhlavý webový prohlížeč, který je určen pro bezhlavé testování webových stránek, snímání obrazovky, automatizaci stránek a monitorování sítě, můžete vidět podrobnosti tady .

Další otázka, co je bezhlavý webový prohlížeč? Bezhlavý webový prohlížeč je prohlížeč bez grafického uživatelského rozhraní, kódy se provádějí v konzolovém prostředí.

Otázka č. 4) Jaké je umístění vašich zdrojových a testovacích souborů?

Vysvětlení: Tato otázka má odhalit cestu, kam uložíte soubory front-endu a testovací soubory, které na nich provedou testování jednotek.

Odpovědět: U tohoto projektu zadejte public / js / *. Js pro cestu ke zdrojovým souborům a test / * Spec.js pro cestu k testovacím souborům. * Spec.js označuje, že všechny testovací soubory lze nazvat jakkoli, ale na konci musí obsahovat Spec s příponou .js.

Otázka č. 5) Měl by být vyloučen některý ze souborů zahrnutých v předchozích vzorech?

Vysvětlení: Někdy může být potřeba, aby se určité zdrojové soubory a testovací soubory nenačítaly, tato otázka je určena k tomu, abyste určili takové soubory, které by Karma neměla načíst do prohlížeče.

Odpovědět: Jednoduše zadejte prázdný řetězec stisknutím klávesy enter. Viděli jste prohlášení „Můžete použít glob vzory, Například, „** / *. Swp“. “. Glob vzory se používají k určení sady názvů souborů v prostředí podobném Unixu pomocí zástupného znaku.
V našem případě public / js / *. Js znamená libovolný soubor s názvem libovolná sada znaků, jak je označeno (*), má příponu souboru .js a nachází se v cestě public / js. Přečtěte si více tady

Otázka č. 6) Chcete, aby Karma sledovala všechny soubory a spouštěla ​​testy změn?

nejlepší ssd klonovací software Windows 10

Vysvětlení: Když úkol / testovací běžec sleduje vaše soubory, znamená to jen to, že kdykoli během vývoje soubory upravíte, testovací / úkolový běžec znovu načte soubor nebo znovu provede jeho funkci v souboru, aniž byste se museli ručně zeptat udělat to znovu.

Odpovědět: Takže jednoduše odpovězte ano.

Jiný obsah souboru karma.conf.js

# 1) basePath : Tato konfigurace nese název jakékoli složky, která by měla být použita k vyřešení informací o cestě poskytnutých pro testovací a zdrojové soubory.

# 2) preprocesory : Toto nese název programových souborů, které by měly být použity ke zpracování zdrojových a testovacích souborů před jejich načtením do prohlížeče.

Proč je to potřeba?

S příchodem stylu kódování ES6, který dosud prohlížečům nerozumí, je potřeba přenést kód z formátu ES6 do formátu ES5, kterému prohlížeč porozumí, a proto lze specifikovat babelský preprocesor pro Karma, který bude použit k přenesení kód z ES6 na ES5 před načtením do prohlížeče.

Existují i ​​další využití preprocesoru, Např. publikování pokrytí testu kódu na coveralls.io, viz tady Více podrobností.

# 3) reportéři : Tato možnost konfigurace určuje balíček, který se má použít k hlášení výsledků testu. Existuje několik reportérů pro hlášení pokrytí testů kódu; Např. Dosah. Ve výchozím nastavení je ale nastaven postup. Všimněte si, že se jedná o pole, a proto můžete přidat i další reportéry.

# 4) port : Toto určuje port, na kterém je prohlížeč spuštěn.

# 5) barvy : Určuje, zda mají reportéři vytvářet zprávy s barvivy.

# 6) logLevel : Určuje úroveň protokolování. Ve výchozím nastavení je nastavena na config.LOG_INFO, což znamená, že jsou protokolovány pouze informace.

# 7) singleRun : Toto určuje, zda by Karma měla ukončit po provedení testu jednou. Pokud je nastavena na hodnotu true, Karma provede test a ukončí se stavem 0 nebo 1 v závislosti na tom, zda test selhal nebo vyhověl, jinak Karma nezastaví.

Tato konfigurace je vyžadována pro účely testování nepřetržité integrace pomocí nástrojů jako TravisCI a CircleCI.

# 8) souběžnost : Toto určuje, kolik prohlížečů by měla Karma spustit současně. Ve výchozím nastavení je nastavena na nekonečno.

Klepněte na tady pro podrobné informace o možnostech konfigurace Karma.

Pokud jste pozorný student, musíte tyto tři řádky vidět.

Pojďme to prozkoumat v následující části.

Spouštěče prohlížeče Karma

Spouštěč Karma-firefox-launcher, Karma-chrome-launcher a Karma-phantomjs-launcher lze obecně označit jako spouštěče prohlížeče pro Karma.

Karma musí roztočit tyto nezávislé aplikace prohlížeče, takže je potřeba aplikace třetí strany, která poskytne rozhraní pro Karma ke spuštění příkazu shellu, který roztočí prohlížeče v jakémkoli operačním systému, na kterém Karma provádí test.

Jedná se tedy o spouštěče prohlížeče Karma pro firefox, chrome a phantomjs. Karma vyskakuje tato prohlášení, aby nás informovala o své neschopnosti tyto požadavky nainstalovat, a poté nás žádá, abychom si je sami nainstalovali sami.

K tomu použijeme správce balíčků uzlů a spustíme tyto příkazy z příkazového řádku: npm install Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Každý z nás musí mít nainstalované prohlížeče Chrome a Firefox, bez nainstalovaných phantomjs. Pokud je to pravda, musíte si ji nainstalovat, viz tady pro podrobnosti a klikněte tady průvodce rychlým startem.

Závěr

V tomto kurzu jsme se pokusili pochopit, o čem testování front-endových jednotek je. Také jsme představili hlavní nástroj pro testování front-endových jednotek pro software JavaScript známý jako Karma, což je nástroj založený na uzlech. Také jsme představili základní možnosti konfigurace pro soubor Karma.conf.js a co vše znamenají.

Jídlo s sebou

• Testování jednotek je druh metody testování softwaru, při které se testuje každá jednotlivá a nezávislá část zdrojového kódu, aby se zjistilo, zda je pro použití dostatečně dobrá.
• Když provádíme toto testování jednotky na front-endu (na straně klienta) softwaru, je to známé jako front-end testování jednotky.
• Karma je testovací nástroj založený na uzlech, který vám umožňuje otestovat vaše kódy JavaScript ve více reálných prohlížečích. Proto se nazývá testovací běžec.
• Nodejs je asynchronní runtime JavaScript založený na událostech, který usnadňuje a umožňuje vytváření škálovatelných síťových aplikací.
• Správce balíčků uzlů (npm) je správce balíčků JavaScriptu, který se používá k instalaci dalších předem připravených aplikací nebo modulů založených na uzlech, které můžete chtít znovu použít ve své vlastní aplikaci.

Další výuka

Samotná Karma nemůže automatizovat testování front-endových jednotek aplikací JavaScriptu, musí také pracovat s dalšími testovacími nástroji, jako je testovací rámec, který usnadní psaní našich testovacích případů.

V našem nadcházejícím tutoriálu prozkoumáme Jasmine a balíček Jasmine-Jquery, který rozšiřuje funkčnost Jasmine, aby bylo možné testovat příslušenství HTML, které využívají knihovnu JavaScript: Jquery.

Doporučené čtení

• 20 nejoblíbenějších nástrojů pro testování jednotek v roce 2021
• Klíč k úspěšnému testování jednotky - Jak vývojáři testují svůj vlastní kód?
• NEJLEPŠÍ 45 otázek na rozhovor s JavaScriptem s podrobnými odpověďmi
• Výukový program AngularJS pro úplné začátečníky (s instalačním průvodcem)
• Rozdíl mezi úhlovými verzemi: Angular Vs AngularJS
• Testování pokrytí při testování softwaru (tipy k maximalizaci pokrytí testování)
• 48 nejdůležitějších otázek a odpovědí na rozhovor AngularJS (SEZNAM 2021)
• Jak nastavit rámec pro testování Node.js: Výukový program Node.js