Kariera it Sopot

Unit testy w aplikacjach webowych opartych na AngularJS
Unit testy w aplikacjach webowych
opartych na AngularJS

1 Wstęp
2 Rodzaje testów i ich granice
3 AngularJS
4 Dobre praktyki kodowania
5 Testy jednostkowe - powtórka
6 Warsztaty – aplikacja
7 Warsztaty – aplikacja
8 Warsztaty – testy
Agenda
9 Q&A
1

12.04.2014
Kariera IT
Sopot, Polska
Project Manager @ Neoteric
Mateusz Paprocki
Współzałożyciel @ Architekci Podróży

• Wdrażamy systemy, które się
opłacają
• Przewagą konkurencyjną jest
wysoka jakość
• Jakość wynika z rozsądnego
stosowania najlepszych praktyk
oraz inwestowaniu w rozwój ludzi
• Nie zatrudniamy code monkeys
3
O firmie

Techologie
co robimy
4

O firmie
jak działamy
5
Wylęgarnia projektów
Kreatywność
Jak
działamy
DVCS (Git)
Zaplecze finansowe
Odpowiedzialność i cel
CI (Jenkins)
Frontend (AngularJS)
Backend (Java)
Automatyzacja

Wstęp do testowania
6
Po co testować?
• Dowód, a nie przekonanie, że kod działa prawidłowo
• Dokumentacja działania – lepsza niż komentarze
• Pewność przy zmianach
• Konieczność pisania lepszego kodu – bardziej świadomy development
• Początek automatyzacji
• Lepsza współpraca w zespole
• Standard w lepszych firmach

7
Testowanie w JS
• Do niedawna trudne, pracochłonne i upierdliwe
• Dzisiaj łatwe, przyjazne i szybkie dzięki świetnym technologiom
• Uruchamianie testów przy zapisie pliku ze źródłem
• Uruchamianie testów na serwerze CI (Jenkins)
• Testy jednostkowe oraz testy integracyjne (nie testujemy backendu!)

8
Testy jednostkowe
„metoda testowania tworzonego oprogramowania poprzez wykonywanie
testów weryfikujących poprawność działania pojedynczych elementów
(jednostek) programu” (wikipedia).
• Różne ścieżki (przebiegi)
• Warunki brzegowe
• Wywołania funkcji (tak/nie)

9
Testy jednostkowe
• Świetnie nadają się do automatyzacji
• Wymagają małego nakładu pracy
• Mogą być napisane przed napisaniem testowanej funkcji (TDD)
• Dzięki Jasmine, składania jest naturalna i intuicyjna, zbliżona do
naturalnego języka („oczekiwania”)

10
Testy integracyjne
Polegają na testowaniu poprawnej współpracy modułów oraz systemów.
Skupiamy się nie na pojedynczych funkcjach, a na większych fragmentach
aplikacji.
• Współpraca modułów
• User stories
• Przykład pojedynczego testu: po poprawnym zalogowaniu, aplikacja
powinna wyświetlić listę zadań do zrobienia (user story) posortowaną
malejąco wg deadline’u.

11
Testy integracyjne
• „Drogie” do wytworzenia, jednak dalej warte pisania
• Oparte na interfejsie użytkownika
• Protractor to the rescue!

12
Testy akceptacyjne
• Black box testing – nie wiemy nic o implementacji aplikacji, testujemy tylko i
wyłącznie za pomocą interfejsów
• Sprawdzamy, czy aplikacja poprawnie wykonuje założone zadanie (logika
biznesowa, a nie to, czy poprawnie działa)
• Drogie w napisaniu i utrzymaniu – dedykowane środowisko testowe
• Często wykonywane manulanie

Zakres i granice testów
13
Testy jednostkowe
Testy integracyjne
Stopień skomplikowania testów
Testy
akceptacyjne
Koszty

Moduł 1
Moduł 2
Moduł 3
Moduł 4
Moduł 5
14
Test integracyjny 1
lub więcej modułów
Unit test pojedynczej funkcji
w ramach modułu
showLoader()

15
Testy akceptacyjne i manualne
App
Black box

AngularJS
16

AngularJS
17
Czym właściwie jest?
• Frameworkiem, dzięki któremu można bardzo szybko pisać zaawansowane
aplikacje
• Gotowy do tworzenia dużych, komercyjnych aplikacji
• Rozwijany przez Google
• Pozwala uczyć przeglądarki „nowych sztuczek” (nowe tagi HTML), czyniąc
kod bardziej deklaratywnym

AngularJS
18
Czym jest dla mnie?
• Nigdy nie lubiłem JS – dzięki Angularowi to się zmieniło
• Pozwala przenieść dobre praktyki z innych języków programowania
• Nieco trudny do nauki na początku, bardzo wydajny później

AngularJS
19
Superheroic JavaScript MVW Framework
• Czy AngularJS implementuje MVC?
„I hereby declare AngularJS to be MVWframework - Model-View-Whatever.
Where Whatever stands for "whatever works for you".”
Igor Minar

AngularJS
20
Kluczowe korzyści
• Data binding
• Podział na warstwy
• Dependency injection
• Modułowość
• Wsparcie dla Q (promises) – „zabija” callbacki
https://github.com/kriskowal/q

AngularJS
21
Kluczowe korzyści - testowanie
• Niespotykana prostota pisania i uruchamiania testów
• Mocks ($httpBackend, $q, Jasmine spyOn)
• PhantomJS – testowanie bez przeglądarki
• Wsparcie dla testów E2E - Protractor

AngularJS
22

AngularJS
23

AngularJS
24

AngularJS
25

Dobre praktyki
26
Jak pisać testowalny kod?
• Używać DI (Dependency Injection)
• AngularJS jest o to oparty
• Nie robić instancji obiektów w funkcji
• Nie pisać długich funkcji, które robią dużo rzeczy jednocześnie
• Nie produkować długich if’ów i switchy
• Pisać krótkie funkcje
• Używać modułów, services
• Protractor to the rescue!

Testy jednostkowe
27
Powtórka
• Będziemy testować pojedyncze funkcje różnych modułów
• Nie chcemy testować działania rzeczy, które dzieją się poza naszą funkcją
• Mocks!
• Chcemy przetestować różne scenariusze wywołania funkcji
• Zakończone sukcesem
• Zakończone porażką

Nie gryzę :)
Q&A

WARSZTATY - WYMAGANIA
29
• Znajomośd JS (to jest konieczne, z resztą sobie poradzimy)
• GIT
• Node (npm)
• Bower
• Grunt
• Linux
• URL: http://www.github.com/neoteric-eu/karierait-sopot

WARSZTATY - APLIKACJA
30
• Prosta lista TODO
• Local Storage
• Nie przejmujemy się modułem $System
• Uznajemy, że piszemy moduł Todo

Nie gryzę
Q&A

Kodujcie i testujcie :)
Dziękuję za uwagę

Odwiedź nas
Miszewskiego 16/5
80-239 Gdańsk
e-Mail
mpaprocki@neoteric.eu
rekrutacja@neoteric.eu
Zadzwoń
+48 602 557 952
KONTAKT
WEB
www.neoteric.eu
facebook.com/neoteric-eu

Kariera it Sopot

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (9)

Similar to Kariera it Sopot

Similar to Kariera it Sopot (20)

Kariera it Sopot