Testing AngularJS Applications at payworks

payworks GmbH
payworks GmbHpayworks GmbH
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
 Data binding
 Dependency injection
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/.
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
Quick integration
of payment functionality
Gateway Manager
Intuitive merchant &
terminal management
management
Global Connectivity
Processing with
preferred Acquirer
management
Slide 6
Within the Gateway Manager you can manage merchants, card readers, transactions,
webhooks and API credentials
The Gateway Manager
Slide 7
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Continuous integration server
Agenda
Slide 8
Testing requires different components to work together
 Task automation tool
 Unit testing
 E2E testing
 Continuous integration server
Agenda
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
 Continuous integration server
Agenda
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
 Mocks
 Spies
Jasmine
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
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
 Continuous integration server
Agenda
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
Slide 23
Protractor runs your tests in different browsers, it supports test sharding and can take
screenshots after each executed test
Protractor Configuration File
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
 Continuous integration server
Agenda
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
Slide 27
Demo
Slide 28
www.payworksmobile.com/career
We are hiring
1 of 28

Recommended

Angular 9 New features by
Angular 9 New featuresAngular 9 New features
Angular 9 New featuresAhmed Bouchefra
119 views13 slides
MVC3 Development with visual studio 2010 by
MVC3 Development with visual studio 2010MVC3 Development with visual studio 2010
MVC3 Development with visual studio 2010AbhishekLuv Kumar
2.9K views25 slides
Ng2 cli by
Ng2 cliNg2 cli
Ng2 cliAbbas Zahir
72 views15 slides
Angular 9 by
Angular 9 Angular 9
Angular 9 Raja Vishnu
894 views36 slides
Dicoding Developer Coaching #13: Android | Melakukan Testing secara Otomatis ... by
Dicoding Developer Coaching #13: Android | Melakukan Testing secara Otomatis ...Dicoding Developer Coaching #13: Android | Melakukan Testing secara Otomatis ...
Dicoding Developer Coaching #13: Android | Melakukan Testing secara Otomatis ...DicodingEvent
116 views29 slides

More Related Content

What's hot

Startup weekend bootcamp - Android up and running by
Startup weekend bootcamp - Android up and runningStartup weekend bootcamp - Android up and running
Startup weekend bootcamp - Android up and runningLance Nanek
1.4K views33 slides
Visual Studio 2015 and the Next .NET Framework by
Visual Studio 2015 and the Next .NET FrameworkVisual Studio 2015 and the Next .NET Framework
Visual Studio 2015 and the Next .NET FrameworkSasha Goldshtein
1.6K views11 slides
Build your website with angularjs and web apis by
Build your website with angularjs and web apisBuild your website with angularjs and web apis
Build your website with angularjs and web apisChalermpon Areepong
2.1K views31 slides
Learning selenium sample by
Learning selenium sampleLearning selenium sample
Learning selenium sampleMinnu Jayaprakash
149 views33 slides
React native app with type script tutorial by
React native app with type script tutorialReact native app with type script tutorial
React native app with type script tutorialKaty Slemon
101 views42 slides
The productive developer guide to Angular 2 by
The productive developer guide to Angular 2The productive developer guide to Angular 2
The productive developer guide to Angular 2Maurice De Beijer [MVP]
729 views29 slides

What's hot(20)

Startup weekend bootcamp - Android up and running by Lance Nanek
Startup weekend bootcamp - Android up and runningStartup weekend bootcamp - Android up and running
Startup weekend bootcamp - Android up and running
Lance Nanek1.4K views
Visual Studio 2015 and the Next .NET Framework by Sasha Goldshtein
Visual Studio 2015 and the Next .NET FrameworkVisual Studio 2015 and the Next .NET Framework
Visual Studio 2015 and the Next .NET Framework
Sasha Goldshtein1.6K views
Build your website with angularjs and web apis by Chalermpon Areepong
Build your website with angularjs and web apisBuild your website with angularjs and web apis
Build your website with angularjs and web apis
Chalermpon Areepong2.1K views
React native app with type script tutorial by Katy Slemon
React native app with type script tutorialReact native app with type script tutorial
React native app with type script tutorial
Katy Slemon101 views
Rest api code completion for javascript - dotjs 2015 by johannes_fiala
Rest api code completion for javascript - dotjs 2015Rest api code completion for javascript - dotjs 2015
Rest api code completion for javascript - dotjs 2015
johannes_fiala2.1K views
Enjector Kernel - Workflow Module Demo by Ajay Soni
Enjector Kernel  - Workflow Module DemoEnjector Kernel  - Workflow Module Demo
Enjector Kernel - Workflow Module Demo
Ajay Soni244 views
React native buy one get one free?! by Thijs Suijten
React native buy one get one free?!React native buy one get one free?!
React native buy one get one free?!
Thijs Suijten266 views
Redux and context api with react native app introduction, use cases, implemen... by Katy Slemon
Redux and context api with react native app introduction, use cases, implemen...Redux and context api with react native app introduction, use cases, implemen...
Redux and context api with react native app introduction, use cases, implemen...
Katy Slemon107 views
HTC Bluetooth Low Energy Heart Rate Monitor Sample Code by Lance Nanek
HTC Bluetooth Low Energy Heart Rate Monitor Sample CodeHTC Bluetooth Low Energy Heart Rate Monitor Sample Code
HTC Bluetooth Low Energy Heart Rate Monitor Sample Code
Lance Nanek5.5K views
Meetup angular http client by Gaurav Madaan
Meetup angular http clientMeetup angular http client
Meetup angular http client
Gaurav Madaan278 views
Playwright: A New Test Automation Framework for the Modern Web by Applitools
Playwright: A New Test Automation Framework for the Modern WebPlaywright: A New Test Automation Framework for the Modern Web
Playwright: A New Test Automation Framework for the Modern Web
Applitools10.5K views
Angular Dependency Injection by Nir Kaufman
Angular Dependency InjectionAngular Dependency Injection
Angular Dependency Injection
Nir Kaufman604 views
Web development tool by Deep Bhavsar
Web development toolWeb development tool
Web development tool
Deep Bhavsar1.1K views
Web components are the future of the web - Take advantage of new web technolo... by Marios Fakiolas
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...
Marios Fakiolas1.3K views
What are the Top Automated Software Testing Tools for 2021 by Testrig Technologies
What are the Top Automated Software Testing Tools for 2021What are the Top Automated Software Testing Tools for 2021
What are the Top Automated Software Testing Tools for 2021

Similar to Testing AngularJS Applications at payworks

Live Demo : Trending Angular JS Featues by
Live Demo : Trending Angular JS FeatuesLive Demo : Trending Angular JS Featues
Live Demo : Trending Angular JS FeatuesEdureka!
2.1K views32 slides
Continuous Integration and Continuous Deployment (CI/CD) with WSO2 Enterprise... by
Continuous Integration and Continuous Deployment (CI/CD) with WSO2 Enterprise...Continuous Integration and Continuous Deployment (CI/CD) with WSO2 Enterprise...
Continuous Integration and Continuous Deployment (CI/CD) with WSO2 Enterprise...WSO2
437 views19 slides
Introduction to Codenvy / JugSummerCamp 2014 by
Introduction to Codenvy / JugSummerCamp 2014Introduction to Codenvy / JugSummerCamp 2014
Introduction to Codenvy / JugSummerCamp 2014Florent BENOIT
949 views28 slides
Getting started with appium by
Getting started with appiumGetting started with appium
Getting started with appiumPratik Patel
616 views41 slides
Automated Acceptance Testing Example by
Automated Acceptance Testing ExampleAutomated Acceptance Testing Example
Automated Acceptance Testing ExampleHani Massoud
801 views17 slides
Tahir_Resume_Selenium by
Tahir_Resume_SeleniumTahir_Resume_Selenium
Tahir_Resume_SeleniumTahir Ahmed Mohammed
535 views9 slides

Similar to Testing AngularJS Applications at payworks(20)

Live Demo : Trending Angular JS Featues by Edureka!
Live Demo : Trending Angular JS FeatuesLive Demo : Trending Angular JS Featues
Live Demo : Trending Angular JS Featues
Edureka!2.1K views
Continuous Integration and Continuous Deployment (CI/CD) with WSO2 Enterprise... by WSO2
Continuous Integration and Continuous Deployment (CI/CD) with WSO2 Enterprise...Continuous Integration and Continuous Deployment (CI/CD) with WSO2 Enterprise...
Continuous Integration and Continuous Deployment (CI/CD) with WSO2 Enterprise...
WSO2437 views
Introduction to Codenvy / JugSummerCamp 2014 by Florent BENOIT
Introduction to Codenvy / JugSummerCamp 2014Introduction to Codenvy / JugSummerCamp 2014
Introduction to Codenvy / JugSummerCamp 2014
Florent BENOIT949 views
Getting started with appium by Pratik Patel
Getting started with appiumGetting started with appium
Getting started with appium
Pratik Patel616 views
Automated Acceptance Testing Example by Hani Massoud
Automated Acceptance Testing ExampleAutomated Acceptance Testing Example
Automated Acceptance Testing Example
Hani Massoud801 views
Play with Testing on Android - Gilang Ramadhan (Academy Content Writer at Dic... by DicodingEvent
Play with Testing on Android - Gilang Ramadhan (Academy Content Writer at Dic...Play with Testing on Android - Gilang Ramadhan (Academy Content Writer at Dic...
Play with Testing on Android - Gilang Ramadhan (Academy Content Writer at Dic...
DicodingEvent431 views
The 2014 Decision Makers Guide to Java Web Frameworks by Kunal Ashar
The 2014 Decision Makers Guide to Java Web FrameworksThe 2014 Decision Makers Guide to Java Web Frameworks
The 2014 Decision Makers Guide to Java Web Frameworks
Kunal Ashar8.4K views
International journal of applied sciences and innovation vol 2015 - no 1 - ... by sophiabelthome
International journal of applied sciences and innovation   vol 2015 - no 1 - ...International journal of applied sciences and innovation   vol 2015 - no 1 - ...
International journal of applied sciences and innovation vol 2015 - no 1 - ...
sophiabelthome39 views
Best Practices for Troubleshooting Four Real-world Java Performance Issues by eG Innovations
Best Practices for Troubleshooting Four Real-world Java Performance IssuesBest Practices for Troubleshooting Four Real-world Java Performance Issues
Best Practices for Troubleshooting Four Real-world Java Performance Issues
eG Innovations183 views
STARWEST 2010 - 7 Steps To Improving Software Quality using Microsoft Test Ma... by Anna Russo
STARWEST 2010 - 7 Steps To Improving Software Quality using Microsoft Test Ma...STARWEST 2010 - 7 Steps To Improving Software Quality using Microsoft Test Ma...
STARWEST 2010 - 7 Steps To Improving Software Quality using Microsoft Test Ma...
Anna Russo1.5K views
Automated Testing using JavaScript by Simon Guest
Automated Testing using JavaScriptAutomated Testing using JavaScript
Automated Testing using JavaScript
Simon Guest11.9K views
BuchiReddy 5+Years Resume by buchireddy6
BuchiReddy 5+Years ResumeBuchiReddy 5+Years Resume
BuchiReddy 5+Years Resume
buchireddy6345 views

Recently uploaded

Update 42 models(Diode/General ) in SPICE PARK(DEC2023) by
Update 42 models(Diode/General ) in SPICE PARK(DEC2023)Update 42 models(Diode/General ) in SPICE PARK(DEC2023)
Update 42 models(Diode/General ) in SPICE PARK(DEC2023)Tsuyoshi Horigome
19 views16 slides
SWM L1-L14_drhasan (Part 1).pdf by
SWM L1-L14_drhasan (Part 1).pdfSWM L1-L14_drhasan (Part 1).pdf
SWM L1-L14_drhasan (Part 1).pdfMahmudHasan747870
48 views150 slides
SEMI CONDUCTORS by
SEMI CONDUCTORSSEMI CONDUCTORS
SEMI CONDUCTORSpavaniaalla2005
20 views8 slides
Deutsch Crimping by
Deutsch CrimpingDeutsch Crimping
Deutsch CrimpingIwiss Tools Co.,Ltd
21 views7 slides
String.pptx by
String.pptxString.pptx
String.pptxAnanthi Palanisamy
47 views24 slides
SPICE PARK DEC2023 (6,625 SPICE Models) by
SPICE PARK DEC2023 (6,625 SPICE Models) SPICE PARK DEC2023 (6,625 SPICE Models)
SPICE PARK DEC2023 (6,625 SPICE Models) Tsuyoshi Horigome
15 views218 slides

Recently uploaded(20)

Update 42 models(Diode/General ) in SPICE PARK(DEC2023) by Tsuyoshi Horigome
Update 42 models(Diode/General ) in SPICE PARK(DEC2023)Update 42 models(Diode/General ) in SPICE PARK(DEC2023)
Update 42 models(Diode/General ) in SPICE PARK(DEC2023)
An approach of ontology and knowledge base for railway maintenance by IJECEIAES
An approach of ontology and knowledge base for railway maintenanceAn approach of ontology and knowledge base for railway maintenance
An approach of ontology and knowledge base for railway maintenance
IJECEIAES12 views
cloud computing-virtualization.pptx by RajaulKarim20
cloud computing-virtualization.pptxcloud computing-virtualization.pptx
cloud computing-virtualization.pptx
RajaulKarim2085 views
_MAKRIADI-FOTEINI_diploma thesis.pptx by fotinimakriadi
_MAKRIADI-FOTEINI_diploma thesis.pptx_MAKRIADI-FOTEINI_diploma thesis.pptx
_MAKRIADI-FOTEINI_diploma thesis.pptx
fotinimakriadi6 views
2_DVD_ASIC_Design_FLow.pdf by Usha Mehta
2_DVD_ASIC_Design_FLow.pdf2_DVD_ASIC_Design_FLow.pdf
2_DVD_ASIC_Design_FLow.pdf
Usha Mehta19 views
Design and analysis of a new undergraduate Computer Engineering degree – a me... by WaelBadawy6
Design and analysis of a new undergraduate Computer Engineering degree – a me...Design and analysis of a new undergraduate Computer Engineering degree – a me...
Design and analysis of a new undergraduate Computer Engineering degree – a me...
WaelBadawy653 views
7_DVD_Combinational_MOS_Logic_Circuits.pdf by Usha Mehta
7_DVD_Combinational_MOS_Logic_Circuits.pdf7_DVD_Combinational_MOS_Logic_Circuits.pdf
7_DVD_Combinational_MOS_Logic_Circuits.pdf
Usha Mehta59 views

Testing AngularJS Applications at payworks

  • 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