Vodič za Karmu: Ispitivanje prednje jedinice pomoću Karma Test Runnera

karma tutorial front end unit testing using karma test runner

Ovaj vodič objašnjava kako postaviti Karmu i automatizirati testiranje prednje jedinice pomoću Karme, osnovne mogućnosti konfiguracije za datoteku Karma.conf.js itd.:

Ovaj vodič objašnjava postupak automatizacije jedinstvenog testiranja prednjeg dijela softvera pomoću Karme i nekih s njim povezanih alata.

Započet ćemo s web aplikacijama razvijenim pomoću JavaScript biblioteke: ‘Jquery’ i JavaScript runtime: ‘NodeJS’; a kasnije ćemo razmotriti neke JavaScript okvire kao što su AngularJS i ReactJS.

=>DOLAZITE DO DOLJEda biste vidjeli čitav popis Tutorijala za Karmu

Što ćete naučiti:

• Popis vodiča za karmu
• Pregled Karma tutorijala u ovoj seriji
• Što je ispitivanje prednje jedinice?
• Što je Karma test trkač?
  • Kako Karma radi kao stručnjak?
• Što je NodeJS?
  • Što je Node Package Manager (Npm)?
• Kako instalirati Karmu?
  • Pregled mogućnosti konfiguracije datoteke Karma.conf.js
• Karma init Pitanja
  • Ostali sadržaj datoteke karma.conf.js
  • Pokretači preglednika Karma
• Zaključak
  • Preporučena literatura

Popis vodiča za karmu

Vodič br. 1: Vodič za Karmu: Ispitivanje prednje jedinice pomoću Karma Test Runnera
Vodič br. 2: Jasmine Framework Tutorial, uključujući Jasmine Jquery sa primjerima
Vodič br. 3: Uzorak projekta ispitivanja prednjih jedinica pomoću KARMA I JASMINE

Pregled Karma tutorijala u ovoj seriji

Što je ispitivanje prednje jedinice?

Prednji kraj svakog softverskog sustava jednostavno je sučelje na kojem korisnik pristupa svim funkcionalnostima koje pruža sustav. Da bi se zajamčilo najbolje korisničko iskustvo, potrebno je osigurati da su front-end programeri kodirali front-end imajući na umu sve korisničke zahtjeve.

Jedini način da se to primijeni je pisanje i izvršavanje testova preko razvojnih kodova. Isporuku treba prihvatiti kao kvalitetan prednji kod / značajku samo kada su svi ovi rezultati ispitivanja u statusu 'prolaznosti'.

Jedinstveno testiranje vrsta je softverske metode ispitivanja u kojoj se testira svaki pojedinačni i neovisni dio izvornog koda kako bi se utvrdilo je li dovoljno dobar za upotrebu.

Kad smo izvedite ovo jedinstveno testiranje na prednjoj strani (na strani klijenta) softvera, naziva se testiranje prednje jedinice. Suprotno od front-end testiranja je back-end testiranje (na strani poslužitelja).

Ispitivanje prednje jedinice može se provesti ručno ili automatski. Automatizirano testiranje front-end uređaja danas je u trendu jer je učinkovitije i štedi vrijeme. Postoje različiti alati koji su dostupni za testiranje prednjih uređaja na različitim programskim platformama.

AngularJS i ReactJS dva su popularna front-end JavaScript okvira, iako je ReactJS prilično nov.

Za provođenje jedinstvenog testiranja na aplikaciji koriste se prednji krajevi izgrađeni s ovim front-end okvirima ili čak oni izgrađeni bez okvira, određeni alati za automatizaciju kao Karma, mocha, Jasmine, vic, enzim itd.

Prvo bismo učili kako provoditi testiranje prednjih uređaja pomoću Karme i Jasmine, a zatim, kasnije, možemo pogledati i ostale alate.

Započet ćemo s izvođenjem front-end unit testova koristeći uređaje za front-end izrađene bez ikakvog JavaScript okvira za front-endove. Ukupno ćemo svoja učenja iz ove serije podijeliti u tri tutorijala.

U ovom prvom tutorialu pokušat ćemo shvatiti kako se postavlja Karma, drugi tutorial će detaljno objasniti Jasmine, konačno, u trećem tutorialu ćemo pogledati njegovu praktičnu primjenu.

Što je Karma test trkač?

Karma je testni alat zasnovan na čvorovima koji vam omogućuje testiranje JavaScript kodova u više stvarnih preglednika. Alat zasnovan na čvorovima je bilo koji alat kojem je potreban Nodejsov motor za njegovo pokretanje i može mu se pristupiti (instalirati) putem upravitelja paketa čvorova (npm).

Karma je alat koji naš testni razvoj čini brzim, zabavnim i lakim. Tehnički je nazvan test-trkačem. Ovdje je vrijedno spomenuti da je Karmu razvio Angular tim.

Kako Karma radi kao stručnjak?

Kao test trkačica, Karma radi tri važne stvari:

• Pokreće web poslužitelj i poslužuje vaše JavaScript izvorne i testne datoteke na tom poslužitelju.
• Učitava sve izvorne i testne datoteke ispravnim redoslijedom.
• Konačno, okreće preglednike za pokretanje testova.

Što još Karma može?

Osim gore navedenih funkcija Karme, postoji i nekoliko drugih stvari za koje se Karma može konfigurirati. Na primjer, objaviti pokrivenost test koda na kombinezon.io ; transpilirati kôd iz es6 formata u es5, spajajući više datoteka u jednu datoteku i generirajući izvorne karte.

U našim slijedećim vodičima vidjet ćemo kako neke od ovih stvari djeluju.

Zahtjevi za početak korištenja karme

Da biste započeli s Karmom, morate razumjeti NodeJS i Node manager paketa.

Što je NodeJS?

Nodejs rješava blokirajuću prirodu JavaScript asinkronih poziva, tj. Kada se asinhronoj funkciji pristupi u JavaScript-u, sprječava pokretanje ostalih dijelova koda dok se asinkroni poziv ne vrati. Međutim, s NodeJS-om mogu se uputiti asinkroni neblokirajući pozivi funkcija.

U tehničkom smislu, za NodeJS se može reći da je asinhroni JavaScript runtime upravljano događajima koji izgradnju i prilagodljive umrežene aplikacije čini jednostavnom i mogućom.

Početak rada s NodeJS-om

Pitanja i odgovori na poslovnom analitičaru

Jednostavno morate instalirati NodeJS framework. Sve što trebate je posjetiti njihov web stranica i, na temelju vašeg OS-a, morate preuzeti instalacijski program i slijediti upute na njihovoj web lokaciji o njegovoj instalaciji.

Što je Node Package Manager (Npm)?

Upravitelj paketa čvorova (npm) JavaScript je upravitelj paketa koji se koristi za instaliranje drugih unaprijed izgrađenih aplikacija ili modula temeljenih na čvorovima koje biste možda željeli ponovno koristiti u vlastitoj aplikaciji.

Npm se instalira kada instalirate NodeJS, ali npm se ažurira brže od čvora. Stoga možda postoji potreba da u nekom trenutku ažurirate svoj npm. Da biste instalirali najnoviju verziju npm, ovu naredbu morate pokrenuti iz naredbenog retka: npm instalirati npm @ najnovije -g

Gornja naredba ukazuje na to da tražite da OS ljuska izvrši aplikaciju npm, a aplikacija bi trebala izvršiti instalaciju paketa npm. @latest označava da treba instalirati najnoviju verziju paketa, -g opcija označava da paket treba instalirati globalno.

Više detalja o npm-u možete pronaći ovdje .

Ovdje treba spomenuti dvije važne stvari, tj. Instaliranje paketa s opcijama –save i –save-dev.

kako se koriste nizovi.sort u javi

Tijekom testiranja, bilo koji instalirani paket trebao bi se instalirati pomoću opcije –save-dev, tj. Uputiti upravitelja paketa da instalira paket kao razvojnu ovisnost, a ne kao ovisnost o projektu (kada koristim –save).

Ovisnost o razvoju treba odabrati jer taj paket nije potreban aplikaciji tijekom proizvodne faze, već je potreban samo tijekom razvojne faze u svrhu osiguranja kvalitete.

Kako instalirati Karmu?

Da biste započeli s Karmom, morate stvoriti mapu za projekt za koji ćete napisati unit testove. Možete ga nazvati 'basicUT'. Visual Studio Code koristim kao uređivač teksta, stoga preporučujem i vama da ga preuzmete i instalirate. Možete ga pronaći ovdje .

Otvorite prozor ugrađenog terminala Visual studija, kliknite na ‘Izbornik View’, a zatim odaberite integrirani podizbornik terminala.

U prozor terminala upišite 'npminit' kako je prikazano na donjoj slici. Ova vas naredba vodi do automatskog postavljanja datoteke 'package.json' koju mora imati svaka aplikacija temeljena na čvorovima.

Datoteka package.json pohranjuje podatke o vašoj aplikaciji, poput naziva, broja verzije, autora, ovisnosti o aplikaciji, razvojne ovisnosti, test naredbu ili skriptu i skriptu za pokretanje aplikacije ili izgradnju aplikacije u oblik koji se može pokrenuti.

Klik ovdje za više detalja o datoteci ‘package.json’.

Snimka zaslona inicijalizacije datoteke package.json pomoću npminit-a

Kao što je gore opisano, za instalaciju Karme potrebno je samo pokrenuti naredbu npm instalirajte Karma @ najnoviji –save-dev . Nadam se da sada možete protumačiti što ta naredba podrazumijeva.

Sada smo uspješno instalirali Karmu, što je sljedeće što trebate učiniti da biste koristili Karmu za testiranje prednje jedinice?

Sve što trebate je napisati konfiguracijsku datoteku za nju, a datoteka se obično naziva Karma.conf.js za JavaScript. Međutim, za CoffeeScript je drugačije. Klik ovdje kako biste istražili više o konfiguracijskoj datoteci Karma.

Pregled mogućnosti konfiguracije datoteke Karma.conf.js

Konfiguracijska datoteka Karma.conf.js trebala bi sadržavati upute za postavljanje koje Karma mora slijediti za obavljanje tri važne funkcije Karme.

Ova konfiguracijska datoteka može se stvoriti ručno ili automatski pomoću naredbe: ‘karma init’, koja počinje prikazivati ​​različita pitanja na koja trebate odgovoriti, a Karma koristi odgovore koje navedete za postavljanje konfiguracijske datoteke.

Već biste otkrili da pokretanje naredbe: 'karma init' daje pogrešku ' ‘Karma’ nije prepoznata kao interni ili eksterni program ili batch datoteka koji se mogu upravljati naredbama '.

To je zato što je Karma instalirana lokalno, a ne globalno na projektu na kojem radite. Dakle, ljuska vašeg operativnog sustava ne može pronaći aplikaciju Karma u postavkama okruženja za put ako koristite Windows ili u datoteci .bash_profile ako koristite Mac.

Da bismo ispravili ovu pogrešku, Karmu moramo instalirati globalno. Ne samo Karma, već i paket posebno dizajniran da omogući upotrebu Karme u naredbenom retku koji je Karma-cli. Jednostavno pokrenite naredbu, ′ Npm instaliraj -g karma-cli ' .

Sada ponovo pokrenite naredbu karma-init i možete vidjeti pitanja kao što je prikazano na donjoj slici. Kad odgovorite na svako pitanje i pritisnete tipku 'ENTER', pojavit će se sljedeće pitanje.

Pokretanje Karma init naredbe na naredbenom retku.

Tablica u nastavku dat će vam popis pitanja, njihovo značenje, kao i odgovor koji biste trebali imati u kontekstu ovog vodiča.

Karma init Pitanja

P # 1) Koji okvir za testiranje želite koristiti?

Obrazloženje: Okvir za testiranje paket je koji pruža funkcije i rutine potrebne za automatizaciju procesa kodiranja testova za bilo koji softverski proizvod određenog jezika. Na primjer, jasmin i mocha testiraju okvire za programske pakete JavaScript, Junit i JTest testiraju okvire za Javu, provjerite ovaj za više detalja.

Odgovor: Pojavljuje se uputa u kojoj se traži da koristite karticu za prikaz ostalih dostupnih okvira za testiranje za aplikaciju zasnovanu na čvorovima, ali prema zadanim postavkama vidite jasmin, pa jednostavno pritisnite enter.

P # 2) Želite li koristiti Require.js?

Obrazloženje: Require.js je učitavač JavaScript datoteke i modula. Možda se pitate: zašto vam treba datoteka za učitavanje datoteka ili modula? Čitati ovaj

Odgovor: U kodu ćemo pisati, ne bih koristio require.js, zato jednostavno odgovorite ne. pitanje je što bismo koristili? Da bismo mogli koristiti naredbe require za unošenje vanjskih datoteka u drugu datoteku, potreban nam je loader modula, pa bismo se odlučili za Browserify. Više detalja vidjet ćete u nastavku.

P # 3) Želite li automatski snimiti bilo koji preglednik?

Obrazloženje: Sjetite se da je karma alat koji vam pomaže testirati svoj front-end u različitim preglednicima, stoga je ovo pitanje namijenjeno vama da odaberete preglednike koje biste voljeli okretati kad god pokrenete test s karma startom.

Odgovor: Za ovu lekciju odaberite chrome, firefox i phantomjs. Sad se postavlja pitanje što je PhantomJS? PhantomJS je web-preglednik bez glave koji je namijenjen testiranju web-mjesta bez glave, snimanju zaslona, ​​automatizaciji stranica i nadgledanju mreže, možete vidjeti detalje ovdje .

Još jedno pitanje, što je web-preglednik bez glave? Web-preglednik bez glave je preglednik bez grafičkog korisničkog sučelja, kodovi se izvršavaju u okruženju nalik konzoli.

P # 4) Na kojem se mjestu nalaze vaše izvorne i testne datoteke?

Obrazloženje: Ovo je pitanje namijenjeno izlaganju puta na kojem ćete spremiti prednje datoteke i testne datoteke koje će na njima izvršiti Unit testiranje.

Odgovor: Za ovaj projekt unesite public / js / *. Js za put izvornih datoteka i test / * Spec.js za put testnih datoteka. * Spec.js označava da se sve testne datoteke mogu nazvati bilo kako, ali na kraju moraju sadržavati Spec s nastavkom .js datoteke.

P # 5) Treba li izuzeti bilo koju datoteku obuhvaćenu prethodnim uzorcima?

Obrazloženje: Ponekad može postojati potreba da se određene izvorne datoteke i testne datoteke ne učitavaju, ovo je pitanje namijenjeno vama da odredite takve datoteke koje Karma ne bi trebala učitati u preglednik.

Odgovor: Jednostavno unesite prazan niz pritiskom na enter. Jeste li vidjeli izjavu 'Možete koristiti glob uzorke, Na primjer, '** / *. Swp'. '. Glob obrasci koriste se za određivanje skupa naziva datoteka u Unix-sličnom okruženju pomoću zamjenskog znaka.
U našem slučaju, public / js / *. Js označava bilo koju datoteku imenovanu bilo kojim skupom znakova kako je naznačeno (*) i ima ekstenziju datoteke .js i nalazi se na stazi public / js. Čitaj više ovdje

P # 6) Želite li da Karma gleda sve datoteke i pokreće testove o promjeni?

Obrazloženje: Kada pokretač zadataka / testa gleda vaše datoteke, sve to jednostavno znači da kad god uređujete datoteke tijekom razvoja, pokretač testa / zadatka ponovno učitava datoteku ili ponovno izvodi svoju funkciju na datoteci, a da ne dođete ručno tražiti to ponoviti.

Odgovor: Dakle, jednostavno odgovorite da.

Ostali sadržaj datoteke karma.conf.js

# 1) basePath : Ova konfiguracija nosi ime bilo koje mape koja bi se trebala koristiti za rješavanje podataka o putu koji se pružaju za testne i izvorne datoteke.

# 2) pretprocesori : Ovo nosi naziv programskih datoteka koje bi trebale biti korištene za obradu izvornih i testnih datoteka prije nego što ih se učita u preglednik.

Zašto je to potrebno?

Pojavom stila ES6 kodiranja koji preglednici još ne razumiju, postoji potreba za transpiliranjem koda iz ES6 formata u ES5 koji preglednik može razumjeti, stoga se može odrediti babel pretprocesor za Karmu koji će se koristiti za transpiliranje kod od ES6 do ES5 prije nego što ga učitate u preglednik.

Postoje i druge namjene pretprocesora, Npr. objavljivanje izvještaja o ispitivanju koda na coveralls.io, vidi ovdje za više detalja.

# 3) izvjestitelji : Ova opcija konfiguracije navodi paket koji će se koristiti za izvještavanje o rezultatima ispitivanja. Postoji nekoliko izvjestitelja za izvještavanje o pokrivanju testova koda; Npr. pokrivenost. No, prema zadanim postavkama postavljeno je da napreduje. Imajte na umu da je to niz, stoga možete dodati i druge novinare.

# 4) luka : Ovo određuje priključak na kojem se preglednik okreće.

# 5) boje : Određuje da li bi izvjestitelji trebali izrađivati ​​izvještaje s bojama.

# 6) logLevel : Ovo određuje razinu bilježenja. Prema zadanim postavkama postavljeno je na config.LOG_INFO, što znači da se bilježe samo podaci.

# 7) singleRun : Ovo određuje treba li Karma izaći nakon što je jednom izvršila test. Ako se postavi na true, Karma pokreće test i izlazi sa statusom 0 ili 1, ovisno o tome je li test neuspješan ili položen, inače Karma ne prestaje.

Ova je konfiguracija potrebna za potrebe kontinuiranog testiranja integracije pomoću alata poput TravisCI i CircleCI.

kako otvoriti datoteku ključa u sustavu Windows -

# 8) istodobnost : Ovo određuje koliko preglednika Karma treba istodobno pokrenuti. Prema zadanim postavkama postavljeno je na beskonačnost.

Klik ovdje za detaljne informacije o Karma konfiguracijskim opcijama.

Ako ste promatrački učenik, onda ste sigurno vidjeli ove tri linije.

Istražimo to u donjem odjeljku.

Pokretači preglednika Karma

Karma-firefox-launcher, Karma-chrome-launcher i Karma-phantomjs-launcher mogu se općenito nazvati pokretačima preglednika za Karmu.

Karma mora okretati ove nezavisne programe preglednika, pa je aplikacija treće strane potrebna za pružanje sučelja Karmi za pokretanje naredbe ljuske koja okreće preglednike u bilo kojem operativnom sustavu na kojem Karma provodi test.

Dakle, oni su pokretači preglednika Karma za firefox, chrome i phantomjs. Karma iskače te izjave kako bi nas obavijestila o svojoj nemogućnosti da instalira te zahtjeve, a zatim traži da ih sami instaliramo ručno.

Da bismo to učinili, upotrijebit ćemo upravitelj paketa čvorova i iz naredbenog retka pokrenuti ove naredbe: npm instalirati Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Svi mi moramo imati instalirane Chrome i Firefox preglednike, a phantomjs nije instaliran. Ako je to istina, onda je trebate instalirati, vidite ovdje za detalje i kliknite ovdje za brzi vodič.

Zaključak

U ovom uputstvu pokušali smo shvatiti o čemu se radi u testiranju prednjih uređaja. Također smo predstavili glavni prednji alat za testiranje jedinica za JavaScript softver poznat kao Karma, alata koji se temelji na čvorovima. Također smo predstavili osnovne mogućnosti konfiguracije datoteke Karma.conf.js i što sve one podrazumijevaju.

Za poneti

• Jedinstveno testiranje vrsta je softverske metode ispitivanja u kojoj se ispituje svaki pojedinačni i neovisni dio izvornog koda kako bi se utvrdilo je li dovoljno dobar za upotrebu.
• Kada ovo jedinstveno testiranje provodimo na front-end (na strani klijenta) softvera, poznato je kao front-end unit testing.
• Karma je testni alat zasnovan na čvorovima koji vam omogućuje testiranje JavaScript kodova u više stvarnih preglednika. Stoga je nazvan test-trkačem.
• Nodejs je asinkroni JavaScript izvedbe vođen događajima koji čini izgradnju i prilagodljive umrežene aplikacije jednostavnim i mogućim.
• Upravitelj paketa čvorova (npm) JavaScript je upravitelj paketa koji se koristi za instaliranje drugih unaprijed izgrađenih aplikacija ili modula temeljenih na čvorovima koje biste možda željeli ponovno koristiti u vlastitoj aplikaciji.

Sljedeći vodič

Karma sama ne može automatizirati front-end jedinstveno testiranje JavaScript aplikacija, ona također mora raditi s drugim alatima za testiranje, poput okvira za testiranje koji će olakšati pisanje naših test slučajeva.

U našem nadolazećem vodiču istražit ćemo o Jasmineu i paketu Jasmine-Jquery koji proširuje funkcionalnost Jasmine kako bi mogao testirati HTML uređaje koji koriste JavaScript biblioteku: Jquery.

Preporučena literatura

• 20 najpopularnijih alata za jedinstveno testiranje 2021. godine
• Ključ uspješnog jediničnog testiranja - kako programeri testiraju vlastiti kôd?
• TOP 45 JavaScript intervjua s detaljnim odgovorima
• Vodič za apsolutne početnike AngularJS (s Vodičem za instalaciju)
• Razlika između vertikalnih inačica: Angular Vs AngularJS
• Test pokrivenost u testiranju softvera (savjeti za maksimiziranje pokrivenosti testiranjem)
• 48 najčešćih pitanja i odgovora za intervju za AngularJS (POPIS 2021)
• Kako postaviti okvir za testiranje Node.js: Vodič za Node.js