diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js
new file mode 100644
index 000000000..e5d58dee0
--- /dev/null
+++ b/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: `
+
+
+
+ `,
+
+ 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: `
+
+
+ 这是一段信息
+
+
+
+ `,
+
+ 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: `
+
+
+ 这是一段信息
+
+
+ `,
+
+ 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: `
+
+
+ 这是一段信息
+
+
+ `,
+
+ 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: `
+
+
+ 这是一段信息
+
+
+ `,
+
+ 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);
+ });
+});
diff --git a/test/unit/specs/mixin.vue-popup.spec.js b/test/unit/specs/mixin.vue-popup.spec.js
new file mode 100644
index 000000000..e6c55a920
--- /dev/null
+++ b/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;
+ });
+});