Tengo un componente que se ve así,
<template> <!-- eslint-disable vue/no-v-html --> <div class="c-dialog" :class="{'u-block': show}" @triggerOpen="handleOpen"> <div class="c-dialog__background" @click="handleClose"> <div class="c-dialog__wrapper u-mt-4 u-mb-1"> <div class="c-dialog__action u-flex"> <button class="c-dialog__close u-bg-denim-blue u-border-0 u-text-white" @click="handleClose">Close</button> </div> <div class="c-dialog__main u-px-2 u-py-4 u-border u-bg-white"> <h4>{{ content.title }}</h4> <div class="c-dialog__content u-mt-2" v-html="content.content" /> </div> </div> </div> </div>Quiero probarlo unitariamente, pero estoy muy oxidado cuando se trata de pruebas unitarias, el componente es muy simple, se muestra u oculta según el valor de los datos (mostrar: verdadero/falso).
Supongo que necesitaría 1 prueba para afirmar que el componente está oculto cuando show = false y otra para afirmar que modal está visible cuando show = true. Pero en un componente que es tan simple, ¿debería hacer pruebas unitarias de algo más? Hay 2 métodos en el componente handleClose (los conjuntos se muestran en falso) y handleOpen (los conjuntos se muestran en verdadero), ¿estos métodos también necesitan sus propias pruebas? Hasta ahora mi prueba parece,
import { shallowMount } from '@vue/test-utils' import Dialog from './Dialog.vue' test('Dialog', () => { });Algo como esto debería probar el estado abierto/cerrado.
También puede usar jest.spy para ver si se llama a los métodos correctos, pero en este caso, probar el resultado debería estar bien.
El v-html también es algo que podría considerar probar.
Las pruebas de instantáneas son realmente agradables para ver si el estado cambia correctamente, y está probando implícitamente su asignación de clase.
import { shallowMount } from '@vue/test-utils' import Dialog from './Dialog.vue' function mountWith() { return shallowMount(Dialog, { data() { return { open: false, ...data } } }); } describe('Dialog', () => { let wrapper; afterEach(() => { wrapper.destroy() }) it('should mount successfully', () => { wrapper = mountWith() expect(wrapper.exists()).toBe(true) }); it('should match snapshot in initial state', () => { wrapper = mountWith() expect(wrapper).toMatchSnapshot() }); it('should match snapshot while open', () => { wrapper = mountWith({ open: true }) expect(wrapper).toMatchSnapshot() }); it('should open on c-dialog click', async () => { wrapper = mountWith() wrapper.find('.c-dialog').trigger('click'); await Vue.nextTick() expect(wrapper.vm.open).toBe(true) }); it('should close on background click ', async () => { wrapper = mountWith({ open: true }) wrapper.find('.c-dialog__background').trigger('click'); await Vue.nextTick() expect(wrapper.vm.open).toBe(false) }); it('should close on dialog close click ', async () => { wrapper = mountWith({ open: true }) wrapper.find('.c-dialog__close').trigger('click'); await Vue.nextTick() expect(wrapper.vm.open).toBe(false) }); });