test: 💍 add some tests
This commit is contained in:
youxingzhi
@@ -1,72 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`VueTreeList renders correctly 1`] = `
|
||||
<div class="vtl">
|
||||
<!---->
|
||||
<div class="">
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="1" draggable="false" class="vtl-tree-node vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl-tree-margin" style="display: none;">
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="2" draggable="true" class="vtl-tree-node">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1-2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="3" draggable="true" class="vtl-tree-node vtl-disabled">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="4" draggable="true" class="vtl-tree-node">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 3
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
143
tests/unit/__snapshots__/render.spec.js.snap
Normal file
143
tests/unit/__snapshots__/render.spec.js.snap
Normal file
@@ -0,0 +1,143 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render render correctly 1`] = `
|
||||
<div class="vtl">
|
||||
<!---->
|
||||
<div class="">
|
||||
<div class="vtl">
|
||||
<div id="1" class="vtl-node vtl-tree-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="false" class="vtl-node-main vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl-tree-margin" style="display: none;">
|
||||
<div class="vtl">
|
||||
<div id="2" class="vtl-node vtl-leaf-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1-2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div id="3" class="vtl-node vtl-tree-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main vtl-disabled">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div id="4" class="vtl-node vtl-tree-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 3
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`VueTreeList render correctly 1`] = `
|
||||
<div class="vtl">
|
||||
<!---->
|
||||
<div class="">
|
||||
<div class="vtl">
|
||||
<div id="1" class="vtl-node vtl-tree-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="false" class="vtl-node-main vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl-tree-margin" style="display: none;">
|
||||
<div class="vtl">
|
||||
<div id="2" class="vtl-node vtl-leaf-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1-2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div id="3" class="vtl-node vtl-tree-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main vtl-disabled">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div id="4" class="vtl-node vtl-tree-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 3
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
87
tests/unit/drag.spec.js
Normal file
87
tests/unit/drag.spec.js
Normal file
@@ -0,0 +1,87 @@
|
||||
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()
|
||||
})
|
||||
})
|
||||
})
|
||||
86
tests/unit/operation.spec.js
Normal file
86
tests/unit/operation.spec.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import Vue from 'vue'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {Tree, VueTreeList} from '@/index'
|
||||
|
||||
describe('Operation', () => {
|
||||
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 2',
|
||||
id: 't2',
|
||||
pid: 0
|
||||
}
|
||||
])
|
||||
wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
|
||||
wrapper.setProps({model: tree})
|
||||
})
|
||||
|
||||
it('delete leaf node', done => {
|
||||
const $node11Trash = wrapper.find('#t11 [title="delete"]')
|
||||
$node11Trash.trigger('click')
|
||||
wrapper.emitted('delete-node')[0][0].remove()
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.vtl-node').length).toBe(2)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('delete tree node', done => {
|
||||
const $node11Trash = wrapper.find('#t1 [title="delete"]')
|
||||
$node11Trash.trigger('click')
|
||||
wrapper.emitted('delete-node')[0][0].remove()
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.vtl-node').length).toBe(1)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('add leaf node', done => {
|
||||
const $node1AddLeafNode = wrapper.find('#t1 [title="add leaf node"]')
|
||||
$node1AddLeafNode.trigger('click')
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.vtl-leaf-node').length).toBe(2)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('add tree node', done => {
|
||||
const $node1AddTreeNode = wrapper.find('#t1 [title="add tree node"]')
|
||||
$node1AddTreeNode.trigger('click')
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.vtl-tree-node').length).toBe(3)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('change node name', done => {
|
||||
const $node1Edit = wrapper.find('#t1 [title="edit"]')
|
||||
$node1Edit.trigger('click')
|
||||
Vue.nextTick(() => {
|
||||
const $input = wrapper.find('#t1 .vtl-input')
|
||||
$input.element.value = 'New Node 1'
|
||||
$input.trigger('input')
|
||||
var event = new KeyboardEvent('keyup', {keyCode: 13})
|
||||
window.dispatchEvent(event)
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.find('#t1').text()).toBe('New Node 1')
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,11 +1,11 @@
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { Tree, VueTreeList } from "@/index";
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {Tree, VueTreeList} from '@/index'
|
||||
|
||||
describe("VueTreeList", () => {
|
||||
it("renders correctly", () => {
|
||||
describe('Render', () => {
|
||||
it('render correctly', () => {
|
||||
const tree = new Tree([
|
||||
{
|
||||
name: "Node 1",
|
||||
name: 'Node 1',
|
||||
id: 1,
|
||||
pid: 0,
|
||||
dragDisabled: true,
|
||||
@@ -15,7 +15,7 @@ describe("VueTreeList", () => {
|
||||
delNodeDisabled: true,
|
||||
children: [
|
||||
{
|
||||
name: "Node 1-2",
|
||||
name: 'Node 1-2',
|
||||
id: 2,
|
||||
isLeaf: true,
|
||||
pid: 1
|
||||
@@ -23,27 +23,27 @@ describe("VueTreeList", () => {
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Node 2",
|
||||
name: 'Node 2',
|
||||
id: 3,
|
||||
pid: 0,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: "Node 3",
|
||||
name: 'Node 3',
|
||||
id: 4,
|
||||
pid: 0
|
||||
}
|
||||
]);
|
||||
])
|
||||
|
||||
const wrapper = mount(VueTreeList, {
|
||||
propsData: {
|
||||
model: tree,
|
||||
defaultTreeNodeName: "new node",
|
||||
defaultLeafNodeName: "new leaf",
|
||||
defaultTreeNodeName: 'new node',
|
||||
defaultLeafNodeName: 'new leaf',
|
||||
defaultExpanded: false
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user