Pruebas Unitarias y Asíncronas en Vue con $nextTick

Para las pruebas unitarias solamente revisaremos el cambio de los elementos por los eventos lanzados. Empezamos por crear otra carpeta llamada integration dentro de nuestra carpeta de pruebas.

Mientras estemos dentro de la carpeta de test/unit todos los archivos que terminen en spec.js se probarán.

En esta carpeta crearemos un archivo llamado dataChange.spec.js.

Importamos el módulo mount que, como recordarás, es para montar el componente con sus hijos, este módulo es muy importante para estas pruebas.

NOTA: Si tienes muchos componentes hijos, prueba el padre sin los hijos (utiliza shallowMount) , así ya no tendrán que renderizarse en cada prueba, si requieres probar los hijos, trata de sólo montarlo una vez.

Creamos un wrapper del padre:

const wrapper = mount(App)

Ahora, como vamos a probar los cambios debemos tener un estado inicial. Para eso vamos a sacar todos los valores de los elementos que buscamos, antes de hacer el click.

Quedando de la siguiente manera:

    const nameTag = wrapper.find('.pokemon-name')

    const lastNameValue = nameTag.text()

    const imgTag = wrapper.find('img')

    const lastImgValue = imgTag.attributes().src

    const typeTag = wrapper.find('#type')

    const lastTypeValue = typeTag.text()

    const weightTag = wrapper.find('#weight')

    const lastWeightValue = weightTag.text()

    const heightTag = wrapper.find('#height')

    const lastHeightValue = heightTag.text()

    const abilitiesTag = wrapper.find('ul')

    const lastAbilitiesValue = abilitiesTag.text()

Parecen muchas variables, pero en este caso es necesario. Puedes solucionar este problema recorriendo los diferentes tags que se repitan, pero aquí no va a ser necesario.

Después de esto, sigue accionar el cambio. Todo esto va dentro de nuestro describe, no va dentro de ninguna prueba.

El click lo vamos a hacer utilizando el método trigger(), que lo que hace es lanzar el evento que nosotros le pasemos como parámetro, quedando de la siguiente manera:

   const btn = wrapper.find('button')

    btn.trigger('click')

Al hacer esto, ya es como si hubieras dado click en el botón.

Ahora sí, empecemos con las pruebas:

• Lo primero que vamos a poner dentro de nuestra prueba va a ser una comprobación de si se montó la aplicación y que cambiaron los valores de las variables predeterminados.

• Lo segundo y_ más importante_, va a ser el uso del método $nextTick().

$nextTick

• Este método nos permite esperar al cambio de la aplicación.

• Regresa una promesa, por lo cual debemos esperar a que se resuelva la promesa.

• Se debe de tratar como método asíncrono.

• No recibe parámetros, sino más bien un callback.

El callback es una función que se ejecuta cuando ocurre un evento o si alguna parte del código se termina o se ha eliminado. Puede crear reglas dentro de otras funciones para usar en el futuro.

Juntamos estas dos cosas y nos queda algo así:

test('should change name', async () => {

        

        expect(nameTag.text()).not.toContain('name')

        await wrapper.vm.$nextTick()

        .then(()=>{expect(nameTag.text()).not.toBe(lastNameValue)})

    

    })

Esta prueba se va a repetir para todos los elementos que vamos a probar, quedándonos así:

Esta vez te toca escribirlos

---

Sólo hace falta correr el script.

npm run test:unit

Puede que nos salgan algunos errores en el tiempo de compilación. No hay porque preocuparse por estos, siempre y cuando no impidan que pasen nuestras pruebas.

Otra cosa que hay que tener en consideración es que estamos probando, en este caso, el servicioMock y estamos tomando datos al azar entre la respuesta. Puede que nuestras pruebas fallen porque nos sale un repetido. Lo único que debemos hacer es volverlo a intentar. Muchas veces se tiene como parámetro que falle, para sacar la concurrencia de algunos datos.

Pero no es lo que buscamos aquí, solamente corre las pruebas de nuevo y si todo lo hicimos al pie de la letra, debemos obtener algo como esto:

Esto significa que todas las pruebas de todo nuestro código pasaron.

¡¡¡CON ESO HEMOS CONCLUIDO LAS PRUEBAS MÍNIMAS DE NUESTRO PROYECTO!!!.

Pero aún hay más que aprender de todo este mundo… en la siguiente clase aprenderás cuáles son las mejores prácticas para hacer pruebas en Vue.

---

¿Qué otra solución le encontrarías al problema de tener muchas variables al principio? Compártela en los comentarios.