Workshop: Behavior Driven Development (BDD) in JavaScript

Transcripción

1 Workshop: Behavior Driven Development (BDD) in JavaScript Este documento le guiará paso a paso en el desarrollo de las actividades del presente Workshop para alcanzar el objetivo planteado. Objetivo Hacer uso del Framework Jasmine para la creación de una aplicación JavaScript siguiendo la metodología BDD. En dicho ejemplo, se mostrará/enseñará el uso de las diferentes opciones que este Framework provee. 1. Una breve introducción a BDD 2. Preparando nuestro ambiente de trabajo Es necesario instalar lo siguiente: 1 Descargar Jasmine 1. Descargar la última versión de: 2. Extraer el contenido y remover el contenido de las carpetas /src y /spec 2 Preparando el archivo de ejecución 3 Crear los archivos necesarios 3. Editar el archivo SpecRunner.html 4. Reemplazar el bloque de spec files por: <script type="text/javascript" src="spec/specfile.js"></script> 5. Reemplazar el bloque de source files por: <script type="text/javascript" src="src/sourcefile.js"></script> 6. Crear los siguientes archivos (sin ningún contenido): /src/sourcefile.js /spec/specfile.js 4 Probar nuestro ambiente 7. Carga en el browser el archivo: SpecRunner.html

2 3. El clásico ejemplo Hola Mundo Workshop: Behavior Driven Development (BDD) in JavaScript 1 Crear el primer Spec 8. Nuestro primer SPEC será: Human should be able to say Hello World! 9. En el archivo SpecFile.js, realizar la implementación del SPEC: describe("human", function(){ it("should be able to say 'Hello World!'", function(){ expect(human.sayhello()).tobe('hello World!'); 2 Ejecutar el Spec creado 10. En el browser, recargar el archivo de ejecución (Ctrl + F5) 11. Nuestro SPEC tiene el estado de FAILED 3 Realizar la implementación de la funcionalidad 4 Volver a crear el Spec creado. 12. En el archivo SourceFile.js, crear la Clase human con el método sayhello Human = { sayhello: function(){ return 'Hello World!' 13. En el browser, recargar el archivo de ejecución (Ctrl + F5) 14. Nuestro SPEC tiene el estado de PASSED 4. Ahora un ejemplo más elaborado: Calculadora 1 Modificar el archivo ejecutable 15. Editar el archivo SpecRunner.html 16. Reemplazar el bloque de spec files por: <script type="text/javascript" src="spec/calculatorspec.js"></script> 17. Reemplazar el bloque de source files por: <script type="text/javascript" src="src/calculator.js"></script> 18. Crear los archivos correspondientes en las carpetas /src y /spec 2 Definir SPECS: 19. Nuestros SPECS iniciales serán los siguientes: a. able to add two numbers b. able to subtract one number from another one c. able to multiply two numbers d. able to divide one number by another one 3 Implemetar el SPEC: able to add two numbers 20. En el archivo /spec/calculatorspec.js definir los siguiente: describe("calculator", function(){ it("should be able to add two numbers", function(){ var mycalc = new Calculator(); expect(mycalc.add(4, 2)).toEqual(6); 21. Actualizar el archivo de ejecución en el browser (repetir en cada paso).

3 4 Implemetar el SPEC: able to subtract one number from another one 5 Implemetar el SPEC: able to multiply two numbers 6 Implemetar el SPEC: able to divide one number by another one 7 Implementar la clase Calculator 8 ADD SUBSTRACT MULTIPLY DIVIDE 22. Factorizar la instanciación de Calculator 23. Adicionar el siguiente SPEC en el suite: it("should be able to subtract one number from another one", function(){ expect(mycalc.substract(4, 2)).toEqual(2); 24. Adicionar el siguiente SPEC en el suite: it("should be able to multiply two numbers", function(){ expect(mycalc.multiply(4, 2)).toEqual(8); 25. Adicionar el siguiente SPEC en el suite: it("should be able to divide one number by another one", function(){ expect(mycalc.divide(4, 2)).toEqual(2); 26. En el archivo /src/calculator.js definir los siguiente: Calculator = function(){ ; return {; 27. Adicionar el siguiente método en la clase: add: function(firstaddend, secondaddend){, return (firstaddend + secondaddend); 28. Adicionar el siguiente método en la clase: substract: function(minuend, subtrahend){, return (minuend - subtrahend); 29. Adicionar el siguiente método en la clase: multiply: function(multiplier, multiplicand){, return (multiplier * multiplicand); 30. Adicionar el siguiente método en la clase: divide: function(dividend, divisor){ return (dividend / divisor);

4 5. Complicando nuestro ejemplo Workshop: Behavior Driven Development (BDD) in JavaScript 1 Definir nuevos SPECS 31. Los nuevos SPECS son: a. Calculator when initialized should have defined a last result b. Calculator should not have a null last result (but zero) value when initialized c. Calculator given just one number should be able to add it to the last result d. able to get the average from the saved values in the memory e. Calculator should have an empty memory when initialized 2 Adicionar SETUP y TEARDOWN a los specs 32. Para cada spec, limpiamos la memoria y el último resultado beforeeach(function() { mycalc.reset(); aftereach(function() { // Do some other stuff 33. Implementación: 3 Implemetar el SPEC: reset:function(){ buffer = []; lastresult = 0;, 34. Usando el matcher tobedefined Calculator when initialized should have defined a last result 4 Implemetar el SPEC: it("when initialized should have defined a last result ", function(){ expect(mycalc.lastresult).tobedefined(); 35. Usando los matchers not.tobenull y tobetruthy Calculator should not have a null last result (but zero) value when initialized it("should not have a null last result (but zero) value when initialized", function(){ expect(mycalc.lastresult).not.tobenull(); expect(mycalc.lastresult == 0).toBeTruthy(); 36. Implementación, modificar el cuerpo de la Clase Calculator como sigue: Calculator = function(){ var buffer = []; var lastresult = 0; return { lastresult: lastresult, ; ;

5 5 Implemetar el SPEC: Calculator given just one number should be able to add it to the last result 37. Usando spy (tohavebeencalled y andreturn) para controlar llamadas a métodos it("given just one number should be able to add it to the last result", function(){ expect(mycalc.add(3)).toequal(3); expect(mycalc.add(2)).toequal(5); 38. Implementación: add: function(firstaddend, secondaddend){ if (secondaddend) lastresult = firstaddend + secondaddend; else lastresult += firstaddend; 6 Implemetar el SPEC:, return lastresult; 39. Usando spy andcallthrough y tohavebeencalledwith able to get the average from the saved values in the memory it("should be able to get the average from the saved values in the memory ", function(){ spyon(mycalc, 'add').andcallthrough(); mycalc.addtobuffer(1); mycalc.addtobuffer(2); mycalc.addtobuffer(3); expect(mycalc.average()).toequal(2); expect(mycalc.add).tohavebeencalledwith(1); expect(mycalc.add).tohavebeencalledwith(2); expect(mycalc.add).tohavebeencalledwith(3); 40. Implementación: average: function(){ lastresult = 0; for (var i = 0; i < buffer.length; i++){ this.add(buffer[i]); return lastresult / buffer.length;