javascript - Encontrar un atributo de datos en test con Vue.js
Intentando averiguar con shallowMount cómo puedo encontrar un atributo de datos y comprobar si ese atributo está presente en la plantilla de Vue:
myVue.vue
<template>
<div>
<div data-test="apple"></div>
</div>
</template>
<script>
export default {
name: "fruit-main",
extends: registerStore(),
components: {
},
props: {
},
data() {
},
mounted() {
},
computed: {
},
methods: {
},
watch: {
}
}
</script>
spec.js (usando Vue Test Utils y mocha):
it('shows an apple', () => {
let fakeStore = new Vuex.Store({ state: {} });
const apple = shallowMount(myVue, {fakeStore}),
expect(apple).to.have.length(1);
});
¿O tal vez así???
myVue.vue
<template>
<div>
<div apple></div>
</div>
</template>
spec.js
it('shows an apple', () => {
const vue = shallowMount(myVue),
apple = vue.element.getAttribute('apple')
expect(apple).to.exist
// or expect(apple).to.have.length(1); - which is how you'd do it with enzyme but I'm not sure yet what getAttribute returns yet
});
pero no estoy seguro de cómo hacerlo, obviamente esto no está bien. Soy un tipo de enzyme y React tratando de averiguar cómo hacer el mismo tipo de pruebas con Vue básicamente.
Nota: Uso shallowMount únicamente para TDD, no me interesa mount() y no voy a debatir eso en este momento para esta publicación. Solo estoy pidiendo ayuda con shallowMount aquí y cómo encontrar un atributo de datos para que mis pruebas puedan hacer una afirmación sobre él.
Respuesta #1
Usa atributos del contenedor() suponiendo que el conjunto de datos está en el propio contenedor.
es decir
import FruitMain from '@components/FruitMain.vue'
import { shallowMount } from '@vue/test-utils'
describe('@components/FruitMain.vue', () => {
it('shows an apple', () => {
// We are assuming the FruitMain component receives a 'fruit' prop.
const wrapper = shallowMount(FruitMain, { propsData: { fruit: 'apple' } })
// Has the correct starting data fruit
expect(wrapper.attributes()['data-fruit']).toBe('apple')
// Has the correct fruit value when props change
// wrapper.setProps({ fruit: 'banana' })
// expect(wrapper.attributes()['data-fruit']).toBe('banana')
})
})
Para buscar un niño que tenga un conjunto de datos, use contains().
import FruitMain from '@components/FruitMain.vue'
import { shallowMount } from '@vue/test-utils'
describe('@components/FruitMain.vue', () => {
it('shows an apple', () => {
// We are assuming the FruitMain component receives a 'fruit' prop.
const wrapper = shallowMount(FruitMain, { propsData: { fruit: 'apple' } })
// Has a data fruit
expect(wrapper.contains('[data-fruit]')).toBe(true) // or [data-fruit="apple"]
})
})