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); + }); +});