OBJETIVO DOS ESTUDOS
Saber aplicar testes unitários em projetos AngularJS para agregar valor ao produto e principalmente garantir que as funcionalidades estejam sendo executadas corretamente.
INTRO
O Karma possui um arquivo de configuração chamado karma.conf.js. Este arquivo permite ao Karma conhecer seu projeto, definir a ordem em que os testes são executados.
Aqui são especificadas as opções de configurações disponíveis no karma:
LINK
Show archive.org snapshot
EXEMPLOS
Test Controller
Suponhamos que temos um controller de nome zgProgressPanelCtrl com este método:
vm.percentageCompleted = function () {
var completed = vm.completed;
if (!completed) {
return 0;
} else {
return (completed / vm.total) * 100;
}
};
O teste seria realizado da seguinte forma:
describe('zgProgressPanelCtrl', function () {
var $rootScope,
$scope,
controller;
beforeEach(function () {
module('conciliacao');
inject(function ($injector) {
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $injector.get('$controller')('zgProgressPanelCtrl', {$scope: $scope});
});
});
describe('Function percentage completed', function () {
it('Should return 0 if not define value for the completed var', function () {
expect(controller.percentageCompleted()).toBe(0);
});
it('Should return 80 if total is 100 and completed is 80', function () {
controller.total = 100;
controller.completed = 80;
expect(controller.percentageCompleted()).toBe(80);
});
});
Na linha 11 declaramos que queremos utilizar o controller zgProgressPanelCtrl (na linha 4 foi declarada a variável controller).
Após disto já teremos o nosso controller injetado e a disposição do teste.
Veja que na linha 17 consigo chamar o método que fica no controlador !
Test Directive
Para realizar os testes das diretivas é bem semelhante com a anterior.
Suponhamos que temos uma diretiva com o nome zgTitle com o seguinte template: {{zgTitle.title}}
A diretiva é a seguinte:
angular.module('teste',[])
.directive('zgTitle', function () {
return {
restrict: 'E',
scope: {
title: '@'
},
templateUrl: 'main/javascript/directives/zg-title.tpl.html'
};
});
O teste para esta diretiva será o seguinte:
describe("Directive: zg-title, unit tests", function () {
var element, $scope;
beforeEach(module("test", "zg.templates"));
beforeEach(inject(function ($compile, $rootScope) {
$scope = $rootScope.$new();
element = angular.element("<zg-title title='Esto es una directiva fantástica !'></zg-title>");
$compile(element)($scope);
$scope.$digest();
}));
it('Should display the title text', function () {
expect(element.find("h4").text()).toBe('Esto es una directiva fantástica !');
});
Perceba que na linha 3 foi definido o 'zg.templates', ele é um preprocessor Show archive.org snapshot que é declarado no arquivo de configuração do Karma. Neste caso estamos utilizando o html2js Show archive.org snapshot .
preprocessors: {
'main/**/*.html' : 'ng-html2js'
},
ngHtml2JsPreprocessor: {
moduleName: 'zg.templates'
},
Isto processará todos os arquivos definidos na opção de configuração Files Show archive.org snapshot
Test Services
Os testes de serviço são bem semelhantes com os de controllers.
Criação de um serviço:
angular
.module('test')
.service('userService', userService);
function userService() {
var vm = this;
vm.usuarios = [
{
"id": 1,
"name": "felansu"
}
];
vm.getUsers = function () {
return vm.usuarios;
};
}
};
Exemplo de teste de serviço:
describe('Service: userService, unit tests', function () {
var service;
beforeEach(function () {
module('test');
inject(function ($injector) {
service = $injector.get('userService');
});
});
describe('Initialization', function () {
it('Should load the usersJson from the service', function () {
expect(service.getUsers.length).toBeGreaterThan(0);
});
});
