Тестирование обработанного компонента Vue после обновления данных с помощью подключенного хука - PullRequest
Новая
       11

Тестирование обработанного компонента Vue после обновления данных с помощью подключенного хука

0 голосов
/ 25 марта 2020

Моя цель? Чтобы иметь возможность получить все мои элементы DOM в моей обертке, особенно «таблицу» в этом случае, которая имеет «v-if», инициализированную в «null» и становится массивом на смонтированном крюке.

Что я пробовал? Использование asyn c 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'))

  })
})

Что я получил? 

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 | })

Я надеюсь получить обновленный DOM с моей таблицей внутри, который станет видимым, потому что данные внутри v-если «grid» больше не равен нулю после смонтированного хука (несколько функций в «смонтированном хуке» создают данные и создают таблицу).

Вот «смонтированная часть» моего компонента 

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()
  },
...