Как смоделировать событие перемещения SortableJs / VueDraggable при написании модульных тестов Vue - PullRequest
Новая
       125

Как смоделировать событие перемещения SortableJs / VueDraggable при написании модульных тестов Vue

0 голосов
/ 24 октября 2019

У меня есть следующий шаблон компонента, и я хотел бы написать тест (или два разных), который проверяет следующее:

  1. При событии перемещения метод updatePosition должен бытьвызываемый
  2. При событии хода updatePosition должен поменять местами dxp_spopping двух карт. 
<template>
  <div>
    <draggable-component
      v-model="dashBoardDataLocal"
      :move="updatePosition"
      handle=".handle"
      ghost-class="ghost"
      class="reorder-draggable-component"
      @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>

Вот updatePosition реализация 

updatePosition (payload) {
  if (this.disableSaveLocal === true) {
    this.disableSaveLocal = false
  }

  const pos1 = payload.draggedContext.element.dxp_position
  const index1 = payload.draggedContext.index
  const index2 = payload.draggedContext.futureIndex

  this.dashBoardDataLocal[index1].dxp_position = this.dashBoardDataLocal[index2].dxp_position
  this.dashBoardDataLocal[index2].dxp_position = pos1
}

Вот текущее состояние теста 

  it('it should update the dxp_position of the two swapped dashBoardDataClone entries', () => {
    // console.log(wrapper.vm)
    let dashBoardDataCloneReordered = [
      { db_name: 'Jobs', dxp_dashboardref: 1, dxp_hidden: 0, dxp_position: 2, dxp_ref: 926 },
      { db_name: 'Firms', dxp_dashboardref: 2, dxp_hidden: 0, dxp_position: 1, dxp_ref: 927 },
      { db_name: 'CRM', dxp_dashboardref: 5, dxp_hidden: 0, dxp_position: 3, dxp_ref: 987 }
    ]

    const updatePositionStub = jest.fn()
    wrapper.setMethods({ updatePosition: updatePositionStub })

    expect(updatePositionStub).toHaveBeenCalled()
  })

Сбой при

Ошибка: ожидаемо (jest.fn ()). ToHaveBeenCalled ()

Ожидаемая фиктивная функция была вызвана, но она не была вызвана.

, что имеет смысл, поскольку на самом деле ничто не вызывает перемещения / перетаскивания.

Итак, мой вопрос, как я могу генерировать / имитировать событие перемещения (или 'onMove') SortableJs / VueDraggable?

...