Menu

Karma-zelfstudie: front-end-unit testen met Karma Test Runner

  • Hoofd
  • Andere
  • Karma-zelfstudie: front-end-unit testen met Karma Test Runner

karma tutorial front end unit testing using karma test runner

Probeer Ons Instrument Voor Het Oplossen Van Problemen

In deze zelfstudie wordt uitgelegd hoe u Karma instelt en front-end unit-testen automatiseert met behulp van Karma, basisconfiguratie-opties voor het bestand Karma.conf.js, enz .:

Deze tutorial legt de procedure uit voor het automatiseren van Unit Testing van de front-end van de software met behulp van Karma en enkele van de bijbehorende tools.

We beginnen met webapplicaties die zijn ontwikkeld met de JavaScript-bibliotheek: ‘Jquery’ en JavaScript-runtime: ‘NodeJS’; en later zullen we enkele JavaScript-frameworks bekijken, zoals AngularJS en ReactJS.

​NAAR BENEDEN SCROLLENom de volledige lijst met Karma-zelfstudies te zien

Inleiding tot Karma

Wat je leert:

Lijst met Karma-zelfstudies

Tutorial # 1: Karma-zelfstudie: front-end-unit testen met Karma Test Runner
Tutorial # 2: Jasmine Framework-zelfstudie inclusief Jasmine Jquery met voorbeelden
Tutorial # 3: Voorbeeldproject over front-end unit-testen met KARMA en JASMINE

Overzicht van Karma-tutorials in deze serie

Tutorial #Wat je leert
Tutorial_ # 1: Karma-zelfstudie: front-end-unit testen met Karma Test Runner
Deze inleidende tutorial legt alles uit over het instellen van Karma en het automatiseren van front-end unit-testen met behulp van Karma, basisconfiguratie-opties voor het bestand Karma.conf.js enz.
Tutorial_ # 2: Jasmine Framework-zelfstudie inclusief Jasmine Jquery met voorbeelden
Deze tutorial behandelt Jasmine Testing Framework en zijn constructies. Lees ook over Jasmine-Jquery-pakket dat Jasmine uitbreidt om Jquery-applicaties te testen.
Tutorial_ # 3: Voorbeeldproject over front-end unit-testen met KARMA en JASMINE
Deze tutorial laat zien hoe je testspecificaties schrijft voor een voorbeeldproject met Karma & Jasmine. U zult ook snel leren hoe u andere tools kunt gebruiken, zoals gulp, browserify.

Wat is het testen van front-end units?

De front-end van elk softwaresysteem is simpelweg de interface waarmee de gebruiker toegang heeft tot alle functionaliteiten die het systeem biedt. Om de beste gebruikerservaring te garanderen, is het nodig ervoor te zorgen dat de front-end-ontwikkelaars de front-end hebben gecodeerd door rekening te houden met alle gebruikersvereisten.

De enige manier om dit af te dwingen, is door tests te schrijven en uit te voeren over de codes van de ontwikkelaar. Het resultaat mag alleen worden geaccepteerd als een hoogwaardige front-endcode / -functie als al deze testresultaten de status ‘geslaagd’ hebben.

Unit-testing is een soort softwaretestmethode waarbij elk afzonderlijk en onafhankelijk deel van de broncode wordt getest om te bepalen of het goed genoeg is voor gebruik.

Wanneer we voer deze unit testing uit aan de front-end (client-side) van de software, dit wordt front-end unit testing genoemd. Het tegenovergestelde van front-end testen is back-end testen (server-side).

Het testen van de front-end units kan handmatig of automatisch worden uitgevoerd. Geautomatiseerde front-end unit testing is tegenwoordig in de trend omdat het effectiever en tijdbesparend is. Er zijn diverse tools beschikbaar voor het testen van front-end units op verschillende programmeerplatforms.

AngularJS en ReactJS zijn twee populaire front-end JavaScript-frameworks, hoewel ReactJS vrij nieuw is.

Om unit-tests op een applicatie uit te voeren, worden de front-end gebouwd met deze front-end frameworks of zelfs degenen die zonder de frameworks zijn gebouwd, bepaalde automatiseringstesttools zoals karma, mokka, jasmijn, grap, enzym, enz., Worden gebruikt.

Ten eerste zouden we leren hoe we front-end unit-testen kunnen uitvoeren met Karma en Jasmine, en later kunnen we ook de andere tools bekijken.

We beginnen met het uitvoeren van front-end unit-tests met behulp van armaturen voor front-ends die zijn gebouwd zonder JavaScript-frameworks voor front-ends. In totaal zullen we onze lessen in deze serie verdelen in drie tutorials.

In deze allereerste tutorial zouden we proberen te begrijpen hoe Karma wordt opgezet, de tweede tutorial zal Jasmine in detail uitleggen, ten slotte zullen we in de derde tutorial kijken naar de praktische toepassing ervan.

Wat is Karma Test Runner?

Karma_logo

Karma is een op knooppunten gebaseerde testtool waarmee u uw JavaScript-codes in meerdere echte browsers kunt testen. Een op knooppunten gebaseerde tool is elke tool waarvoor de Nodejs-engine is geïnstalleerd om te kunnen worden uitgevoerd en die kan worden geopend (geïnstalleerd) via de knooppuntpakketbeheerder (npm).

Karma is een tool die onze testgestuurde ontwikkeling snel, leuk en gemakkelijk maakt. Het wordt technisch gezien als een testrunner. Het is opmerkelijk om hier te vermelden dat Karma is ontwikkeld door het Angular-team.

Hoe werkt Karma als testrunner?

Als testloper doet Karma drie belangrijke dingen:

  • Het start een webserver en serveert uw JavaScript-broncode en testbestanden op die server.
  • Laadt alle bron- en testbestanden in de juiste volgorde.
  • Ten slotte worden browsers gestart om de tests uit te voeren.

Wat kan karma nog meer doen?

Afgezien van de hierboven genoemde functies van Karma, zijn er nog enkele andere dingen waarvoor Karma kan worden geconfigureerd. Bijvoorbeeld, om codetestdekking te publiceren naar overall.io ​transpileer een code van es6-formaat naar es5, bundel meerdere bestanden samen in één bestand en genereer bronkaarten.

In onze volgende tutorials zullen we zien hoe sommige van deze dingen werken.

Vereisten om aan de slag te gaan met karma

Om met Karma aan de slag te gaan, moet u kennis hebben van NodeJS en Node-pakketbeheerder.

Wat is NodeJS?

Nodejs lost de blokkerende aard van JavaScript-asynchrone oproepen op, d.w.z. wanneer een asynchrone functie wordt geopend in JavaScript, wordt voorkomen dat de andere delen van de code worden uitgevoerd totdat de asynchrone oproep terugkeert. Met NodeJS kunnen echter asynchrone niet-blokkerende functieaanroepen worden gedaan.

In technische termen kan van NodeJS worden gezegd dat het een asynchrone gebeurtenisgestuurde JavaScript-runtime is die het bouwen van schaalbare netwerktoepassingen eenvoudig en mogelijk maakt.

Aan de slag met NodeJS

U hoeft alleen het NodeJS-framework te installeren. Het enige dat u hoeft te doen, is hun bezoeken website en, op basis van uw besturingssysteem, moet u het installatieprogramma downloaden en de instructies op hun site over de installatie volgen.

Wat is Node Package Manager (Npm)?

De knooppuntpakketbeheerder (npm) is een JavaScript-pakketbeheerder die wordt gebruikt voor het installeren van andere vooraf gebouwde op knooppunten gebaseerde toepassingen of modules die u mogelijk in uw eigen toepassing wilt hergebruiken.

Npm wordt geïnstalleerd wanneer u NodeJS installeert, maar npm wordt sneller bijgewerkt dan het knooppunt. Daarom kan het nodig zijn dat u op een gegeven moment uw npm bijwerkt. Om de nieuwste versie van npm te installeren, moet u deze opdracht uitvoeren vanaf uw opdrachtregel: npm installeer npm @ nieuwste -g

De bovenstaande opdracht geeft aan dat u de OS-shell vraagt ​​om de applicatie npm uit te voeren en dat de applicatie de installatie van het pakket npm moet uitvoeren. @latest geeft aan dat de nieuwste versie van het pakket moet worden geïnstalleerd, de optie -g geeft aan dat het pakket wereldwijd moet worden geïnstalleerd.

Meer details over npm zijn te vinden hier ​

Er zijn twee belangrijke dingen die hier vermeld moeten worden, namelijk het installeren van een pakket met de –save en –save-dev optie.

Tijdens tests moet elk geïnstalleerd pakket worden geïnstalleerd met de optie –save-dev, d.w.z. om de pakketbeheerder te instrueren het pakket te installeren als een ontwikkelingsafhankelijkheid en niet als een projectafhankelijkheid (wanneer ik –save gebruik).

Er moet worden gekozen voor ontwikkelingsafhankelijkheid, aangezien dat pakket niet nodig is voor de toepassing tijdens de productiefase, maar alleen tijdens de ontwikkelingsfase voor kwaliteitsborgingsdoeleinden.

Hoe Karma te installeren?

Om met Karma aan de slag te gaan, moet u een map maken voor het project waarvoor u de unit-tests gaat schrijven. Je kunt het een naam geven als 'basicUT'. Ik gebruik Visual Studio Code als teksteditor, daarom raad ik u aan om het ook te downloaden en te installeren. Je kan het vinden hier ​

Open het ingebouwde terminalvenster van de Visual Studio-code, klik op het ‘View-menu’ en selecteer vervolgens het geïntegreerde terminal-submenu.

Typ ‘npminit’ in het terminalvenster, zoals weergegeven in de onderstaande afbeelding. Deze opdracht helpt u bij het automatisch instellen van het ‘package.json’ -bestand dat elke op knooppunten gebaseerde applicatie moet hebben.

Het package.json-bestand slaat informatie op over uw applicatie, zoals de naam, versienummer, auteur, applicatie-afhankelijkheden, ontwikkelingsafhankelijkheden, testopdracht of script en script om de applicatie te starten of om de app in een uitvoerbare vorm te bouwen.

Klik hier voor meer informatie over het ‘package.json’ -bestand.

Schermafbeelding van het initialiseren van een package.json-bestand met npminit

Initialiseren van een package.json-bestand

Zoals hierboven beschreven, hoeft u alleen de opdracht uit te voeren om Karma te installeren npm installeer Karma @ nieuwste –save-dev ​Ik hoop dat u nu kunt interpreteren wat dat bevel inhoudt.

Nu hebben we met succes Karma geïnstalleerd, wat is het volgende dat u moet doen om Karma te gebruiken voor het testen van uw front-end unit?

Het enige dat u hoeft te doen, is het configuratiebestand ervoor schrijven, en het bestand wordt meestal Karma.conf.js genoemd voor JavaScript. Het is echter anders voor CoffeeScript. Klik hier voor meer informatie over het Karma-configuratiebestand.

Overzicht van Karma.conf.js bestandsconfiguratie-opties

Het configuratiebestand van Karma.conf.js moet de installatie-instructie bevatten die Karma moet volgen om de drie belangrijke functies van Karma uit te voeren.

Dit configuratiebestand kan handmatig of automatisch worden aangemaakt door het commando ‘karma init’ te gebruiken, dat verschillende vragen begint te tonen die u kunt beantwoorden, en Karma gebruikt de antwoorden die u geeft om het configuratiebestand op te zetten.

Je zou inmiddels hebben ontdekt dat het uitvoeren van het commando: ‘karma init’ de fout geeft ​ ‘Karma’ wordt niet herkend als een intern of extern programma of batchbestand dat via een commando kan worden bediend ​

Dit komt omdat Karma lokaal is geïnstalleerd en niet wereldwijd op het project waaraan u werkt. Daarom kan de shell van uw besturingssysteem de toepassing Karma niet vinden in de omgevingsinstellingen van het pad als u Windows gebruikt of in het .bash_profile-bestand als u een Mac gebruikt.

Om deze fout op te lossen, moeten we Karma wereldwijd installeren. Niet alleen Karma, maar het pakket dat specifiek is ontworpen om het gebruik van Karma mogelijk te maken op de opdrachtregel, namelijk Karma-cli. Voer gewoon het commando uit, ′ Npm install -g karma-cli ’ ​

Voer nu het commando karma-init opnieuw uit, en je kunt de vragen zien zoals weergegeven in de onderstaande afbeelding. Als u elke vraag beantwoordt en op de ‘ENTER’ -toets drukt, verschijnt de volgende vraag.

Karma init-opdracht uitvoeren op de opdrachtregel.

Karma init-commando uitvoeren

De onderstaande tabel geeft u een lijst met de vragen, hun betekenis en wat uw antwoord zou moeten zijn in de context van deze tutorial.

Karma init Vragen

V # 1) Welk toetsingskader wilt u gebruiken?

Uitleg: Een testraamwerk is een pakket dat de functies en routines biedt die nodig zijn om het proces van codering van tests voor elk softwareproduct van een bepaalde taal te automatiseren. Bijvoorbeeld, jasmine en mokka zijn testkaders voor JavaScript-softwarepakketten, Junit en JTest zijn testkaders voor Java, check deze voor meer details.

Antwoord: Er verschijnt een instructie waarin u wordt gevraagd om tab te gebruiken om andere beschikbare testframeworks voor een op knooppunten gebaseerde applicatie te bekijken, maar standaard ziet u jasmijn, dus klik gewoon op enter.

Q # 2) Wilt u Require.js gebruiken?

Uitleg: Require.js is een JavaScript-bestand en een module-lader. U vraagt ​​zich misschien af: waarom heeft u een bestands- of modulelader nodig? Lezen deze

Antwoord: In de code die we zullen schrijven, zou ik geen gebruik maken van requirements.js, dus antwoord gewoon nee. hij vraag is wat zouden we gebruiken? Om de requirements te kunnen gebruiken om externe bestanden in een ander bestand te brengen, hebben we een module loader nodig, dus zouden we kiezen voor Browserify. Hieronder ziet u meer details.

V # 3) Wilt u automatisch alle browsers vastleggen?

Uitleg: Bedenk dat karma een hulpmiddel is dat u helpt uw ​​front-end in verschillende browsers te testen, en daarom is deze vraag bedoeld voor u om de browsers te selecteren die u graag zou willen starten wanneer u de test met karma start uitvoert.

Antwoord: Selecteer voor deze les chrome, firefox en phantomjs. Nu is de vraag wat is PhantomJS? PhantomJS is een headless webbrowser die bedoeld is voor headless website testen, screen capturing, pagina automatisering en netwerk monitoring, je kunt details zien hier ​

Een andere vraag, wat is een headless webbrowser? Een headless webbrowser is een browser zonder grafische gebruikersinterface, de codes worden uitgevoerd in een console-achtige omgeving.

V # 4) Wat is de locatie van uw bron- en testbestanden?

Uitleg: Deze vraag is bedoeld om het pad bloot te leggen waar u de front-end-bestanden opslaat en de testbestanden die Unit-tests erop uitvoeren.

Antwoord: Voor dit project voer je public / js / *. Js in als het bronbestandspad en test / * Spec.js als het testbestandspad. De * Spec.js geeft aan dat alle testbestanden alles kunnen heten, maar aan het einde Spec moeten bevatten met de bestandsextensie .js.

V # 5) Moet een van de bestanden in de vorige patronen worden uitgesloten?

Uitleg: Soms kan het nodig zijn dat bepaalde bronbestanden en testbestanden niet moeten worden geladen. Deze vraag is bedoeld om dergelijke bestanden te specificeren die niet door Karma in de browser mogen worden geladen.

Antwoord: Voer gewoon een lege string in door op enter te drukken. Heb je de stelling 'Je kunt glob-patronen gebruiken, Bijvoorbeeld, '** / *. Swp'. ’. Glob-patronen worden gebruikt om een ​​set bestandsnamen in een Unix-achtige omgeving te specificeren met behulp van het jokerteken.
In ons geval staat public / js / *. Js voor elk bestand met de naam een ​​willekeurige set tekens zoals aangegeven door (*) en heeft de bestandsextensie .js en bevindt zich in het pad public / js. Lees verder hier

V # 6) Wil je dat Karma alle bestanden bekijkt en de tests bij verandering uitvoert?

Uitleg: Wanneer een taak / testrunner uw bestanden bekijkt, betekent dit alleen dat wanneer u de bestanden bewerkt tijdens de ontwikkeling, de test- / taakrunner het bestand opnieuw laadt of opnieuw uitvoert, het is de functie van het bestand opnieuw, zonder dat u dit handmatig hoeft te vragen het om het opnieuw te doen.

Antwoord: Dus antwoord gewoon ja.

Andere karma.conf.js bestandsinhoud

# 1) basePath : Deze configuratie draagt ​​de naam van een map die moet worden gebruikt om de padinformatie voor test- en bronbestanden op te lossen.

# 2) preprocessors : Dit draagt ​​de naam van de programmabestanden die moeten worden gebruikt om bron- en testbestanden te verwerken voordat ze in de browser worden geladen.

Waarom is dit nodig?

Met de komst van de ES6-coderingsstijl die nog niet door de browsers wordt begrepen, is het nodig om de code van ES6-formaat naar ES5 te transpileren, wat de browser kan begrijpen, daarom kan de babel-preprocessor voor Karma worden gespecificeerd om te worden gebruikt om de code van ES6 naar ES5 voordat u deze in de browser laadt.

Er zijn andere toepassingen van een preprocessor, Bijv. codetestdekking publiceren op overall.io, zie hier voor meer details.

# 3) verslaggevers : Deze configuratieoptie specificeert het pakket dat moet worden gebruikt om de testresultaten te rapporteren. Er zijn verschillende reporters voor het melden van codetestdekking; Bijv. Dekking. Maar standaard is het ingesteld om verder te gaan. Merk op dat het een array is, dus u kunt ook andere reporters toevoegen.

# 4) poort : Dit specificeert de poort waarop de browser wordt gedraaid.

# 5) kleuren : Geeft aan of de verslaggevers de rapporten met kleurstoffen moeten produceren.

# 6) Log niveau : Dit specificeert het niveau van logboekregistratie. Standaard is het ingesteld op config.LOG_INFO, wat betekent dat alleen de informatie wordt gelogd.

# 7) singleRun : Dit specificeert of Karma moet worden afgesloten nadat de test eenmaal is uitgevoerd. Indien ingesteld op true, voert Karma de test uit en wordt deze afgesloten met de status 0 of 1, afhankelijk van of de test is mislukt of geslaagd, anders stopt Karma niet.

Deze configuratie is vereist voor continue integratietestdoeleinden met behulp van tools zoals TravisCI en CircleCI.

# 8) gelijktijdigheid : Dit geeft aan hoeveel browsers Karma tegelijkertijd moet starten. Standaard is deze ingesteld op oneindig.

Klik hier voor gedetailleerde informatie over de configuratie-opties van Karma.

Als u een oplettende leerling bent, moet u deze drie regels hebben gezien.

​

Laten we dit in het onderstaande gedeelte onderzoeken.

Karma Browser Launchers

Karma-firefox-launcher, Karma-chrome-launcher en Karma-phantomjs-launcher kunnen over het algemeen worden aangeduid als de browser-launchers voor Karma.

Karma moet deze browsertoepassingen die onafhankelijk zijn, opstarten, dus een toepassing van een derde partij is vereist om een ​​interface naar Karma te bieden om de shell-opdracht uit te voeren die de browsers laat draaien in elk besturingssysteem waarop Karma een test uitvoert.

Het zijn dus Karma-browserstartprogramma's voor respectievelijk firefox, chrome en phantomjs. Karma laat die verklaringen zien om ons te informeren over het onvermogen om die vereisten te installeren en vraagt ​​ons vervolgens om het zelf handmatig te installeren.

Om dat te doen, gebruiken we de knooppuntpakketbeheerder en voeren we deze opdrachten uit vanaf de opdrachtregel: npm installeer Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher -save-dev

We moeten allemaal Chrome- en Firefox-browsers hebben geïnstalleerd, met phantomjs niet geïnstalleerd. Als dat waar is, moet u het installeren, zie hier voor details en klik hier voor een snelstartgids.

Gevolgtrekking

In deze tutorial hebben we geprobeerd te begrijpen waar het bij front-end unit testing om draait. We hebben ook een belangrijke front-end unit-testtool voor JavaScript-software geïntroduceerd, bekend als Karma, een op knooppunten gebaseerde tool. We presenteerden ook de basisconfiguratie-opties voor het bestand Karma.conf.js en wat ze allemaal inhouden.

wat is de beste software voor het verwijderen van virussen

Afhaalrestaurants

  • Unit testing is een soort softwaretestmethode waarbij elk afzonderlijk en onafhankelijk deel van de broncode wordt getest om te bepalen of het goed genoeg is voor gebruik.
  • Wanneer we deze unit testing uitvoeren aan de front-end (client-side) van de software, staat dit bekend als front-end unit testing.
  • Karma is een op knooppunten gebaseerde testtool waarmee u uw JavaScript-codes in meerdere echte browsers kunt testen. Daarom wordt het testrunner genoemd.
  • Nodejs is een asynchroon, gebeurtenisgestuurd runtime JavaScript dat het bouwen van schaalbare netwerktoepassingen eenvoudig en mogelijk maakt.
  • De knooppuntpakketbeheerder (npm) is een JavaScript-pakketbeheerder die wordt gebruikt voor het installeren van andere vooraf gebouwde op knooppunten gebaseerde toepassingen of modules die u mogelijk in uw eigen toepassing wilt hergebruiken.

Volgende tutorial

Karma alleen kan de front-end unit testing van JavaScript-applicaties niet automatiseren, het moet ook werken met andere testtools zoals een testraamwerk dat het schrijven van onze testcases zal vergemakkelijken.

In onze aanstaande tutorial zullen we Jasmine en het Jasmine-Jquery-pakket verkennen dat de functionaliteit van Jasmine uitbreidt om HTML-armaturen te kunnen testen die gebruik maken van de JavaScript-bibliotheek: Jquery.

Aanbevolen literatuur

^