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)

Vitest

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
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...

Playwright

(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
1. odaberi JavaScript
2. odaberi folder "e2e"
3. 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("...")

Gotov_a?

npx playwright test

Bonus content

import remote

Kamo dalje?