Unit Testing in AngularJS with Karma & Jasmine

by Alyona Pysarenko

Karma and Jasmine

Unit Testing in AngularJS with Karma & Jasmine

by Alyona Pysarenko

Unit Testing: What and Why?

  1. Proof of correctness
  2. Lack of compiler
  3. Catch errors early
  4. Prevent regressions
Karma config

Introduction to
Karma

Karma is the test runner that makes running tests painless and amazingly fast.

Explaining the Karma Config:

  1. basePath
  2. frameworks
  3. files
  4. exclude
  5. port
  6. logLevel
  7. autoWatch
  8. browsers
  9. singleRun

“Files” Option in Karma

The list of files paths to load

Files Option in Karma

Possibility to run specific file

getSpecs() function

Possibility to run specific file

How to run and verify results?

Karma start

Karma start

env KARMA_SPECS=“spec/online-mortgage/online-mortgage-strategy-controller.js” karma start

Success

Karma start success

Failed

Karma start failed
Jasmine Spec Style

Jasmine: Spec
Style of Testing

Jasmine Syntax

  1. describe
  2. beforeEach
  3. it
  4. afterEach
  5. expect

Useful Jasmine Matchers

  1. toEqual
  2. toBe
  3. toBeTruthy
  4. toBeFalsy
  5. toBeDefined
  6. toBeUndefined
  7. toBeNull
  8. toContain
  9. toMatch

Mocking Out Services

Inline mock

The first way is to override the service during the unit test, as an inline mock

Global mock

The second option to override services would be at a global level instead of a unit test level.

A Simple AngularJS Service

to mock out

A Simple AngularJS Service

inline service mock

inline service mock
Global Service mock

Global Service mock

File: notesApp-mocks.js

Global Service mock
Spies

Spies

In Jasmine, mocks are referred to as spies.

Spies allow us to hook into certain functions, and check whether they:

  1. were called
  2. how many times they were called
  3. what arguments they were called with
  4. define value that has to be retuned

Unit Testing Server Calls

init() function in controller

Unit Testing Server Calls
Unit Testing Server Calls

Unit Testing Server
Calls

The $http service internally uses the $httpBackend to make the actual XHR requests.

The angular-mocks.js file provides a mock $httpBackend service that

  1. prevents server calls
  2. gives us hooks to set expectations mockBackend.expectGET(‘/api/note’).respond(200, mockGetResponse)
  3. allow to trigger responses
 flush()

afterEach FUNCTIONS

verifyNoOutstandingRequests()

Ensure that all requests to the server have actually responded (using flush())

verifyNoOutstandingExpectations()

Ensure that all expects set on the $httpBackend were actually called

afterEach FUNCTIONS

Issues we met

1. Syntax of private functions in controller

Call private function in test

Issues we met

2. Mocking service that returns class with extended prototype

Mocking service that returns class

Test coverage

Test coverage

Thank you for your attention!