SlideShare uma empresa Scribd logo
1 de 27
TESTING
ANGULAR JS
Juan José Galán López
Acerca de
Desarrollador Web Full Stack
Symfony, Drupal, Magento
LESS, SASS, AngularJS, JavaScript
Indice
Herramientas testing
Instalación/Configuración Karma
Test unitarios - Jasmine
ngMock
Test unitarios AngularJS
Arquitectura aplicación Demo
Testing sobre Servicios, Controlador, Directiva
Herramientas testing
Karma - Test runner
Protractor - Testing framework
Nos permite correr un comando que determina si un conjunto de test pasan o no.
Permite automatizar los test funcionales a través de la interacción con el navegador.
Herramientas testing
Jasmine - Testing framework
Alternativas a Jasmine
Integración por defecto con Karma
Herramientas como: spies, fakes…
Sintaxis limpia, test con formato que describen la conducta que estamos testeando
Selenium, Mocha
Instalación Karma
* npm init
npm install karma -g
karma init
Necesitaremos instalar Jasmine y el lanzador de Chrome
npm install jasmine-core -g
npm install karma-jasmine -g
npm install karma-chrome-launcher -g
karma start
Comprobamos la instalación: karma --version
Configuración Karma
karma.conf.js
Test unitarios - Jasmine
describe
it
expect
matchers
describe("A suite is just a function", function() {
var a;
it("and so is a spec", function() {
a = true;
expect(a).toBe(true);
});
});
https://www.cheatography.com/citguy/cheat-sheets/jasmine-js-testing/
Test unitarios - Jasmine
beforeEach
Es llamado antes de ejecutar el test del bloque
describe en el que se encuentra.
afterEach
Es llamado después de ejecutar el test del bloque
describe en el que se encuentra.
describe("A spec (with setup and tear-down)", function() {
var foo;
beforeEach(function() {
foo = 0;
foo += 1;
});
afterEach(function() {
foo = 0;
});
it("is just a function, so it can contain any code", function() {
expect(foo).toEqual(1);
});
it("can have more than one expectation", function() {
expect(foo).toEqual(1);
expect(true).toEqual(true);
});
});
Test unitarios - Jasmine
Spies
describe("A spy", function() {
var foo, bar = null;
beforeEach(function() {
foo = {
setBar: function(value) {
bar = value;
}
};
spyOn(foo, 'setBar');
foo.setBar(456, 'another param');
});
it("tracks that the spy was called", function() {
expect(foo.setBar).toHaveBeenCalled();
});
it("tracks that the spy was called x times", function() {
expect(foo.setBar).toHaveBeenCalledTimes(2);
});
it("tracks all the arguments of its calls", function() {
expect(foo.setBar).toHaveBeenCalledWith(456, 'another param');
});
});
Algunos matchers para los Spies:
toHaveBeenCalled
toHaveBeenCalledTimes
toHaveBeenCalledWith
Test unitarios - Jasmine
Spies describe("A spy, when configured with an alternate implementation", function() {
var foo, fetchedBar;
beforeEach(function() {
spyOn(foo, "getBar").and.callFake(function(arguments, can, be, received) {
return 1001;
});
});
fetchedBar = foo.getBar();
it("tracks that the spy was called", function() {
expect(foo.getBar).toHaveBeenCalled();
});
it("when called returns the requested value", function() {
expect(fetchedBar).toEqual(1001);
});
});
Encadenando and.callFake.
Test unitarios - Jasmine
Existen otros muchos elementos en Jasmine que podéis consultar en:
https://jasmine.github.io/pages/docs_home.html
Test unitarios - ngMock
Elementos de test necesarios para testear apps Angular JS
$httpBackend
Inject
$controller
$compile
...
Test unitarios AngularJS
Elementos bajo test:
● Servicios
● Controllers
● Directiva
● Eventos
Aplicación demo - Arquitectura
bt-setup-table
Proxies
Services
Controllers
Directives
Transformers
Controllers
Templates
App
Aplicación demo - Arquitectura
Estructura directorio para los tests
Aplicación demo - Arquitectura
bt-setup-controller
bt-setup
SELECT_SHIP
Test Unitario Angular
1. Describimos la suite de test
describe('Setup Table Service test', function () {
1. Cargamos el módulo que contiene el código a ejecutar
beforeEach(module('battleShip'));
1. Definimos cada spec o test
Pasos comunes:
$httpBackend
Test Unitario Angular - SetupTableProxy
SetupTableProxy$http
[[0, 0], [0, 0]]
fakeSetupTableProxy
Test Unitario Angular - SetupTableGetService
SetupTableProxy SetupTableGetService
[[0, 0], [0, 0]]
Test Unitario Angular - SetupTableTransformer
SetupTableTransformer[[0, 0], [0, 0]] [[ { value: 0, class: 'water'}, { value: 0, class: 'water'}],
[ { value: 0, class: 'water'}, { value: 0, class: 'water'}]]
fakeSetupTableTransformerfakeSetupTableGetService
Test Unitario Angular - SetupTableService
SetupTableGetService
[[0, 0], [0, 0]]
[[ { value: 0, class: 'water'}, { value: 0, class: 'water'}],
[ { value: 0, class: 'water'}, { value: 0, class: 'water'}]]
SetupTableGetService SetupTableTransformer
[[0, 0], [0, 0]]
Test Unitario Angular - SetupTableCheckService
SetupTableCheckService
[[ { value: 0, class: 'water'}, { value: 0, class: 'water'}],
[ { value: 0, class: 'water'}, { value: 0, class: 'water'}]]
x y length isVertical
true/false
Test Unitario Angular - Controllers
SetupControllerDirective SetupController
SELECT_SHIP
checkSetupShip
resetCellClass
Test Unitario Angular - Directive
Template
https://github.com/karma-runner/karma-ng-html2js-preprocessor
npm install karma-ng-html2js-preprocessor --save-dev module.exports = function(config) {
config.set({
preprocessors: {
'**/*.html': ['ng-html2js']
},
...
ngHtml2JsPreprocessor: {
moduleName: 'templates'
},
….
files: [
...
'**/*.html'
],
Test Unitario Angular - Directive
setupTableDirective
● Comprobación de creación de tablero
● Conducta tras pasar por las celdas mouseenter/mouseleave
Referencias
https://jasmine.github.io/2.5/introduction
AngularJS By Example - Packt Publishing
https://github.com/atomicposts/battleship

Mais conteúdo relacionado

Mais procurados

Assurer - a pluggable server testing/monitoring framework
Assurer - a pluggable server testing/monitoring frameworkAssurer - a pluggable server testing/monitoring framework
Assurer - a pluggable server testing/monitoring framework
Gosuke Miyashita
 
ZLM-Cython Build you first module
ZLM-Cython Build you first moduleZLM-Cython Build you first module
ZLM-Cython Build you first module
Vladimir Ulogov
 

Mais procurados (20)

Assurer - a pluggable server testing/monitoring framework
Assurer - a pluggable server testing/monitoring frameworkAssurer - a pluggable server testing/monitoring framework
Assurer - a pluggable server testing/monitoring framework
 
Test like a pro with Ember.js
Test like a pro with Ember.jsTest like a pro with Ember.js
Test like a pro with Ember.js
 
Perlbal Tutorial
Perlbal TutorialPerlbal Tutorial
Perlbal Tutorial
 
Testing JS with Jasmine
Testing JS with JasmineTesting JS with Jasmine
Testing JS with Jasmine
 
Spring data jpa simple example_스프링학원/자바학원추천/구로IT학원/자바학원
Spring data jpa simple example_스프링학원/자바학원추천/구로IT학원/자바학원Spring data jpa simple example_스프링학원/자바학원추천/구로IT학원/자바학원
Spring data jpa simple example_스프링학원/자바학원추천/구로IT학원/자바학원
 
JavaFX – 10 things I love about you
JavaFX – 10 things I love about youJavaFX – 10 things I love about you
JavaFX – 10 things I love about you
 
BDD with Behat and Symfony2
BDD with Behat and Symfony2BDD with Behat and Symfony2
BDD with Behat and Symfony2
 
Django Celery - A distributed task queue
Django Celery - A distributed task queueDjango Celery - A distributed task queue
Django Celery - A distributed task queue
 
The JavaFX Ecosystem
The JavaFX EcosystemThe JavaFX Ecosystem
The JavaFX Ecosystem
 
Vuejs testing
Vuejs testingVuejs testing
Vuejs testing
 
From Swing to JavaFX
From Swing to JavaFXFrom Swing to JavaFX
From Swing to JavaFX
 
Why You Should Use TAPIs
Why You Should Use TAPIsWhy You Should Use TAPIs
Why You Should Use TAPIs
 
GraphQL gifts from Kiwi.com
GraphQL gifts from Kiwi.comGraphQL gifts from Kiwi.com
GraphQL gifts from Kiwi.com
 
Bareon functional testing ci
Bareon functional testing   ciBareon functional testing   ci
Bareon functional testing ci
 
Rare frontend testing
Rare frontend testingRare frontend testing
Rare frontend testing
 
The JavaFX Ecosystem
The JavaFX EcosystemThe JavaFX Ecosystem
The JavaFX Ecosystem
 
Unit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJSUnit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJS
 
Laravel 5.5 dev
Laravel 5.5 devLaravel 5.5 dev
Laravel 5.5 dev
 
ZLM-Cython Build you first module
ZLM-Cython Build you first moduleZLM-Cython Build you first module
ZLM-Cython Build you first module
 
Testing Ansible
Testing AnsibleTesting Ansible
Testing Ansible
 

Destaque

Slaven tomac unit testing in angular js
Slaven tomac   unit testing in angular jsSlaven tomac   unit testing in angular js
Slaven tomac unit testing in angular js
Slaven Tomac
 
TDD, unit testing and java script testing frameworks workshop
TDD, unit testing and java script testing frameworks workshopTDD, unit testing and java script testing frameworks workshop
TDD, unit testing and java script testing frameworks workshop
Sikandar Ahmed
 

Destaque (18)

Yeoman
YeomanYeoman
Yeoman
 
EasyTest Test Automation Tool Introduction
EasyTest Test Automation Tool IntroductionEasyTest Test Automation Tool Introduction
EasyTest Test Automation Tool Introduction
 
AngularJS Testing Strategies
AngularJS Testing StrategiesAngularJS Testing Strategies
AngularJS Testing Strategies
 
Slaven tomac unit testing in angular js
Slaven tomac   unit testing in angular jsSlaven tomac   unit testing in angular js
Slaven tomac unit testing in angular js
 
Test-Driven Development with TypeScript+Jasmine+AngularJS
Test-Driven Development with TypeScript+Jasmine+AngularJSTest-Driven Development with TypeScript+Jasmine+AngularJS
Test-Driven Development with TypeScript+Jasmine+AngularJS
 
AngularJS Testing
AngularJS TestingAngularJS Testing
AngularJS Testing
 
TDD, unit testing and java script testing frameworks workshop
TDD, unit testing and java script testing frameworks workshopTDD, unit testing and java script testing frameworks workshop
TDD, unit testing and java script testing frameworks workshop
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
 
Angular testing
Angular testingAngular testing
Angular testing
 
Angular 2 - What's new and what's different
Angular 2 - What's new and what's differentAngular 2 - What's new and what's different
Angular 2 - What's new and what's different
 
AngularJS Unit Test
AngularJS Unit TestAngularJS Unit Test
AngularJS Unit Test
 
Unit testing JavaScript: Jasmine & karma intro
Unit testing JavaScript: Jasmine & karma introUnit testing JavaScript: Jasmine & karma intro
Unit testing JavaScript: Jasmine & karma intro
 
TDD Basics with Angular.js and Jasmine
TDD Basics with Angular.js and JasmineTDD Basics with Angular.js and Jasmine
TDD Basics with Angular.js and Jasmine
 
Angularjs - Unit testing introduction
Angularjs - Unit testing introductionAngularjs - Unit testing introduction
Angularjs - Unit testing introduction
 
Automated Testing With Jasmine, PhantomJS and Jenkins
Automated Testing With Jasmine, PhantomJS and JenkinsAutomated Testing With Jasmine, PhantomJS and Jenkins
Automated Testing With Jasmine, PhantomJS and Jenkins
 
Javascript Tests with Jasmine for Front-end Devs
Javascript Tests with Jasmine for Front-end DevsJavascript Tests with Jasmine for Front-end Devs
Javascript Tests with Jasmine for Front-end Devs
 
Jasmine
JasmineJasmine
Jasmine
 
AngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and JasmineAngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and Jasmine
 

Semelhante a Testing angular js

Automated javascript unit testing
Automated javascript unit testingAutomated javascript unit testing
Automated javascript unit testing
ryan_chambers
 
An Introduction to AngularJs Unittesting
An Introduction to AngularJs UnittestingAn Introduction to AngularJs Unittesting
An Introduction to AngularJs Unittesting
Inthra onsap
 
Europython 2011 - Playing tasks with Django & Celery
Europython 2011 - Playing tasks with Django & CeleryEuropython 2011 - Playing tasks with Django & Celery
Europython 2011 - Playing tasks with Django & Celery
Mauro Rocco
 

Semelhante a Testing angular js (20)

Unit Testing in AngularJS - CC FE & UX
Unit Testing in AngularJS -  CC FE & UXUnit Testing in AngularJS -  CC FE & UX
Unit Testing in AngularJS - CC FE & UX
 
Protractor framework architecture with example
Protractor framework architecture with exampleProtractor framework architecture with example
Protractor framework architecture with example
 
Quick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineQuick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmine
 
Javascript tdd byandreapaciolla
Javascript tdd byandreapaciollaJavascript tdd byandreapaciolla
Javascript tdd byandreapaciolla
 
20160905 - BrisJS - nightwatch testing
20160905 - BrisJS - nightwatch testing20160905 - BrisJS - nightwatch testing
20160905 - BrisJS - nightwatch testing
 
Javascript testing: tools of the trade
Javascript testing: tools of the tradeJavascript testing: tools of the trade
Javascript testing: tools of the trade
 
JavaCro'14 - Unit testing in AngularJS – Slaven Tomac
JavaCro'14 - Unit testing in AngularJS – Slaven TomacJavaCro'14 - Unit testing in AngularJS – Slaven Tomac
JavaCro'14 - Unit testing in AngularJS – Slaven Tomac
 
Automated javascript unit testing
Automated javascript unit testingAutomated javascript unit testing
Automated javascript unit testing
 
Selenium with java
Selenium with javaSelenium with java
Selenium with java
 
An Introduction to AngularJs Unittesting
An Introduction to AngularJs UnittestingAn Introduction to AngularJs Unittesting
An Introduction to AngularJs Unittesting
 
Unit Testing with Jest
Unit Testing with JestUnit Testing with Jest
Unit Testing with Jest
 
Quick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineQuick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmine
 
Angular JS Unit Testing - Overview
Angular JS Unit Testing - OverviewAngular JS Unit Testing - Overview
Angular JS Unit Testing - Overview
 
Full Stack Unit Testing
Full Stack Unit TestingFull Stack Unit Testing
Full Stack Unit Testing
 
Europython 2011 - Playing tasks with Django & Celery
Europython 2011 - Playing tasks with Django & CeleryEuropython 2011 - Playing tasks with Django & Celery
Europython 2011 - Playing tasks with Django & Celery
 
Testing in Ballerina Language
Testing in Ballerina LanguageTesting in Ballerina Language
Testing in Ballerina Language
 
Test Driven Development for Microservices
Test Driven Development for MicroservicesTest Driven Development for Microservices
Test Driven Development for Microservices
 
Angular Unit Testing
Angular Unit TestingAngular Unit Testing
Angular Unit Testing
 
Painless Javascript Unit Testing
Painless Javascript Unit TestingPainless Javascript Unit Testing
Painless Javascript Unit Testing
 
Nashville Symfony Functional Testing
Nashville Symfony Functional TestingNashville Symfony Functional Testing
Nashville Symfony Functional Testing
 

Último

%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
masabamasaba
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
mohitmore19
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
 

Último (20)

%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
Generic or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
Exploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdfExploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdf
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
 
SHRMPro HRMS Software Solutions Presentation
SHRMPro HRMS Software Solutions PresentationSHRMPro HRMS Software Solutions Presentation
SHRMPro HRMS Software Solutions Presentation
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 

Testing angular js

  • 2. Acerca de Desarrollador Web Full Stack Symfony, Drupal, Magento LESS, SASS, AngularJS, JavaScript
  • 3. Indice Herramientas testing Instalación/Configuración Karma Test unitarios - Jasmine ngMock Test unitarios AngularJS Arquitectura aplicación Demo Testing sobre Servicios, Controlador, Directiva
  • 4. Herramientas testing Karma - Test runner Protractor - Testing framework Nos permite correr un comando que determina si un conjunto de test pasan o no. Permite automatizar los test funcionales a través de la interacción con el navegador.
  • 5. Herramientas testing Jasmine - Testing framework Alternativas a Jasmine Integración por defecto con Karma Herramientas como: spies, fakes… Sintaxis limpia, test con formato que describen la conducta que estamos testeando Selenium, Mocha
  • 6. Instalación Karma * npm init npm install karma -g karma init Necesitaremos instalar Jasmine y el lanzador de Chrome npm install jasmine-core -g npm install karma-jasmine -g npm install karma-chrome-launcher -g karma start Comprobamos la instalación: karma --version
  • 8. Test unitarios - Jasmine describe it expect matchers describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); }); https://www.cheatography.com/citguy/cheat-sheets/jasmine-js-testing/
  • 9. Test unitarios - Jasmine beforeEach Es llamado antes de ejecutar el test del bloque describe en el que se encuentra. afterEach Es llamado después de ejecutar el test del bloque describe en el que se encuentra. describe("A spec (with setup and tear-down)", function() { var foo; beforeEach(function() { foo = 0; foo += 1; }); afterEach(function() { foo = 0; }); it("is just a function, so it can contain any code", function() { expect(foo).toEqual(1); }); it("can have more than one expectation", function() { expect(foo).toEqual(1); expect(true).toEqual(true); }); });
  • 10. Test unitarios - Jasmine Spies describe("A spy", function() { var foo, bar = null; beforeEach(function() { foo = { setBar: function(value) { bar = value; } }; spyOn(foo, 'setBar'); foo.setBar(456, 'another param'); }); it("tracks that the spy was called", function() { expect(foo.setBar).toHaveBeenCalled(); }); it("tracks that the spy was called x times", function() { expect(foo.setBar).toHaveBeenCalledTimes(2); }); it("tracks all the arguments of its calls", function() { expect(foo.setBar).toHaveBeenCalledWith(456, 'another param'); }); }); Algunos matchers para los Spies: toHaveBeenCalled toHaveBeenCalledTimes toHaveBeenCalledWith
  • 11. Test unitarios - Jasmine Spies describe("A spy, when configured with an alternate implementation", function() { var foo, fetchedBar; beforeEach(function() { spyOn(foo, "getBar").and.callFake(function(arguments, can, be, received) { return 1001; }); }); fetchedBar = foo.getBar(); it("tracks that the spy was called", function() { expect(foo.getBar).toHaveBeenCalled(); }); it("when called returns the requested value", function() { expect(fetchedBar).toEqual(1001); }); }); Encadenando and.callFake.
  • 12. Test unitarios - Jasmine Existen otros muchos elementos en Jasmine que podéis consultar en: https://jasmine.github.io/pages/docs_home.html
  • 13. Test unitarios - ngMock Elementos de test necesarios para testear apps Angular JS $httpBackend Inject $controller $compile ...
  • 14. Test unitarios AngularJS Elementos bajo test: ● Servicios ● Controllers ● Directiva ● Eventos
  • 15. Aplicación demo - Arquitectura bt-setup-table Proxies Services Controllers Directives Transformers Controllers Templates App
  • 16. Aplicación demo - Arquitectura Estructura directorio para los tests
  • 17. Aplicación demo - Arquitectura bt-setup-controller bt-setup SELECT_SHIP
  • 18. Test Unitario Angular 1. Describimos la suite de test describe('Setup Table Service test', function () { 1. Cargamos el módulo que contiene el código a ejecutar beforeEach(module('battleShip')); 1. Definimos cada spec o test Pasos comunes:
  • 19. $httpBackend Test Unitario Angular - SetupTableProxy SetupTableProxy$http [[0, 0], [0, 0]]
  • 20. fakeSetupTableProxy Test Unitario Angular - SetupTableGetService SetupTableProxy SetupTableGetService [[0, 0], [0, 0]]
  • 21. Test Unitario Angular - SetupTableTransformer SetupTableTransformer[[0, 0], [0, 0]] [[ { value: 0, class: 'water'}, { value: 0, class: 'water'}], [ { value: 0, class: 'water'}, { value: 0, class: 'water'}]]
  • 22. fakeSetupTableTransformerfakeSetupTableGetService Test Unitario Angular - SetupTableService SetupTableGetService [[0, 0], [0, 0]] [[ { value: 0, class: 'water'}, { value: 0, class: 'water'}], [ { value: 0, class: 'water'}, { value: 0, class: 'water'}]] SetupTableGetService SetupTableTransformer [[0, 0], [0, 0]]
  • 23. Test Unitario Angular - SetupTableCheckService SetupTableCheckService [[ { value: 0, class: 'water'}, { value: 0, class: 'water'}], [ { value: 0, class: 'water'}, { value: 0, class: 'water'}]] x y length isVertical true/false
  • 24. Test Unitario Angular - Controllers SetupControllerDirective SetupController SELECT_SHIP checkSetupShip resetCellClass
  • 25. Test Unitario Angular - Directive Template https://github.com/karma-runner/karma-ng-html2js-preprocessor npm install karma-ng-html2js-preprocessor --save-dev module.exports = function(config) { config.set({ preprocessors: { '**/*.html': ['ng-html2js'] }, ... ngHtml2JsPreprocessor: { moduleName: 'templates' }, …. files: [ ... '**/*.html' ],
  • 26. Test Unitario Angular - Directive setupTableDirective ● Comprobación de creación de tablero ● Conducta tras pasar por las celdas mouseenter/mouseleave
  • 27. Referencias https://jasmine.github.io/2.5/introduction AngularJS By Example - Packt Publishing https://github.com/atomicposts/battleship