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

add tabs test

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。

examples/docs/zh-cn/tabs.md

@@ -131,8 +131,8 @@
 ### Tabs Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| tab-click  | tab 被选中的钩子 | 被选中的标签 tab |
+| tab-click  | tab 被选中的钩子 | 被选中的标签 tab 实例 |
-| tab-remove  | tab 被删除的钩子  | 被删除的标签 tab |
+| tab-remove  | tab 被删除的钩子  | 被删除的标签 tab 实例 |
 
 ### Tab-pane Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |

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

test/unit/specs/tabs.spec.js

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