Karma Tutorial: Front-End Unit Testing ved hjælp af Karma Test Runner

karma tutorial front end unit testing using karma test runner

Denne vejledning forklarer, hvordan du opsætter Karma og automatiserer test af frontend-enheder ved hjælp af Karma, grundlæggende konfigurationsindstillinger til Karma.conf.js-fil osv .:

Denne vejledning forklarer proceduren til automatisering af enhedstest af software-fronten ved hjælp af Karma og nogle af dens tilknyttede værktøjer.

Vi starter med webapplikationer udviklet ved hjælp af JavaScript-bibliotek: ‘Jquery’ og JavaScript runtime: ‘NodeJS’; og senere vil vi se på nogle JavaScript-rammer som AngularJS og ReactJS.

=>RUL NEDfor at se hele listen over Karma-tutorials

Hvad du lærer:

• Liste over Karma-vejledninger
• Oversigt over Karma-tutorials i denne serie
• Hvad er test af frontend-enheder?
• Hvad er Karma Test Runner?
  • Hvordan fungerer Karma som testløber?
• Hvad er NodeJS?
  • Hvad er Node Package Manager (Npm)?
• Sådan installeres Karma?
  • Oversigt over Karma.conf.js Filkonfigurationsindstillinger
• Karma init Spørgsmål
  • Andet karma.conf.js filindhold
  • Karma Browser Launchers
• Konklusion
  • Anbefalet læsning

Liste over Karma-vejledninger

Tutorial # 1: Karma Tutorial: Front-End Unit Testing ved hjælp af Karma Test Runner
Tutorial # 2: Jasmine Framework Tutorial Inklusiv Jasmine Jquery med eksempler
Tutorial # 3: Eksempel på projekt ved test af frontend-enheder ved hjælp af KARMA og JASMINE

Oversigt over Karma-tutorials i denne serie

Hvad er test af frontend-enheder?

Fronten på ethvert softwaresystem er simpelthen grænsefladen, hvor brugeren får adgang til alle de funktioner, systemet leverer. For at garantere den bedste brugeroplevelse er der behov for at sikre, at front-end-udviklerne har kodet front-enden ved at huske alle brugerkrav.

Den eneste måde at håndhæve dette på er at skrive og udføre test over udviklerens koder. Den leverede skal kun accepteres som en kvalitet front-end kode / funktion, når alle disse testresultater er i 'bestået' status.

Enhedstest er en slags softwaretestmetode, hvor hver enkelt og uafhængig del af kildekoden testes for at bestemme, at den er god nok til brug.

Når vi udføre denne enhedstestning på softwarens front-end (klientside), kaldes den som front-end unit-test. Det modsatte af front-end test er back-end test (server-side).

Front-end enhedstest kan udføres manuelt eller automatisk. Automatiseret front-end enhedstest er i trend i disse dage, da det er mere effektivt og tidsbesparende. Der er forskellige værktøjer, der er tilgængelige til front-end enhedstest på forskellige programmeringsplatforme.

AngularJS og ReactJS er to populære JavaScript-rammer til frontend, selvom ReactJS er ret nyt.

For at udføre enhedstest på en applikation bruges frontenderne, der er bygget med disse frontend-rammer eller endda dem, der er bygget uden rammerne, visse automatiserings-testværktøjer som Karma, mokka, jasmin, nar, enzym osv.

For det første ville vi lære at udføre front-end enhedstest ved hjælp af Karma og Jasmine, og derefter senere kan vi også se på de andre værktøjer.

Vi starter med at køre frontend-enhedstests ved hjælp af armaturer til frontendere bygget uden nogen af ​​JavaScript-rammerne til frontendene. I alt vil vi opdele vores læring i denne serie i tre tutorials.

I denne allerførste tutorial, ville vi prøve at få en forståelse af, hvordan Karma oprettes, den anden tutorial forklarer Jasmine i detaljer, endelig i den tredje tutorial ser vi på dens praktiske anvendelse.

Hvad er Karma Test Runner?

Karma er et node-baseret testværktøj, der giver dig mulighed for at teste dine JavaScript-koder på tværs af flere rigtige browsere. Et knudepunktbaseret værktøj er ethvert værktøj, der kræver, at Nodejs-motoren er installeret, for at den kan køre og kan tilgås (installeres) via nodepakkehåndteringen (npm).

Karma er et værktøj, der gør vores testdrevne udvikling hurtig, sjov og nem. Det betegnes teknisk som en testløber. Det er bemærkelsesværdigt at nævne her, at Karma blev udviklet af Angular-teamet.

Hvordan fungerer Karma som testløber?

Som testløber gør Karma tre vigtige ting:

• Det starter en webserver og serverer din JavaScript-kilde og testfiler på denne server.
• Indlæser alle kilde- og testfiler i den rigtige rækkefølge.
• Endelig spinder det browsere op for at køre testene.

Hvad andet kan Karma gøre?

Bortset fra de ovennævnte funktioner i Karma, er der også få andre ting, som Karma kan konfigureres til at gøre. For eksempel, at offentliggøre kodetestdækning til coveralls.io ; transpiler en kode fra es6-format til es5, bundter flere filer sammen i en fil og generer kildekort.

I vores efterfølgende tutorials vil vi se, hvordan nogle af disse ting fungerer.

Krav til at komme i gang med Karma

For at komme i gang med Karma skal du have en forståelse af NodeJS og Node-pakkehåndtering.

Hvad er NodeJS?

Nodejs løser den blokerende karakter af JavaScript-asynkrone opkald, dvs. når der er adgang til en asynkron funktion i JavaScript, forhindrer den, at de andre dele af koden kører, indtil det asynkrone opkald vender tilbage. Imidlertid kan der med NodeJS foretages asynkrone ikke-blokerende funktionsopkald.

I tekniske termer kan NodeJS siges at være en asynkron hændelsesdrevet JavaScript-runtime, der gør det let og muligt at opbygge skalerbare netværksapplikationer.

Kom godt i gang med NodeJS

Du skal blot installere NodeJS-rammen. Alt du skal gøre er at besøge deres internet side og baseret på dit operativsystem skal du downloade installationsprogrammet og følge instruktionerne på deres websted om dets installation.

Hvad er Node Package Manager (Npm)?

Node-pakkehåndtering (npm) er en JavaScript-pakkehåndtering, der bruges til installation af andre forudbyggede node-baserede applikationer eller moduler, som du muligvis vil genbruge i din egen applikation.

Npm installeres, når du installerer NodeJS, men npm opdateres hurtigere end noden. Derfor kan der være behov for dig at opdatere din npm på et eller andet tidspunkt. For at installere den nyeste version af npm skal du køre denne kommando fra din kommandolinje: npm installer npm @ seneste -g

Ovenstående kommando indikerer, at du beder OS-shell om at udføre applikationen npm, og applikationen skal udføre installationen af ​​pakken npm. @latest angiver, at den nyeste version af pakken skal installeres, -g-indstillingen angiver, at pakken skal installeres globalt.

Flere detaljer om npm kan findes her .

Der er to vigtige ting, der skal nævnes her, dvs. installation af en pakke med indstillingen –save og –save-dev.

Under test skal enhver installeret pakke installeres ved hjælp af muligheden –save-dev, dvs. at instruere pakkehåndteringen om at installere pakken som en udviklingsafhængighed og ikke som en projektafhængighed (når jeg bruger –save).

Udviklingsafhængighed skal vælges, da pakken ikke er nødvendig af applikationen i produktionsfasen, men kun kræves i udviklingsfasen af ​​kvalitetssikringsformål.

Sådan installeres Karma?

For at komme i gang med Karma skal du oprette en mappe til det projekt, som du skal skrive enhedstestene til. Du kan navngive det som “basicUT”. Jeg bruger Visual Studio Code som teksteditor, derfor anbefaler jeg dig også at downloade og installere den. Du kan finde det her .

Åbn Visual Studio-kodens indbyggede terminalvindue, klik på 'View menu', og vælg derefter den integrerede terminalundermenu.

Skriv 'npminit' i terminalvinduet som vist i nedenstående figur. Denne kommando guider dig til automatisk at indstille 'package.json'-filenm alle nodebaserede applikationer skal have.

Package.json-filen gemmer oplysninger om din applikation såsom dens navn, versionsnummer, forfatter, applikationsafhængighed, udviklingsafhængighed, testkommando eller script og script for at starte applikationen eller opbygge appen til en kørbar form.

Klik på her for flere detaljer om filen 'package.json'.

Skærmbillede af initialisering af en package.json-fil ved hjælp af npminit

Som beskrevet ovenfor skal du køre kommandoen for at installere Karma npm installer Karma @ seneste –save-dev . Jeg håber, at du nu kan fortolke, hvad denne kommando indebærer.

Nu har vi installeret Karma med succes. Hvad er den næste ting, du skal gøre for at bruge Karma til din front-end enhedstest?

Alt hvad du skal gøre er at skrive konfigurationsfilen til den, og filen navngives normalt som Karma.conf.js til JavaScript. Det er dog anderledes for CoffeeScript. Klik på her for at udforske mere om Karma-konfigurationsfilen.

Oversigt over Karma.conf.js Filkonfigurationsindstillinger

Karma.conf.js-konfigurationsfilen skal indeholde den installationsinstruktion, som Karma skal følge for at udføre de tre vigtige funktioner i Karma.

Denne konfigurationsfil kan oprettes manuelt eller automatisk ved hjælp af kommandoen: 'karma init', som begynder at vise forskellige spørgsmål, som du kan besvare, og Karma bruger de svar, du giver, til at konfigurere konfigurationsfilen.

Du ville nu have opdaget, at kørsel af kommandoen: 'karma init', giver fejlen ' 'Karma' genkendes ikke som et internt eller eksternt kommando, der kan betjenes program eller batchfil ”.

Dette skyldes, at Karma blev installeret lokalt og ikke globalt på det projekt, du arbejder på. Derfor kan din operativsystemskal ikke finde applikationen Karma i dens miljømæssige indstillinger, hvis du bruger windows eller i .bash_profile-filen, hvis du bruger Mac.

For at løse denne fejl skal vi installere Karma globalt. Ikke kun Karma, men pakken specielt designet til at muliggøre brugen af ​​Karma på kommandolinjen, som er Karma-cli. Kør blot kommandoen, ′ Npm installer -g karma-cli ' .

Kør nu kommandoen karma-init igen, og du kan se spørgsmålene som vist i nedenstående figur. Når du besvarer hvert spørgsmål og trykker på 'ENTER' -tasten, kommer det næste spørgsmål op.

Kører Karma init-kommando på kommandolinjen.

Tabellen nedenfor giver dig en liste over spørgsmålene, deres betydning sammen med hvad dit svar skal være i sammenhæng med denne vejledning.

Karma init Spørgsmål

Spørgsmål nr. 1) Hvilken testramme vil du bruge?

Forklaring: En testramme er en pakke, der giver de funktioner og rutiner, der er nødvendige for at automatisere processen med kodningstest for ethvert softwareprodukt på et bestemt sprog. For eksempel, jasmin og mokka tester rammer for JavaScript-softwarepakker, Junit og JTest tester rammer for Java, tjek det her for flere detaljer.

Svar: Der vises en instruktion, der beder dig om at bruge fanen til at se andre tilgængelige testrammer til en node-baseret applikation, men som standard ser du jasmin, så klik blot på enter.

Q # 2) Vil du bruge Require.js?

Forklaring: Require.js er en JavaScript-fil og modul loader. Du undrer dig måske: hvorfor du har brug for en fil eller modul loader? Læs det her

Svar: I koden, vi skriver, ville jeg ikke bruge demand.js, så svar bare nej. hans spørgsmål er, hvad ville vi bruge? For at kunne bruge de krævede udsagn til at bringe eksterne filer ind i en anden fil, har vi brug for en modulindlæser, så vi vælger Browserify. Du kan se flere detaljer nedenfor.

Q # 3) Vil du fange nogen browsere automatisk?

Forklaring: Husk på, at karma er et værktøj, der hjælper dig med at teste din front-end på tværs af forskellige browsere, derfor er dette spørgsmål beregnet til at du vælger de browsere, du gerne vil spinde op, når som helst du kører testen med karma-start.

Svar: Til denne lektion skal du vælge krom, Firefox og phantomjs. Nu er spørgsmålet, hvad er PhantomJS? PhantomJS er en headless webbrowser, der er beregnet til headless website test, skærmoptagelse, side automatisering og netværksovervågning, du kan se detaljer her .

Et andet spørgsmål, hvad er en headless webbrowser? En hovedløs webbrowser er en browser uden en grafisk brugergrænseflade, koderne udføres i et konsollignende miljø.

Spørgsmål nr. 4) Hvad er placeringen af ​​din kilde og testfiler?

Forklaring: Dette spørgsmål er beregnet til at afsløre stien, hvor du vil gemme frontend-filerne og de testfiler, der udfører enhedstest på dem.

Svar: Indtast offentligt / js / *. For dette projekt js for stien til kildefiler og test / * Spec.js for stien til testfiler. * Spec.js angiver, at alle testfiler kan kaldes alt andet, men skal indeholde Spec i slutningen med en .js-filtypenavn.

Spørgsmål nr. 5) Bør nogen af ​​filerne, der er inkluderet i de tidligere mønstre, udelukkes?

Forklaring: Nogle gange kan der være behov for, at visse kildefiler og testfiler ikke skal indlæses. Dette spørgsmål er beregnet til at du angiver sådanne filer, der ikke skal indlæses i browseren af ​​Karma.

Svar: Indtast blot en tom streng ved at trykke på enter. Så du udsagnet 'Du kan bruge globmønstre, For eksempel, “** / *. Swp”. ’. Globmønstre bruges til at specificere et sæt filnavne i et Unix-lignende miljø ved hjælp af jokertegnet.
I vores tilfælde står public / js / *. Js for enhver fil med navnet ethvert sæt tegn som angivet med (*) og har filtypen .js og ligger i stien public / js. Læs mere her

Spørgsmål nr. 6) Vil du have Karma til at se alle filerne og køre testene på ændring?

Forklaring: Når en opgave / testløber overvåger dine filer, betyder det bare, at når du redigerer filerne under udviklingen, test / opgaveløberen, genindlæser filen eller udfører den igen, er det funktionen på filen igen, uden at du kommer til at spørge manuelt det for at gøre det igen.

Svar: Så svar bare ja.

Andet karma.conf.js filindhold

# 1) basePath : Denne konfiguration bærer navnet på enhver mappe, der skal bruges til at løse stioplysningerne til test- og kildefiler.

# 2) forprocessorer : Dette bærer navnet på de programfiler, der skal bruges til at behandle kilde- og testfiler, før de indlæses i browseren.

Hvorfor er det nødvendigt?

Med fremkomsten af ​​ES6-kodestil, som browserne endnu ikke forstår, er der behov for at transpilere koden fra ES6-format til ES5, som browseren kan forstå, og derfor kan babel-forprocessor til Karma specificeres til at blive brugt til at transpileere kode fra ES6 til ES5, før den indlæses i browseren.

Der er andre anvendelser af en forprocessor, For eksempel. kode test dækning offentliggørelse til coveralls.io, se her for flere detaljer.

# 3) journalister : Denne konfigurationsmulighed specificerer pakken, der skal bruges til at rapportere testresultaterne. Der er flere journalister til rapportering af kodetestdækning; For eksempel. dækning. Men som standard er det indstillet til fremskridt. Bemærk, at det er en matrix, og derfor kan du også tilføje andre journalister.

# 4) port : Dette specificerer den port, som browseren drejes på.

# 5) farver : Angiver, om journalisterne skal producere rapporterne med farvestoffer.

# 6) logNiveau : Dette specificerer niveauet for logning. Som standard er den indstillet til config.LOG_INFO, hvilket betyder, at kun oplysningerne er logget.

# 7) singleRun : Dette angiver, om Karma skal afslutte, når testen har kørt en gang. Hvis den er indstillet til sand, kører Karma testen og afslutter med status 0 eller 1 afhængigt af om testen er mislykket eller bestået, ellers stopper Karma ikke.

Denne konfiguration er påkrævet til kontinuerlige integrationstestformål ved hjælp af værktøjer som TravisCI og CircleCI.

# 8) samtidighed : Dette specificerer, hvor mange browsere Karma skal starte på samme tid. Som standard er den indstillet til uendelig.

Klik på her for detaljerede oplysninger om Karma-konfigurationsindstillinger.

Hvis du er en opmærksom lærer, skal du have set disse tre linjer.

Lad os udforske dette i nedenstående afsnit.

Karma Browser Launchers

Karma-firefox-launcher, Karma-chrome-launcher og Karma-phantomjs-launcher kan generelt betegnes som browser-launchers for Karma.

Karma har brug for at spinde disse browserapplikationer, der er uafhængige, så der kræves en tredjepartsapplikation for at give en grænseflade til Karma for at køre shell-kommandoen, der spinder browserne op i ethvert operativsystem, som Karma kører en test på.

Således er de Karma-browserstartere til henholdsvis firefox, chrome og phantomjs. Karma popper op disse udsagn for at informere os om manglende evne til at installere disse krav, og beder os derefter om at installere det manuelt.

For at gøre det bruger vi node-pakkehåndteringen og kører disse kommandoer fra kommandolinjen: npm installer Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Alle af os skal have Chrome- og Firefox-browsere installeret, med phantomjs ikke installeret. Hvis det er sandt, skal du installere det, se her for detaljer og klik her for en hurtig startguide.

Konklusion

I denne vejledning forsøgte vi at forstå, hvad front-end enhedstest handler om. Vi introducerede også et stort test-værktøj til front-end-enheder til JavaScript-software kendt som Karma, som er et node-baseret værktøj. Vi præsenterede også de grundlæggende konfigurationsindstillinger for Karma.conf.js-filen, og hvad alt hvad de indebærer.

java interview spørgsmål og svar til nyere tekniske

Takeaways

• Enhedstest er en slags softwaretestmetode, hvor hver enkelt og uafhængig del af kildekoden testes for at afgøre, om den er god nok til brug.
• Når vi udfører denne enhedstestning på softwarens front-end (klientside), er det kendt som front-end unit-test.
• Karma er et node-baseret testværktøj, der giver dig mulighed for at teste dine JavaScript-koder på tværs af flere rigtige browsere. Derfor betegnes det som testløber.
• Nodejs er en asynkron hændelsesdrevet JavaScript-kørselstid, der gør det nemt og muligt at opbygge skalerbare netværksapplikationer.
• Node-pakkehåndtering (npm) er en JavaScript-pakkehåndtering, der bruges til installation af andre forudbyggede node-baserede applikationer eller moduler, som du muligvis vil genbruge i din egen applikation.

Næste tutorial

Karma alene kan ikke automatisere test af front-end-enheder af JavaScript-applikationer, det skal også arbejde med andre testværktøjer som en testramme, der letter skrivningen af ​​vores testcases.

I vores kommende vejledning vil vi udforske Jasmine og Jasmine-Jquery-pakken, der udvider Jasmines funktionalitet til at kunne teste HTML-inventar, der gør brug af JavaScript-biblioteket: Jquery.

Anbefalet læsning

• 20 mest populære enhedstestværktøjer i 2021
• Nøglen til vellykket enhedstest - Hvordan udviklere tester deres egen kode?
• TOP 45 JavaScript-spørgsmål med detaljerede svar
• AngularJS tutorial til absolutte begyndere (med installationsvejledning)
• Forskellen mellem vinkelversioner: vinkel vs vinkelJS
• Testdækning i softwaretest (tip til maksimering af testdækning)
• 48 Top AngularJS interviewspørgsmål og svar (2021 LIST)
• Sådan konfigureres Node.js Testing Framework: Node.js Tutorial