Testiranje u JavaScriptu
Potrebno
- bash terminal
- Git
- Node i npm
- osnove HTML-a, CSS-a i JS-a
- sve ok? možemo dalje?
Testiranje
- prvenstveno pomaže vama samima
- stabilnija aplikacija = ušteda vremena
(i živaca, i novaca...)
(automatizirano)
Testiranje u frontendu
- nerijetko pada u drugi plan
("to ćemo kasnije") - donedavno je bilo znatno teže
- (primjer: horizontal scroll)
Vrste testova
- unit testovi
- end-to-end testovi
Unit testovi
- testiraju pojedine dijelove aplikacije u izolaciji
- funkcije, klase, komponente...
- odvijaju se u Node.js-u
matcher
Assertion
const actual = getCurrentYear()
const expected = 2022
expect(actual).toBe(expected)- kompatibilan s Jestom
- ali puno brži 💨
- izvršava sve *.test.js fileove
- + jsdom = (ograničena) podrška za DOM
Zadatak!
🧑💻
👩🏻💻
👩💻
👩🏼💻
👨🏻💻
👨🏽💻
Prvi dio: setup
- napravi novi projekt "kodiraonica-testiranje"
- inicijaliziraj ga kao Git repozitorij ("git init")
- stavi node_modules u .gitignore
- kreiraj package.json koji ima
{ "private": true, "type": "module" } - npm install vitest
Napomena!
Sada kad smo u { "type": "module" } moramo
dodati ekstenziju kad importamo
import { ... } from './api' // won't work!
import { ... } from './api.js' // works!Drugi dio: testiranje
- kreiraj app/api.test.js
- napiši test za (još nepostojeći) isPasswordValid
- isPasswordValid mora vraćati false ako je password:
- kraći od 6 znakova ili
- nema barem jedno veliko slovo ili
- nema barem jedno malo slovo ili
- nema barem jedan broj
- isPasswordValid mora vraćati false ako je password:
- npx vitest run ❌
Treći dio: implementacija
- kreiraj app/api.js
- implementiraj i exportaj isPasswordValid
- hint 🤫 regularni izrazi imaju metodu .test()
Gotov_a?
npx vitest run ✅
Bonus prednost
- veća šansa da vam (brže) mergaju pull request
- (primjer: rehype-pretty-code)
Pauza? ⏱ 🥪 ☕️
End-to-end testovi
- cilj im je testirati korisničko iskustvo
- odvijaju se u browseru
- sporiji 🐌 ali moćniji 💪
Čemu E2E testovi?
- za probleme koje unit testovi ne mogu uhvatiti
- Node.js + jsdom ≠ browser
- jsdom je samo imitacija
- cross-browser support, responsive dizajn, dark mode, layout...
- (nekompatibilna) alternativa Cypressu
- puno brži 💨
- izvršava sve *.test.js fileove, kao i Vitest 😅
- meni osobno je:
- API više developer-friendly
- bolja dokumentacija
Zadatak!
🧑💻
👩🏻💻
👩💻
👩🏼💻
👨🏻💻
👨🏽💻
Prvi dio: implementacija
- kreiraj app/index.html
- npx live-server app
- dodajte password field i gumb "Provjeri" koji provjerava je li password validan (isPasswordValid)
- ovisno o rezultatu pokazuje success ili error message
Drugi dio: setup
- npm init playwright
- odaberi JavaScript
- odaberi folder "e2e"
- odbij GitHub Actions workflow (samo Enter)
- u playright.config.js
- promijeni "require" i "module.exports" u import i export sintaksu
- specificirajte da Vitest traži samo unutar "app"
Treći dio: testiranje
- kreiraj e2e/home-page.test.js
- testiraj validaciju passworda, success i error message
- hint 🤫
- await locator.fill("...")
- await locator.click()
- await expect(locator).toHaveText("...")
- hint 🤫
Gotov_a?
npx playwright test
Bonus content
import remote
Kamo dalje?
- Kent C. Dodds — postovi o testiranju
- React Testing Library
- Cypress Testing Library
Testiranje u JavaScriptu
By Matija Marohnić
