Presentation at the Technical University of Munich (TUM) for the Web App Lab course. Condensed view of the many tools and concepts involved in testing AngularJS applications in a real world scenario. From unit-tests and e2e-tests all the way to continuous integration.

1. Slide 1
Testing AngularJS Applications
February 2015 - Pedro Catré
Technical University of Munich

2. Slide 2
Use HTML as your template language, extend HTML syntax to express your application’s
components clearly
AngularJS
 Data binding
 Dependency injection

3. Slide 3
Two points you should take away with you at the end of this presentation
Main Points
 Tests will save you
 You have great testing tools
Adapted from http://xkcd.com/285/.

4. Slide 4
payworks powers integrated Point of
Sale solutions

5. Slide 5
The Gateway Manager is the central place for clients to configure our platform
payworks Platform
payworks SDK
Quick integration
of payment functionality
Gateway Manager
Intuitive merchant &
terminal management
management
Global Connectivity
Processing with
preferred Acquirer
management

6. Slide 6
Within the Gateway Manager you can manage merchants, card readers, transactions,
webhooks and API credentials
The Gateway Manager

7. Slide 7
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Continuous integration server
Agenda

8. Slide 8
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Continuous integration server
Agenda

9. Slide 9
Automate everything! You will have to do it again
> grunt serve
> grunt build
> grunt test
Testing Tools

10. Slide 10
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Continuous integration server
Agenda

11. Slide 11
Karma loads your source code, executes your tests and much more
Karma

12. Slide 12
Jasmine provides an elegant way of writing tests
 Suites
 Specs
 Expectations
 Matchers
 Setup and Teardown
 Mocks
 Spies
Jasmine

13. Slide 13
ngMock gives you mocking for your AngularJS tests
 Support to
 inject and mock services
 angular.mock.module()
 angular.mock.inject()
 Extends core services
 $httpBackend
 $timeout
ngMock

14. Slide 14
Let’s unit-test a component of the Gateway Manager
Unit Test Examples

15. Slide 15
Let’s unit-test a component of the Gateway Manager
Unit-Test Examples

16. Slide 16
How code coverage looks
Unit-Test Code Coverage

17. Slide 17
How code coverage looks
Unit-Test Code Coverage

18. Slide 18
How code coverage looks
Unit-Test Code Coverage

19. Slide 19
How code coverage looks
Unit-Test Code Coverage

20. Slide 20
How code coverage looks
Unit-Test Code Coverage

21. Slide 21
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Continuous integration server
Agenda

22. Slide 22
Protractor runs tests against your application in a real browser, interacting with it as a user
would
 Test like a user
 For AngularJS Apps
 Automatic waiting
Protractor

23. Slide 23
Protractor runs your tests in different browsers, it supports test sharding and can take
screenshots after each executed test
Protractor Configuration File

24. Slide 24
Let’s e2e-test a component of the Gateway Manager
E2E-Test Examples

25. Slide 25
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Continuous integration server
Agenda

26. Slide 26
Bamboo connects issues, commits, test results and deploys so the whole picture is available to
your entire product team
Bamboo
https://www.atlassian.com/software/bamboo

27. Slide 27
Demo

28. Slide 28
www.payworksmobile.com/career
We are hiring