mercredi 25 mars 2020

Testing rendered Vue component after the data has been updated by mounted hook

My Goal ? To be able to get all of my DOM elements in my wrapper, especially the "table" in this case which has a "v-if" initalized to "null" and becomes and array on mounted hook.

What have I tried ? Using async await nextTick()

import { createLocalVue, shallowMount } from '@vue/test-utils'

import BootstrapVue from 'bootstrap-vue'
import _ from 'lodash'

import AndonKanban from '@/components/andon/andon_kanban.vue'

const localVue = createLocalVue()
localVue.use(BootstrapVue, _)

describe('andon_kanban', () => {
  test('is detecting a table', async () => {
    const wrapper =  await shallowMount(AndonKanban, {
      localVue,
      mocks:{
        $route:{
          params:{
            step:'ALL'
          }
        }
      }
    }
    )

    await wrapper.vm.$nextTick()
    expect(wrapper.get('table'))

  })
})

What I got ?

Unable to find table within: <div id="app">
      <!---->
      <div>
        <b-form-group-stub label="Andon activé" feedbackarialive="assertive">
          <b-form-checkbox-group-stub buttonvariant="secondary" options="" valuefield="value" textfield="text" htmlfield="html" disabledfield="disabled" switches="true" checked=""></b-form-checkbox-group-stub>
        </b-form-group-stub>
      </div>
      <!---->
    </div>

      24 |     
      25 |     await wrapper.vm.$nextTick()
    > 26 |     expect(wrapper.get('table'))
      27 | 
      28 |   })
      29 | })

I hope to get an updated DOM with my table inside which becomes visible because the data inside the v-if "grid" is no longer null after the mounted hook (several functions in the "mounted" hook create the data and make the table appears).

Here is the "mounted part" of my component

mounted: function() {
    if (this.$route.params.step) {
      bus.currentStep = Steps[this.$route.params.step]
    } else {
      bus.currentStep = Steps['NO_KANBAN']
    }
    this.grid = this.generateGrid()
    this.lowStockGrid = this.generateGrid()
    this.unseenGrid = this.generateGrid()
    this.fifoGrid = this.generateGrid()

    this.addAndonType('Fifo', 'fifo')
    this.addAndonType('Peu de stock', 'low_stock')
    this.addAndonType('Carte en retard', 'unseen_card')
    this.addAndonType('Andons critiques', 'andon_high_severity')
    this.refreshLoop()
  },

Aucun commentaire:

Enregistrer un commentaire