de Gregory Beaver

Taming Karma, SauceLabs și Internet Explorer: o călătorie dezvăluită

Taming Karma SauceLabs si Internet Explorer o calatorie dezvaluita
Succes! Toate browserele ne aparțin

Părea destul de simplu.

Doar configurați karma cu TravisCI pentru a efectua teste SauceLabs așa că pot fi sigur că codul meu nu rupe internetul când Bunică șterge pânzele de păianjen și declanșează Internet Explorer pentru a naviga la un site care folosește codul meu.

La început, se părea că cea mai grea provocare ar fi înființarea karma.conf.js. Proiectul meu, reacție-selecție-hoc, este o componentă React care permite selectarea oricărei liste de lucruri folosind Componente de ordin superior. Pe scurt, vreau să mă asigur că funcționează pe fiecare browser pe care ar putea funcționa.

Proiectul este scris în ES6 și JSX, deci pentru ca karma să funcționeze, trebuia cumva să împachetez codul într-un mod în care babel să-l poată converti în es5. Acest lucru sa dovedit a fi mult mai greu decât mă așteptam. În cele din urmă, am găsit soluția în felul în care react-big-calendar îl gestionează, prin ambalarea testelor cu pluginul karma-webpack. Acest lucru a funcționat fabulos cu browserul Chrome local. Terminat!

Pasul următor: configurați SauceLabs. Notă: am luat în considerare utilizarea BrowserStack, care este atât de sexy și cel mai bun lucru vreodată pentru testarea manuală, dar testele automate au unele limitări care au însemnat că suita de teste a funcționat cu 10-15 minute mai lent decât SauceLabs. Unele dintre acestea erau contul gratuit limitat, altele sunt concepute, dar în cele din urmă SauceLabs funcționează mai bine pentru nevoile mele. Dacă aș fi sursă închisă cu mega-dolari, aș merge probabil cu BrowserStack, dar asta nu este nici aici, nici acolo.

Configurarea SauceLabs este dificilă. Nu pentru că este greu, ci pentru că documentația este împrăștiată în tot universul. Configuratorul pentru SauceLabs este depășit, dar prin triangularea cu lista platformelor, este posibil să creați o serie de browsere care să funcționeze.

În plus, am vrut să pot dezvolta rapid un test local, folosind funcția de monitorizare automată a karmei, un fel de reîncărcare a modulului fierbinte pentru testare. Modul în care am rezolvat acest lucru inițial a fost să folosesc o comandă separată pentru testarea locală, care trece o variabilă de mediu în karma care face ca acesta să folosească doar browserul Chrome local cu singleRun setat la fals. Dezactivați variabila de mediu QUICKTEST și se conectează la saucelab. Desigur, trebuie să-mi amintesc să încep tunelurile de conectare la farfurii și nu ar trebui să uitați acest lucru atunci când rulați propria configurare.

Scurtă poveste, iată prima configurare de lucru pe care am folosit-o! Totul părea bine până …

Purgatoriul începe

O parte din obiectivul meu cu testele unitare pentru react-selection-hoc este să mă asigur că sunt testate și contabilizate ciudățile browserului, astfel încât orice contribuții să aibă un cadru de testare pentru a se asigura că nu încalcă instalarea altcuiva. Codul folosește doar câteva funcții de măsurare specifice DOM pentru a determina dacă un clic / atingere sau un mouse / deget deget este peste un element selectabil sau nu. Ar trebui să fie simplu să le testați nu?

Pentru a testa aceste lucruri simple în toate browserele în mod autentic, pentru a verifica cu adevărat corectitudinea codului, înseamnă modificarea DOM și apoi interogarea acestuia. Datorită modului în care funcționează Karma, acest lucru înseamnă că mediul de testare real este modificat, de unde intrăm în purgatoriu în această poveste.

Datorită modului în care funcționează Karma, acest lucru înseamnă că mediul de testare real este modificat, de unde intrăm în purgatoriu în această poveste.

La început, lucrurile păreau grozave. Am găsit cazuri de margine care nu funcționau în iOS și Internet Explorer, le-am remediat și am trecut la alte lucruri. Apoi, am început să observ testele care au eșuat aleatoriu și care au funcționat înainte.

Dar cea mai rea parte a fost când am efectuat testele IE izolat, adică numai pe Internet Explorer și Edge, toate au trecut. Fiecare. singur. timp.

Deci, pentru a remedia acest lucru, am încercat mai întâi să pun codul de manipulare DOM în propriile blocuri de descriere, cu cod înainte / după pentru a configura manipularea. Nicio imbunatatire. Apoi, am încercat să setez useIframes la false, ceea ce îi spune lui Karma să ruleze testele într-o fereastră separată. Acest lucru a funcționat excelent pentru Internet Explorer, dar a spart fiecare browser mobil și m-a lăsat într-o baltă de disperare.

Apare soluția sau nirvana

Momentul iluminării a venit în sfârșit astăzi. Din capriciu, am decis să văd ce se va întâmpla dacă aș rula 2 runde secvențiale de karma cu același ID de construcție pentru saucelabs. Spre bucuria mea, SauceLabs a grupat ascultător toate testele. Așadar, am refactorizat toate fișierele mele de configurare karma, am eliminat soluția bazată pe variabile de mediu și am ajuns la această soluție perfectă și funcțională:

În package.json, tot ce am nevoie pentru a rula toate testele este:

"test": "karma start karma.noie.conf.js && karma start karma.ie.conf.js",

Sper că acest lucru va rezolva enigma altcuiva. Karma + SauceLabs este o modalitate fantastică de a testa atât codul la nivel înalt, cât și ipotezele la nivel foarte scăzut despre modul în care funcționează browserele pentru a se asigura că urmăritorul de probleme nu se va umple cu erori enervante care ar trebui să fie testate.

Testare fericită!