Tutorial Karma: proves d'unitats front-end mitjançant Karma Test Runner

karma tutorial front end unit testing using karma test runner

Aquest tutorial explica com configurar Karma i automatitzar les proves d’unitats front-end mitjançant Karma, les opcions bàsiques de configuració del fitxer Karma.conf.js, etc.:

Aquest tutorial explica el procediment per automatitzar la prova unitària de la part frontal del programari mitjançant Karma i algunes de les seves eines associades.

Començarem per aplicacions web desenvolupades mitjançant biblioteca JavaScript: ‘Jquery’ i temps d’execució de JavaScript: ‘NodeJS’; i més endavant veurem alguns marcs JavaScript com AngularJS i ReactJS.

=>DESPLAÇA CAP AVALLper veure la llista completa de tutorials de Karma

Què aprendreu:

• Llista de tutorials de karma
• Visió general dels tutorials de karma d’aquesta sèrie
• Què és la prova d'unitat frontal?
• Què és Karma Test Runner?
  • Com funciona Karma com a corredor de trets?
• Què és NodeJS?
  • Què és Node Package Manager (Npm)?
• Com instal·lar Karma?
  • Visió general de les opcions de configuració de fitxers Karma.conf.js
• Preguntes Karma init
  • Altres continguts del fitxer karma.conf.js
  • Iniciadors del navegador Karma
• Conclusió
  • Lectura recomanada

Llista de tutorials de karma

Tutorial # 1: Tutorial Karma: proves d'unitats front-end mitjançant Karma Test Runner
Tutorial # 2: Tutorial Jasmine Framework que inclou Jasmine Jquery amb exemples
Tutorial # 3: Projecte d’exemple en les proves d’unitats front-end mitjançant KARMA i JASMINE

Visió general dels tutorials de karma d’aquesta sèrie

Què és la prova d'unitat frontal?

El front-end de qualsevol sistema de programari és simplement la interfície on l’usuari accedeix a totes les funcionalitats que proporciona el sistema. Per garantir la millor experiència d'usuari, cal assegurar-se que els desenvolupadors de la interfície han codificat la interfície tenint en compte tots els requisits de l'usuari.

L’única manera d’aplicar-ho és escriure i executar proves sobre els codis del desenvolupador. El lliurament s’hauria d’acceptar com a codi o funció d’interfície de qualitat només quan tots els resultats de les proves estiguin en estat “aprovat”.

La prova unitària és un tipus de mètode de prova de programari en què es prova cada part individual i independent del codi font per determinar que és prou bo per al seu ús.

Quan nosaltres realitzeu aquesta prova d’unitat a la part frontal (client) del programari, s’anomena prova unitat frontal. El contrari de les proves front-end és les proves back-end (del servidor).

Les proves de la unitat frontal es poden realitzar manualment o automàticament. Actualment, les proves automàtiques d’unitats front-end estan en tendència, ja que són més efectives i estalvien temps. Hi ha diverses eines disponibles per a proves d’unitats front-end en diferents plataformes de programació.

char a string c ++

AngularJS i ReactJS són dos marcs de JavaScript front-end populars, tot i que ReactJS és bastant nou.

Per dur a terme proves d’unitat en una aplicació, s’utilitzen els front-ends construïts amb aquests frameworks front-end o fins i tot aquells construïts sense els frameworks, algunes eines de proves d’automatització com Karma, mocha, Jasmine, broma, enzim, etc.

En primer lloc, estaríem aprenent a fer proves d’unitats front-end mitjançant Karma i Jasmine i, més endavant, també podem fer una ullada a les altres eines.

Començarem amb l'execució de proves d'unitat de front-end mitjançant accessoris per a front-ends construïts sense cap dels marcs JavaScript per a front-ends. En total, dividirem els nostres aprenentatges en aquesta sèrie en tres tutorials.

En aquest primer tutorial, intentarem comprendre com s'està configurant Karma; el segon tutorial explicarà detalladament Jasmine; finalment, al tercer tutorial, analitzarem la seva aplicació pràctica.

Què és Karma Test Runner?

Karma és una eina de prova basada en nodes que us permet provar els vostres codis JavaScript en diversos navegadors reals. Una eina basada en nodes és qualsevol eina que necessiti el motor Nodejs instal·lat perquè s’executi i es pugui accedir (instal·lar) a través del gestor de paquets de nodes (npm).

Karma és una eina que fa que el nostre desenvolupament basat en proves sigui ràpid, divertit i fàcil. Tècnicament es denomina corredor de proves. Cal destacar aquí que Karma va ser desenvolupat per l'equip Angular.

Com funciona Karma com a corredor de trets?

Com a corredor de proves, Karma fa tres coses importants:

• Inicia un servidor web i serveix el vostre codi font i fitxers de prova en aquest servidor.
• Carrega tots els fitxers d'origen i de prova en l'ordre correcte.
• Finalment, fa girar els navegadors per executar les proves.

Què més pot fer Karma?

A part de les funcions de Karma esmentades anteriorment, hi ha algunes altres coses que es pugui configurar per fer. Per exemple, per publicar la cobertura de proves de codi a coveralls.io ; transpileu un codi del format es6 a es5, agrupant diversos fitxers en un sol fitxer i generant mapes d'origen.

En els nostres tutorials posteriors, veurem com funcionen algunes d’aquestes coses.

Requisits per començar amb Karma

Per començar a utilitzar Karma, heu de comprendre NodeJS i el gestor de paquets Node.

Què és NodeJS?

Nodejs resol el caràcter de bloqueig de les trucades asíncrones de JavaScript, és a dir, quan s’accedeix a una funció asíncrona a JavaScript, impedeix que les altres parts del codi s’executin fins que la trucada asíncrona no torni. No obstant això, amb NodeJS, es poden fer trucades de funció no bloquejadores asíncrones.

En termes tècnics, es pot dir que NodeJS és un temps d’execució de JavaScript basat en esdeveniments asíncron que facilita i possibilita la creació d’aplicacions en xarxa escalables.

Introducció a NodeJS

Simplement heu d’instal·lar el framework NodeJS. Tot el que heu de fer és visitar la seva lloc web i, segons el vostre sistema operatiu, heu de descarregar l'instal·lador i seguir les instruccions del seu lloc sobre la seva instal·lació.

Què és Node Package Manager (Npm)?

El gestor de paquets de nodes (npm) és un gestor de paquets de JavaScript que s’utilitza per instal·lar altres aplicacions o mòduls basats en nodes pre-construïts que és possible que vulgueu tornar a utilitzar a la vostra pròpia aplicació.

Npm s'instal·la quan instal·leu NodeJS, però npm s'actualitza més ràpidament que el node. Per tant, pot ser que necessiteu actualitzar el vostre npm en algun moment. Per instal·lar l'última versió de npm, heu d'executar aquesta ordre des de la línia d'ordres: npm instal·la npm @ latest -g

L'ordre anterior indica que sol·liciteu a l'intèrpret d'ordres del SO que executi l'aplicació npm i l'aplicació hauria de realitzar la instal·lació del paquet npm. @latest indica que s'ha d'instal·lar l'última versió del paquet, l'opció -g indica que el paquet s'ha d'instal·lar globalment.

Es poden trobar més detalls sobre npm aquí .

Hi ha dues coses importants que s’han d’esmentar aquí, és a dir, instal·lar un paquet amb l’opció –save i –save-dev.

Durant les proves, qualsevol paquet instal·lat s’hauria d’instal·lar mitjançant l’opció –save-dev, és a dir, per indicar al gestor de paquets que instal·li el paquet com a dependència del desenvolupament i no com a dependència del projecte (quan faig servir –save).

S'ha d'escollir la dependència del desenvolupament, ja que l'aplicació no necessita aquest paquet durant la fase de producció, sinó que només es requereix durant la fase de desenvolupament per garantir la qualitat.

Com instal·lar Karma?

Per començar amb Karma, heu de crear una carpeta per al projecte on esteu a punt d'escriure les proves unitàries. Podeu anomenar-lo com a 'basicUT'. Estic fent servir Visual Studio Code com a editor de text, per tant, també us recomano que el descarregueu i l’instal·leu. Ho podeu trobar aquí .

Obriu la finestra del terminal incorporat al codi Visual Studio, feu clic al menú de visualització i seleccioneu el submenú del terminal integrat.

A la finestra del terminal, escriviu ‘npminit’ tal com es mostra a la figura següent. Aquesta ordre us guia a configurar automàticament el fitxer ‘package.json’ que totes les aplicacions basades en nodes han de tenir.

El fitxer package.json emmagatzema informació sobre la vostra aplicació, com ara el nom, el número de versió, l'autor, les dependències de l'aplicació, les dependències de desenvolupament, l'ordre de prova o l'script i l'script per iniciar l'aplicació o crear l'aplicació en un formulari executable.

Feu clic a aquí per obtenir més detalls sobre el fitxer ‘package.json’.

Captura de pantalla d'Inicialització d'un fitxer package.json mitjançant npminit

Com s'ha descrit anteriorment, per instal·lar Karma, només cal que executeu l'ordre npm instal·leu Karma @ latest –save-dev . Espero que ara pugueu interpretar el que implica aquesta ordre.

Ara, hem instal·lat amb èxit Karma, quina és la següent cosa que heu de fer per utilitzar Karma per a les proves d’unitats front-end?

Tot el que heu de fer és escriure-hi el fitxer de configuració i normalment s’anomena Karma.conf.js per a JavaScript. Tanmateix, és diferent per a CoffeeScript. Feu clic a aquí per explorar més sobre el fitxer de configuració de Karma.

Visió general de les opcions de configuració de fitxers Karma.conf.js

El fitxer de configuració de Karma.conf.js hauria de contenir la instrucció de configuració que Karma ha de seguir per realitzar les tres funcions importants de Karma.

Aquest fitxer de configuració es pot crear manualment o automàticament mitjançant l'ordre: 'karma init', que comença a mostrar diferents preguntes per respondre, i Karma utilitza les respostes que proporcioneu per configurar el fitxer de configuració.

Ja hauríeu descobert que l'execució de l'ordre: 'karma init' dóna l'error ' 'Karma' no es reconeix com a programa o fitxer per lots operable per ordres internes o externes '.

Això es deu al fet que Karma es va instal·lar localment i no globalment al projecte en el qual esteu treballant. Per tant, l'intèrpret d'ordres del sistema operatiu no pot trobar l'aplicació Karma a la configuració ambiental del camí si utilitzeu Windows o al fitxer .bash_profile si utilitzeu Mac.

Per solucionar aquest error, hem d’instal·lar Karma de forma global. No només Karma, sinó el paquet dissenyat específicament per permetre l’ús de Karma a la línia d’ordres que és Karma-cli. Simplement executeu l'ordre, ′ Npm instal·la -g karma-cli ” .

modelatge dimensional al magatzem de dades amb exemple

Ara torneu a executar l'ordre karma-init i podreu veure les preguntes tal com es mostra a la figura següent. Quan responeu a cada pregunta i premeu la tecla 'ENTRAR', apareixerà la següent pregunta.

Execució de l'ordre Karma init a la línia d'ordres.

La taula següent us proporcionarà una llista de les preguntes, el seu significat i el que hauria de ser la vostra resposta en el context d’aquest tutorial.

Preguntes Karma init

P # 1) Quin marc de proves voleu utilitzar?

Explicació: Un marc de proves és un paquet que proporciona les funcions i rutines necessàries per automatitzar el procés de codificació de proves per a qualsevol producte de programari d'un idioma concret. Per exemple, el gessamí i la moca són marcs de prova per als paquets de programari JavaScript, Junit i JTest estan provant marcs per a Java, comproveu això per a més detalls.

Resposta: Apareix una instrucció que us demana que utilitzeu la pestanya per veure altres marcs de proves disponibles per a una aplicació basada en nodes, però per defecte veieu gessamí, per tant, només cal que feu clic a Intro.

P # 2) Voleu utilitzar Require.js?

Explicació: Require.js és un carregador de mòduls i fitxers JavaScript. Potser us pregunteu: per què necessiteu un carregador de fitxers o mòduls? Llegiu això

Resposta: Al codi, escriurem, no faria ús de require.js, així que simplement responeu que no. la pregunta és què faríem servir? Per poder utilitzar les instruccions require per incorporar fitxers externs a un altre fitxer, necessitem un carregador de mòduls, de manera que optaríem per Browserify. Veureu més detalls a continuació.

P # 3) Voleu capturar algun navegador automàticament?

Explicació: Recordeu que el karma és una eina que us ajuda a provar el vostre front-end en diferents navegadors, per tant, aquesta pregunta està pensada per a que seleccioneu els navegadors que us agradaria generar cada vegada que feu la prova amb l'inici del karma.

Resposta: Per a aquesta lliçó, seleccioneu chrome, firefox i phantomjs. Ara la pregunta és què és PhantomJS? PhantomJS és un navegador web sense cap que està destinat a proves de llocs web sense cap, captura de pantalla, automatització de pàgines i supervisió de xarxa. Podeu veure detalls aquí .

Una altra pregunta, què és un navegador web sense cap? Un navegador web sense cap és un navegador sense una interfície gràfica d'usuari, els codis s'executen en un entorn semblant a una consola.

P # 4) Quina és la ubicació dels fitxers d'origen i de prova?

Explicació: Aquesta pregunta pretén exposar el camí on desareu els fitxers front-end i els fitxers de prova que els faran proves d’unitat.

Resposta: Per a aquest projecte, introduïu public / js / *. Js per al camí dels fitxers font i test / * Spec.js per al camí dels fitxers de prova. El * Spec.js indica que tots els fitxers de prova es poden anomenar qualsevol cosa, però han de contenir Spec al final amb una extensió de fitxer .js.

preguntes i respostes de l'entrevista de proves de salesforce

P # 5) S'hauria d'excloure algun dels fitxers inclosos en els patrons anteriors?

Explicació: De vegades, pot ser que calgui no carregar determinats fitxers font i fitxers de prova; aquesta pregunta està pensada perquè especifiqueu aquests fitxers que Karma no hauria de carregar al navegador.

Resposta: Simplement introduïu una cadena buida prement Intro. Heu vist la frase 'Podeu utilitzar patrons globals, Per exemple, '** / *. Swp'. '. Els patrons globals s’utilitzen per especificar un conjunt de noms de fitxer en un entorn similar a Unix mitjançant el caràcter comodí.
En el nostre cas, public / js / *. Js significa qualsevol fitxer anomenat qualsevol conjunt de caràcters tal com s’indica per (*) i té l’extensió de fitxer .js i resideix al camí public / js. Llegeix més aquí

P # 6) Voleu que Karma vegi tots els fitxers i faci les proves amb canvis?

Explicació: Quan un corredor de tasques / proves mira els vostres fitxers, tot el que vol dir és que cada vegada que editeu els fitxers durant el desenvolupament, el corredor de tasques / tasques recarrega el fitxer o torna a realitzar la funció del fitxer de nou, sense que vingueu a demanar-ho manualment per tornar-ho a fer.

Resposta: Així que simplement responeu que sí.

Altres continguts del fitxer karma.conf.js

# 1) basePath : Aquesta configuració porta el nom de qualsevol carpeta que s'hauria d'utilitzar per resoldre la informació de camí d'accés proporcionada per als fitxers de prova i font.

# 2) preprocessadors : Porta el nom dels fitxers del programa que s'han d'utilitzar per processar els fitxers d'origen i de prova abans de carregar-los al navegador.

Per què cal això?

Amb l’aparició de l’estil de codificació ES6 que els navegadors no entenen encara, és necessari transmetre el codi del format ES6 a ES5 que el navegador pugui entendre, per tant, es pot especificar el preprocessador de babel per a Karma codi d’ES6 a ES5 abans de carregar-lo al navegador.

Hi ha altres usos d’un preprocessador, Per exemple. publicació de cobertura de proves de codi a coveralls.io, vegeu aquí per a més detalls.

# 3) periodistes : Aquesta opció de configuració especifica el paquet que s'utilitzarà per informar dels resultats de la prova. Hi ha diversos informadors per informar de la cobertura de proves de codi; Per exemple. cobertura. Però, per defecte, està configurat per avançar. Tingueu en compte que és una matriu, de manera que també podeu afegir altres periodistes.

# 4) port : Especifica el port on es gira el navegador.

# 5) colors : Especifica si els informadors han de produir els informes amb colorants.

# 6) logLevel : Especifica el nivell de registre. Per defecte, s'estableix en config.LOG_INFO, el que significa que només es registra la informació.

# 7) singleRun : Especifica si Karma ha de sortir després d'executar la prova una vegada. Si s’estableix en true, Karma executa la prova i surt amb l’estat 0 o 1 en funció de si la prova ha fallat o s’ha superat, en cas contrari Karma no s’atura.

Aquesta configuració és necessària per fer proves d’integració contínua mitjançant eines com TravisCI i CircleCI.

# 8) simultaneïtat : Especifica quants navegadors Karma hauria d'iniciar al mateix temps. Per defecte, s'estableix a infinit.

Feu clic a aquí per obtenir informació detallada sobre les opcions de configuració de Karma.

Si sou un estudiant observador, heu d’haver vist aquestes tres línies.

Explorem això a la secció següent.

Iniciadors del navegador Karma

Karma-firefox-launcher, Karma-chrome-launcher i Karma-phantomjs-launcher es poden anomenar generalment llançadors de navegadors per a Karma.

Karma ha de desenvolupar aquestes aplicacions de navegador que siguin independents, de manera que cal una aplicació de tercers per proporcionar una interfície a Karma per executar l'ordre shell que fa girar els navegadors en qualsevol sistema operatiu en què Karma estigui provant.

Per tant, són llançadors de navegadors Karma per a firefox, chrome i phantomjs respectivament. Karma apareix aquestes afirmacions per informar-nos de la seva incapacitat per instal·lar aquests requisits i, a continuació, ens demana que ho instal·lin nosaltres mateixos manualment.

Per fer-ho, utilitzarem el gestor de paquets del node i executarem aquestes ordres des de la línia d’ordres: npm install Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Tots hem de tenir instal·lats navegadors Chrome i Firefox, amb phantomjs no instal·lats. Si és cert, heu d’instal·lar-lo aquí per obtenir més informació i fer clic aquí per obtenir una guia d'inici ràpid.

Conclusió

En aquest tutorial, hem intentat entendre en què consisteix la prova d’unitat frontal. També hem introduït una important eina de prova d’unitat frontal per al programari JavaScript coneguda com a Karma, que és una eina basada en nodes. També vam presentar les opcions bàsiques de configuració del fitxer Karma.conf.js i el que tot això implica.

Menjar per emportar

• La prova unitària és un tipus de mètode de prova de programari en què es prova cada part individual i independent del codi font per determinar si és prou bo per al seu ús.
• Quan realitzem aquesta prova d’unitat a la part frontal (client) del programari, es coneix com a prova unitària frontal.
• Karma és una eina de prova basada en nodes que us permet provar els vostres codis JavaScript en diversos navegadors reals. Per tant, es denomina corredor de proves.
• Nodejs és un JavaScript en temps d'execució basat en esdeveniments asíncron que facilita i fa possible la creació d'aplicacions en xarxa escalables.
• El gestor de paquets de nodes (npm) és un gestor de paquets de JavaScript que s’utilitza per instal·lar altres aplicacions o mòduls basats en nodes pre-construïts que és possible que vulgueu tornar a utilitzar a la vostra pròpia aplicació.

Pròxim tutorial

Karma per si sola no pot automatitzar les proves d’unitats front-end d’aplicacions JavaScript, sinó que també ha de treballar amb altres eines de prova, com ara un marc de proves que facilitarà l’escriptura dels nostres casos de prova.

En el nostre proper tutorial, explorarem Jasmine i el paquet Jasmine-Jquery que amplia la funcionalitat de Jasmine per poder provar accessoris HTML que fan servir la biblioteca JavaScript: Jquery.

Lectura recomanada

• 20 eines de prova d’unitat més populars el 2021
• Clau per a la prova unitària amb èxit: com els desenvolupadors posen a prova el seu propi codi?
• TOP 45 Preguntes d’entrevistes JavaScript amb respostes detallades
• Tutorial d'AngularJS per a principiants absoluts (amb guia d'instal·lació)
• Diferència entre versions angulars: Angular Vs AngularJS
• Cobertura de proves en proves de programari (consells per maximitzar la cobertura de proves)
• 48 millors preguntes i respostes de l'entrevista d'AngularJS (LLISTA 2021)
• Com es configura el marc de proves Node.js: tutorial de Node.js