diff --git a/packages/tree/src/model/node.js b/packages/tree/src/model/node.js
index 7d6c69e9e..672dff994 100644
--- a/packages/tree/src/model/node.js
+++ b/packages/tree/src/model/node.js
@@ -138,18 +138,15 @@ export default class Node {
}
removeChildByData(data) {
- let nodeIndex = -1;
let targetNode = null;
- this.childNodes.forEach((node, index) => {
+ this.childNodes.forEach(node => {
if (node.data === data) {
- nodeIndex = index;
targetNode = node;
}
});
- if (nodeIndex > -1) {
- targetNode.parent = null;
- this.childNodes.splice(nodeIndex, 1);
+ if (targetNode) {
+ this.removeChild(targetNode);
}
}
diff --git a/test/unit/specs/tree.spec.js b/test/unit/specs/tree.spec.js
new file mode 100644
index 000000000..377a252a6
--- /dev/null
+++ b/test/unit/specs/tree.spec.js
@@ -0,0 +1,152 @@
+import { createVue, destroyVM } from '../util';
+
+describe('Tree', () => {
+ let vm;
+ afterEach(() => {
+ destroyVM(vm);
+ });
+
+ const getTreeVm = (props, options) => {
+ return createVue(Object.assign({
+ template: `
+
+ `,
+
+ data() {
+ return {
+ clickedNode: null,
+ count: 1,
+ data: [{
+ label: '一级 1',
+ children: [{
+ label: '二级 1-1'
+ }]
+ }, {
+ label: '一级 2',
+ children: [{
+ label: '二级 2-1'
+ }, {
+ label: '二级 2-2'
+ }]
+ }, {
+ label: '一级 3',
+ children: [{
+ label: '二级 3-1'
+ }, {
+ label: '二级 3-2'
+ }]
+ }],
+ defaultProps: {
+ children: 'children',
+ label: 'label'
+ }
+ };
+ }
+ }, options), true);
+ };
+
+ it('create', () => {
+ vm = getTreeVm(':props="defaultProps"');
+ expect(document.querySelector('.el-tree')).to.exist;
+ expect(document.querySelectorAll('.el-tree > .el-tree-node').length).to.equal(3);
+ expect(document.querySelectorAll('.el-tree .el-tree-node').length).to.equal(8);
+ vm.data[1].children = [{ label: '二级 2-1' }];
+ const tree = vm.$children[0];
+ expect(tree.children).to.deep.equal(vm.data);
+ });
+
+ it('click node', done => {
+ vm = getTreeVm(':props="defaultProps" @node-click="handleNodeClick"', {
+ methods: {
+ handleNodeClick(data) {
+ this.clickedNode = data;
+ }
+ }
+ });
+ const firstNode = document.querySelector('.el-tree-node__content');
+ firstNode.click();
+ expect(vm.clickedNode.label).to.equal('一级 1');
+ vm.$nextTick(() => {
+ expect(document.querySelector('.el-tree-node').classList.contains('expanded')).to.true;
+ firstNode.click();
+ vm.$nextTick(() => {
+ expect(document.querySelector('.el-tree-node').classList.contains('expanded')).to.false;
+ done();
+ });
+ });
+ });
+
+ it('highlight current', done => {
+ vm = getTreeVm(':props="defaultProps" highlight-current');
+ const firstNode = document.querySelector('.el-tree-node__content');
+ firstNode.click();
+ vm.$nextTick(() => {
+ expect(getComputedStyle(firstNode)['background-color']).to.equal('rgb(239, 247, 255)');
+ done();
+ });
+ });
+
+ it('show checkbox', done => {
+ vm = getTreeVm(':props="defaultProps" show-checkbox');
+ const tree = vm.$children[0];
+ const secondNode = document.querySelectorAll('.el-tree-node__content')[2];
+ const nodeCheckbox = secondNode.querySelector('.el-checkbox');
+ expect(nodeCheckbox).to.exist;
+ nodeCheckbox.click();
+ expect(tree.getCheckedNodes().length).to.equal(3);
+ expect(tree.getCheckedNodes(true).length).to.equal(2);
+ const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');
+ const leafCheckbox = firstLeaf.querySelector('.el-checkbox');
+ vm.$nextTick(() => {
+ leafCheckbox.click();
+ expect(tree.getCheckedNodes().length).to.equal(1);
+ done();
+ });
+ });
+
+ it('render content', () => {
+ vm = getTreeVm(':props="defaultProps" :render-content="renderContent"', {
+ methods: {
+ renderContent(h, node) {
+ return (
+
+ { node.node.label }
+
+ );
+ }
+ }
+ });
+ const firstNode = document.querySelector('.el-tree-node__content');
+ expect(firstNode.querySelector('.custom-content')).to.exist;
+ const button = firstNode.querySelector('.custom-content .el-button');
+ expect(button).to.exist;
+ expect(button.textContent).to.equal('一级 1');
+ });
+
+ it('load node', done => {
+ vm = getTreeVm(':props="defaultProps" lazy :load="loadNode" show-checkbox', {
+ methods: {
+ loadNode(node, resolve) {
+ if (node.level === -1) {
+ return resolve([{ label: 'region1' }, { label: 'region2' }]);
+ }
+ if (node.level > 3) return resolve([]);
+ setTimeout(() => {
+ resolve([{
+ label: 'zone' + this.count++
+ }, {
+ label: 'zone' + this.count++
+ }]);
+ }, 50);
+ }
+ }
+ });
+ const firstNode = document.querySelector('.el-tree-node__content');
+ expect(firstNode.nextElementSibling.childNodes.length).to.equal(0);
+ firstNode.click();
+ setTimeout(() => {
+ expect(firstNode.nextElementSibling.childNodes.length).to.equal(2);
+ done();
+ }, 100);
+ });
+});