Kariera it Sopot

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

2


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

4

O firmie


Techologieco robimy

5


O firmiejak działamy

6

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

7

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



8

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!)



9

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)



10

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”)



11

Testy integracyjnePolegają 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.



12

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



13

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

14

Testy jednostkowe

Testy integracyjne

Stopień skomplikowania testów

Testyakceptacyjne

Kosz

ty


Moduł 1

Moduł 2

Moduł 3

Moduł 4

Moduł 5


15

Test integracyjny 1lub więcej modułów

Unit test pojedynczej funkcjiw ramach modułu

showLoader()



16

Testy akceptacyjne i manualne

App Black box


AngularJS

17


AngularJS

18

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

19

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

20

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

21

Kluczowe korzyści• Data binding• Podział na warstwy• Dependency injection• Modułowość• Wsparcie dla Q (promises) – „zabija” callbacki

https://github.com/kriskowal/q




AngularJS

22

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

23


AngularJS

24


AngularJS

25


AngularJS

26


Dobre praktyki

27

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

28

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

30

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

http://www.github.com/neoteric-eu/karierait-sopot

http://www.github.com/neoteric-eu/karierait-sopot


WARSZTATY - APLIKACJA

31

• 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/580-239 Gdańsk

e-Mail

[email protected]@neoteric.eu

Zadzwoń

+48 602 557 952

KONTAKT

WEB

www.neoteric.eufacebook.com/neoteric-eu

Software

Kariera it Sopot