zyAdmin/node_modules/vue-tree-list/tests/unit/drag.spec.js

import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { Tree, VueTreeList } from '@/index'

describe('Drag', () => {
  let wrapper

  beforeEach(() => {
    const tree = new Tree([
      {
        name: 'Node 1',
        id: 't1',
        pid: 0,
        children: [
          {
            name: 'Node 1-1',
            id: 't11',
            isLeaf: true,
            pid: 't1'
          },
          {
            name: 'Node 1-2',
            id: 't12',
            pid: 't1'
          }
        ]
      },
      {
        name: 'Node 2',
        id: 't2',
        pid: 0
      },
      {
        name: 'Node 3',
        id: 't3',
        pid: 0
      }
    ])
    wrapper = mount(VueTreeList, { propsData: { model: new Tree([]) } })
    wrapper.setProps({ model: tree })
  })

  it('drag before', done => {
    const $tree2 = wrapper.find('#t2 .vtl-node-main')
    const $tree1Up = wrapper.find('#t1 .vtl-up')
    $tree2.trigger('dragstart', { dataTransfer: { setData: () => {} } })
    $tree1Up.trigger('drop')
    Vue.nextTick(() => {
      expect(wrapper.find('.vtl-node').attributes('id')).toBe('t2')
      done()
    })
  })

  it('drag after', done => {
    const $tree3 = wrapper.find('#t3 .vtl-node-main')
    const $tree1Bottom = wrapper.find('#t1 .vtl-bottom')
    $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} } })
    $tree1Bottom.trigger('drop')
    Vue.nextTick(() => {
      expect(
        wrapper
          .findAll('.vtl-tree-node')
          .at(2)
          .attributes('id')
      ).toBe('t3')
      done()
    })
  })

  it('drag into', done => {
    const $tree3 = wrapper.find('#t3 .vtl-node-main')
    const $tree1 = wrapper.find('#t1 .vtl-node-main')
    $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} } })
    $tree1.trigger('drop')
    Vue.nextTick(() => {
      expect(wrapper.find('#t1 + .vtl-tree-margin .vtl-node').attributes('id')).toBe('t3')
      done()
    })
  })

  it('cannot drag ancestor into child', done => {
    const snapshot = wrapper.html()
    const $tree1 = wrapper.find('#t1 .vtl-node-main')
    const $tree1Child = wrapper.find('#t12 .vtl-node-main')
    $tree1.trigger('dragstart', { dataTransfer: { setData: () => {} } })
    $tree1Child.trigger('drop')
    Vue.nextTick(() => {
      expect(wrapper.html()).toBe(snapshot)
      done()
    })
  })
})