Download - Kariera it Sopot
![Page 1: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/1.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
Unit testy w aplikacjach webowych opartych na AngularJS
![Page 2: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/2.jpg)
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
![Page 3: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/3.jpg)
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
![Page 4: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/4.jpg)
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
![Page 5: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/5.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
Techologieco robimy
5
![Page 6: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/6.jpg)
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
![Page 7: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/7.jpg)
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
![Page 8: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/8.jpg)
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!)
![Page 9: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/9.jpg)
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)
![Page 10: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/10.jpg)
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”)
![Page 11: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/11.jpg)
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.
![Page 12: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/12.jpg)
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!
![Page 13: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/13.jpg)
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
![Page 14: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/14.jpg)
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
![Page 15: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/15.jpg)
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()
![Page 16: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/16.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
Zakres i granice testów
16
Testy akceptacyjne i manualne
App Black box
![Page 17: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/17.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
AngularJS
17
![Page 18: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/18.jpg)
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
![Page 19: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/19.jpg)
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
![Page 20: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/20.jpg)
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
![Page 21: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/21.jpg)
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
![Page 22: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/22.jpg)
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
![Page 23: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/23.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
AngularJS
23
![Page 24: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/24.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
AngularJS
24
![Page 25: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/25.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
AngularJS
25
![Page 26: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/26.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
AngularJS
26
![Page 27: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/27.jpg)
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!
![Page 28: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/28.jpg)
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ą
![Page 29: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/29.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
Nie gryzę :)
Q&A
![Page 30: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/30.jpg)
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
![Page 31: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/31.jpg)
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
![Page 32: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/32.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
Nie gryzę
Q&A
![Page 33: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/33.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
Kodujcie i testujcie :)
Dziękuję za uwagę
![Page 34: Kariera it Sopot](https://reader038.vdocuments.net/reader038/viewer/2022103018/558a3b4cd8b42a86508b45db/html5/thumbnails/34.jpg)
Unit testy w aplikacjach webowych opartych na AngularJS
Odwiedź nas
Miszewskiego 16/580-239 Gdańsk
[email protected]@neoteric.eu
Zadzwoń
+48 602 557 952
KONTAKT
WEB
www.neoteric.eufacebook.com/neoteric-eu