Skip to content

Returning undefined on wrapper.html() for a component with jade and vuex #166

@cata-libuy

Description

@cata-libuy

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions