Dr. Bilicki Vilmos Szoftverfejlesztés Tanszék Angulartesztelés

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Angular tesztelés

Dr. Bilicki Vilmos

Szoftverfejlesztés Tanszék

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Az előző következő előadás

4 Angular Biztonság

■ Legjobb gyakorlat

■ Cross-site scripting (XSS)

■ Biztonsági kontextus

■ DOM közvetlen használata és szeparáció

■ Tartalom biztonsági szabályok

■ Offline sablon fordító

■ Szerver oldali XSS védelem

■ Biztonságos értékek

■ HTTP sérülékenységek

■ Auditálás

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

A előadás összefoglalója

■ CI

■ Tesztelés

■ Angular tesztelés

■ Jasmine

■ Karma

■ Protractor

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

CI – Continous Integration

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Tesztelés

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Tesztelés

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Angular tesztelés

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Elemek

4Jasmine

4Protractor

4Karma

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Jasmine

4 Suites — describe(string, function)

■ egy címet és egy egy vagy több spec-et tartalmazó függvényt kap.

4 Specs — it(string, function),

■ egy címet és egy vagy több elvárást tartalmaző függvény.

4 Expectations —igaz/hamis értéket kiértékelő elvárások.

■ pl:expect(actual).toBe(expected)

4 Matchers — Az egyes esetekere specializált kisegítő függvények.

■ pl: toBe(expected), toEqual(expected).

■ .toEqual() – mély összevetés,

.toBe() referencia összevetése.

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Karma

4 Különböző futtató környzetebe tudja a teszteket futtatni és kiértékelni

4 Általáben a megadott böngészőkhöz indít egy- egy webszerert

4 A böngészők vezérlése lehet

■ manuáis a Karma szevre adott protjára csatlakozva (általában http://localhost:9876/),

■ automatikusan a

Karma indításkor adott porthoz köti a

böngészőt

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Karma -működése

4 Indítás után betölti a megfelelő beépülő modulokat és elindítja a helyi webszerverét. A websocket-re várakozó böngészők azonnal

rácsatlakoznak (újracsatlakoznak). A teszt naplózók ezeket az eseményeket már rögzítik.

4 Megadott szám böngészőt indít átadva nekik a Karma szerver URL- jét

4 Amikor a böngésző csatlakozik akkor ‘client.html’ oldalt tölti le, ez az oldal csatlakozik websocketen a szerverhez.

■ Amikor a szerver látja a csatlkozásokat utasítja a kliens ezen a csatornán a tesztek végrehajtására:

■ A kliens letölti a ‘context.html’-t melybe egy iframe-t nyit

■ Ebbe van teszt keretrendszer adapter a tesztelendő kód és a tesztkód

4 Amikor a böngésző betölti a weboldalt az onload eseménykezelő csatlakozik a klienshez a postMessage segítségével

4 A teszt kererendszer ezután fogja lefuttetni a tesztet és elköldeni az eredményeket.

4 A böngésző és a szerver között webscoketen mennek át az üzenetek amelyket a szerver oldalon ‘böngésző’ üzenetként ad tövább a

jelentés készítőknek (adapter – reporte párok pl.: karma-jasmine and

karma-jasmine-reporter)

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Protractor

4 Egy Node.js

keretrendszer amely Selenium/Webdriver API-kat burkolja be 4 Egy absztrakciós

rétegként

egyszerűbbé teszi a web alkalmazások E2E tesztelését 4 A Selenium

Webdriver minden

elemét megvalósítja

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Jasmine

4Specs

4Expectations 4Matchers

4Setup and Teardown 4Spies

4Clock

4Asynchronous Support

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Specs, Expectation, Matching

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Setup and Teardown

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

This, fail

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Spies

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Clock

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Async/await

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Angular tesztelés

4Szolgáltatás tesztelés 4Osztály tesztelés

4TestBed

■ Komponens tesztelés

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Service Tests

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

TestBed

4Angular Unit tesztelés alapeszköze, csak angular környezetben használható

4Kombinálható más keretrendszerekkel (Jasmin, Karma)

4A DI segítségével angular könyvtár szinten kezeli a függőségeket

■ Mint fogyasztó erről nem kellene tudnunk (DI)

■ Mint szolgáltatás tesztelő az első szintű függőséegeket és a paraméterezést

kezelnünk kell

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

TestBed

4@NgModule-t emulálja egy egy dinamikusan öszerakott Angular test modul segítségével.

4A TestBed.configureTestin gModule() fogadja az

@NgModule paramétereit

4Adott szolgáltatás teszteléséhez a

providers tömböt kitöltjük

a mock vagy valós

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

TestBed és Spy

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Komponens tesztelés

4A komponesek nem, csak TS kódból állnak, adott futtató környezetük van.

■ HTML

■ TS

4Az ilyen teszteknél létre kell hozni host elemet a DOM-ban

4Meg kell vizsgálni az adott DOM elem hatását, együttműködését is más

elemekkel

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Komponens osztály tesztelése

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Komponens DOM tesztelés

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Automatikus változás detektálás

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Protractor

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Protractor

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

WebDriver vs. Protractor

WebDriver Syntax Protractor Syntax

webdriver.By by

browser.findElement(...) element(...) browser.findElements(...) element.all(...) browser.findElement(webdriver.By.css(...)) $(...)

browser.findElements(webdriver.By.css(...)) $$(...)

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Egyszerű teszt

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Komponensek elérése

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Locators

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Actions

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Több teszt

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Több böngésző

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

Több elem

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

A előadás összefoglalója

■ CI

■ Tesztelés

■ Angular tesztelés

■ Jasmine

■ Karma

■ Protractor

UNI V E R S IT Y OF S Z E GE D D epar tm ent of Sof tw ar e E ngi ne er ing UNI V E RS IT A S S CI E NT IA RUM S Z E G E DI E NS IS

A következő előadás

4Web háttérrendszerek