-
Notifications
You must be signed in to change notification settings - Fork 62
Open
Description
Hi
I'm using the vue webpack template, with jade and vuex, and trying to test this component.
Here is the component:
<template lang="jade">
.add-to-cart
div(v-if="canBeAddedToCart")
button.addToCartBtn(v-if="!isThisProductInCart", v-on:click="addThisProductToCart")
| Agregar al carro
.inCart(v-if="isThisProductInCart")
| En el carro
button(v-on:click="removeThisCartItem()")
| X
div(v-if="!canBeAddedToCart")
p Solo en tienda
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
name: 'AddToCartButton',
props: [ 'product' ],
computed: {
...mapGetters([ 'isProductInCart' ]),
isThisProductInCart: function () {
return this.isProductInCart(this.product.id_product)
},
canBeAddedToCart: function () {
return this.product.id_product
}
},
methods: {
...mapActions([ 'addProductToCart', 'removeCartItem' ]),
addThisProductToCart: function () {
const cartItem = { product: this.product }
this.addProductToCart(cartItem)
},
removeThisCartItem: function () {
this.removeCartItem({ productId: this.product.id_product })
}
}
}
</script>
And here is my test:
import Vue from 'vue'
import Vuex from 'vuex'
import { mount } from 'avoriaz'
import AddToCartButton from '@/components/AddToCartButton'
require('jsdom-global')()
Vue.use(Vuex)
describe('AddToCartButton', () => {
let state
let actions
let getters
let store
beforeEach(() => {
getters = {
isProductInCart: (product) => {
return false
}
}
actions = {
addProductToCart: sinon.stub(),
removeCartItem: sinon.stub()
}
store = new Vuex.Store({
getters,
actions,
state: {}
})
})
it('renders an add to cart button if the product can be added', () => {
const product = {
id_product: 1
}
const wrapper = mount(AddToCartButton, {
store,
propsData: { product }
})
console.log(wrapper.html()) // --> renders undefined
const addBtn = wrapper.find('.addToCartBtn')[0]
expect(addBtn.text()).to.equal('Agregar al carro')
})
})
It appears that the template it's not beeing mounted, since wrapper.html() outputs undefined, and the test fails with undefined is not a constructor (evaluating 'this.element.querySelectorAll(selector)')
.
Did I miss something?
Does it support jade templates?
Thanks in advance,
Metadata
Metadata
Assignees
Labels
No labels