Karma Tutorial: Front-End Unit Testing med hjälp av Karma Test Runner

karma tutorial front end unit testing using karma test runner

Denna handledning förklarar hur man ställer in Karma och automatiserar testning av frontend-enheter med hjälp av Karma, grundläggande konfigurationsalternativ för Karma.conf.js-fil, etc.:

Denna handledning förklarar proceduren för automatisering av enhetstestning av programvarans front-end med Karma och några av dess tillhörande verktyg.

Vi kommer att börja med webbapplikationer som utvecklats med hjälp av JavaScript-biblioteket: ‘Jquery’ och JavaScript runtime: ‘NodeJS’; och senare kommer vi att titta på några JavaScript-ramar som AngularJS och ReactJS.

=>SCROLLA NERför att se hela listan över Karma-handledning

Vad du kommer att lära dig:

• Lista över Karma-handledning
• Översikt över Karma-handledning i denna serie
• Vad är front-end-enhetstestning?
• Vad är Karma Test Runner?
  • Hur fungerar Karma som testlöpare?
• Vad är NodeJS?
  • Vad är Node Package Manager (Npm)?
• Hur installerar jag Karma?
  • Översikt över Karma.conf.js filkonfigurationsalternativ
• Karma init Frågor
  • Annat filinnehåll för karma.conf.js
  • Karma Browser Launchers
• Slutsats
  • Rekommenderad läsning

Lista över Karma-handledning

Handledning nr 1: Karma Tutorial: Front-End Unit Testing med hjälp av Karma Test Runner
Handledning nr 2: Jasmine Framework Tutorial Inklusive Jasmine Jquery med exempel
Handledning nr 3: Provprojekt på front-end-enhetstestning med KARMA och JASMINE

Översikt över Karma-handledning i denna serie

Vad är front-end-enhetstestning?

Fronten på vilket programvarusystem som helst är helt enkelt gränssnittet där användaren får åtkomst till alla funktioner som tillhandahålls av systemet. För att garantera bästa användarupplevelse måste du se till att front-end-utvecklarna har kodat front-end genom att hålla alla användarkrav i åtanke.

Det enda sättet att genomdriva detta är att skriva och utföra tester över utvecklarens koder. Leveransen bör endast accepteras som en kvalitetsfront-end-kod / -funktion när alla dessa testresultat är i 'pass' -status.

Enhetstestning är ett slags programvarutestningsmetod där varje enskild och oberoende del av källkoden testas för att fastställa att den är tillräckligt bra för användning.

När vi utföra den här enhetstestningen på programvarans front (klientsida), den kallas som front-end-enhetstestning. Motsatsen till front-end-testning är back-end-testning (serversidan).

Front-end-enhetstestning kan utföras manuellt eller automatiskt. Automatiserad front-end-enhetstestning är i trend idag eftersom den är mer effektiv och tidsbesparande. Det finns olika verktyg som finns tillgängliga för test av frontenheter på olika programmeringsplattformar.

AngularJS och ReactJS är två populära front-end JavaScript-ramar, men ReactJS är ganska nytt.

För att utföra enhetstestning på en applikation används frontändarna som är byggda med dessa front-end-ramar eller till och med de som är byggda utan ramarna, vissa automatiseringstestverktyg som Karma, mokka, jasmin, skämt, enzym, etc., används.

För det första skulle vi lära oss att utföra front-end-enhetstester med hjälp av Karma och Jasmine, och senare kan vi också ta en titt på de andra verktygen.

Vi börjar med att köra front-end-enhetstester med fixturer för front-endar byggda utan någon av JavaScript-ramarna för front-end. Totalt kommer vi att dela våra lärdomar i denna serie i tre handledning.

I denna allra första handledning skulle vi försöka få ett grepp om hur Karma sätts upp, den andra handledningen kommer att förklara Jasmine i detalj, slutligen, i den tredje självstudien kommer vi att titta på dess praktiska tillämpning.

Vad är Karma Test Runner?

Karma är ett nodbaserat testverktyg som låter dig testa dina JavaScript-koder i flera riktiga webbläsare. Ett nodbaserat verktyg är alla verktyg som behöver Nodejs-motorn installerad för att den ska kunna köras och kan nås (installeras) via nodpakethanteraren (npm).

Karma är ett verktyg som gör vår testdrivna utveckling snabb, rolig och enkel. Det kallas tekniskt som en testlöpare. Det är anmärkningsvärt att här nämna att Karma utvecklades av Angular-teamet.

Hur fungerar Karma som testlöpare?

Som testlöpare gör Karma tre viktiga saker:

• Den startar en webbserver och serverar din JavaScript-källa och testfiler på den servern.
• Läser in alla käll- och testfiler i rätt ordning.
• Slutligen snurrar det upp webbläsare för att köra testerna.

Vad annat kan Karma göra?

Förutom de ovan nämnda funktionerna i Karma, finns det också få andra saker som Karma kan konfigureras att göra. Till exempel, att publicera kodtest till coveralls.io ; transponera en kod från es6-format till es5, samla flera filer i en fil och generera källkartor.

I våra efterföljande handledning kommer vi att se hur några av dessa saker fungerar.

Krav för att komma igång med Karma

För att komma igång med Karma måste du ha en förståelse för NodeJS och Node-pakethanteraren.

Vad är NodeJS?

Nodejs löser den blockerande karaktären av JavaScript-asynkrona samtal, dvs när en asynkron funktion nås i JavaScript, förhindrar den att andra delar av koden körs tills det asynkrona samtalet återvänder. Men med NodeJS kan asynkrona icke-blockerande funktionssamtal göras.

I tekniska termer kan NodeJS sägas vara en asynkron händelsestyrd JavaScript-runtime som gör det enkelt och möjligt att bygga skalbara nätverksapplikationer.

Komma igång med NodeJS

Du behöver helt enkelt installera NodeJS-ramverket. Allt du behöver göra är att besöka deras hemsida och baserat på ditt operativsystem måste du ladda ner installationsprogrammet och följa instruktionerna på deras webbplats om dess installation.

Vad är Node Package Manager (Npm)?

Node-pakethanteraren (npm) är en JavaScript-pakethanterare som används för att installera andra förbyggda nodbaserade applikationer eller moduler som du kanske vill återanvända i din egen applikation.

Npm installeras när du installerar NodeJS, men npm uppdateras snabbare än noden. Därför kan det finnas behov av att du uppdaterar din npm någon gång. För att installera den senaste versionen av npm måste du köra det här kommandot från din kommandorad: npm installera npm @ senaste -g

Ovanstående kommando indikerar att du ber OS-skalet att köra applikationen npm och applikationen ska utföra installationen av paketet npm. @latest indikerar att den senaste versionen av paketet ska installeras, -g-alternativet anger att paketet ska installeras globalt.

Mer information om npm finns här .

Det finns två viktiga saker som bör nämnas här, dvs installera ett paket med alternativet –save och –save-dev.

Under tester ska alla installerade paket installeras med alternativet -save-dev, dvs för att instruera pakethanteraren att installera paketet som ett utvecklingsberoende och inte som ett projektberoende (när jag använder –save).

Utvecklingsberoende bör väljas eftersom det paketet inte behövs av applikationen under produktionsfasen utan endast krävs under utvecklingsfasen för kvalitetssäkringsändamål.

Hur installerar jag Karma?

För att komma igång med Karma måste du skapa en mapp för projektet som du ska skriva enhetstesterna för. Du kan namnge det som “basicUT”. Jag använder Visual Studio Code som textredigerare, därför rekommenderar jag dig också att ladda ner och installera den. Du hittar den här .

Öppna det inbyggda terminalfönstret i Visual Studio, klicka på ”Visa-menyn” och välj sedan den integrerade terminalundermenyn.

Skriv 'npminit' i terminalfönstret enligt bilden nedan. Detta kommando guider dig att automatiskt ställa in filen 'package.json' som varje nodbaserat program måste ha.

Package.json-filen lagrar information om din applikation, såsom dess namn, versionsnummer, författare, applikationsberoende, utvecklingsberoende, testkommando eller skript och skript för att starta applikationen eller bygga appen till en körbar form.

Klick här för mer information om filen 'package.json'.

Skärmdump för att initiera en package.json-fil med npminit

Som beskrivs ovan, för att installera Karma är allt du behöver köra kommandot npm installera Karma @ senaste –save-dev . Jag hoppas att du nu kan tolka vad det kommandot innebär.

Nu har vi framgångsrikt installerat Karma, vad är nästa sak du behöver göra för att kunna använda Karma för din front-end-testning?

Allt du behöver göra är att skriva konfigurationsfilen för den, och filen heter vanligtvis som Karma.conf.js för JavaScript. Det är dock annorlunda för CoffeeScript. Klick här för att utforska mer om Karma-konfigurationsfilen.

Översikt över Karma.conf.js filkonfigurationsalternativ

Konfigurationsfilen Karma.conf.js bör innehålla installationsinstruktionen som Karma måste följa för att utföra de tre viktiga funktionerna i Karma.

Denna konfigurationsfil kan skapas manuellt eller automatiskt med kommandot: 'karma init', som börjar visa olika frågor som du kan svara på, och Karma använder svaren som du tillhandahåller för att konfigurera konfigurationsfilen.

Du skulle ha upptäckt nu att körning av kommandot: ”karma init”, ger felet ' 'Karma' känns inte igen som ett internt eller externt kommandoprogram eller batchfil ”.

Detta beror på att Karma installerades lokalt och inte globalt i det projekt som du arbetar med. Därför kan ditt operativsystemsskal inte hitta applikationen Karma i dess miljöinställningar om du använder Windows eller i .bash_profile-filen om du använder Mac.

För att åtgärda detta fel måste vi installera Karma globalt. Inte bara Karma, utan paketet speciellt utformat för att möjliggöra användning av Karma vid kommandoraden som är Karma-cli. Kör bara kommandot, ′ Npm installera -g karma-cli ' .

Kör nu kommandot karma-init igen och du kan se frågorna som visas i bilden nedan. När du svarar på varje fråga och trycker på “RETUR” -tangenten kommer nästa fråga att dyka upp.

Kör Karma init-kommandot på kommandoraden.

Tabellen nedan ger dig en lista med frågorna, deras betydelse tillsammans med vad ditt svar ska vara inom ramen för denna handledning.

Karma init Frågor

F # 1) Vilket testramverk vill du använda?

Förklaring: Ett testramverk är ett paket som tillhandahåller de funktioner och rutiner som behövs för att automatisera processen för kodningstest för alla programvaruprodukter på ett visst språk. Till exempel, jasmine och mocha testar ramar för JavaScript-programvarupaket, Junit och JTest testar ramar för Java, kolla detta för mer detaljer.

Svar: En instruktion visas som ber dig att använda fliken för att visa andra tillgängliga testramar för en nodbaserad applikation, men som standard ser du jasmin, så klicka helt enkelt på enter.

F # 2) Vill du använda Require.js?

Förklaring: Require.js är en JavaScript-fil och modulladdare. Du kanske undrar: varför behöver du en fil- eller modullastare? Läsa detta

Svar: I koden kommer vi att skriva, jag skulle inte använda demand.js, så svara bara nej. Frågan är vad skulle vi använda? För att kunna använda de nödvändiga uttalandena för att hämta externa filer till en annan fil behöver vi en modulladdare, så vi skulle välja Browserify. Du kommer att se mer information nedan.

F # 3) Vill du fånga några webbläsare automatiskt?

Förklaring: Kom ihåg att karma är ett verktyg som hjälper dig att testa din front-end i olika webbläsare, därför är den här frågan avsedd för dig att välja de webbläsare du skulle vilja snurra upp när du kör testet med karma-start.

Svar: Välj chrome, firefox och phantomjs för den här lektionen. Nu är frågan vad är PhantomJS? PhantomJS är en headless webbläsare som är avsedd för headless webbplatstestning, skärmdump, sidautomatisering och nätverksövervakning, du kan se detaljer här .

En annan fråga, vad är en webbläsare utan huvud? En webbläsare utan huvud är en webbläsare utan ett grafiskt användargränssnitt, koderna körs i en konsolliknande miljö.

Fråga # 4) Vad är källans och testfilernas plats?

Förklaring: Den här frågan är avsedd att avslöja sökvägen där du kommer att spara frontend-filerna och de testfiler som ska utföra enhetstester på dem.

Svar: För detta projekt anger du public / js / *. Js för källfilsökvägen och test / * Spec.js för testfilsökvägen. * Spec.js indikerar att alla testfiler kan kallas vad som helst men måste innehålla Spec i slutet med ett .js-filtillägg.

F # 5) Bör någon av filerna som ingår i föregående mönster uteslutas?

Förklaring: Ibland kan det finnas behov av att vissa källfiler och testfiler inte ska laddas, den här frågan är tänkt för dig att ange sådana filer som inte ska laddas i webbläsaren av Karma.

Svar: Ange bara en tom sträng genom att trycka på enter. Såg du uttalandet ”Du kan använda globmönster, Till exempel, “** / *. Swp”. ’. Globmönster används för att specificera en uppsättning filnamn i en Unix-liknande miljö med jokertecken.
I vårt fall står public / js / *. Js för alla filer som heter vilken uppsättning tecken som helst (*) och har filtillägget .js och finns i sökvägen public / js. Läs mer här

F # 6) Vill du att Karma ska titta på alla filer och köra testerna på förändring?

Förklaring: När en uppgift / testlöpare tittar på dina filer betyder det bara att när du redigerar filerna under utvecklingen, testar / kör upp, laddar om filen eller utför den igen, är det funktionen på filen igen, utan att du kommer att fråga manuellt det för att göra det igen.

Svar: Så helt enkelt svara ja.

Annat filinnehåll för karma.conf.js

# 1) basePath : Denna konfiguration bär namnet på en mapp som ska användas för att lösa sökvägsinformationen för test- och källfiler.

# 2) förprocessorer : Detta bär namnet på de programfiler som ska användas för att bearbeta käll- och testfiler innan de laddas in i webbläsaren.

Varför behövs detta?

Med tillkomsten av ES6-kodningsstil som inte är förstås av webbläsarna ännu, finns det ett behov av att transpilera koden från ES6-format till ES5 som webbläsaren kan förstå, därför kan babel-förprocessor för Karma specificeras för att användas för att transpilera kod från ES6 till ES5 innan den laddas i webbläsaren.

Det finns andra användningsområden för en förprocessor, T.ex. kodtest täckning publicering till coveralls.io, se här för mer detaljer.

# 3) reportrar : Detta konfigurationsalternativ anger paketet som ska användas för att rapportera testresultaten. Det finns flera reportrar för rapportering av kodtesttäckning; T.ex. rapportering. Men som standard är den inställd på framsteg. Observera att det är en matris, därför kan du också lägga till andra reportrar.

# 4) port : Detta specificerar porten där webbläsaren spinnas på.

# 5) färger : Anger om reportrarna ska producera rapporterna med färgämnen.

# 6) logLevel : Detta anger loggningsnivån. Som standard är den inställd på config.LOG_INFO vilket innebär att endast informationen loggas.

# 7) singleRun : Detta anger om Karma ska avslutas efter att ha kört testet en gång. Om det är satt till sant kör Karma testet och avslutar med status 0 eller 1 beroende på om testet misslyckades eller klarat, annars slutar inte Karma.

Denna konfiguration krävs för kontinuerliga integrationsteständamål med verktyg som TravisCI och CircleCI.

# 8) samtidighet : Detta anger hur många webbläsare Karma ska starta samtidigt. Som standard är det inställt på oändlighet.

Klick här för detaljerad information om Karma-konfigurationsalternativ.

Om du är en observant lärare måste du ha sett dessa tre rader.

Låt oss utforska detta i avsnittet nedan.

Karma Browser Launchers

Karma-firefox-launcher, Karma-chrome-launcher och Karma-phantomjs-launcher kan i allmänhet betecknas som webbläsarstartare för Karma.

Karma måste snurra upp dessa webbläsarapplikationer som är oberoende, så en tredjepartsapplikation krävs för att ge ett gränssnitt till Karma för att köra shell-kommandot som snurrar webbläsarna upp i alla operativsystem som Karma kör ett test på.

Således är de Karma-webbläsarstartare för Firefox, krom respektive fantomjs. Karma poppar upp dessa uttalanden för att informera oss om sin oförmåga att installera dessa krav och ber oss sedan installera det själv manuellt.

För att göra det kommer vi att använda nodpakethanteraren och köra dessa kommandon från kommandoraden: npm installera Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Vi måste alla ha krom- och Firefox-webbläsare installerade, med fantomjs inte installerade. Om det är sant måste du installera det, se här för detaljer och klicka här för en snabbstartsguide.

Slutsats

I den här guiden försökte vi förstå vad testning av front-end-enheter handlar om. Vi introducerade också ett stort testverktyg för front-end-enheter för JavaScript-program som kallas Karma, vilket är ett nodbaserat verktyg. Vi presenterade också de grundläggande konfigurationsalternativen för filen Karma.conf.js och vad allt de antyder.

bästa gratis adware och malware borttagning

Takeaways

• Enhetstestning är ett slags programvarutestningsmetod där varje enskild och oberoende del av källkoden testas för att avgöra om den är tillräckligt bra för användning.
• När vi utför denna enhetstestning på framsidan (klientsidan) av programvaran kallas den front-end-enhetstestning.
• Karma är ett nodbaserat testverktyg som låter dig testa dina JavaScript-koder i flera riktiga webbläsare. Därför kallas det som testlöpare.
• Nodejs är ett asynkront händelsedrivet runtime-JavaScript som gör det enkelt och möjligt att bygga skalbara nätverksapplikationer.
• Node-pakethanteraren (npm) är en JavaScript-pakethanterare som används för att installera andra förbyggda nodbaserade applikationer eller moduler som du kanske vill återanvända i din egen applikation.

Nästa handledning

Karma enbart kan inte automatisera front-end-enhetstestning av JavaScript-applikationer, det måste också arbeta med andra testverktyg som ett testramverk som underlättar skrivandet av våra testfall.

I vår kommande handledning kommer vi att utforska om Jasmine och Jasmine-Jquery-paketet som utökar Jasmines funktionalitet för att kunna testa HTML-fixturer som använder JavaScript-biblioteket: Jquery.

Rekommenderad läsning

• 20 mest populära enhetstestverktyg 2021
• Nyckeln till framgångsrika enhetstester - Hur utvecklare testar sin egen kod?
• TOPP 45 Intervjufrågor från JavaScript med detaljerade svar
• AngularJS-handledning för absoluta nybörjare (med installationsguide)
• Skillnaden mellan vinkelversioner: Vinkel mot VinkelJS
• Testtäckning vid programvarutestning (tips för att maximera testtäckning)
• 48 Top AngularJS intervjufrågor och svar (2021 LIST)
• Så här ställer du in Node.js Testing Framework: Node.js Tutorial