Test: add some test cases (#11453)

packages/dropdown/src/dropdown.vue

@@ -169,7 +169,7 @@
         } else if (keyCode === 13) { // enter选中
           this.triggerElm.focus();
           target.click();
-          if (!this.hideOnClick) { // click关闭
+          if (this.hideOnClick) { // click关闭
             this.visible = false;
           }
         } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc

test/unit/specs/dialog.spec.js

@@ -191,4 +191,87 @@ describe('Dialog', () => {
       }, 50);
     }, 50);
   });
+  it('click dialog to close', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" :visible.sync="visible">
+            <span>这是一段信息</span>
+          </el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    setTimeout(() => {
+      dialog.$el.click();
+      setTimeout(() => {
+        expect(vm.visible).to.be.false;
+        done();
+      }, 400);
+    }, 50);
+  });
+  it('click header btn', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" :visible.sync="visible">
+            <span>这是一段信息</span>
+          </el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    setTimeout(() => {
+      dialog.$el.querySelector('.el-dialog__headerbtn').click();
+      setTimeout(() => {
+        expect(vm.visible).to.be.false;
+        done();
+      }, 500);
+    }, 50);
+  });
+  it('before close', done => {
+    const spy = sinon.spy();
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" :visible="visible" :before-close="beforeClose"></el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      },
+      methods: {
+        beforeClose(done) {
+          spy();
+          done();
+        }
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    setTimeout(() => {
+      dialog.$el.click();
+      setTimeout(() => {
+        expect(spy.called).to.be.true;
+        done();
+      }, 500);
+    }, 10);
+  });
 });

test/unit/specs/dropdown.spec.js

@@ -1,5 +1,12 @@
 import { createVue, triggerEvent, destroyVM } from '../util';
 
+const keyDown = (el, keyCode) => {
+  const evt = document.createEvent('Events');
+  evt.initEvent('keydown', true, true);
+  evt.keyCode = keyCode;
+  el.dispatchEvent(evt);
+};
+
 describe('Dropdown', () => {
   let vm;
   afterEach(() => {
@@ -182,4 +189,102 @@ describe('Dropdown', () => {
       }, 300);
     }, 300);
   });
+  it('triggerElm keydown', done => {
+    vm = createVue({
+      template: `
+        <el-dropdown ref="dropdown">
+          <span class="el-dropdown-link">
+            下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
+            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item>狮子头</el-dropdown-item>
+            <el-dropdown-item>螺蛳粉</el-dropdown-item>
+            <el-dropdown-item>双皮奶</el-dropdown-item>
+            <el-dropdown-item>蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      `
+    }, true);
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
+    let triggerElm = dropdownElm.children[0];
+    keyDown(triggerElm, 13); // enter
+    setTimeout(() => {
+      expect(dropdown.visible).to.be.true;
+      keyDown(triggerElm, 27); // esc
+      setTimeout(() => {
+        expect(dropdown.visible).to.be.false;
+        done();
+      }, 300);
+    }, 400);
+  });
+  it('dropdown menu keydown', done => {
+    vm = createVue({
+      template: `
+        <el-dropdown ref="dropdown">
+          <span class="el-dropdown-link">
+            下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
+            <el-dropdown-item command="a">黄金糕</el-dropdown-item>
+            <el-dropdown-item command="b">狮子头</el-dropdown-item>
+            <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
+            <el-dropdown-item command="d">双皮奶</el-dropdown-item>
+            <el-dropdown-item command="e">蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      `
+    }, true);
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
+    let triggerElm = dropdownElm.children[0];
+    let dropdownMenu = dropdown.dropdownElm;
+
+    triggerEvent(triggerElm, 'mouseenter');
+
+    setTimeout(() => {
+      expect(dropdown.visible).to.be.true;
+      keyDown(dropdownMenu, 40); // down
+      setTimeout(() => {
+        keyDown(dropdownMenu, 13); // enter
+        setTimeout(() => {
+          expect(dropdown.visible).to.be.false;
+          done();
+        }, 100);
+      }, 100);
+    }, 300);
+  });
+  it('updatePopper', done => {
+    vm = createVue({
+      template: `
+        <el-dropdown ref="dropdown">
+          <span class="el-dropdown-link">
+            下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
+            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item>狮子头</el-dropdown-item>
+            <el-dropdown-item>螺蛳粉</el-dropdown-item>
+            <el-dropdown-item>双皮奶</el-dropdown-item>
+            <el-dropdown-item>蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      `
+    }, true);
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
+    let triggerElm = dropdownElm.children[0];
+
+    triggerEvent(triggerElm, 'mouseenter');
+    setTimeout(() => {
+      const zIndex1 = document.querySelector('.el-dropdown-menu').style.zIndex;
+      dropdown.broadcast('ElDropdownMenu', 'updatePopper');
+      setTimeout(() => {
+        const zIndex2 = document.querySelector('.el-dropdown-menu').style.zIndex;
+        expect(zIndex2 > zIndex1).to.be.true;
+        done();
+      }, 100);
+    }, 300);
+  });
 });

test/unit/specs/tooltip.spec.js

@@ -98,4 +98,39 @@ describe('Tooltip', () => {
       done();
     });
   });
+  it('hide after', done => {
+    vm = createVue(`
+      <el-tooltip ref="tooltip" content="提示文字" :hide-after="300">
+        <button>click</button>
+      </el-tooltip>`);
+    const tooltip = vm.$refs.tooltip;
+    vm.$nextTick(_ => {
+      triggerEvent(tooltip.$el, 'mouseenter');
+      setTimeout(() => {
+        expect(tooltip.showPopper).to.be.true;
+        setTimeout(() => {
+          expect(tooltip.showPopper).to.be.false;
+          done();
+        }, 300);
+      }, 100);
+    });
+  });
+  it('remove focus', done => {
+    vm = createVue(`
+    <el-tooltip ref="tooltip" content="提示文字" :hide-after="300">
+      <button>click</button>
+    </el-tooltip>`);
+    const tooltip = vm.$refs.tooltip;
+    vm.$nextTick(_ => {
+      triggerEvent(tooltip.$el, 'mouseenter');
+      setTimeout(() => {
+        tooltip.focusing = true;
+        tooltip.$el.click();
+        setTimeout(() => {
+          expect(tooltip.showPopper).to.be.false;
+          done();
+        }, 300);
+      }, 100);
+    });
+  });
 });