JavaScript: Ejemplo de prueba unitaria con Mocha y Chai

Mocha es un framework de pruebas para JavaScript. Se puede utilizar tanto cuando se ejecutan las funciones de JavaScript en Node, como si ejecutan en un browser.

Con Mocha se pueden escribir funciones que prueban las funciones de los sistemas web desarrollados. Esta práctica consigue automatizar las pruebas de manera que cada vez que se tienen repetir las pruebas sobre el código desarrollado solo es necesario "apretar un botón". Se obtienen automáticamente los resultados permitiendo saber al desarrollador si han ido bien o mal. En el caso de que haya habido resultados incorrectos de las funciones de prueba, estás indicarán exactamente en que parte del código se ha producido el resultado incorrecto y el motivo que lo ha provocado. Esta información es muy valiosa cuando estamos haciendo frente a miles o decenas de miles de líneas de código que están intimamente relacionadas. Muchas veces cambiar algo en una línea, resulta que provoca que falle algo en otra parte del código de forma inesperada. Esto es debido a el acoplamiento entre funciones, que no es deseable pero es inavitable. Las pruebas no resuelven al 100% este problema, pero ayudan mucho. Por ejemplo en las pruebas de regresión que sirven para comprobar que lo que estaba funcionado no ha dejado de funcionar cuando se modifica el código.

En este artículo se muestra un ejemplo de uso de Mocha para probar una función que obtiene usuarios desde el API Rest https://dummyapi.io/data/api . La función a probar es:

A esta función con Mocha se le va a construir una función de prueba. Esta función es:

Esta función de prueba contiene pruebas para el fichero readUser.js que se especifica con describe('readUsers: ', (). En este fichero hay una única función que es getResource y sus pruebas se especifican con describe('getResource', (). Sobre esta función se realizan 5 casos de prueba, cada uno de ellos descritos con it ('should... En should hay una autoexplicación textual del contenido de la prueba. A continuación se ejercita (ejecuta) la función y con expect y assert se comprueba el resultado de la misma. Es habitual utilizar alguna librería para mejorar la legibilidad de los expect y los assert con los frameworks de prueba. En este ejemplo se está usando Chai.

Para ejecutar la prueba se utiliza el comando:

Y el resultado de la prueba se muestra de la siguiente manera:

Conclusión

La construcción de pruebas automatizadas proporciona una red de seguridad a los sistemas. Esto se debe a que gracias a las pruebas los desarrolladores pueden modificar el código apoyandose en programas que desvelan si al cambiar alguna línea se ha arreglado algo pero se ha estropeado otra parte de forma imprevista. Así los sistemas se mantienen al día con mucho menos esfuerzo y se consigue mantenerlos firmes y robustos a lo largo del tiempo.

Agradecimientos

Este ejemplo lo he podido construir gracias a lo que he aprendido en un curso de Dimitris Loukas llamado JavaScript Testing Best Practices.

Código

El código se puede descargar en https://github.com/MarisaAfuera/exampleMochaChai

JavaScript: Ejemplo de función reduce de array

La función reduce trata los elementos de un array con una función que suministra el programador, siendo su objetivo procesar dichos elementos para obtener un único valor.

Este post muestra un ejemplo codificado de tres maneras distintas con la intención de que sea comprensible para el máximo número de programadores. Las características de las tres formas son:

• Codificado con arrow function
• Codificado con función anónima 
• Codificado con función clásica

El ejemplo aplica reduce sobre un array de objetos que representan comunidades autónomas con nombre(propiedad name) y población(propiedad population). Con la función reduce se suministra una función que suma las poblaciones de cada una de las comunidades autónomas para acabar obteniendo la población total. Notese que la función reduce carga en accumulator un elemento con la misma estructura que los del array que está tratando, es decir un objeto con las propiedades name y population.

Codificado con función arrow

Codificado con función anónima

Codificado con función clásica

La función reduce tiene mas posibilidades siendo posible enviar más parámetros a la función desarrollada por el programador. Para más información Función reduce

Espero que sea de ayuda. 

Ciao

JavaScript: Ejemplo de función filter de array

El método filter() se aplica sobre un array y devuelve un nuevo array que contiene los elementos que cumplan la condición establecida por el programador en la función invocada por filter.

Este post muestra un ejemplo codificado de tres maneras distintas con la intención de que sea comprensible para el máximo número de programadores. Las características de las tres formas son:

• Codificado con arrow function
• Codificado con función anónima 
• Codificado con función clásica

En el ejemplo se trata un array screens que contiene objetos que representan pantallas. De cada pantalla se conoce la marca (propiedad brand), los píxeles horizontales (propiedad horizontalPixel) y los píxeles verticales (propiedad verticalPixel). La función filter procesa cada pantalla seleccionando solo aquellas que tienen más de 1200 píxeles horizontales.

Codificado con arrow function

Codificado con función anonima

Codificado con función clásica 

En este último caso parece como que decideIfBig recibe el parámetro (objeto de tipo screens) 'automágicamente'. Cuando pasamos la función a filter no indicamos que parámetros puede usar. Lo que ocurre es que filter de forma predefinida envía parámetros a la función decideIfBig, en este caso el elemento de screens que es el array que se está procesando. Para más información Función filter

Espero que esto ayude.

JavaScript: Ejemplo de función map de array

La función map permite operar con los elementos de un array sin necesidad de hacer que el programador tenga que realizar operaciones de bucle for o foreach. La función map así facilita el trabajo de los programadores que no tienen que controlar las iteraciones y sus índices, que en muchos casos son el origen de errores inesperados tales como bucles que nunca acaban o tratamientos que se salen de los límites del array.

Supongamos que tenemos el siguiente array:

se requiere tratar cada elemento para añadir la propiedad priceByMeter, que se obtiene de dividir el valor de price por el de meters. Con la función map el código podría ser como sigue:

en este código se define una nueva variable a la que se le asigna el resultado de aplicar la función map al array flats. La función map aplica una función anónima que recibe el parámetro flat, este parámetro representa a cada uno de los elementos de flats que en este caso son objetos. Sobre cada uno de los 3 elementos de flats se aplica la función que devuelve un objeto nuevo robj.  En robj cargamos las propiedades del objeto de flats y añadimos la nueva propiedad priceByMeter calculada con price y meters. La función anónima devuelve el nuevo objeto, que para cada elemento de flats incorpora la nueva propiedad. El resultado es que pricebymeter es un nuevo array que contiene los siguientes elementos:

Conclusión

La función map permite hacer código que se ocupa más de decir lo que hay que hacer que de decir como se ha de hacer. Esto es el camino hacía la programación funcional que produce código más fácil de entender. Pero esto es otra historia.

Espero que este ejemplo sirva para que algún hacendoso programador pueda comprender está función no gastando mucho de su apreciado tiempo.