Test: add Dialog and vue-popup (#662)

test/unit/specs/dialog.spec.js

@@ -0,0 +1,170 @@
+import { createVue, destroyVM } from '../util';
+
+describe('Dialog', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" v-model="visible"></el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    expect(document.querySelector('.v-modal')).to.exist;
+    expect(vm.$el.querySelector('.el-dialog__title').textContent).to.equal('dialog test');
+    expect(dialog.$el.style.display).to.not.equal('none');
+  });
+
+  it('render correct content', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" v-model="visible">
+            <span>这是一段信息</span>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click.native="dialogVisible = false">取消</el-button>
+              <el-button type="primary" @click.native="dialogVisible = false">确定</el-button>
+            </span>
+          </el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      const footerBtns = vm.$el.querySelectorAll('.el-dialog__footer .el-button');
+      expect(vm.$el.querySelector('.el-dialog__body span').textContent).to.equal('这是一段信息');
+      expect(footerBtns.length).to.equal(2);
+      expect(footerBtns[0].querySelector('span').textContent).to.equal('取消');
+      expect(footerBtns[1].querySelector('span').textContent).to.equal('确定');
+      done();
+    }, 100);
+  });
+
+  it('open and close', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" v-model="visible">
+            <span>这是一段信息</span>
+          </el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: false
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    expect(dialog.$el.style.display).to.equal('none');
+    vm.visible = true;
+    setTimeout(() => {
+      expect(dialog.$el.style.display).to.not.equal('none');
+      document.querySelector('.v-modal').click();
+      setTimeout(() => {
+        expect(vm.visible).to.equal(false);
+        done();
+      }, 50);
+    }, 50);
+  });
+
+  describe('props', () => {
+    const getDialogVm = (props, options) => {
+      return createVue(Object.assign({
+        template: `
+          <div>
+            <el-dialog ${ props } :title="title" v-model="visible">
+              <span>这是一段信息</span>
+            </el-dialog>
+          </div>
+        `,
+
+        data() {
+          return {
+            title: 'dialog test',
+            visible: true
+          };
+        }
+      }, options), true);
+    };
+
+    it('size', () => {
+      vm = getDialogVm('size="full"');
+      expect(vm.$el.querySelector('.el-dialog').classList.contains('el-dialog--full')).to.true;
+    });
+
+    it('top', () => {
+      vm = getDialogVm('top="100px"');
+      expect(vm.$el.querySelector('.el-dialog').style.top).to.equal('100px');
+    });
+
+    it('custom-class', () => {
+      vm = getDialogVm('custom-class="my-dialog"');
+      expect(vm.$el.querySelector('.el-dialog').classList.contains('my-dialog')).to.true;
+    });
+  });
+
+  it('callbacks', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog
+            @open="handleOpen"
+            @close="handleClose"
+            :title="title"
+            v-model="visible">
+            <span>这是一段信息</span>
+          </el-dialog>
+        </div>
+      `,
+
+      methods: {
+        handleOpen() {
+          this.state = 'open';
+        },
+
+        handleClose() {
+          this.state = 'closed';
+        }
+      },
+
+      data() {
+        return {
+          state: '',
+          title: 'dialog test',
+          visible: false
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    dialog.open();
+    setTimeout(() => {
+      expect(vm.state).to.equal('open');
+      dialog.close();
+      setTimeout(() => {
+        expect(vm.state).to.equal('closed');
+        done();
+      }, 50);
+    }, 50);
+  });
+});

test/unit/specs/mixin.vue-popup.spec.js

@@ -0,0 +1,74 @@
+import VuePopup from 'vue-popup';
+import { createTest, destroyVM } from '../util';
+
+const Popup = Object.assign({}, VuePopup, {
+  render(h) {
+    return h('div');
+  },
+  created() {
+    this.rendered = true;
+  }
+});
+
+describe('Mixin:vue-popup', () => {
+  let vm;
+  before(() => {
+    const modals = document.querySelectorAll('.v-modal');
+    [].forEach.call(modals, modal => {
+      modal &&
+      modal.parentNode &&
+      modal.parentNode.removeChild(modal);
+    });
+  });
+  afterEach(() => {
+    vm.close && vm.close();
+    destroyVM(vm);
+    const modal = document.querySelector('.v-modal');
+    modal &&
+    modal.parentNode &&
+    modal.parentNode.removeChild(modal);
+  });
+
+  it('show modal', () => {
+    vm = createTest(Popup);
+    vm.open();
+    expect(document.querySelector('.v-modal')).to.not.exist;
+    vm.close();
+    destroyVM(vm);
+    vm = createTest(Popup, { modal: true });
+    vm.open();
+    expect(document.querySelector('.v-modal')).to.exist;
+  });
+
+  it('custom modal class', () => {
+    vm = createTest(Popup, { modal: true, modalClass: 'custom-class' });
+    vm.open();
+    expect(document.querySelector('.v-modal').classList.contains('custom-class')).to.true;
+  });
+
+  it('lock scroll', done => {
+    vm = createTest(Popup, { modal: true });
+    vm.open();
+    expect(document.body.style.overflow).to.equal('hidden');
+    vm.close();
+    destroyVM(vm);
+    setTimeout(() => {
+      vm = createTest(Popup, { modal: true, lockScroll: false });
+      vm.open();
+      expect(document.body.style.overflow).to.not.equal('hidden');
+      done();
+    }, 200);
+  });
+
+  it('z-index should increase', () => {
+    vm = createTest(Popup, { modal: true });
+    vm.open();
+    const zIndex1 = document.querySelector('.v-modal').style.zIndex;
+    vm.close();
+    destroyVM(vm);
+    vm = createTest(Popup, { modal: true });
+    vm.open();
+    const zIndex2 = document.querySelector('.v-modal').style.zIndex;
+    expect(zIndex2 > zIndex1).to.true;
+  });
+});