INNOCENT EXAMPLE

OF A SIMPLE KARMA JASMINE TEST

describe('TodoService', function () {

    var service;

    beforeEach(module('main'));

    beforeEach(module(function ($provide) {
        $provide.constant('initialTodos', []);
    }));

    beforeEach(inject(function (_TodoService_) {
        service = _TodoService_;
    }));

    it('should contain empty todos after initialization', function() {
        expect(service.todos.length).toBe(0);
    });

    it('should add todo', function () {
        service.addTodo('Finish example project');
        expect(service.todos.length).toBe(1);
        expect(service.todos[0].label).toBe('Finish example project');
    });

    // ... more tests

});

looks like

every angular js testing tutorial on the web

WHAT IS THE CATCH ?

Angular context

What it is and why it is important

DEPENDENCY  INJECTION 

WORKS BY REGISTERING EVERYTHING ON GLOBAL ANGULAR OBJECT

BY USING EXPOSED API LIKE MODULE, CONTROLLER, FACTORY…

Angular context

EXAMPLE & WHY

// global angular object

angular
    
    // registration APIs

    .module('app', [])
    .controller('MyController', function() {})
    .factory('MyFactory', function() {})
    .service('MyService', function() {});

    // directive, provider ...

• historical reasons
• no module system

• build by concatenation
• global namespace pattern

Angular context

AS SEEN IN SOURCE CODE

describe('TodoService', function () {

    var service;

    beforeEach(module('main'));

    beforeEach(module(function ($provide) {
        $provide.constant('initialTodos', []);
    }));

    beforeEach(inject(function (_TodoService_) {
        service = _TodoService_;
    }));

    it('should contain empty todos after initialization', function() {
        expect(service.todos.length).toBe(0);
    });

    it('should add todo', function () {
        service.addTodo('Finish example project');
        expect(service.todos.length).toBe(1);
        expect(service.todos[0].label).toBe('Finish example project');
    });

    // ... more tests

});

initialize app context

mock dependencies

get reference to tested object

test

GETTING A REFERENCE

CAN BE TOUGH

describe('TodoService', function () {

    var scope, $rootScope, $controller;

    beforeEach(module('main'));

    beforeEach(module(function($provide) {
        var TodoServiceMock = {} // mock TodoServie
        $provide.value('TodoService', TodoServiceMock);
    }));

    beforeEach(inject(function (_$controller_, _$rootScope_, _TodoService_) {
        $controller = _$controller_;
        $rootScope = _$rootScope_;
        scope = $rootScope.$new();

        $controller('TodoController', {
            $scope: scope
            TodoService: _TodoService_
        });
    }));
    
    it('should have initial todos', function() {
        expect(scope.todos.length).toBe(1);
    });

    // ... more tests
});

initialize app context

mock dependencies

get reference to tested object

test

LIKE REALLY TOUGH

IF YOU WANT TO TEST DIRECTIVE'S CONTROLLER

describe('TodoService', function () {

    var directive, scope, $compile, $rootScope;

    beforeEach(module('main'));

    beforeEach(inject(function (_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
        scope = $rootScope.new();

        var element = angular.element('<div todo-component></div>');
        var directive = compile(element)(scope);
        scope.$digest();
    }));
    
    it('should have initial todos', function() {
        var button = directive.find('#remove-done-todos');
        button.triggerHandler('click');
        scope.$digest();

        expect(scope.todos.length).toEqual(0);
    });

    // ... more tests
});

initialize app context

compile template

get reference to element ?!

MASOCHISM

WHAT HAVE WE DONE?

IT CAN't GET ANY SIMPLER

As you could see, test just imports the service and well… tests it! 

No Angular context or API whatsoever, just as it should be because we are unit testing the service functionality not the Angular’s dependency injection mechanism.

HOW TO #1: SERVICE

IMPLEMENTATION IS STRAIGHT FORWARD

import * as _ from 'lodash';

export default function TodoService(initialTodos) {

    const todos = initialTodos;

    return {
        todos,
        addTodo,
        toggleTodo,
        removeDoneTodos
    };

    function addTodo(label) {
        let todo = {
            label,
            done: false
        };
        todos.push(todo);
    }
    
    // other methods ...

}

HOW TO #2: ANGULAR

REGISTER SERVICE INTO ANGULAR CONTEXT

import angular from 'angular';

import TodoService from './services/todo.service';

export default angular
    .module('main.app.feature-b', [])
    .factory('TodoService', TodoService)
    .name;

// other controllers, directives, etc..

HOW TO #3: TESTS

JUST IMPORT SERVICE AND TEST IT

• assert syntax
• expect syntax
• utility methods

• simple
• GREAT async support
• (just return a promise)

HOW TO #4: DEPENDENCIES

WHAT ABOUT THE UNITS WITH DEPENDENCIES ?

// imports skipped for increased brevity

describe('TodoComponent with mocked service (unit test)', function() {

    beforeEach(function() {
        let initialTodos = [];
        let TodoServiceInstance = TodoService(initialTodos);
        mockTodoService = sinon.mock(TodoServiceInstance);
        component = new TodoComponent(TodoServiceInstance);
    });

    afterEach(function() {
       mockTodoService.restore();
    });

    it('should add todo', function () {
        mockTodoService
            .expects('addTodo')
            .once()
            .withArgs('Finish example project');

        component.label = 'Finish example project';
        component.addTodo();

        mockTodoService.verify();
    });
});

HOW TO #5: INTEGRATION

SMALL SCALE MANUAL INTEGRATION TESTING

import { assert } from 'chai';

import TodoComponent from './todo-component.js';
import TodoService from '../services/todo.service.js';

let component;

describe('TodoComponent with real service (Integration test)', function() {

    beforeEach(function() {
        let initialTodos = [];
        let todoService = TodoService(initialTodos);
        component = new TodoComponent(todoService);
    });

    it('should add todo', function () {
        component.label = 'Finish example project';
        component.addTodo();
        assert.equal(component.label, '');
        assert.equal(component.todos.length, 1);
        assert.equal(component.todos[0].label, 'Finish example project');
        assert.equal(component.todos[0].done, false);
    });

});

INTEGRATION TESTS

WHEN AND HOW TO USE THEM ?

• testing of shared infrastructure services
• testing of UI interactions
• testing of directives (DOM manipulation)
• $httpBackend
• ...