You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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,
The text was updated successfully, but these errors were encountered:
cata-libuy
changed the title
Returning indefined on wrapper.html() for a component with jade and vuex
Returning undefined on wrapper.html() for a component with jade and vuex
Nov 15, 2017
Hi
I'm using the vue webpack template, with jade and vuex, and trying to test this component.
Here is the component:
And here is my test:
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,
The text was updated successfully, but these errors were encountered: