Friday, June 26, 2015

AngularJs, Jasmine TDD y el ViewModel

He estado utilizando Jasmine (BDD testing framework for Javascript) en conjunto con AngularJs durante los pasados 6 meses. Después de la curva de aprendizaje, es muy probable que aumente la rapidez con la que se escribe un código. El motivo de realizar el siguiente ejemplo, es a largo plazo tratar de implemetar Gherkin con Jasmine y AngularJs.

Cuando estoy trabajando con C# utilizo SpecFlow (que pertenece a la familia de Cucumber) y Gherkin. Gherkin es el lenguaje que se comunica de la lógica de negocios al programador y describe como el programa debería de comportarse. Existe una libreria actualmente llamada cucumberJs, que realiza BDD de la aplicación por completo. Lo que estoy buscando es utilizar o crear una libreria usando Gherkin, con la finalidad de poder realizar pruebas de lógica, o los más llamados TDD. Esto consiste en hacer pruebas automatizadas de ciertas partes del código.

Existen muchos argumentos sobre la diferencia entre el BDD (Behavior-driven development) y TDD (Test-driven development), y tengo claro que los BDD hacen pruebas de todo el comportamiento del programa. Sin embargo, no todas las empresas o proyectos tienen la capacidad o incluso la inversión de realizar pruebas completas. A pesar de esto, es bastante recomendable utilizar el lenguaje BDD para realizar pruebas por unidades.

Por ejemplo, la automatización de BDD seria simular la ejecución de una página web de principio a fin:

# language: es

Característica: Sumar
  Para evitar hacer errores tontos
  Como un ser humano
  Quiero saber la suma de los números

  Escenario: Sumar dos números
    Dado que ingreso "http//ejemplo.calculadora.com"
    Y el usuario esta autorizado
    Y que he introducido "1" en la calculadora
    Y que he introducido "3" en la calculadora
    Cuando oprimo el boton sumar
    Entonces el resultado debe ser "4" en la pantalla

Desde mi punto de vista, los BDD son excelentes, pero nos cuestan más tiempo, ya que se tiene que hacer el simulado del buscador. Mientras que en un TDD, por ejemplo, voy a realizar las pruebas de algún método o algunas propiedades de mi clase.

Este seria un ejemplo de TDD:

# language: es

Característica: Calculadora
  Para evitar hacer errores tontos
  Como un ser humano
  Quiero saber la suma de los números

  Escenario: Sumar dos números
    Dado que estoy en la calculadora
    Cuando y sumo dos números "1" y "3"
    Entonces el resultado debe ser "4"

A simple vista, las características de estos dos ejemplos se ven muy similares. Sin embargo, en el segundo ejemplo (TDD) estoy haciendo la prueba del método que ejecuta la suma. Mientras que en el primer ejemplo (BDD) estaría haciendo pruebas de toda la aplicación como un conjunto.

El objetivo principal que más me atrae al momento de realizar TDD, es que se realiza el diseño de separación de preocupaciones entre capas. Como resultado, estoy haciendo pruebas de mis métodos o de pequeñas partes del sistema por separado, lo cual hace mucho más sencillo encontrar algún problema (bugs), ya que si alguna prueba falla sabremos exáctamente donde se encuentra el mismo.

Este es un ejemplo de AngularJs y CucumberJS trabajando en conjunto, utilizando Karma (Spectacular Test Runner for Javascript).

Como ven estoy tratando de simular el ViewModel para NO utilizar la variable scope.

Pueden descargar la aplicación completa en el siguiente enlace:

https://github.com/manuelkuffo/AngularJs-JasmineTDD

Ejecutar en caso de Windows

$ npm install

Para poder ejecutar las pruebas usando WebStorm hacemos lo siguiente:



El motivo principal de este ejemplo es demostrar la importancia y las diferencias entre TDD y BDD, uyudándome con ejemplos básicos. Existe mucha controversia entre estos dos temas, pero espero en un futuro ejemplo poder crear alguna librería libre como cucumberJs pero para poder realizar solamente TDD.

Definitivamente, me atrae mucho el tema de escribir pruebas automatizadas antes de codificar. Al principio es difícil adaptarse al cambio, pero por experiencia propia puedo decir que vale la pena.

No comments :

Post a Comment