Tutorial sul karma: test unitari front-end utilizzando Karma Test Runner

karma tutorial front end unit testing using karma test runner

Questo tutorial spiega come configurare Karma e automatizzare i test di unità front-end utilizzando Karma, le opzioni di configurazione di base per il file Karma.conf.js, ecc .:

Questo tutorial spiega la procedura per automatizzare gli Unit Testing del front-end del software utilizzando Karma e alcuni dei suoi strumenti associati.

Inizieremo con applicazioni web sviluppate utilizzando la libreria JavaScript: 'Jquery' e JavaScript runtime: 'NodeJS'; e successivamente esamineremo alcuni framework JavaScript come AngularJS e ReactJS.

=>SCORRI GIÙper vedere l'intero elenco dei tutorial sul karma

Cosa imparerai:

• Elenco dei tutorial sul karma
• Panoramica dei tutorial sul karma in questa serie
• Che cos'è il front-end unit test?
• Cos'è il Karma Test Runner?
  • Come funziona il Karma come Testrunner?
• Cos'è NodeJS?
  • Che cos'è Node Package Manager (Npm)?
• Come installare Karma?
  • Panoramica delle opzioni di configurazione del file Karma.conf.js
• Domande di Karma init
  • Altri contenuti del file karma.conf.js.
  • Lanciatori del browser Karma
• Conclusione
  • Lettura consigliata

Elenco dei tutorial sul karma

Tutorial n. 1: Tutorial sul karma: test unitari front-end utilizzando Karma Test Runner
Tutorial n. 2: Tutorial su Jasmine Framework che include Jasmine Jquery con esempi
Tutorial n. 3: Progetto di esempio su test unitari front-end utilizzando KARMA e JASMINE

Panoramica dei tutorial sul karma in questa serie

Che cos'è il front-end unit test?

Il front-end di qualsiasi sistema software è semplicemente l'interfaccia dove l'utente accede a tutte le funzionalità fornite dal sistema. Per garantire la migliore esperienza utente, è necessario assicurarsi che gli sviluppatori front-end abbiano codificato il front-end tenendo presenti tutti i requisiti dell'utente.

L'unico modo per imporlo è scrivere ed eseguire test sui codici dello sviluppatore. Il deliverable deve essere accettato come codice / funzionalità front-end di qualità solo quando tutti i risultati di questi test sono nello stato 'superato'.

Il test unitario è una sorta di metodo di test del software in cui viene testata ogni parte individuale e indipendente del codice sorgente per determinare che sia sufficientemente buona per l'uso.

Quando noi eseguire questo unit test sul front-end (lato client) del software, viene chiamato unit test front-end. L'opposto del test front-end è il test back-end (lato server).

Il test dell'unità front-end può essere eseguito manualmente o automaticamente. Oggigiorno è in voga il test di unità front-end automatizzato poiché è più efficace e fa risparmiare tempo. Sono disponibili diversi strumenti per i test di unità front-end su diverse piattaforme di programmazione.

AngularJS e ReactJS sono due popolari framework JavaScript front-end, sebbene ReactJS sia abbastanza nuovo.

Per eseguire unit test su un'applicazione, i front-end costruiti con questi framework front-end o anche quelli costruiti senza i framework, vengono utilizzati alcuni strumenti di test di automazione come Karma, mocha, Jasmine, jest, enzyme, ecc.

In primo luogo, impareremo come condurre test di unità front-end utilizzando Karma e Jasmine e poi, in seguito, potremo dare un'occhiata anche agli altri strumenti.

Inizieremo eseguendo unit test front-end utilizzando dispositivi per front-end creati senza alcun framework JavaScript per front-end. In totale, divideremo i nostri insegnamenti in questa serie in tre tutorial.

In questo primissimo tutorial, proveremmo ad avere un'idea di come viene impostato Karma, il secondo tutorial spiegherà in dettaglio Jasmine, infine, nel terzo tutorial, vedremo la sua applicazione pratica.

Cos'è il Karma Test Runner?

Karma è uno strumento di test basato su nodi che ti consente di testare i tuoi codici JavaScript su più browser reali. Uno strumento basato su nodi è qualsiasi strumento che necessita del motore Nodejs installato per essere eseguito ed è possibile accedervi (installato) tramite il gestore di pacchetti del nodo (npm).

Karma è uno strumento che rende il nostro sviluppo basato sui test veloce, divertente e facile. È tecnicamente definito come un test-runner. È interessante menzionare qui che Karma è stato sviluppato dal team Angular.

Come funziona il Karma come Testrunner?

In qualità di test runner, Karma fa tre cose importanti:

• Avvia un server web e serve la tua sorgente JavaScript e i file di test su quel server.
• Carica tutti i file di origine e di prova nell'ordine corretto.
• Infine, avvia i browser per eseguire i test.

Cos'altro può fare il karma?

Oltre alle funzioni sopra elencate di Karma, ci sono anche poche altre cose che Karma può essere configurato per fare. Per esempio, per pubblicare la copertura del test del codice in coveralls.io ; trasferire un codice dal formato es6 a es5, raggruppando più file in un unico file e generare mappe di origine.

Nelle nostre esercitazioni successive vedremo come funzionano alcune di queste cose.

Requisiti per iniziare con il karma

Per iniziare con Karma, è necessario avere una conoscenza di NodeJS e del gestore di pacchetti Node.

Cos'è NodeJS?

Nodejs risolve la natura bloccante delle chiamate asincrone JavaScript, ovvero quando si accede a una funzione asincrona in JavaScript, impedisce l'esecuzione delle altre parti del codice fino al ritorno della chiamata asincrona. Tuttavia, con NodeJS, è possibile effettuare chiamate di funzioni non bloccanti asincrone.

In termini tecnici, si può dire che NodeJS è un runtime JavaScript asincrono basato su eventi che rende facile e possibile la creazione di applicazioni di rete scalabili.

Introduzione a NodeJS

Devi semplicemente installare il framework NodeJS. Tutto quello che devi fare è visitare il loro sito web e, in base al tuo sistema operativo, devi scaricare il programma di installazione e seguire le istruzioni sul loro sito sulla sua installazione.

Che cos'è Node Package Manager (Npm)?

Il gestore di pacchetti del nodo (npm) è un gestore di pacchetti JavaScript utilizzato per l'installazione di altre applicazioni o moduli predefiniti basati su nodi che potresti voler riutilizzare nella tua applicazione.

Npm viene installato quando installi NodeJS, ma npm viene aggiornato più velocemente del nodo. Quindi potrebbe essere necessario aggiornare il tuo npm ad un certo punto. Per installare l'ultima versione di npm, devi eseguire questo comando dalla riga di comando: npm installa npm @ latest -g

Il comando sopra indica che stai chiedendo alla shell del sistema operativo di eseguire l'applicazione npm e l'applicazione dovrebbe eseguire l'installazione del pacchetto npm. @latest indica che deve essere installata l'ultima versione del pacchetto, l'opzione -g indica che il pacchetto deve essere installato globalmente.

Maggiori dettagli su npm possono essere trovati Qui .

Ci sono due cose importanti che dovrebbero essere menzionate qui, cioè l'installazione di un pacchetto con le opzioni –save e –save-dev.

Durante i test, qualsiasi pacchetto installato dovrebbe essere installato utilizzando l'opzione –save-dev, cioè per istruire il gestore dei pacchetti ad installare il pacchetto come dipendenza di sviluppo e non come dipendenza del progetto (quando uso –save).

La dipendenza dallo sviluppo dovrebbe essere scelta in quanto quel pacchetto non è necessario all'applicazione durante la fase di produzione ma è richiesto solo durante la fase di sviluppo per scopi di garanzia della qualità.

Come installare Karma?

Per iniziare con Karma, devi creare una cartella per il progetto per cui stai per scrivere gli unit test. Puoi chiamarlo come 'basicUT'. Sto usando Visual Studio Code come editor di testo, quindi ti consiglio anche di scaricarlo e installarlo. Puoi trovarlo Qui .

Aprire la finestra del terminale integrata del codice di Visual Studio, fare clic sul 'menu Visualizza', quindi selezionare il sottomenu del terminale integrato.

Nella finestra del terminale, digita 'npminit' come mostrato nella figura sotto. Questo comando ti guida nella configurazione automatica del file 'package.json' che ogni applicazione basata su nodi deve avere.

Il file package.json memorizza le informazioni sull'applicazione come nome, numero di versione, autore, dipendenze dell'applicazione, dipendenze di sviluppo, comando di test o script e script per avviare l'applicazione o compilare l'app in un modulo eseguibile.

Clic Qui per maggiori dettagli sul file 'package.json'.

Screenshot di Inizializzazione di un file package.json utilizzando npminit

Come descritto sopra, per installare Karma, tutto ciò che serve è eseguire il comando npm installa Karma @ latest –save-dev . Spero che ora possiate interpretare ciò che implica quel comando.

Ora, abbiamo installato con successo Karma, qual è la prossima cosa che devi fare per utilizzare Karma per i tuoi test di unità front-end?

Tutto quello che devi fare è scrivere il file di configurazione per esso, e il file è solitamente chiamato Karma.conf.js per JavaScript. Tuttavia, è diverso per CoffeeScript. Clic Qui per esplorare di più sul file di configurazione Karma.

Panoramica delle opzioni di configurazione del file Karma.conf.js

Il file di configurazione Karma.conf.js dovrebbe contenere le istruzioni di configurazione che Karma deve seguire per eseguire le tre importanti funzioni di Karma.

Questo file di configurazione può essere creato manualmente o automaticamente utilizzando il comando: 'karma init', che inizia a visualizzare diverse domande a cui rispondere, e Karma utilizza le risposte fornite per impostare il file di configurazione.

A questo punto avresti scoperto che l'esecuzione del comando: 'karma init' dà l'errore ' 'Karma' non è riconosciuto come programma o file batch eseguibile da comandi interni o esterni '.

Questo perché Karma è stato installato localmente e non globalmente sul progetto su cui stai lavorando. Quindi, la shell del tuo sistema operativo non riesce a trovare l'applicazione Karma nelle impostazioni ambientali del percorso se stai usando Windows o nel file .bash_profile se stai usando Mac.

Per correggere questo errore, dobbiamo installare Karma a livello globale. Non solo Karma, ma il pacchetto specificamente progettato per abilitare l'uso di Karma dalla riga di comando che è Karma-cli. Esegui semplicemente il comando, 'Npm install -g karma-cli' .

Ora riesegui il comando karma-init e puoi vedere le domande come mostrato nella figura sotto. Quando rispondi a ciascuna domanda e premi il tasto 'INVIO', verrà visualizzata la domanda successiva.

Esecuzione del comando Karma init sulla riga di comando.

La tabella seguente ti fornirà un elenco delle domande, il loro significato insieme a quale dovrebbe essere la tua risposta nel contesto di questo tutorial.

Domande di Karma init

D # 1) Quale framework di test desideri utilizzare?

Spiegazione: Un framework di test è un pacchetto che fornisce le funzioni e le routine necessarie per automatizzare il processo di codifica dei test per qualsiasi prodotto software di un particolare linguaggio. Per esempio, jasmine e mocha stanno testando framework per pacchetti software JavaScript, Junit e JTest stanno testando framework per Java, controlla Questo per ulteriori dettagli.

Risposta: Viene visualizzata un'istruzione che ti chiede di usare la scheda per visualizzare altri framework di test disponibili per un'applicazione basata su nodi, ma per impostazione predefinita vedi jasmine, quindi fai semplicemente clic su Invio.

D # 2) Vuoi usare Require.js?

Spiegazione: Require.js è un file JavaScript e un caricatore di moduli. Forse ti starai chiedendo: perché hai bisogno di un caricatore di file o moduli? Leggere Questo

Risposta: Nel codice, scriveremo, non utilizzerei require.js, quindi rispondi semplicemente no. la domanda è: cosa useremmo? Per essere in grado di utilizzare le istruzioni require per portare file esterni in un altro file, abbiamo bisogno di un caricatore di moduli, quindi opteremo per Browserify. Vedrai più dettagli di seguito.

D # 3) Vuoi acquisire automaticamente i browser?

Spiegazione: Ricorda che il karma è uno strumento che ti aiuta a testare il tuo front-end su diversi browser, quindi, questa domanda è pensata per te per selezionare i browser che ti piacerebbe attivare ogni volta che esegui il test con karma start.

Risposta: Per questa lezione, seleziona chrome, firefox e phantomjs. La domanda è: cos'è PhantomJS? PhantomJS è un browser Web headless pensato per test di siti Web headless, acquisizione di schermate, automazione delle pagine e monitoraggio della rete, è possibile visualizzare i dettagli Qui .

Un'altra domanda, cos'è un browser Web senza testa? Un browser Web headless è un browser senza un'interfaccia utente grafica, i codici vengono eseguiti in un ambiente simile a una console.

D # 4) Qual è la posizione dei file sorgente e di prova?

Spiegazione: Questa domanda ha lo scopo di esporre il percorso in cui salverai i file front-end e i file di test che eseguiranno i test unitari su di essi.

Risposta: Per questo progetto, immettere public / js / *. Js per il percorso dei file di origine e test / * Spec.js per il percorso dei file di prova. * Spec.js indica che tutti i file di test possono essere chiamati qualsiasi cosa ma devono contenere Spec alla fine con un'estensione di file .js.

Q # 5) Qualcuno dei file inclusi nei pattern precedenti dovrebbe essere escluso?

Spiegazione: A volte, potrebbe essere necessario che determinati file sorgente e file di prova non vengano caricati, questa domanda ha lo scopo di specificare tali file che non devono essere caricati nel browser da Karma.

Risposta: Basta inserire una stringa vuota premendo Invio. Hai visto l'affermazione 'Puoi usare schemi glob, Per esempio, '** / *. Swp'. ’. I modelli globali vengono utilizzati per specificare un insieme di nomi di file in un ambiente simile a Unix utilizzando il carattere jolly.
Nel nostro caso, public / js / *. Js sta per qualsiasi file denominato qualsiasi set di caratteri come indicato da (*) e ha estensione .js e risiede nel percorso public / js. Per saperne di più Qui

D # 6) Vuoi che Karma guardi tutti i file ed esegua i test sulle modifiche?

Spiegazione: Quando un task runner / test runner guarda i tuoi file, significa semplicemente che ogni volta che modifichi i file durante lo sviluppo il test / task runner, ricarica il file o riesegue di nuovo la funzione sul file, senza che tu venga a chiedere manualmente per farlo di nuovo.

Risposta: Quindi rispondi semplicemente di sì.

Altri contenuti del file karma.conf.js.

# 1) basePath : Questa configurazione porta il nome di qualsiasi cartella che dovrebbe essere utilizzata per risolvere le informazioni sul percorso fornite per i file di test e di origine.

# 2) preprocessori : Porta il nome dei file di programma che dovrebbero essere utilizzati per elaborare i file sorgente e di prova prima di caricarli nel browser.

Perché è necessario?

Con l'avvento dello stile di codifica ES6 che non è ancora compreso dai browser, è necessario trasferire il codice dal formato ES6 a ES5 che il browser può comprendere, quindi è possibile specificare il preprocessore babel per Karma da utilizzare per il transpile codice da ES6 a ES5 prima di caricarlo nel browser.

Ci sono altri usi di un preprocessore, Per esempio. pubblicazione della copertura del test del codice su coveralls.io, vedere Qui per ulteriori dettagli.

# 3) giornalisti : Questa opzione di configurazione specifica il pacchetto da utilizzare per riportare i risultati del test. Ci sono diversi giornalisti che segnalano la copertura del test del codice; Per esempio. copertura. Ma, per impostazione predefinita, è impostato per avanzare. Nota che è un array, quindi puoi aggiungere anche altri giornalisti.

# 4) porta : Specifica la porta su cui viene eseguito il browser.

# 5) colori : Specifica se i giornalisti devono produrre i rapporti con i coloranti.

# 6) logLevel : Specifica il livello di registrazione. Per impostazione predefinita, è impostato su config.LOG_INFO, il che significa che vengono registrate solo le informazioni.

# 7) singleRun : Specifica se Karma deve uscire dopo aver eseguito il test una volta. Se impostato su true, Karma esegue il test ed esce con lo stato 0 o 1 a seconda che il test sia fallito o superato, altrimenti Karma non si ferma.

Questa configurazione è necessaria per scopi di test di integrazione continua utilizzando strumenti come TravisCI e CircleCI.

# 8) concorrenza : Specifica quanti browser Karma deve essere avviato contemporaneamente. Per impostazione predefinita, è impostato su infinito.

Clic Qui per informazioni dettagliate sulle opzioni di configurazione di Karma.

Se sei uno studente attento, allora, devi aver visto queste tre righe.

Cerchiamo di esplorare questo nella sezione sottostante.

Lanciatori del browser Karma

Karma-firefox-launcher, Karma-chrome-launcher e Karma-phantomjs-launcher possono essere generalmente definiti come i lanciatori del browser per Karma.

Karma ha bisogno di avviare queste applicazioni browser che sono indipendenti, quindi è necessaria un'applicazione di terze parti per fornire un'interfaccia a Karma per eseguire il comando shell che fa girare i browser in qualsiasi sistema operativo su cui Karma sta eseguendo un test.

Pertanto, sono i lanciatori del browser Karma rispettivamente per Firefox, Chrome e Phantomjs. Karma sta facendo apparire quelle affermazioni per informarci della sua incapacità di installare quei requisiti e poi ci chiede di installarlo da soli manualmente.

Per fare ciò, useremo il gestore di pacchetti del nodo ed eseguiremo questi comandi dalla riga di comando: npm installa Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Tutti noi dobbiamo avere browser Chrome e Firefox installati, con phantomjs non installato. Se è vero, allora devi installarlo, vedi Qui per i dettagli e fare clic Qui per una guida rapida.

Conclusione

In questo tutorial, abbiamo cercato di capire in cosa consistono i test di unità front-end. Abbiamo anche introdotto un importante strumento di test di unità front-end per il software JavaScript noto come Karma, che è uno strumento basato su nodi. Abbiamo anche presentato le opzioni di configurazione di base per il file Karma.conf.js e cosa implicano.

selenio webdriver intervista domande e risposte per pdf esperti

Asporto

• Il test unitario è una sorta di metodo di test del software in cui viene testata ogni parte individuale e indipendente del codice sorgente per determinare se è sufficientemente buona per l'uso.
• Quando eseguiamo questo unit test sul front-end (lato client) del software, è noto come unit test front-end.
• Karma è uno strumento di test basato su nodi che ti consente di testare i tuoi codici JavaScript su più browser reali. Quindi è definito come test runner.
• Nodejs è un JavaScript runtime asincrono basato su eventi che rende facile e possibile la creazione di applicazioni di rete scalabili.
• Il gestore di pacchetti del nodo (npm) è un gestore di pacchetti JavaScript utilizzato per l'installazione di altre applicazioni o moduli predefiniti basati su nodi che potresti voler riutilizzare nella tua applicazione.

Tutorial successivo

Karma da solo non può automatizzare i test di unità front-end delle applicazioni JavaScript, deve anche funzionare con altri strumenti di test come un framework di test che faciliterà la scrittura dei nostri casi di test.

Nel nostro prossimo tutorial, esploreremo Jasmine e il pacchetto Jasmine-Jquery che estende le funzionalità di Jasmine per essere in grado di testare dispositivi HTML che fanno uso della libreria JavaScript: Jquery.

Lettura consigliata

• 20 strumenti di unit test più popolari nel 2021
• La chiave per un test unitario di successo: in che modo gli sviluppatori testano il proprio codice?
• TOP 45 domande di intervista JavaScript con risposte dettagliate
• Tutorial AngularJS per principianti assoluti (con guida all'installazione)
• Differenza tra le versioni angolari: Angular Vs AngularJS
• Copertura dei test nei test del software (suggerimenti per massimizzare la copertura dei test)
• 48 principali domande e risposte per l'intervista di AngularJS (2021 LIST)
• Come configurare Node.js Testing Framework: Node.js Tutorial