From b0e960cb0322702ea35f05599739c384f4e8f8e0 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Mon, 24 Oct 2016 14:57:07 +0800 Subject: [PATCH] add tabs test --- CHANGELOG.md | 1 + examples/docs/zh-cn/tabs.md | 4 +- packages/tabs/src/tabs.vue | 4 +- test/unit/specs/tabs.spec.js | 164 +++++++++++++++++++++++++++++++++++ 4 files changed, 169 insertions(+), 4 deletions(-) create mode 100644 test/unit/specs/tabs.spec.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 9deb57a32..9d57ac323 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ #### 非兼容性更新 +- Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例 - 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符 - Table 删除属性 fixedColumnCount, customCriteria, customBackgroundColors - Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。 diff --git a/examples/docs/zh-cn/tabs.md b/examples/docs/zh-cn/tabs.md index 07df20160..f4df08f6c 100644 --- a/examples/docs/zh-cn/tabs.md +++ b/examples/docs/zh-cn/tabs.md @@ -131,8 +131,8 @@ ### Tabs Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | -| tab-click | tab 被选中的钩子 | 被选中的标签 tab | -| tab-remove | tab 被删除的钩子 | 被删除的标签 tab | +| tab-click | tab 被选中的钩子 | 被选中的标签 tab 实例 | +| tab-remove | tab 被删除的钩子 | 被删除的标签 tab 实例 | ### Tab-pane Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue index 74ef7190d..fdfc0068a 100644 --- a/packages/tabs/src/tabs.vue +++ b/packages/tabs/src/tabs.vue @@ -55,11 +55,11 @@ this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1'; } - this.$emit('tab-remove', tab.key); + this.$emit('tab-remove', tab); }, handleTabClick(tab, event) { this.currentName = tab.key; - this.$emit('tab-click', tab.key, event); + this.$emit('tab-click', tab, event); }, calcBarStyle(firstRendering) { if (this.type || !this.$refs.tabs) return {}; diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js new file mode 100644 index 000000000..7562e22b0 --- /dev/null +++ b/test/unit/specs/tabs.spec.js @@ -0,0 +1,164 @@ +import { createVue } from '../util'; + +describe('Tabs', () => { + it('create', done => { + const vm = createVue({ + template: ` + + A + B + C + D + + ` + }, true); + let tabList = vm.$el.querySelector('.el-tabs__header').children; + let paneList = vm.$el.querySelector('.el-tabs__content').children; + setTimeout(_ => { + expect(tabList[0].classList.contains('is-active')).to.be.true; + expect(paneList[0].style.display).to.not.ok; + + tabList[2].click(); + vm.$nextTick(_ => { + expect(tabList[2].classList.contains('is-active')).to.be.true; + expect(paneList[2].style.display).to.not.ok; + done(); + }); + }, 100); + }); + it('active-name', done => { + const vm = createVue({ + template: ` + + A + B + C + D + + `, + data() { + return { + activeName: 'tab-B' + }; + }, + methods: { + handleClick(tab) { + this.activeName = tab.name; + } + } + }, true); + let tabList = vm.$el.querySelector('.el-tabs__header').children; + let paneList = vm.$el.querySelector('.el-tabs__content').children; + setTimeout(_ => { + expect(tabList[1].classList.contains('is-active')).to.be.true; + expect(paneList[1].style.display).to.not.ok; + + tabList[3].click(); + vm.$nextTick(_ => { + expect(tabList[3].classList.contains('is-active')).to.be.true; + expect(paneList[3].style.display).to.not.ok; + expect(vm.activeName === 'tab-D'); + done(); + }); + }, 100); + }); + it('card', () => { + const vm = createVue({ + template: ` + + A + B + C + D + + ` + }, true); + + expect(vm.$el.classList.contains('el-tabs--card')).to.be.true; + }); + it('border card', () => { + const vm = createVue({ + template: ` + + A + B + C + D + + ` + }, true); + + expect(vm.$el.classList.contains('el-tabs--border-card')).to.be.true; + }); + it('closable', done => { + const vm = createVue({ + template: ` + + A + B + C + D + + `, + data() { + return { + removeTabName: '' + }; + }, + methods: { + handleRemove(tab) { + this.removeTabName = tab.label; + } + } + }, true); + + let tabList = vm.$el.querySelector('.el-tabs__header').children; + let paneList = vm.$el.querySelector('.el-tabs__content').children; + setTimeout(_ => { + tabList[1].querySelector('.el-icon-close').click(); + vm.$nextTick(_ => { + expect(tabList.length).to.be.equal(3); + expect(paneList.length).to.be.equal(3); + expect(vm.removeTabName).to.be.equal('配置管理'); + expect(tabList[1].innerText.trim()).to.be.equal('角色管理'); + expect(paneList[0].innerText.trim()).to.be.equal('A'); + done(); + }); + }, 100); + }); + it('closable edge', done => { + const vm = createVue({ + template: ` + + A + B + C + D + + ` + }, true); + + let tabList = vm.$el.querySelector('.el-tabs__header').children; + let paneList = vm.$el.querySelector('.el-tabs__content').children; + setTimeout(_ => { + tabList[0].querySelector('.el-icon-close').click(); + vm.$nextTick(_ => { + expect(tabList.length).to.be.equal(3); + expect(paneList.length).to.be.equal(3); + expect(tabList[0].innerText.trim()).to.be.equal('配置管理'); + expect(paneList[0].innerText.trim()).to.be.equal('B'); + + tabList[2].click(); + tabList[2].querySelector('.el-icon-close').click(); + vm.$nextTick(_ => { + expect(tabList.length).to.be.equal(2); + expect(paneList.length).to.be.equal(2); + expect(tabList[1].classList.contains('is-active')).to.be.true; + expect(tabList[1].innerText.trim()).to.be.equal('角色管理'); + expect(paneList[1].innerText.trim()).to.be.equal('C'); + done(); + }); + }); + }, 100); + }); +});