Pruebas unitarias con Vue

10/12

Lectura

Ya que tenemos todo listo, empezamos a probar. Vamos a eliminar todos los archivos que tenemos en nuestra carpeta de test/unit y crearemos un archivo que se llame request.spec.js (la parte de spec se pone por nomenclatura y buena pr谩ctica).

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 13

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

No entend铆 la clase, lo sent铆 incompleto.

Vale, a esta clase le hizo falta explicar algunas cosas, y siento que se pas贸 algunas otras cosas por alto, por ejemplo no se pusieron los c贸digo completos, ni se mostraron las partes de los import de las funciones mount pero creo que lo logr茅 entender

Algo IMPORTANTE

Actualmente la funci贸n .is() est谩 deprecada, en su lugar hay que usar element.tagName, por lo que nuestras validaciones deber铆an quedar as铆 de ahora en adelante:

expect(wrapper.find('img').element.tagName.toLowerCase() == 'img').toBeTruthy();

Se usa al final toLoweCase porque tagName devuelve los tags en may煤scula, m谩s informaci贸n aqu铆:

https://vue-test-utils.vuejs.org/api/wrapper/is.html

Este cap铆tulo es demasiado importante y no se logr贸 explicar del todo. Tom茅 este curso por este m贸dulo. Sugiero que graben este curso de nuevo con el mismo profesor.

En la actualidad, las pruebas unitarias son extremadamente importantes para conseguir un puesto de desarrollador. Es un excluyente.

Cambien todos los .is por:

expect(wrapper.find('.app-pokemon-main').element.tagName).toBe('SECTION')
expect(wrapper.find('.app-pokemon-stats').element.tagName).toBe('SECTION')
expect(wrapper.find('img').element.tagName).toBe('IMG');
expect(wrapper.find('.pokemon-name').element.tagName).toBe('P');
expect(wrapper.find('#abilities').element.tagName).toBe('P');
expect(wrapper.find('button').element.tagName).toBe('BUTTON');
expect(wrapper.find('ul').element.tagName).toBe('UL');

Si verifican la funci贸n tagname devuelve en may煤scula, por eso pongan en may煤scula en el toBe.

Para aquellos que se preguntan como solucionar el error

[vue-test-utils]: is is deprecated and will be removed in the next major version. Use element.tagName instead.

En ves de is solo cambien en a ->

    expect(wrapper.find('.app-pokemon-main').element.tagName).toBe('SECTION')

Y les quedara algo as铆.

    test('should render 2 sections', () => {
        expect(wrapper.find('.app-pokemon-main').exists()).toBeTruthy()

        expect(wrapper.find('.app-pokemon-main').element.tagName).toBe('SECTION')

        expect(wrapper.find('.app-pokemon-stats').exists()).toBeTruthy()

        expect(wrapper.find('.app-pokemon-stats').element.tagName).toBe('SECTION')
    })

Aqu铆 el c贸digo de la secci贸n
dataTest.spect.js

import {shallowMount } from '@vue/test-utils';
import App from '@/App.vue';
const wrapper = shallowMount(App);

describe('Testing of the data() properties', ()=>{
    test('should have name property',()=>{
        //Se valida la propiedad name de data()
        expect(wrapper.vm.$data).toHaveProperty('name');
        //Se valida el tipo de dato de la propiedad name
        expect(typeof wrapper.vm.name).toBe('string');
    });
    test('should have image property',()=>{
        //Se valida la propiedad image de data()
        expect(wrapper.vm.$data).toHaveProperty('image');
        //Se valida el tipo de dato de la propiedad image
        expect(typeof wrapper.vm.image).toBe('string');
    });
    test('should have type property',()=>{
        //Se valida la propiedad type de data()
        expect(wrapper.vm.$data).toHaveProperty('type');
        //Se valida el tipo de dato de la propiedad type
        expect(typeof wrapper.vm.type).toBe('string');
    });
    test('should have weight property',()=>{
        //Se valida la propiedad weight de data()
        expect(wrapper.vm.$data).toHaveProperty('weight');
        //Se valida el tipo de dato de la propiedad weight
        expect(typeof wrapper.vm.weight).toBe('number');
    });
    test('should have height property',()=>{
        //Se valida la propiedad height de data()
        expect(wrapper.vm.$data).toHaveProperty('height');
        //Se valida el tipo de dato de la propiedad height
        expect(typeof wrapper.vm.height).toBe('number');
    })
    test('should have abilities property',()=>{
        //Se valida la propiedad abilities de data()
        expect(wrapper.vm.$data).toHaveProperty('abilities');
        //Se valida el tipo de dato de la propiedad abilities 
        //preguntando si es o no un array por medio de un booleano
        expect(Array.isArray(wrapper.vm.abilities)).toBeTruthy();
    })
})

renderTest.spec.js

import {mount} from '@vue/test-utils';
import App from '@/App';

const wrapper = mount(App);

describe('Testing the correct rendering of elements', ()=>{
    test('should render 2 sections',()=>{
        //comprueba que exista la clase y luego comprueba si el elemento es un section
        expect(wrapper.find('.app-pokemon-main').exists()).toBeTruthy();
        expect(wrapper.find('.app-pokemon-main').element.tagName.toLowerCase() == 'section').toBeTruthy();
        expect(wrapper.find('.app-pokemon-stats').exists()).toBeTruthy();
        expect(wrapper.find('.app-pokemon-stats').element.tagName.toLowerCase() == 'section').toBeTruthy();
    });
    test('should render 1 image',()=>{
        //comprueba que exista la clase y luego comprueba si el elemento es un section
        expect(wrapper.find('img').exists()).toBeTruthy();
        expect(wrapper.find('img').element.tagName.toLowerCase() == 'img').toBeTruthy();
    });
    test('should render 2 p',()=>{
        //comprueba que exista la clase y luego comprueba si el elemento es un section
        expect(wrapper.find('.pokemon-name').exists()).toBeTruthy();
        expect(wrapper.find('.pokemon-name').element.tagName.toLowerCase() == 'p').toBeTruthy();
        expect(wrapper.find('#abilities').exists()).toBeTruthy();
        expect(wrapper.find('#abilities').element.tagName.toLowerCase() == 'p').toBeTruthy();
    });
    test('should render 1 button', () => {

        expect(wrapper.find('button').exists()).toBeTruthy();

        expect(wrapper.find('button').element.tagName.toLowerCase() == 'button').toBeTruthy();

    });
    test('should render 1 ul', () => {

        expect(wrapper.find('ul').exists()).toBeTruthy();

        expect(wrapper.find('ul').element.tagName.toLowerCase() == 'ul').toBeTruthy();

    });
    test('should render 1 ul', () => {
        //Normalmente cuando hacemos pruebas, tratamos de mantenerlas lo m谩s modular posible, 
        //es decir, no probamos los hijos en los padres. 
        //En el caso de Vue, al no crear una etiqueta de nuestro componente, 
        //nos crea esta etiqueta con esa clase.
        expect(wrapper.find('.component').exists()).toBeTruthy();

    });
   // console.log(wrapper.html())
})```

Me marca lo siguiente, considero que esto se puede actualizar para hacerlo con la forma que te recomiendan

  console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1735
    [vue-test-utils]: is is deprecated and will be removed in the next major version. Use element.tagName instead.

  console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1735
    [vue-test-utils]: is is deprecated and will be removed in the next major version. Use element.tagName instead.

  console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1735
    [vue-test-utils]: is is deprecated and will be removed in the next major version. Use element.tagName instead.

  console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1735
    [vue-test-utils]: is is deprecated and will be removed in the next major version. Use element.tagName instead.

  console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1735
    [vue-test-utils]: is is deprecated and will be removed in the next major version. Use element.tagName instead.

Para el caso del archivo request.spec.js la funci贸n toBe del resolves actualmente me marca como deprecada, la soluci贸n es usar toStrictEqual

expect(Promise.resolve(res)).resolves.toStrictEqual(data);

no estoy de acuerdo con las clases sin videos, as铆 parce estar leyendo pura documentaci鈥檕n

El set de pruebas hecho en dataTest.spec.js, en el entorno laboral se debe hacer con cada atributo del data, o solo fue hecho con fines educativos?

De la misma manera, lo hecho en el set de pruebas hecho en renderTest.spec.js??

Gracias por responder.

Lo que probaria de inmediato en mis proyectos son las properties y los requests

Poniendo c贸mo ejemplo lo siguiente:

test('should render 2 sections', () => {

        expect(wrapper.find('.app-pokemon-main').exists()).toBeTruthy();

        expect(wrapper.find('.app-pokemon-main').is('section')).toBeTruthy();

        expect(wrapper.find('.app-pokemon-stats').exists()).toBeTruthy();

        expect(wrapper.find('.app-pokemon-stats').is('section')).toBeTruthy();

    })

Si tuviera que validar 10 sections, se debe hacer de la misma manera o se puede usar un for ?

Este fu茅 un ejemplo pr谩ctico, muy bueno no sab铆a de esto, excelente y me pongo a pensar, en un proyecto real y enorme, hacer esto es mucha 鈥渢alacha鈥濃