Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Slide 1
Testing AngularJS Applications
February 2015 - Pedro Catré
Technical University of Munich
Slide 2
Use HTML as your template language, extend HTML syntax to express your application’s
components clearly
AngularJS
...
Slide 3
Two points you should take away with you at the end of this presentation
Main Points
 Tests will save you
 You h...
Slide 4
payworks powers integrated Point of
Sale solutions
Slide 5
The Gateway Manager is the central place for clients to configure our platform
payworks Platform
payworks SDK
Quic...
Slide 6
Within the Gateway Manager you can manage merchants, card readers, transactions,
webhooks and API credentials
The ...
Slide 7
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Conti...
Slide 8
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Conti...
Slide 9
Automate everything! You will have to do it again
> grunt serve
> grunt build
> grunt test
Testing Tools
Slide 10
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Cont...
Slide 11
Karma loads your source code, executes your tests and much more
Karma
Slide 12
Jasmine provides an elegant way of writing tests
 Suites
 Specs
 Expectations
 Matchers
 Setup and Teardown
...
Slide 13
ngMock gives you mocking for your AngularJS tests
 Support to
 inject and mock services
 angular.mock.module()...
Slide 14
Let’s unit-test a component of the Gateway Manager
Unit Test Examples
Slide 15
Let’s unit-test a component of the Gateway Manager
Unit-Test Examples
Slide 16
How code coverage looks
Unit-Test Code Coverage
Slide 17
How code coverage looks
Unit-Test Code Coverage
Slide 18
How code coverage looks
Unit-Test Code Coverage
Slide 19
How code coverage looks
Unit-Test Code Coverage
Slide 20
How code coverage looks
Unit-Test Code Coverage
Slide 21
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Cont...
Slide 22
Protractor runs tests against your application in a real browser, interacting with it as a user
would
 Test like...
Slide 23
Protractor runs your tests in different browsers, it supports test sharding and can take
screenshots after each e...
Slide 24
Let’s e2e-test a component of the Gateway Manager
E2E-Test Examples
Slide 25
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Cont...
Slide 26
Bamboo connects issues, commits, test results and deploys so the whole picture is available to
your entire produc...
Slide 27
Demo
Slide 28
www.payworksmobile.com/career
We are hiring
Upcoming SlideShare
Loading in …5
×

Testing AngularJS Applications at payworks

8,422 views

Published on

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.

Published in: Engineering
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/eadYu ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/eadYu ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The professtional essay writer are having more knowledege about the writing papers. The professional essay writer are providing the best essay writing services papers to the students. The writeersity writing company had to providing the more writing papers for the professtionalist. The papers should be very quality and possible to acedemic success. ⇒ HelpWriting.net ⇐ Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/eadYu ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Testing AngularJS Applications at payworks

  1. 1. Slide 1 Testing AngularJS Applications February 2015 - Pedro Catré Technical University of Munich
  2. 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. 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. 4. Slide 4 payworks powers integrated Point of Sale solutions
  5. 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. 6. Slide 6 Within the Gateway Manager you can manage merchants, card readers, transactions, webhooks and API credentials The Gateway Manager
  7. 7. Slide 7 Testing requires different components to work together  Task automation tool  Unit testing  E2E testing  Continuous integration server Agenda
  8. 8. Slide 8 Testing requires different components to work together  Task automation tool  Unit testing  E2E testing  Continuous integration server Agenda
  9. 9. Slide 9 Automate everything! You will have to do it again > grunt serve > grunt build > grunt test Testing Tools
  10. 10. Slide 10 Testing requires different components to work together  Task automation tool  Unit testing  E2E testing  Continuous integration server Agenda
  11. 11. Slide 11 Karma loads your source code, executes your tests and much more Karma
  12. 12. Slide 12 Jasmine provides an elegant way of writing tests  Suites  Specs  Expectations  Matchers  Setup and Teardown  Mocks  Spies Jasmine
  13. 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. 14. Slide 14 Let’s unit-test a component of the Gateway Manager Unit Test Examples
  15. 15. Slide 15 Let’s unit-test a component of the Gateway Manager Unit-Test Examples
  16. 16. Slide 16 How code coverage looks Unit-Test Code Coverage
  17. 17. Slide 17 How code coverage looks Unit-Test Code Coverage
  18. 18. Slide 18 How code coverage looks Unit-Test Code Coverage
  19. 19. Slide 19 How code coverage looks Unit-Test Code Coverage
  20. 20. Slide 20 How code coverage looks Unit-Test Code Coverage
  21. 21. Slide 21 Testing requires different components to work together  Task automation tool  Unit testing  E2E testing  Continuous integration server Agenda
  22. 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. 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. 24. Slide 24 Let’s e2e-test a component of the Gateway Manager E2E-Test Examples
  25. 25. Slide 25 Testing requires different components to work together  Task automation tool  Unit testing  E2E testing  Continuous integration server Agenda
  26. 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. 27. Slide 27 Demo
  28. 28. Slide 28 www.payworksmobile.com/career We are hiring

×