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.

Testing AngularJS Applications at payworks

8,321 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
  • Be the first to comment

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

×