github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #611 from baiyaaaaa/test/component/tabs 

add tabs test
pull/624/head
杨奕 2016-10-24 17:38:49 +08:00 committed by GitHub
parent ef8ef954f9 b0e960cb03
commit dc1b4fbba7
4 changed files with 169 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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。

4
examples/docs/zh-cn/tabs.md
View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

4
packages/tabs/src/tabs.vue
View File

@ -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 {};

164
test/unit/specs/tabs.spec.js Normal file
View File

@ -0,0 +1,164 @@
import { createVue } from '../util';
describe('Tabs', () => {
it('create', done => {
const vm = createVue({
template: `
<el-tabs>
<el-tab-pane label="用户管理">A</el-tab-pane>
<el-tab-pane label="配置管理">B</el-tab-pane>
<el-tab-pane label="角色管理">C</el-tab-pane>
<el-tab-pane label="定时任务补偿">D</el-tab-pane>
</el-tabs>
`
}, 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: `
<el-tabs :active-name="activeName" @click="handleClick">
<el-tab-pane name="tab-A" label="用户管理">A</el-tab-pane>
<el-tab-pane name="tab-B" label="配置管理">B</el-tab-pane>
<el-tab-pane name="tab-C" label="角色管理">C</el-tab-pane>
<el-tab-pane name="tab-D" label="定时任务补偿">D</el-tab-pane>
</el-tabs>
`,
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: `
<el-tabs type="card">
<el-tab-pane label="用户管理">A</el-tab-pane>
<el-tab-pane label="配置管理">B</el-tab-pane>
<el-tab-pane label="角色管理">C</el-tab-pane>
<el-tab-pane label="定时任务补偿">D</el-tab-pane>
</el-tabs>
`
}, true);
expect(vm.$el.classList.contains('el-tabs--card')).to.be.true;
});
it('border card', () => {
const vm = createVue({
template: `
<el-tabs type="border-card">
<el-tab-pane label="用户管理">A</el-tab-pane>
<el-tab-pane label="配置管理">B</el-tab-pane>
<el-tab-pane label="角色管理">C</el-tab-pane>
<el-tab-pane label="定时任务补偿">D</el-tab-pane>
</el-tabs>
`
}, true);
expect(vm.$el.classList.contains('el-tabs--border-card')).to.be.true;
});
it('closable', done => {
const vm = createVue({
template: `
<el-tabs type="card" closable @tab-remove="handleRemove">
<el-tab-pane label="用户管理">A</el-tab-pane>
<el-tab-pane label="配置管理">B</el-tab-pane>
<el-tab-pane label="角色管理">C</el-tab-pane>
<el-tab-pane label="定时任务补偿">D</el-tab-pane>
</el-tabs>
`,
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: `
<el-tabs type="card" closable>
<el-tab-pane label="用户管理">A</el-tab-pane>
<el-tab-pane label="配置管理">B</el-tab-pane>
<el-tab-pane label="角色管理">C</el-tab-pane>
<el-tab-pane label="定时任务补偿">D</el-tab-pane>
</el-tabs>
`
}, 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);
});
});