De Chutzpah a Gulp + Karma - Visual Studio 2015

Oct 7, 2015 9:00:00 AM / by daniel.comas

Visual Studio + Gulp + Karma + Jasmine  

Este artículo seguro que le gustará a todo WEB developer de .NET y más concretamente a los Testers. Hoy os traemos como pasar de Chutzpah a Gulp con Karma. Recordemos que Chutzpah nos permitía ejecutar nuestros juegos de pruebas mediante la utilización del Task Explorer en VS 2013.

 

Instalar Node.js

 

Descargar e instalar https://nodejs.org/en/

 

Crear package.json en el directorio de la aplicación

 

{
"name": "yourapplication",
"version": "0.0.0",
"description": "",
"devDependencies": {
"gulp": "^3.9.0",
"jasmine-core": "^2.3.4",
"karma": "^0.13.10",
"karma-chrome-launcher": "^0.2.0",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.1",
"phantomjs": "^1.9.18"
}
}

 

Instalar los paquetes préviamente configurados

 

Ejecutar npm install

ó

Crear el fichero anterior mediante el editor en VS 2015 y guárdalo. En ese momento se descargaran todos los paquetes creando la carpeta node_modules. Una buena recomendación es ocultar esta carpeta o excluirla del proyecto dependiendo del proyecto que estéis haciendo.

 

Instalar gulp de forma global

 

Gulp es un paquete que necesita ser creado como paquete global.

 

npm install gulp -g

 

 

Cambiar el orden de utilización de los paquetes de Node

 

Herramientas -> Opciones -> Proyectos y soluciones -> Herramientas web externas

 

Deberá quedar el orden de esta forma:

 

 

Crear nuestro gulpfile.js

 

Ejecutaremos el navegador PhantomJS para mostrar los datos de las pruebas sin abrir el navegador. En cambio, usaremos Chrome_allow_files cuando queramos debugar en el navegador en el caso que alguna pruebas no este funcionando como debería.

 

var gulp = require('gulp');
var karma = require('karma').Server;

gulp.task('test', function (cb) {
new karma({
configFile: __dirname + '/karma.conf.js',
singleRun: true,
urlRoot: '/',
browsers: ['PhantomJS']
}).start();
});

gulp.task('default', ['test']);

 

 

Crear nuestro karma.conf.js

 

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
...
'js/pages/pages.js',
'js/templates/*.html',
'js/test/*.js',
],
browsers: ['PhantomJS'],
customLaunchers: {
Chrome_without_security: {
base: 'Chrome',
flags: ['--disable-web-security --allow-file-access-from-files']
},
Chrome_allow_files: {
base: 'Chrome',
flags: ['--allow-file-access-from-files']
}
},
plugins: [
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-chrome-launcher'
],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
singleRun: true
});
};

 

Prueba (con Jasmine)

Vuestra prueba utilizando las librerías, frameworks javascript o el vuestro própio.

 

//#region Mockjax

var json = [{
//datos a mockear
}]

$.mockjax({
type: "GET",
datatype: "json",
url: $.ajaxSettings.url + 'api/suggestions/list',
responseText: json
});

//#endregion

describe("Suggestions Page", function () {
beforeEach(function (done) {
$.global.preferCulture("ca-ES");

$.datepicker.setDefaults($.datepicker.regional.ca);

$("body").append("<div id='template'></div>");
page = $.pages.suggestions_default();
page.init();

setTimeout(function () {
done();
}, 1000);
});

afterEach(function () {
$('#template').remove();
});

it("load grid", function () {
var records = $("#suggestionsgrid").jqGrid('getGridParam', 'records');
expect(records).toEqual(67);
});
});
});

 

IT works!

 

Ahora sólo nos falta ejecutar las pruebas:

 

 

 

 

Comentar que también podréis relacionar (como fue el caso del Bundler & Minifier) cuando queréis que se ejecuten las pruebas (Enlaces - Bindings), antes de compilar, después, etc...

 

 

 

Topics: BDD, Gulp, Ingens Developments, Jasmine, JavaScript, Karma, .NET, Programación, TDD, Tests, Visual Studio

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas