CategoríaUncategorized

Testing Javascript con QUnit

QUnit es un framework de testing de Javascript muy parecido a JUnit o Nunit, que nos facilita las pruebas de nuestras aplicaciones javascript, QUnit fue desarrollado por el equipo de jQuery para realizar el testing.

QUnit es facil, rapido y funcional, en las siguientes lineas explicare como realizar un test básico y organizarlo en módulos.

Configurando QUnit

Para configurar QUnit podemos instalarlo mediante bower o cualquier gestor de paquetes.

bower install qunit

Con QUnit instalado hacemos referencia a los archivos qunit.js y qunit.css en nuestro archivo html.

<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8">
 <title>QUnit</title>
 <script src=”bower_components/qunit/qunit/qunit.js”></script>
 <link rel=”stylesheet” href=”bower_components/qunit/qunit/qunit.css”>
 <script src=”Test/tests.js”></script>
</head>
<body><div id=”qunit”></div>
 <div id=”qunit-fixture”>
 </div> 
</body>
</html>

Ahora creamos nuestro Javascript que incluye el test, ejemplo tests.js para este ejemplo usaremos el assertion ok.

//definimos el test con un nombre
test(“my first test”,function(){
 ok(1,”ok works”);
});

QUnit posee diferentes Assertions para conocer mas sobre los diferentes tipos, podemos visitar la api oficial http://api.qunitjs.com/category/assert/.

quni1Resultados de nuestro test.
Cuando organizamos nuestro código a nivel físico lo realizamos por carpetas y archivos este ejemplo he creado una carpeta Test que incluye la estructura similar a mi aplicación.

QUnit nos permite estructurar nuestro test por módulos, la razón de los módulos es agrupar un grupo de test bajo un mismo nombre o “tag”.

los módulos poseen dos callbacks “beforeEach y afterEach”, beforeEach se ejecuta al inicio de nuestro modulo, y before al finalizar, estas funciones nos facilitan configurar objetos, asignar para ser utilizados en nuestros test.

Ejemplo:

module( “jugadores module”, {
 beforeEach: function() {
 this.jugadores = [ “dany”, “lebron”, “curry” ];
 },
 afterEach: function(){
}
});
test(“Total de jugadores”,function(){
equal(this.jugadores.length,3,”son igual a 3");
});

test(“viene el jugador dany”,function(){
 equal(this.jugadores[0],”dany”,”dany viene”);
});

module(“equipo module”);
test(“tamaño del nombre de equipo cavs”,function(){
 equal(“cavs”.length,4,”es cuatro”);
});

El resultado es el siguiente:

QUnit
Happy Testing!

Modulos y Controllers de Angular con Typescript

Typescript nos facilita la posibilidad de poder crear Módulos y Controllers de Angular utilizando Clases de Typescript en vez de Funciones Javascript.

Esto nos permite aprovechar las ventajas de la programación OOP para poder implementar Interfaces , Herencia, Polimorfismo etc.

Los Controllers en angular nos permiten definir un modelo para la vista y los métodos a los cuales ella podrá acceder, cuando creamos un controller en angular con javascript realizamos lo siguiente:

– Registramos el controller en el módulo.
– Definimos las funciones e inyectamos las dependencias.
– Definimos variables que representan el controller
– Implementamos métodos para el modelo.

Como en este ejemplo:

angular.module(“pepapigtv”).controller(“InicioController”,[InicioController]);
function InicioController(){
var vm = this;
vm.tituloinicio = “Hola Pepapigtv”;
vm.yasalude = false;
vm.Saludar = function() {
vm.saludo = “Hola George”
vm.yasalude = true ;
}
}

Este mismo proceso lo realizaremos utilizando Clases de Typescript, para continuar con el proyecto de ejemplo de la pepapig del artículo anterior.

En el post de hoy realizaremos lo siguiente:

  • Vincular la vista con el Controller.
  • Crear una Interfaz que especifica lo que debe exponer el controller.
  • Crear una Clase Controller.
  • Registrar el Controller.
  • Renderizar las propiedades y metodos del modelo expuesto por el controller.

En el archivo pepapig.ts modificaremos la configuración del RouteProvider, este nos permite además de especificar el template que va a utilizar para una ruta, también decir que controller se encargará de esa vista.

Vamos a nuestro directorio raíz de la aplicación y modificamos el /app/pepapig.ts a cada template definido le especificamos su respectivo controller, el resultado final es el siguiente:

module pepapig{
var pepapigtv = angular.module("pepapigtv",["ngRoute"]);
console.log("Hola Soy Pepapig OINN!!!");
pepapigtv.config(pepaRouteConfig)
//Configuracion del router
function pepaRouteConfig($routeProvider: ng.route.IRouteProvider) : void {
$routeProvider.when("/inicio",{
templateUrl: "app/views/inicio.html",
controller: "inicioController as vm"
}).when("/personajes",{
templateUrl: "app/views/personajes.html"
}).when("/acerca",{
templateUrl: "app/views/acerca.html"
}).otherwise("/inicio");
}
}

Con lo anterior hemos dicho al RouteProvider que la vista inicio.html será manejada por el controller inicioController.

Interfaz y Controller:

Cuando creamos Controllers de Angular utilizando Typescript podemos usar interfaces, en la cual se definirán las variables y los métodos que nuestro controller proveerá.

El controller expondrá a la vista las propiedades y métodos que hemos acordado en la interfaz y podemos usar el constructor para definir valores iniciales a estas variables.

Creando el Controller

Vamos al directorio app/controllers/ aquí creamos “inicioController.ts”, para tener el código más organizado creamos nuestro controller dentro de pepapig.controllers.

las Interfaces deben empezar con I por estandar, en nuestro caso IInicioController, en él definimos las propiedades utilizando Type Anotation para especificarel tipo que es cada una y la firma de los métodos.

module pepapig.controllers {
interface IInicioController {
//titulo de la view de tipo string.
tituloinicio:string;
//para saber si ya se han saludado de tipo boolean true o false
yasalude:boolean;
//un metodo que saludara al usuario.
Saludar(): void;
}
}

Con la interfaz ya creada podemos implementarla en el controller y usamos la palabra class InicioController e “implements” la cual forza a que nuestra clase “InicioController” cumpla con el contrato de la interfaz IInicioController.

Definimos las variables de acuerdo a nuestra interfaz, además en el constructor le damos unos valores por defecto a las propiedades, nuestro código debería quedar como lo siguiente:

class InicioController implements IInicioController {
tituloinicio:string;
yasalude:boolean;

constructor(){
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}

Saludar(){
this.yasalude = true;
this.tituloinicio = "Como te llamas tu ?"
}

}

Ahora nos falta registrar nuestro controller en el módulo de pepapig
al igual que en javascript usamos:

angular.module("pepapigtv").controller("InicioController",InicioController);

El resultado final sera este:

module pepapig.controllers {
interface IInicioController {
tituloinicio: string;
yasalude: boolean;
Saludar(): void;
}

class InicioController implements IInicioController {
tituloinicio: string;
yasalude: boolean;
constructor() {
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}
Saludar() {
this.yasalude = true;
this.tituloinicio = "Como te llamas tu ?"
}
}
angular.module("pepapigtv").controller("InicioController", InicioController);
}

Ahora nos toca modificar la vista para que pueda renderizar los valores expuestos por el Controller, asi que vamos a inicio.html y utilizamos las expresiones de angular para renderizar el modelo en la vista y además usamos la directiva ng-click para poder llamar el método desde un button.

{{mv.tituloinicio}} renderizamos el valor del modelo mv y la propiedad tituloinicio,

creamos un input de tipo button y la directiva ng-click la vinculamos a la acción vm.Saludar().

*ng-click: nos permite vincular una accion a partir de un elemento que se le ha realizado un click.

Nuestra vista inicio.html debería quedar como esto:

<h1>Inicio</h1>
{{vm.tituloinicio}}

<input type="button" value="Hola" />

Compilamos y vinculamos en nuestro index.html el controller creado, justo después de pepapig.js luego de esto compilamos (ctrl + shift + b) e iniciamos nuestro webserver y vemos como nuestro controller interactúa con nuestra app.

En resumen, hemos visto como crear controllers de angular usando clases en typescript en implementando interfaces, aquí el resultado de nuestro .ts convertido en InicioController.js

var pepapig;
(function (pepapig) {
var controllers;
(function (controllers) {
var InicioController = (function () {
function InicioController() {
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}
InicioController.prototype.Saludar = function () {
if (this.yasalude) {
alert("ya te salude!!!");
}
else {
this.yasalude = true;
}
this.tituloinicio = "Como te llamas tu ? " + this.yasalude.valueOf();
};
return InicioController;
})();
angular.module("pepapigtv").controller("inicioController", InicioController);
})(controllers = pepapig.controllers || (pepapig.controllers = {}));
})(pepapig || (pepapig = {}));

Happy Typescripting!!

SQLServer y soporte a “Ruso”

Muchas veces nos olvidamos de la codificación de los diferentes idiomas, hoy me toco el ruso, no solo el soporte del browser en sino tambien a nivel de base de datos.

Links que me ayudaron:

http://social.msdn.microsoft.com/Forums/sqlserver/en-US/4b66351c-0752-4987-b478-a8c58539b88d/storing-russian-characters-in-a-column?forum=sqldatabaseengine

http://stackoverflow.com/questions/16762021/cyrillic-symbols-in-sql-code-are-not-correctly-after-insert

Momentjs, DateJs y DateRangePicker

En esta semana me he visto en la necesidad de trabajar unos detalles de un datepicker de bootstrap, que a mismo tiempo pueda controlar las fechas de selección, los rangos de días y el mínimo de día pero a su vez sea multiIdioma y bloqueos de días.

He utilizado las siguientes librerías:

bootstrap-daterangepicker DatePicker de Bootstrap que permite bloqueo de fechas y rangos.

MomentJS: viene incluido en bootstrap-daterangepicker.

DateJS: excelente librería de Js para manejar Fecha.

La implementacion esta con los comentarios entre lineas, en caso de querer bajar el proyecto de ejemplo MomentJsDateJs .

Aqui explicare directamente el codigo javascript, en el cual hago referencias a los elementos que estan definidos en el html del codigo de ejemplo.

$(document).ready(function () {
moment.lang('es');
var FieldFromDate = $('#finicio');
var FieldToDate = $('#ffin');
var valFromDate = {
startDate: moment(),
endDate: moment().add('days', 365),
minDate:moment(),
singleDatePicker: true,
format: 'L' };
var valToDate = {
startDate: moment().add('days',1),
endDate: moment().add('days', 365),
minDate: moment().add('days', 1),
singleDatePicker: true, format: 'L' };
FieldFromDate.daterangepicker(valFromDate);
FieldToDate.daterangepicker(valToDate);
FieldFromDate.on('apply', function (ev, picker){
var dinicio = new Date.parse($("#finicio").val());
var dfin = new Date.parse($("#ffin").val());
if(moment(dinicio).isAfter(dfin))
{
console.log('la fecha de inicio es mayor que la fecha final ');
FieldToDate.val(moment(dinicio).add('days',1).format('L'));
var valToDate = { startDate: moment(dinicio).add('days',1),
endDate: moment(dinicio).add('days', 30),
minDate: moment(dinicio).add('days', 1),
singleDatePicker: true, format: 'L' };
FieldToDate.daterangepicker(valToDate); }
if(moment(dinicio).isBefore(dfin)) {
console.log('la fecha de inicio es menor que la final'); }
 });
 });

Sumar valores en un Xml con Linq

Si queremos sumar todos los hijos de un elemento en un xml, por ejemplo en un xml que tnega cuenta, productos y en impuesto queremos sumar todo los totales.

XDocument dc = new XDocument();
        dc = XDocument.Parse(_document.InnerXml);

                var total = dc.Descendants("CUENTA")
                              .Elements("PRODUCTOS")
                              .Elements("IMPUESTOS").Elements("TOTAL").Sum(bs => Convert.ToDecimal(bs.Value));

Descargar un fichero en asp.net

En un proyecto necestaba inicializar una descarga este codigo me ayudo.

 Response.ContentType = "text/xml";
 Response.AppendHeader("content-disposition", "attachment;filename=clientes.xml");
 Response.Write("dany");
 Response.End();

Generar numeros aleatorios con C#

Para generar numeros randoms en un rango,

public string NewNumber()
 {
 Random rnd = new Random();
 return rnd.Next(1, 100).ToString();
 }

String Format for DateTime [C#]

Diferentes formas de realizar formato a fechas 🙂

http://www.csharp-examples.net/string-format-datetime/

© 2017 Danywalls

Tema por Anders NorénSubir ↑