Testing AngularJS Applications at payworks

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