Kariera it Sopot

Unit testy w aplikacjach webowych opartych na AngularJS

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

2

Unit testy w aplikacjach webowych opartych na AngularJS

12.04.2014

Kariera IT

Sopot, Polska

Project Manager @ Neoteric

Mateusz Paprocki

Współzałożyciel @ Architekci Podróży

Unit testy w aplikacjach webowych opartych na AngularJS

• 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

Unit testy w aplikacjach webowych opartych na AngularJS

Techologieco robimy

5

Unit testy w aplikacjach webowych opartych na AngularJS

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

Unit testy w aplikacjach webowych opartych na AngularJS

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

Unit testy w aplikacjach webowych opartych na AngularJS

Wstęp do testowania

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

Unit testy w aplikacjach webowych opartych na AngularJS

Wstęp do testowania

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)

Unit testy w aplikacjach webowych opartych na AngularJS

Wstęp do testowania

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

Unit testy w aplikacjach webowych opartych na AngularJS

Wstęp do testowania

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.

Unit testy w aplikacjach webowych opartych na AngularJS

Wstęp do testowania

12

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

Unit testy w aplikacjach webowych opartych na AngularJS

Wstęp do testowania

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

Unit testy w aplikacjach webowych opartych na AngularJS

Zakres i granice testów

14

Testy jednostkowe

Testy integracyjne

Stopień skomplikowania testów

Testyakceptacyjne

Kosz

ty

Unit testy w aplikacjach webowych opartych na AngularJS

Moduł 1

Moduł 2

Moduł 3

Moduł 4

Moduł 5

Zakres i granice testów

15

Test integracyjny 1lub więcej modułów

Unit test pojedynczej funkcjiw ramach modułu

showLoader()

Unit testy w aplikacjach webowych opartych na AngularJS

Zakres i granice testów

16

Testy akceptacyjne i manualne

App Black box

Unit testy w aplikacjach webowych opartych na AngularJS

AngularJS

17

Unit testy w aplikacjach webowych opartych na AngularJS

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

Unit testy w aplikacjach webowych opartych na AngularJS

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

Unit testy w aplikacjach webowych opartych na AngularJS

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

Unit testy w aplikacjach webowych opartych na AngularJS

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

Unit testy w aplikacjach webowych opartych na AngularJS

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

Unit testy w aplikacjach webowych opartych na AngularJS

AngularJS

23

Unit testy w aplikacjach webowych opartych na AngularJS

AngularJS

24

Unit testy w aplikacjach webowych opartych na AngularJS

AngularJS

25

Unit testy w aplikacjach webowych opartych na AngularJS

AngularJS

26

Unit testy w aplikacjach webowych opartych na AngularJS

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!

Unit testy w aplikacjach webowych opartych na AngularJS

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ą

Unit testy w aplikacjach webowych opartych na AngularJS

Nie gryzę :)

Q&A

Unit testy w aplikacjach webowych opartych na AngularJS

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

Unit testy w aplikacjach webowych opartych na AngularJS

WARSZTATY - APLIKACJA

31

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

Unit testy w aplikacjach webowych opartych na AngularJS

Nie gryzę

Q&A

Unit testy w aplikacjach webowych opartych na AngularJS

Kodujcie i testujcie :)

Dziękuję za uwagę

Unit testy w aplikacjach webowych opartych na AngularJS

Odwiedź nas

Miszewskiego 16/580-239 Gdańsk

e-Mail

mpaprocki@neoteric.eurekrutacja@neoteric.eu

Zadzwoń

+48 602 557 952

KONTAKT

WEB

www.neoteric.eufacebook.com/neoteric-eu