javascript Unit Tests with Angular 1.x

Ron ApelbaumAppPulse, HPE

July 2016

2

Agenda• javascript dangers• Testable code

Motivation

• Test framework

Jasmine

• Understand angular 1.x

Angular unit test

• Karma, IntelliJReal world

3

github.com/ronapelbaum/angular-jasmine

4

Software TestingE2E

Component

Unit TestCode Quality

Functionality

5

Unit testingGiven

When

Then

6

When

<code>

Then

Given

7

javascript: welcome to runtime errors

8

Scripting languageerror

???

jsFiddle

9

Modular Coding

jsFiddle

10

JavaScript Unit Testing1 Runtime Compilation

2

3

Modular coding

Very Fast

11

Questions?

12

Jasmine introduction

13

Specs (1)

14

Specs (2)

15

16

toBe() || not.toBe()

17

Matchers (2): toEqual

18

Matchers (3)

19

Matchers (4)

20

1. test a function

2. test an object

3. testable code

21

Questions?

22

23

Spies (1): spyOnSpy on an existing object member

24

Spies (2): spyOn

25

Spies (3): createSpy

26

Spies (4): createSpyObj

Create an object and Spy on ‘virtual’ members

27

1. Testable code?

2. spyOn

3. createSpyObj

4. CallFake

28

Questions?

29

Jasmine + angular

30

Constructor definition:

Usage:New()

31

Constructor definition:

Usage:

DI definition:Where is new()?

Angular 101

32

angular

angular.module()

$injector

33

ngMock

angular.mock.module()

angular.mock.inject()

34

Services

35

test a service namespace

get instance

36

test a service: inject() + spyOn()

spyOn the instance from DI

37

1. Test a service

2. inject () + spyOn()

38

$provide

Registering components with the $injector

angular.module(...).service(...)

angular.module(...).factory(...)

39

test a service: createSpyObj() + $provide

Create another module

Override namespace

Gets mock instance

40

createSpyObj() + $provide()

41

Questions?

42

Controllers

43

test a controller$controller

test

44

test a controller ($scope)$controller

test

$rootScope

DI

45

1. Stateless controller

2. Controller as

3. $scope

46

Directives

47

$compile

Compiles DOM into a template and produces a template function

48

test a directive Create element

test

$compile with scope

Change scopeTest element

49

1. Directive + attrs2. Directive + scope + watch

50

Patterns

51

1. $http

2. $timeout

3. Events

4. Promises

52

Real Life (demo)

53

Summary

Core Angular

• Service

• Controller

• Directive

Patters

• $http• $watch• $q• Events

Real Life

• Karma

• Debug

• coverage

54

Links JsFiddle examples:

https://github.com/ronapelbaum/angular-jasmine

Summary exercise:

https://github.com/ronapelbaum/mangal

My Blog:

https://ronapelbaum.wordpress.com/tag/angular-jasmine

55

Thank youron.apelbaum@hpe.com