Prueba de aplicaciones Vue con la biblioteca de pruebas Vue

 

 

 

  • Taller de diseño conductual, con Susan y Guthrie Weinschenk
  • Patrones de diseño para interfaces de IA, con Vitaly Friedman

  • Índice
    1. ¿Qué es la biblioteca de pruebas de Vue?
    2. Por qué utilizar la biblioteca de pruebas de Vue
    3. Cómo funciona la biblioteca de pruebas de Vue
    4. Comenzando con la biblioteca de pruebas de Vue
    5. Nuestra aplicación de demostración
    6. Conclusión
      1. Recursos

    La biblioteca Vue Testing puede ayudarle a probar sus aplicaciones reflejando la forma en que un usuario interactuaría con ellas. Aquí encontrará todo lo que necesita saber si desea comenzar de inmediato.

     

    En este artículo, veremos cómo probar aplicaciones Vue utilizando la biblioteca de pruebas Vue, una biblioteca liviana que enfatiza probar su aplicación front-end desde la perspectiva del usuario.

    A lo largo de este artículo se hacen las siguientes suposiciones:

    • El lector está familiarizado con Vue.
    • El lector está familiarizado con la interfaz de usuario de la aplicación de prueba.

    Convencionalmente, en el área de usuario de Vue, cuando desea probar su aplicación, busca @vue/test-utilsla biblioteca de pruebas oficial de Vue. @vue/test-utilsproporciona API para probar instancias de componentes Vue renderizados. Al igual que:

    // example.spec.jsimport { shallowMount } from '@vue/test-utils'import HelloWorld from '@/components/HelloWorld.vue'describe('HelloWorld.vue', () = { it('renders props.msg when passed', () = { const msg = 'new message' const wrapper = shallowMount(HelloWorld, { propsData: { msg } }) expect(wrapper.text()).toMatch(msg) })})

    Puede ver que estamos montando una instancia del componente Vue usando la shallowMountfunción proporcionada por @vue/test-utils.

    El problema con el enfoque anterior para probar aplicaciones Vue es que el usuario final interactuará con el DOM y no tiene conocimiento de cómo Vue representa la interfaz de usuario. En cambio, encontrará elementos de la interfaz de usuario por contenido de texto, la etiqueta del elemento de entrada y algunas otras señales visuales en la página.

    Un mejor enfoque será escribir pruebas para sus aplicaciones Vue de tal manera que reflejen cómo un usuario real interactuará con ellas, por ejemplo, buscando un botón para incrementar la cantidad de un producto en una página de pago, de ahí la Biblioteca de pruebas de Vue.

     

    ¿Qué es la biblioteca de pruebas de Vue?

    Vue Testing Library es una biblioteca de pruebas liviana para Vue que proporciona funciones de utilidad livianas además de @vue/test-utils. Fue creado con un principio rector simple:

    Cuanto más se parezcan sus pruebas a la forma en que se utiliza su software, más confianza podrán brindarle.
    — testing-library.com

    Por qué utilizar la biblioteca de pruebas de Vue

    • Desea escribir pruebas que no se centren en los detalles de la implementación, es decir, probar cómo se implementa la solución en lugar de si produce el resultado deseado.

    • Desea escribir pruebas que se centren en los nodos DOM reales y no en los componentes Vue renderizados.

    • Desea escribir pruebas que consulten el DOM de la misma manera que lo haría un usuario.

    Cómo funciona la biblioteca de pruebas de Vue

    La biblioteca de pruebas de Vue funciona proporcionando utilidades para consultar el DOM de la misma manera que un usuario interactuaría con el DOM. Estas utilidades le permiten buscar elementos por el texto de su etiqueta, encontrar enlaces y botones a partir de su contenido de texto y afirmar que su aplicación Vue es totalmente accesible.

    Para los casos en los que no tiene sentido o no es práctico buscar elementos por su contenido de texto o etiqueta, la biblioteca de pruebas de Vue proporciona una forma recomendada de encontrar estos elementos mediante el uso de data-testidatributos como una trampilla de escape para encontrarlos.

    El data-testidatributo se agrega al elemento HTML que planea consultar en su prueba. P.ej

    button data-testid="checkoutButton"Check Out/button

    Comenzando con la biblioteca de pruebas de Vue

    Ahora que ha visto por qué debería usar Vue Testing Library y cómo funciona, procedamos a configurarlo en un nuevo proyecto Vue generado por Vue CLI.

    Primero, generaremos una nueva aplicación Vue ejecutando el siguiente comando en la terminal (suponiendo que tenga Vue CLI instalado en su máquina):

    vue create vue-testing-library-demo

    Para ejecutar nuestras pruebas, usaremos Jest , un ejecutor de pruebas desarrollado por Facebook. Vue CLI tiene un complemento que configura Jest fácilmente. Agreguemos ese complemento:

    vue add unit-jest

    Notarás que el complemento agregó un nuevo script en package.json:

     "test:unit": "vue-cli-service test:unit",

    Esto se utilizaría para ejecutar las pruebas. También agregó una nueva carpeta de pruebas en src y dentro de la carpeta de pruebas una carpeta de unidad con un archivo de prueba de ejemplo llamado example.spec.js. Según la configuración de Jest, cuando ejecutemos npm run test:unitJest buscará archivos en testsel directorio y ejecutará los archivos de prueba. Ejecutemos el archivo de prueba de ejemplo:

     

    npm run test:unit

    Esto debería ejecutar el example.spec.jsarchivo de prueba en tests/unitel directorio. Veamos el contenido de este archivo:

    import { shallowMount } from '@vue/test-utils'import HelloWorld from '@/components/HelloWorld.vue'describe('HelloWorld.vue', () = { it('renders props.msg when passed', () = { const msg = 'new message' const wrapper = shallowMount(HelloWorld, { propsData: { msg } }) expect(wrapper.text()).toMatch(msg) })})

    De forma predeterminada, al instalar Jest con el complemento Vue CLI se instalará @vue/test-utils, por lo que el archivo de prueba anterior utiliza la shallowMountfunción de @vue/test-utils. Una forma rápida de familiarizarse con Vue Testing Library es modificar rápidamente este mismo archivo de prueba para usar Vue Testing Library en lugar de @vue/test-utils.

    Haríamos esto desinstalando primero @vue/test-utilsya que no lo necesitaremos.

    npm uninstall @vue/test-utils --save-dev

    Luego instalamos Vue Testing Library como una dependencia de desarrollo:

    npm install @testing-library/vue --save-dev

    Luego procedemos a modificar tests/unit/example.spec.jsa esto:

    import { render } from '@testing-library/vue'import HelloWorld from '@/components/HelloWorld.vue'describe('HelloWorld.vue', () = { it('renders props.msg when passed', () = { const msg = 'new message' const { getByText } = render(HelloWorld, { props: { msg } }) getByText(msg) })})

    Ejecute la prueba nuevamente y aún así debería pasar. Veamos lo que hicimos:

    • Usamos la renderfunción expuesta por Vue Testing Library para renderizar los HelloWorldcomponentes. renderes la única forma de renderizar componentes en Vue Testing Library. Cuando llamas a render, pasas el componente Vue y un optionsobjeto opcional.

    • Luego usamos el objeto de opciones para pasar los msgaccesorios que necesita el HelloWorldcomponente. renderdevolverá un objeto con métodos auxiliares para consultar el DOM y uno de esos métodos es getByText. Filtros de Agua

    • Luego usamos getByTextpara afirmar si existe un elemento con el contenido de texto de 'mensaje nuevo' en el DOM.

    A estas alturas, es posible que hayas notado el cambio de pensar en probar el componente Vue renderizado a lo que el usuario ve en el DOM. Este cambio le permitirá probar sus aplicaciones desde la perspectiva del usuario en lugar de centrarse más en los detalles de implementación.

    Nuestra aplicación de demostración

    Ahora que hemos establecido cómo se realizan las pruebas en Vue utilizando la biblioteca de pruebas de Vue, procederemos a probar nuestra aplicación de demostración. Pero primero, desarrollaremos la interfaz de usuario de la aplicación. Nuestra aplicación de demostración es una página de pago sencilla para un producto. Probaremos si el usuario puede incrementar la cantidad del producto antes de realizar el pago, si puede ver el nombre y el precio del producto, etc. Empecemos.

     

    Primero, cree un nuevo componente de Vue llamado checkout en components/el directorio y agréguele el siguiente fragmento:

    template div h1{{ product.name }} - span data-testid="finalPrice"${{ product.price }}/span/h1 div div label for="quanity"Quantity/label input type="number" v-model="quantity" name="quantity" / /div div button @click="incrementQuantity"+/button button @click="decrementQuantity"-/button /div /div pfinal price - $span data-testId="finalPrice"{{ finalPrice }}/span/p button @click="checkout"Checkout/button /div/templatescriptexport default { data() { return { quantity: 1, } }, props: { product: { required: true } }, computed: { finalPrice() { return this.product.price * this.quantity } }, methods: { incrementQuantity() { this.quantity++; }, decrementQuantity() { if (this.quantity == 1) return; this.quantity--; }, checkout() { } }}/scriptstyle scoped.quantity-wrapper { margin: 2em auto; width: 50%; display: flex; justify-content: center;}.quantity-wrapper div { margin-right: 2em;}.quantity-input { margin-left: 0.5em;}.quantity-wrapper button { margin-right: 1em;}button { cursor: pointer;}/style

    Luego modifique App.vuea:

    template div check-out :product="product" / /div/templatescriptimport CheckOut from './components/CheckOut.vue'export default { name: 'App', data() { return { product: { name: 'Shure Mic SM7B', price: 200, } } }, components: { CheckOut }}/scriptstyle#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}/style

    Para nuestro caso de prueba, probaremos los siguientes escenarios:

    1. ¿Puede el usuario ver el nombre del producto?
    2. ¿Puede el usuario ver el precio del producto?
    3. ¿Puede el usuario incrementar la cantidad del producto?
    4. ¿Puede el usuario disminuir la cantidad de producto?
    5. ¿Puede el usuario ver el precio total actualizado en tiempo real a medida que cambia la cantidad?

    Nuestra interfaz de usuario es bastante minimalista ya que el énfasis está en las pruebas con Vue Testing Library. Procedamos a probar el componente Checkout. Cree un nuevo archivo de prueba en el tests/unit/formato llamado checkout.spec.js.

    Luego procederemos a crear scaffolding en el archivo de prueba:

    import { render, fireEvent } from '@testing-library/vue'import CheckOut from '@/components/CheckOut.vue'const product = { name: 'Korg Kronos', price: 1200}describe('Checkout.vue', () = { // tests goes here})

    Nuestro primer caso de prueba será verificar si se representa el nombre del producto. Lo haríamos así:

     it('renders product name', () = { const { getByText } = render(CheckOut, { props: { product } }) getByText(product.name) })

    Luego comprobaremos si se muestra el precio del producto:

     

    it('renders product price', () = { const { getByText } = render(CheckOut, { props: { product } }) getByText("$" + product.price) })

    En el futuro con la prueba del componente Checkout, probaremos si la cantidad inicial que ve el usuario es 1 usando el getByDisplayValuemétodo auxiliar:

    it('renders initial quantity as 1', () = { const { getByDisplayValue, getByText } = render(CheckOut, { props: { product } }) getByDisplayValue(1) })

    A continuación, comprobaremos si cuando el usuario hace clic en el botón para incrementar la cantidad del producto, la cantidad aumenta. Haremos esto activando el evento de clic usando la fireEventutilidad de Vue Testing Library. Aquí está la implementación completa:

    it('increments product quantity', async () = { const { getByDisplayValue, getByText } = render(CheckOut, { props: { product } }) const incrementQuantityButton = getByText('+') await fireEvent.click(incrementQuantityButton) getByDisplayValue(2)})

    Haremos lo mismo para disminuir cuando la cantidad sea 1; en este caso, no disminuiremos la cantidad. Y también cuando la cantidad es 2. Escribamos ambos casos de prueba.

    it('does not decrement quantity when quanty is 1', async () = { const { getByDisplayValue, getByText } = render(CheckOut, { props: { product } }) const decrementQuantityButton = getByText('-') await fireEvent.click(decrementQuantityButton) getByDisplayValue(1) }) it('decrement quantity when quantity greater than 1', async () = { const { getByDisplayValue, getByText } = render(CheckOut, { props: { product } }) const incrementQuantityButton = getByText('+') const decrementQuantityButton = getByText('-') await fireEvent.click(incrementQuantityButton) await fireEvent.click(decrementQuantityButton) getByDisplayValue(1) })

    Por último, probaremos si el precio final se calcula en consecuencia y se muestra al usuario cuando se hace clic en los botones de aumentar y disminuir la cantidad.

    it('displays correct final price when increment button is clicked', async () = { const { getByText, getByTestId } = render(CheckOut, { props: { product } }) const incrementQuantityButton = getByText('+') await fireEvent.click(incrementQuantityButton) getByText(product.price * 2) })it('displays correct final price when decrement button is clicked', async () = { const { getByText} = render(CheckOut, { props: { product } }) const incrementQuantityButton = getByText('+') const decrementQuantityButton = getByText('-') await fireEvent.click(incrementQuantityButton) await fireEvent.click(decrementQuantityButton) getByText(product.price) })

    A lo largo de nuestros casos de prueba, notará que estábamos más enfocados en escribir nuestras pruebas desde la perspectiva de lo que el usuario verá e interactuará. Escribir pruebas de esta manera garantiza que estamos probando lo que les importa a los usuarios de la aplicación.

    Conclusión

    Este artículo presenta una biblioteca alternativa y un enfoque para probar aplicaciones Vue llamada Vue Testing Library. Vemos cómo configurarla y escribir pruebas para componentes Vue con ella.

    Recursos

    • Introducción a la biblioteca de pruebas de Vue
    • Introducción a la biblioteca de pruebas
    • Principios rectores
    • API

    Puede encontrar el proyecto de demostración en GitHub.

    (ra, yk, il)Explora más en

    • javascript
    • vista
    • Codificación





    Tal vez te puede interesar:

    1. 40 bibliotecas útiles de JavaScript
    2. Bibliotecas prácticas de JavaScript y complementos de jQuery
    3. Bibliotecas de JavaScript útiles y complementos de jQuery: parte 2
    4. Bibliotecas JavaScript útiles y complementos jQuery

    Prueba de aplicaciones Vue con la biblioteca de pruebas Vue

    Prueba de aplicaciones Vue con la biblioteca de pruebas Vue

    Taller de diseño conductual, con Susan y Guthrie Weinschenk Patrones de diseño para interfaces de IA, con Vitaly Friedman Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-prueba-de-aplicaciones-vue-con-la-biblioteca-de-pruebas-vue-1075-0.jpg

    2024-05-21

     

    Prueba de aplicaciones Vue con la biblioteca de pruebas Vue
    Prueba de aplicaciones Vue con la biblioteca de pruebas Vue

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20