Karma opplæring: Front-End Unit Testing ved hjelp av Karma Test Runner

karma tutorial front end unit testing using karma test runner

Denne opplæringen forklarer hvordan du konfigurerer Karma og automatiserer testing av frontenhet ved hjelp av Karma, grunnleggende konfigurasjonsalternativer for Karma.conf.js-fil, osv .:

Denne opplæringen forklarer prosedyren for automatisering av enhetstesting av programvarens frontend ved hjelp av Karma og noen av de tilknyttede verktøyene.

Vi starter med webapplikasjoner utviklet ved hjelp av JavaScript-bibliotek: ‘Jquery’ og JavaScript runtime: ‘NodeJS’; og senere vil vi se på noen JavaScript-rammer som AngularJS og ReactJS.

=>BLA NEDOVERfor å se hele listen over Karma-opplæringsprogrammer

Hva du vil lære:

• Liste over Karma-opplæringsprogrammer
• Oversikt over Karma-veiledninger i denne serien
• Hva er testing av frontend-enheter?
• Hva er Karma Test Runner?
  • Hvordan fungerer Karma som testløper?
• Hva er NodeJS?
  • Hva er Node Package Manager (Npm)?
• Hvordan installere Karma?
  • Oversikt over Karma.conf.js Filkonfigurasjonsalternativer
• Karma init spørsmål
  • Annet karma.conf.js filinnhold
  • Karma Browser Launchers
• Konklusjon
  • Anbefalt lesing

Liste over Karma-opplæringsprogrammer

Opplæring # 1: Karma opplæring: Front-End Unit Testing ved hjelp av Karma Test Runner
Opplæring # 2: Jasmine Framework Tutorial Inkludert Jasmine Jquery med eksempler
Opplæring # 3: Prøveprosjekt om testing av frontenhet ved bruk av KARMA og JASMINE

Oversikt over Karma-veiledninger i denne serien

Hva er testing av frontend-enheter?

Fronten på ethvert programvaresystem er ganske enkelt grensesnittet der brukeren får tilgang til alle funksjonene som tilbys av systemet. For å garantere den beste brukeropplevelsen er det behov for å sikre at front-end-utviklerne har kodet front-enden ved å huske alle brukerkravene.

Den eneste måten å håndheve dette på er å skrive og utføre tester over utviklerens koder. Leveransen skal bare aksepteres som en kvalitetskode / funksjon bare når alle disse testresultatene er i 'pass' -status.

Enhetstesting er en slags programvaretestmetode der hver enkelt og uavhengig del av kildekoden testes for å fastslå at den er god nok til bruk.

Når vi utføre denne enhetstesten på front-enden (klientsiden) av programvaren, den kalles som front-end-enhetstesting. Det motsatte av front-end testing er back-end testing (server-side).

Front-end enhetstesting kan utføres manuelt eller automatisk. Automatisert front-end testing av enheter er i trend i disse dager, da det er mer effektivt og tidsbesparende. Det er forskjellige verktøy som er tilgjengelige for front-end-enhetstesting på forskjellige programmeringsplattformer.

AngularJS og ReactJS er to populære JavaScript-rammer på fronten, selv om ReactJS er ganske nytt.

For å utføre enhetstesting på et program, brukes frontendene som er bygget med disse frontend-rammene eller til og med de som er bygget uten rammene, visse automatiserings-testverktøy som Karma, mokka, jasmin, spøk, enzym, etc..

For det første vil vi lære å utføre front-end-enhetstesting ved hjelp av Karma og Jasmine, og senere kan vi også se på de andre verktøyene.

Vi begynner med å kjøre front-end-enhetstester ved hjelp av inventar for frontendene bygget uten noen av JavaScript-rammene for frontendene. Totalt vil vi dele opp læringen vår i denne serien i tre opplæringsprogrammer.

I denne aller første opplæringen vil vi prøve å forstå hvordan Karma blir satt opp, den andre opplæringen vil forklare Jasmine i detalj, til slutt vil vi i den tredje opplæringen se på dens praktiske anvendelse.

Hva er Karma Test Runner?

Karma er et nodebasert testverktøy som lar deg teste JavaScript-kodene dine over flere ekte nettlesere. Et nodebasert verktøy er et hvilket som helst verktøy som trenger Nodejs-motoren installert for at den skal kunne kjøres og kan nås (installeres) gjennom node-pakkebehandling (npm).

Karma er et verktøy som gjør vår testdrevne utvikling rask, morsom og enkel. Det blir teknisk betegnet som en testløper. Det er bemerkelsesverdig å nevne her at Karma ble utviklet av Angular-teamet.

Hvordan fungerer Karma som testløper?

Som testløper gjør Karma tre viktige ting:

• Den starter en webserver og serverer JavaScript-kilden og testfilene på den serveren.
• Laster inn alle kilde- og testfilene i riktig rekkefølge.
• Til slutt spinner det nettlesere for å kjøre testene.

Hva annet kan Karma gjøre?

Bortsett fra de ovennevnte funksjonene til Karma, er det få andre ting som Karma kan konfigureres til å gjøre. For eksempel, å publisere kodetestdekning til coveralls.io ; transpiler en kode fra es6-format til es5, bunt flere filer sammen til en fil og generer kildekart.

I de påfølgende veiledningene vil vi se hvordan noen av disse tingene fungerer.

Krav for å komme i gang med Karma

For å komme i gang med Karma, må du ha forståelse for NodeJS og Node-pakkebehandling.

Hva er NodeJS?

Nodejs løser blokkeringen av JavaScript asynkrone anrop, dvs. når en asynkron funksjon er tilgjengelig i JavaScript, forhindrer den at de andre delene av koden kjører til den asynkrone samtalen kommer tilbake. Imidlertid, med NodeJS, kan det ringes asynkrone funksjoner som ikke blokkerer.

I tekniske termer kan NodeJS sies å være en asynkron hendelsesdrevet JavaScript-kjøretid som gjør det enkelt og mulig å bygge skalerbare nettverksapplikasjoner.

Komme i gang med NodeJS

Du trenger bare å installere NodeJS-rammeverket. Alt du trenger å gjøre er å besøke deres nettsted og, basert på operativsystemet ditt, må du laste ned installasjonsprogrammet og følge instruksjonene på nettstedet til installasjonen.

Hva er Node Package Manager (Npm)?

Node-pakkebehandling (npm) er en JavaScript-pakkehåndtering som brukes til å installere andre forhåndsbygde nodebaserte applikasjoner eller moduler som du kanskje vil bruke på nytt i din egen applikasjon.

Npm blir installert når du installerer NodeJS, men npm oppdateres raskere enn noden. Derfor kan det være behov for deg å oppdatere npm på et tidspunkt. For å installere den nyeste versjonen av npm, må du kjøre denne kommandoen fra kommandolinjen: npm install npm @ siste -g

Ovennevnte kommando indikerer at du ber OS-skallet om å kjøre applikasjonen npm, og applikasjonen skal utføre installasjonen av pakken npm. @latest indikerer at den siste versjonen av pakken skal installeres, -g alternativet indikerer at pakken skal installeres globalt.

Mer informasjon om npm finner du her .

Det er to viktige ting som skal nevnes her, dvs. installere en pakke med alternativet –save og –save-dev.

Under tester skal enhver installert pakke installeres ved hjelp av alternativet –save-dev, dvs. å instruere pakkebehandleren om å installere pakken som en utviklingsavhengighet og ikke som en prosjektavhengighet (når jeg bruker –save).

Utviklingsavhengighet bør velges da den pakken ikke er nødvendig av applikasjonen i produksjonsfasen, men bare er nødvendig i utviklingsfasen for kvalitetssikringsformål.

Hvordan installere Karma?

For å komme i gang med Karma, må du opprette en mappe for prosjektet du skal skrive enhetstestene for. Du kan gi den navnet “basicUT”. Jeg bruker Visual Studio Code som tekstredigerer, derfor anbefaler jeg deg også å laste ned og installere den. Du finner den her .

Åpne Visual Studio-kodens innebygde terminalvindu, klikk på 'Vis-menyen', og velg deretter den integrerte terminalundermenyen.

I terminalvinduet skriver du inn ‘npminit’ som vist i figuren nedenfor. Denne kommandoen guider deg til å automatisk sette opp 'package.json' -filen som alle nodebaserte applikasjoner må ha.

Package.json-filen lagrer informasjon om applikasjonen din, for eksempel navn, versjonsnummer, forfatter, applikasjonsavhengighet, utviklingsavhengighet, testkommando eller skript og skript for å starte applikasjonen eller bygge appen til en kjørbar form.

Klikk her for mer informasjon om filen ‘package.json’.

Skjermbilde av å initialisere en package.json-fil ved hjelp av npminit

Som beskrevet ovenfor, for å installere Karma, er alt du trenger å kjøre kommandoen npm installer Karma @ siste –save-dev . Jeg håper at du nå kan tolke hva den kommandoen innebærer.

Nå har vi installert Karma, hva er det neste du trenger å gjøre for å kunne bruke Karma til front-end-enhetstesting?

Alt du trenger å gjøre er å skrive konfigurasjonsfilen for den, og filen heter vanligvis Karma.conf.js for JavaScript. Det er imidlertid annerledes for CoffeeScript. Klikk her for å utforske mer om Karma-konfigurasjonsfilen.

Oversikt over Karma.conf.js Filkonfigurasjonsalternativer

Konfigurasjonsfilen Karma.conf.js skal inneholde installasjonsinstruksjonene som Karma må følge for å utføre de tre viktige funksjonene til Karma.

Denne konfigurasjonsfilen kan opprettes manuelt eller automatisk ved å bruke kommandoen: ‘karma init’, som begynner å vise forskjellige spørsmål du kan svare på, og Karma bruker svarene du gir for å konfigurere konfigurasjonsfilen.

Du ville ha oppdaget nå at å kjøre kommandoen: ‘karma init’, gir feilen ' ‘Karma’ blir ikke gjenkjent som et internt eller eksternt kommandobruksprogram eller batchfil ”.

Dette skyldes at Karma ble installert lokalt og ikke globalt på prosjektet du jobber med. Derfor kan operativsystemets skall ikke finne applikasjonen Karma i miljømessige innstillinger hvis du bruker windows eller i .bash_profile-filen hvis du bruker Mac.

For å fikse denne feilen, må vi installere Karma globalt. Ikke bare Karma, men pakken spesielt designet for å muliggjøre bruk av Karma på kommandolinjen som er Karma-cli. Bare kjør kommandoen, ′ Npm install -g karma-cli ’ .

Kjør nå kommandoen karma-init, og du kan se spørsmålene som vist i figuren nedenfor. Når du svarer på hvert spørsmål og trykker på 'ENTER' -tasten, vil neste spørsmål dukke opp.

Kjører Karma init-kommando på kommandolinjen.

Tabellen nedenfor gir deg en liste over spørsmålene, deres betydning sammen med hva svaret ditt skal være i sammenheng med denne veiledningen.

Karma init spørsmål

Q # 1) Hvilket testrammeverk vil du bruke?

Forklaring: Et testrammeverk er en pakke som gir funksjonene og rutinene som trengs for å automatisere prosessen med kodetester for ethvert programvareprodukt fra et bestemt språk. For eksempel, jasmine og mocha tester rammer for JavaScript-programvarepakker, Junit og JTest tester rammer for Java, sjekk dette for flere detaljer.

Svar: Det vises en instruksjon som ber deg om å bruke fanen for å se andre tilgjengelige testrammer for et nodebasert program, men som standard ser du jasmin, så bare trykk enter.

Q # 2) Vil du bruke Require.js?

Forklaring: Require.js er en JavaScript-fil og modullaster. Du lurer kanskje på: hvorfor du trenger en fil eller modullaster? Lese dette

Svar: I koden skal vi skrive. Jeg bruker ikke demand.js, så bare svar nei. spørsmålet er hva ville vi brukt? For å kunne bruke de nødvendige uttalelsene til å hente inn eksterne filer i en annen fil, trenger vi en modullaster, så vi velger Browserify. Du vil se flere detaljer nedenfor.

Q # 3) Vil du fange noen nettlesere automatisk?

Forklaring: Husk at karma er et verktøy som hjelper deg med å teste frontend på tvers av forskjellige nettlesere, derfor er dette spørsmålet ment for deg å velge nettlesere du vil elske å spinne når som helst du kjører testen med karma-start.

Svar: For denne leksjonen, velg krom, firefox og fantomjs. Nå er spørsmålet hva PhantomJS er? PhantomJS er en hodeløs nettleser som er ment for hodeløs testing av nettsteder, skjermopptak, sideautomatisering og nettverksovervåking, du kan se detaljer her .

Et annet spørsmål, hva er en hodeløs nettleser? En hodeløs nettleser er en nettleser uten et grafisk brukergrensesnitt, kodene utføres i et konsollignende miljø.

Spørsmål nr. 4) Hvor ligger kilden og testfilene dine?

Forklaring: Dette spørsmålet er ment for å avsløre banen der du vil lagre frontend-filene og testfilene som skal utføre enhetstesting på dem.

Svar: For dette prosjektet, skriv inn offentlig / js / *. Js for kildefilenes bane og test / * Spec.js for testfilenes bane. * Spec.js indikerer at alle testfilene kan kalles hva som helst, men må inneholde Spec på slutten med en .js-filtype.

Q # 5) Bør noen av filene som er inkludert i de tidligere mønstrene ekskluderes?

Forklaring: Noen ganger kan det være behov for at visse kildefiler og testfiler ikke skal lastes inn. Dette spørsmålet er ment for deg å spesifisere slike filer som ikke skal lastes inn i nettleseren av Karma.

Svar: Bare skriv inn en tom streng ved å trykke på Enter. Så du utsagnet 'Du kan bruke globmønstre, For eksempel, “** / *. Swp”. ’. Globmønstre brukes til å spesifisere et sett med filnavn i et Unix-lignende miljø ved hjelp av jokertegnet.
I vårt tilfelle står public / js / *. Js for enhver fil som heter ethvert sett med tegn som indikert av (*) og har filtypen .js og ligger i banen public / js. Les mer her

Q # 6) Vil du at Karma skal se på alle filene og kjøre testene på endring?

Forklaring: Når en oppgave / testløper ser på filene dine, betyr det bare at når du redigerer filene under utvikling, vil test- / oppgaveløperen laste inn filen på nytt eller utføre den på nytt, den er funksjonen på filen igjen, uten at du kommer til å spørre det for å gjøre det igjen.

Svar: Så bare svar ja.

Annet karma.conf.js filinnhold

# 1) basePath : Denne konfigurasjonen bærer navnet på en hvilken som helst mappe som skal brukes til å løse stiinformasjonen som er gitt for test- og kildefiler.

# 2) forprosessorer : Dette bærer navnet på programfilene som skal brukes til å behandle kilde- og testfiler før de lastes inn i nettleseren.

Hvorfor er dette nødvendig?

Med fremveksten av ES6-kodestil som ikke er forstått av nettleserne ennå, er det behov for å transpilere koden fra ES6-format til ES5 som nettleseren kan forstå, og derfor kan babel-forprosessoren for Karma spesifiseres til å brukes til å transpile koden fra ES6 til ES5 før du laster den inn i nettleseren.

Det er andre bruksområder for en prosessor, F.eks. kodetest dekning publisering til coveralls.io, se her for flere detaljer.

# 3) journalister : Dette konfigurasjonsalternativet spesifiserer pakken som skal brukes til å rapportere testresultatene. Det er flere journalister for rapportering av kodetestdekning; F.eks. dekning. Men som standard er det satt til fremgang. Merk at det er en matrise, derfor kan du også legge til andre journalister.

# 4) port : Dette spesifiserer porten som nettleseren er spunnet på.

# 5) farger : Spesifiserer om reporterne skal produsere rapportene med fargestoffer.

# 6) logLevel : Dette spesifiserer nivået på loggingen. Som standard er den satt til config.LOG_INFO, noe som betyr at bare informasjonen logges.

# 7) singleRun : Dette spesifiserer om Karma skal avslutte etter å ha kjørt testen en gang. Hvis satt til sant, kjører Karma testen og går ut med status 0 eller 1, avhengig av om testen mislykkes eller består, ellers stopper ikke Karma.

Denne konfigurasjonen er nødvendig for kontinuerlige integrasjonstestformål ved hjelp av verktøy som TravisCI og CircleCI.

# 8) samtidighet : Dette spesifiserer hvor mange nettlesere Karma skal starte samtidig. Som standard er den satt til uendelig.

Klikk her for detaljert informasjon om Karma-konfigurasjonsalternativer.

Hvis du er observant, må du ha sett disse tre linjene.

La oss utforske dette i avsnittet nedenfor.

Karma Browser Launchers

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

Karma trenger å spinne opp disse nettleserapplikasjonene som er uavhengige, så det kreves at en tredjepartsapplikasjon gir et grensesnitt til Karma for å kjøre shell-kommandoen som spinner nettleserne opp i ethvert operativsystem som Karma kjører en test på.

Dermed er de Karma-nettleserstartere for henholdsvis Firefox, Chrome og Phantomjs. Karma popper opp disse uttalelsene for å informere oss om manglende evne til å installere disse kravene, og ber oss deretter om å installere det manuelt.

For å gjøre det, vil vi bruke node-pakkebehandling og kjøre disse kommandoene fra kommandolinjen: npm installer Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Alle av oss må ha Chrome- og Firefox-nettlesere installert, med phantomjs ikke installert. Hvis det er sant, må du installere det, se her for detaljer og klikk her for en hurtigstartguide.

Konklusjon

I denne opplæringen prøvde vi å forstå hva front-end-enhetstesting handler om. Vi introduserte også et stort test-verktøy for front-end-enheter for JavaScript-programvare kjent som Karma, som er et nodebasert verktøy. Vi presenterte også de grunnleggende konfigurasjonsalternativene for filen Karma.conf.js og hva alt det innebærer.

gratis mp3-nedlastingsapp for Android-telefon

Takeaways

• Enhetstesting er en slags programvaretestmetode der hver enkelt og uavhengig del av kildekoden testes for å avgjøre om den er god nok til bruk.
• Når vi utfører denne enhetstesten på front-enden (klientsiden) av programvaren, er den kjent som front-end-enhetstesting.
• Karma er et nodebasert testverktøy som lar deg teste JavaScript-kodene dine over flere ekte nettlesere. Derfor blir det betegnet som testløper.
• Nodejs er et asynkron hendelsesdrevet JavaScript-kjøretid som gjør det enkelt og mulig å bygge skalerbare nettverksapplikasjoner.
• Node-pakkebehandling (npm) er en JavaScript-pakkebehandling som brukes til å installere andre forhåndsbygde nodebaserte applikasjoner eller moduler som du kanskje vil bruke på nytt i din egen applikasjon.

Neste opplæring

Karma alene kan ikke automatisere front-end-testing av JavaScript-applikasjoner, den må også jobbe med andre testverktøy, for eksempel et testrammeverk som vil lette skrivingen av testsakene våre.

I vår kommende opplæring vil vi utforske om Jasmine og Jasmine-Jquery-pakken som utvider funksjonaliteten til Jasmine for å kunne teste HTML-inventar som bruker JavaScript-biblioteket: Jquery.

Anbefalt lesing

• De 20 mest populære enhetstestverktøyene i 2021
• Nøkkelen til vellykket enhetstesting - Hvordan utviklere tester sin egen kode?
• TOPP 45 JavaScript-intervjuspørsmål med detaljerte svar
• AngularJS opplæring for absolutt nybegynnere (med installasjonsveiledning)
• Forskjellen mellom vinkelversjoner: vinkel mot vinkelJS
• Testdekning i programvaretesting (tips for å maksimere testdekning)
• 48 Topp AngularJS intervjuspørsmål og svar (2021 LISTE)
• Slik konfigurerer du Node.js Testing Framework: Node.js Tutorial