text explicacióndecómosehace un test de vue

Posted 2021-04-29

// importar shallowmount
import { shallowMount } from '@vue/test-utils'

// importar componente a probar
import MyComponent from '@/components/MyComponent'

// montar componente
let wrapper
wrapper = shallowMount(MyComponent)

// montar componente con props
wrapper = shallowMount(MyComponent, {
    propsData: {
        tuProp: 'Hola'
    }
})

// modificar data del componente montado
wrapper.setData({ 
    myVariableInData: 'Hi there'
})

// modificar props del componente montado
wrapper.setProps({ 
    myProp: 'Hi there'
})

// Eliminar props del componente montado
wrapper.setProps({ 
    myProp: undefined
})

// Estructura básica
describe('My componente should', () => {

    beforeEach(() => {

    })

    it('do something', () => {

    })
})

// Comprobar si un elemento existe
expect(wrapper.find('.my-selector').exists()).toBe(true)

// Comprobar si un elemento NO existe
expect(wrapper.find('.my-selector').exists()).toBe(false)

// Comprobar el texto de un elemento
expect(wrapper.find('.my-selector').text()).toEqual('Expected text')

// Comprobar placeholder
expect(wrapper.find('.my-selector').props().placeholder).toEqual('Expected text in placeholder')     

// Comprobar posicionamiento de un elemento

    it('show legal text on the right side', () => {
        // <span class="legal-text right">foo</span>
        // const span = wrapper.find('.legal-text') = <span class="legal-text right">foo</span>
        // span.classes() => ['legal-text', 'right']

    expect(wrapper.find('.legal-text').classes()).toContain('right')
    
    
// comprobar style en el tests

 it('show background color contributed in CMS', () => {
    // <span class="legal-text" :class="'right'" :data-esther="hola">foo</span>
    // <span class="legal-text right" data-esther="hola">foo</span>
    // <span :style="'background-color: red'">foo</span>
    //

    expect(wrapper.find('.banner').attributes().style).toEqual('background-color: rgb(255, 255, 255);')
  })
  
  // mockear las variables de sass globales:
  
jest.mock('~/assets/scss/_variables.scss', () => ({
  promoDarkPink: '#e6437b',
  white: '#ffffff'
}))