vikingowl/vue3-tree-list
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

test: 💍 add some tests

Browse Source
This commit is contained in:
youxingzhi
2019-12-30 12:17:51 +08:00
parent 57be520b99
commit d4f911b7b5
11 changed files with 359 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -19,3 +19,5 @@ yarn-error.log*
*.njsproj
*.sln
*.sw?
coverage

7
dev/App.vue
View File

@@ -70,31 +70,38 @@
},
methods: {
onDel (node) {
// eslint-disable-next-line no-console
console.log(node)
node.remove()
},
onChangeName (params) {
// eslint-disable-next-line no-console
console.log(params)
},
onAddNode (params) {
// eslint-disable-next-line no-console
console.log(params)
},
onClick (params) {
// eslint-disable-next-line no-console
console.log(params)
},
drop: function ({node, src, target}) {
// eslint-disable-next-line no-console
console.log('drop', node, src, target)
},
dropBefore: function ({node, src, target}) {
// eslint-disable-next-line no-console
console.log('drop-before', node, src, target)
},
dropAfter: function ({node, src, target}) {
// eslint-disable-next-line no-console
console.log('drop-after', node, src, target)
},

8
jest.config.js
View File

@@ -1,4 +1,6 @@
module.exports = {
preset: "@vue/cli-plugin-unit-jest",
snapshotSerializers: ["jest-serializer-vue"]
};
preset: '@vue/cli-plugin-unit-jest',
snapshotSerializers: ['jest-serializer-vue'],
collectCoverageFrom: ['src/**/*.{js,vue}'],
coveragePathIgnorePatterns: ['src/index.js']
}

3
package.json
View File

@@ -6,7 +6,8 @@
"scripts": {
"serve": "vue-cli-service serve dev",
"build": "vue-cli-service build --target lib src/index.js",
"test:unit": "vue-cli-service test:unit",
"test:unit": "vue-cli-service test:unit --watch",
"test:coverage": "vue-cli-service test:unit --coverage",
"lint": "vue-cli-service lint",
"commit": "npx git-cz",
"prepublish": "npm run build"

2
src/Tree.js
View File

@@ -115,7 +115,7 @@ TreeNode.prototype._beforeInsert = function (target) {
return false
}
// cannot move ancestor to child
// cannot insert ancestor to child
if (this.isTargetChild(target)) {
return false
}

21
src/VueTreeList.vue
View File

@@ -1,12 +1,17 @@
<template>
<div class='vtl'>
<div v-if="model.name !== 'root'">
<div
v-if="model.name !== 'root'"
:id='model.id'
class="vtl-node"
:class="{'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': ! model.isLeaf}"
>
<div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
@drop="dropBefore"
@dragenter="dragEnterUp"
@dragover='dragOverUp'
@dragleave="dragLeaveUp"></div>
<div :id='model.id' :class="treeNodeClass"
@dragleave="dragLeaveUp" />
<div :class="treeNodeClass"
:draggable="!model.dragDisabled"
@dragstart='dragStart'
@dragover='dragOver'
@@ -73,7 +78,7 @@
<item v-for="model in model.children"
:default-tree-node-name="defaultTreeNodeName"
:default-leaf-node-name="defaultLeafNodeName"
v-bind:default-expanded="defaultExpanded"
:default-expanded="defaultExpanded"
:model="model"
:key='model.id'>
<slot name="addTreeNodeIcon" slot="addTreeNodeIcon" />
@@ -122,10 +127,6 @@
}
},
computed: {
itemIconClass () {
return this.model.isLeaf ? 'vtl-icon-file' : 'vtl-icon-folder'
},
caretClass () {
return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
},
@@ -145,7 +146,7 @@
} = this
return {
'vtl-tree-node': true,
'vtl-node-main': true,
'vtl-active': isDragEnterNode,
'vtl-drag-disabled': dragDisabled,
'vtl-disabled': disabled
@@ -385,7 +386,7 @@
}
}
.vtl-tree-node {
.vtl-node-main {
display: flex;
align-items: center;
padding: 5px 0 5px 1rem;

72
tests/unit/__snapshots__/example.spec.js.snap
View File

@@ -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
View 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
View 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
View 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()
})
})
})
})

30
tests/unit/example.spec.js → tests/unit/render.spec.js
View File

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