# Como testear (utilidades)
## 1. Importar shallowMount
import { shallowMount } from '@vue/test-utils'
### 1.1 Usar/manipular shallowMount
#### 1.1.1 Caso simple
import MyComponent from '@/components/MyComponent'
...
let wrapper
...
wrapper = shallowMount(MyComponent)
#### 1.1.2 Caso modificando las props (variables que le pasa el padre)
wrapper = shallowMount(MyComponent, {
propsData: {
tuProp: 'Hola'
}
})
#### 1.1.2 Modificar el DATA (una vez montado el componente=)
wrapper = shallowMount(MyComponent, {
propsData: {
tuProp: 'Hola'
}
})
wrapper.setData({
myVariableInData: 'Hi there'
})
## 2. Entender describe y it
- Describe: Agrupa tests (normalmente por: componente, temática y/o funcionalidad)
- It: El test en sí
describe('Este elemento debería', () => {
it('hacer esto', () => {
})
it('y hacer esto', () => {
})
it(' yhacer esto', () => {
})
describe('y además', () => {
it('esto también', () => {
})
})
})
- Before each: Código a ejecutar siempre antes de cada test, últil para montar componentes con las mismas variables
beforeEach(() => {
wrapper = shallowMount(MyComponent)
})
## 3. Jest
- Es la herramienta para testear cosas de manera unitaria (unitaria: componentes aislados, para resumir)
- Idealmente, escribir siempre la línea de lo que esperamos que pase para que el test sea correcto
### 3.1 "Assertions"
- expect(wrapper.find('.tu-clase').exists()).toBe(true) // Comprueba que el elemento con la clase .tu-clase existe
- expect(wrapper.find('.tu-clase').exists()).toBe(false) // Comprueba que el elemento con la clase .tu-clase NO existe
- Dado lo siguiente:
<h1 class="my-title">Hola</h1>
- expect(wrapper.find('.my-title').text()).toEqual('Hola') // Comprueba que el elemento que tiene .my-title, tiene el texto que indicamos
- Caso placeholder con v-bind (aka, :placeholder="miVariableDinamica")
- Dado:
<input class="mail" :placeholder="textoDinamico" />
...
props: {
textoDinamico: {
type: String,
required: true
}
}
...
wrapper = shallowMount(MyComponent, {
props: {
textoDinamico: 'Hola'
}
})
expect(wrapper.find('.input').props().placeholder).toEqual('Hola')