Pruebas unitarias con Vue

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’on

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 “talacha”…