Aplicar TDD en Vue: Desarrollo y Pruebas de Funcionalidades

Para aplicar TDD en Vue hay que entender primero qué es TDD y entender que se puede aplicar a cualquier desarrollo de software.

Siempre he dicho que el ejemplo es la madre de todas las enseñanzas y la práctica el padre. Así que vamos a agregar la funcionalidad a nuestro proyecto de que, cada vez que le den click al botón, cambie un elemento de data y se le sume 1 a su valor.

TDD o Test-Driven Development es un paradigma de desarrollo que consiste en cinco etapas.

DIAGRAMA DE LAS FASES

1) Escribir la prueba

En esta primera etapa lo que se hace es, en el archivo de pruebas se piensa en cómo se debe comportar la aplicación con la nueva feature (requisito nuevo) que se va a integrar.

Y con eso en mente se debe de crear la prueba.

Con lo que comentamos anteriormente, vamos a escribir nuestra prueba.

Empezamos pensando en la funcionalidad. Requerimos cambiar una propiedad de data cada vez que demos click al botón.

Entonces la prueba debe de primero probar que se hizo click.

Para esto, usaremos dos métodos de Vue Test Utils:

• find()

Recibe un string o un componente y regresa el primer elemento que encuentra con ese selector.

• trigger()

Lanza un evento del elemento que se seleccionó.

Recibe un string con el nombre del evento.

Estos métodos los vamos a usar para simular un click en nuestro botón, de la siguiente manera.

wrapper.find('button').trigger('click')

Ya que simulamos el botón, solo hay que comprobar que se le sumó 1 al anterior valor, entonces vamos a guardar el valor anterior y compararlo con el valor después del click, resultando en esto.

describe('Probar que se cambió la propiedad changeTest ', () => {

    test('should click a button', () => {

    const lastValue = wrapper.vm.changeTest

    wrapper.find('button').trigger('click')

    expect(wrapper.vm.changeTest).toBe(lastValue+1)

  })

})

Listo.

2) La prueba falla

El siguiente paso es ver que la prueba falle y ver que se necesita hacer para que pase.

Cuando corremos la prueba, esto es lo que nos sale.

Así que lo que sigue es escribir el código para que esto no pase.

3) Escribir código

El primer error que notamos es que trata de buscar un elemento de data() que no existe, entonces crearemos el elemento.

Como es un tipo number, vamos a inicializarlo con algún número.

Lo siguiente es hacer que el valor si cambie cada vez que le damos un click. Para ellos debemos agregar una línea de código a nuestra funcion setData()

4) Pasar prueba

Ahora debemos ver si en realidad pasamos la prueba, así que corremos nuestras pruebas.

En efecto, con eso es suficiente.

5) Refactor de código

El último paso sería checar si nuestra implementación de la solución puede mejorarse, en caso de que no habremos terminado de añadir esa feature a nuestro código.

Puedes hacer eso con absolutamente todas las features que desees.

Esta forma de trabajar nos obliga a cumplir con un estándar no solamente cuando estamos haciendo código, sino también cuando estamos planeando como hacerlo.

---

¿Qué otra feature se te ocurre que le podamos agregar al proyecto de esta manera? Pónlo en los comentarios.