TL;DR;

Aj 1 test je lepší ako žiadny test. Používajte aspoň end to end testy, unit testy si vyžadujú viac skillu. Odporúčam Cypress ale pokojne si vyberte, čo vám vyhovuje viac. Hlavne si vyberte a testujte.

Porovnanie testovacích frameworkov

Nechce sa mi porovnávať testovacie frameworky, tie si vie každý vygoogliť a beztak má kadžý iné preferencie. Najdôležitejším kritériom pre nás bola jednoduchosť. Väčšinu programátorov odrádza zložitý setup testovacích frameworkov, aby si vedeli otestovať ich prvý use-case. Príklady, ktoré uvádzajú frameworky, sú väčšinou jednoduché "assertions". Avšak tie na reálne prípady nepostačujú. Čo sa týka end-to-end testov, najznámejšie sú tieto frameworky (s počtom "stars" na GitHube k 21. decembru 2018):

• Selenium (12k)
• Cypress (9k) - toto je náš víťaz
• Nighwatch (8.8k)
• Protractor (8k)
• CasperJS (7k)
• TestCafe (5.9k)
• CodeceptJS (2k)

TDD - Test Driven Development

Ak už ste sa rozhodli zapojiť testy do vášho workflowu, je dobré písať testy pred tým, než začnete programovať. Ak máte totiž implementáciu skôr ako testy, ste už ovplyvnení vašim testovacím zmýšlaním a testy píšete voči už existujúcej funkcionalite, ktorú ste sami písali. Je teda ťažšie odhaliť prípadné chyby. Takisto sa môže stať, že vás čakajú ďalšie úlohy, a tak testy odkladáte, odfláknete, alebo nenapíšete vôbec.

Dobrým zvykom je každý hlásený bug najprv zapísať ako testovací scenár. Test by mal najprv padnúť a až potom by sa malo začat pracovať na fixnutí bugu.

Pokrytie testov nemusí byť 100%. Keď budete mať pokrytých 80%, ste úplne super. 90% je výborné, ale 100% je zbytočný luxus, kde čas investovaný do testovania už nemá takú pridanú hodnotu. Každopádne, každá aplikácia si zaslúží testy. Testy nútia programátorov programovať tak, aby bolo napísať test jednoduché. Pru unit testingu obzvlášť. Dnes si však povieme hlavne o end-to-end testingu.

Unit testing, End-to-end tesing, A/B testing ...

Testovacích prístupov je mnoho. V rýchlosti si vysvetlíme, o čom tu budem rozprávať. 

Unit testing

Pojem Unit testing v kontexte informačných technológií označuje automatické testovanie a overovanie fungovania a korektnosti implementácií systému. Unit testing zahŕňa nástroje, metodiku a činnosť, ktorej cieľom je overovanie správnej funkčnosti menších častí alebo jednotiek zdrojového kódu.

V skratke - Unit testing používame, ak testujeme jednotlivé časti kódu (funkcie, komponenty, atď).

End-to-end testing

End-to-end testing je metodológia používaná na testovanie určitého používateľského scenára, či sa aplikácia správa správne od začiatku po koniec. Cieľom end-to-end testingu je idetifikácia systémových závislostí a či sa rôzne komponenty (systémy) správajú (komunikujú) správne.

V skratke End-to-end testing používame, ak testujeme správanie systému pre konkrétny používateľský scenár.

Cypress za 10 minút

Cypress sme si obľúbili hlavne kvôli rýchlosti nasadenia do projektu, jenoduchosti a kvalitnej dokumentácii.

Inštalácia

Či už yarn alebo npm, o ktorom som básnil aj v minulom článku, postup je klasika:

yarn add cypress —dev

alebo

npm install cypress —save-dev

Cypress spustíte príkazom:

cypress open

otovrí sa vám Cypress Test Runner. V ňom spustíte jednotlivé testy v prehliadači (momentálne je podporovaný Chrome, ale pracuje sa aj na Firefoxe, neskôr možno aj starý dobrý IE). Ak chcete zbehnúť testy len v konzole, tak použijete príkaz:

cypress run

Cypress vytvorí automaticky súbor cypress.json a priečinok cypress/ s príkladmi testov.

Konfiguračný súbor cypress.json nastavíme jednoducho:

• baseUrl - url, kde bude bežať vaša aplikácia
• video - po každom fail teste cypress spraví video záznam … whaaat! to nám však teraz netreba, tak to vypneme

ďalšie nastavenia si nájdete v dokumentácii.

cypress.json

{
    "baseUrl": "http://localhost:3000",
    "video": false
}

Kde sú testy?!

Konečne prichádzame k reálnym testom. V roote projektu nám cypress vytvoril priečinok cypress, ktorý obsahuje:

• cypress/fixtures
• cypress/integration
• cypress/plugins
• cypress/support

Ďalšie priečinky vytvorí cypress, keď test neprejde. Obsahujú screenshoty a videá so stavom aplikácie v momente failnutia testu:

• cypress/screenshots
• cypress/videos

Receptov na testovacie scenáre nájdete neúrekom na stránke Cypress.

Testy spustíte klikom na Run all specs, prípadne na konkrétny *.spec.js súbor.

Detaily, ako písať a organizovať testy, si viete prečítať na stránkach cypress.io . Preto prejdem len k zaujímavím častiam.

Syntax a príkazy

Cypress využíva knižnicu Chai s rozšíreniami Sinon a jQuery. Príkazov je dosť na pokrytie takmer všetkých use-caseov používateľov. Navyše cypress umožnuje pomocou API vytvoriť aj vlastné príkazy, ktoré vedia uľahčiť testovanie. Vlastné príkazy si vytvoríme v priečinku cypress/support. S pomocou dokumentácie a googlu sa teda testy píšu veľmi rýchlo a jednoducho.

Fixtures a mockovanie

Priečinok cypress/fixtures obsahuje súbory, ktoré sa používaju pri mockovaní. Namiesto toho, aby ste počas testov vždy prevolával nejaký endpoint na BE alebo pracovali s reálnymi dátami, si viete práve v tomto priečinku vytvoriť testovacie dáta, ktoré bude cypress ponúkať ako odpoveď vo volaniach vašej aplikácie.

Rýchla ukážka:

cypress/fixtures/user.json

[
    { id: 1, name: 'Peter', },
    { id: 2, name: 'Zombi', }
] 

V testoch potom poviete cypressu, aby pri volaní endpointu http://localhost:3000/api/v1/users použil dáta z JSON súboru a neprevolával tak reálnu API. V browser testoch označí cypress tento request ako XHR STUB.

...
cy.server()
cy.route('/api/v1/users', 'fx:users')
...

Prečo Cypress?

Cypress je celkom nový testovací framework ale za posledný rok získal veľkú popularitu a predbehol väčšinu testovacích frameworkov. Za to podľa mňa môže hlavne jednoduchá a rýchla implementácia a dobrá dokumentácia s hromadou užitočných príkladov. Trošku chýba podpora testovania aj pre iné prehliadače, keďže momentálne cypress funguje hlavne pre Chrome, ale do budúcnosti plánuje podporovať aj iné prehliadače.

Keďže si fičíme na Vue a Vue CLI od verzie 3.0 pridalo podporu pre Cypress, nie je o čom. Viacmenej som sa k Cypressu dostal práve kvôli tomu, že Vue pridalo cypress do e2e testov k predchádzajúcemu Nightwatch.

Na záver už len spomeniem, že mi pri písaní a štúdiu pomohlo mnoho zdrojov, z ktorých určite stoja za pozornosť tieto:

Cypress
Lear TDD in Vue
Test Driven Development in Vue with Cypress by Josh Justice
Testing The Way It Should Be (aka Intro Into Cypress)
Brian Mann – I see your point, but… (Part 1)

Ďakujem za pozornosť, nech vám všetky testy prejdú.