如何为Bootstrap-Vue b-modal创建vue-test-utils包装器?

时间:2019-10-23 12:36:06

标签: javascript unit-testing vuejs2 bootstrap-vue vue-test-utils

我在组件的模板中有以下b-modal,并且我正在尝试编写单元测试,以检查是否已在updateDashBoardDataClone自定义事件中调用updateDashBoardDataClone方法。

        <b-modal
          id="reorder-modal"
          title="Reorder Dashboard"
          @ok="storeNewOrder"
          ok-title="Save"
          ok-variant="success"
          :ok-disabled="disableSave">
          <reorder-modal
            :dash-board-data-clone="dashBoardDataClone"
            :disable-save="disableSave"
            @updateDisableSave="updateDisableSave"
            @updateDashBoardDataClone="updateDashBoardDataClone"/>
        </b-modal>

ReorderModal为

<template>
  <div>
    <draggable-component
      v-model="dashBoardDataLocal"
      :move="updatePosition"
      handle=".handle"
      ghost-class="ghost"
      @start="drag=true"
      @end="drag=false">
      <div
        v-for="card in dashBoardDataLocal"
        :key="card.id"
        class="card-list-item border p-2 my-3">
          <font-awesome-icon icon="align-justify" class="handle"/>
          {{card.db_name}}
      </div>
    </draggable-component>
  </div>
</template>

这是测试:

  it('it should call updateDashBoardDataClone method on updateDashBoardDataClone custom event', () => {
    const updateDashBoardDataCloneStub = jest.fn()
    wrapper.setMethods({ updateDashBoardDataClone: updateDashBoardDataCloneStub })
    expect(updateDashBoardDataCloneStub).not.toHaveBeenCalled()
    wrapper.find('.col-6 button').trigger('click')
    let modal = document.getElementById('reorder-modal')
    // console.log(modal)
    // let modalWrapper = createWrapper(modal)
    // console.log(modalWrapper)
    // modalWrapper.vm.$emit('updateDashBoardDataClone')
    // expect(updateDashBoardDataCloneStub).toHaveBeenCalled()
    // modalWrapper.destroy()
  })

document.getElementById确实找到了模态,但是let modalWrapper = createWrapper(modal)返回了一个空包装。

有人知道如何为模式创建包装器吗?干杯

0 个答案:

没有答案