Merge pull request #594 from Leopoldthecoder/msgbox-test

MessageBox: update animation/add test

examples/docs/zh-cn/message-box.md

@@ -2,7 +2,14 @@
   export default {
     methods: {
       open() {
-        this.$alert('这是一段内容', '标题名称');
+        this.$alert('这是一段内容', '标题名称', {
+          callback: action => {
+            this.$message({
+              type: 'info',
+              message: `action: ${ action }`
+            });
+          }
+        });
       },
 
       open2() {
@@ -72,7 +79,7 @@
 
 当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
 
-:::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。
+:::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它默认会返回一个`Promise`对象便于进行后续操作的处理。若不确定浏览器是否支持`Promise`，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
 ```html
 <template>
   <el-button type="text" @click.native="open">点击打开 Message Box</el-button>
@@ -82,7 +89,14 @@
   export default {
     methods: {
       open() {
-        this.$alert('这是一段内容', '标题名称');
+        this.$alert('这是一段内容', '标题名称', {
+          callback: action => {
+            this.$message({
+              type: 'info',
+              message: `action: ${ action }`
+            });
+          }
+        });
       }
     }
   }

examples/pages/component.vue

@@ -28,7 +28,7 @@
           }
           td, th {
             border-bottom: 1px solid #eaeefb;
-            padding: 10px 0;
+            padding: 10px;
           }
           th:first-child, td:first-child {
             padding-left: 10px;

package.json

@@ -61,6 +61,7 @@
     "coveralls": "^2.11.14",
     "cp-cli": "^1.0.2",
     "css-loader": "^0.24.0",
+    "es6-promise": "^4.0.5",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
     "file-save": "^0.2.0",

packages/message-box/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="el-message-box__wrapper">
-    <transition name="msgbox-bounce">
+    <transition name="msgbox-fade">
       <div class="el-message-box" v-show="value">
         <div class="el-message-box__header" v-if="title !== ''">
           <div class="el-message-box__title">{{ title }}</div>

packages/theme-default/src/message-box.css

@@ -118,48 +118,32 @@
   }
 }
 
-.msgbox-bounce-enter-active {
+.msgbox-fade-enter-active {
-  -webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
+  animation: msgbox-fade-in .3s;
-  animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
 }
 
-.msgbox-bounce-leave-active {
+.msgbox-fade-leave-active {
-  -webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  animation: msgbox-fade-out .3s;
-  animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
 }
 
-@keyframes msgbox-bounce-in {
+@keyframes msgbox-fade-in {
   0% {
-    transform: translate3d(-50%, -50%, 0) scale(0.8);
+    transform: translate3d(-50%, calc(-50% - 20px), 0);
+    opacity: 0;
   }
   100% {
-    transform: translate3d(-50%, -50%, 0) scale(1);
+    transform: translate3d(-50%, -50%, 0);
+    opacity: 1;
   }
 }
 
-@keyframes msgbox-bounce-out {
+@keyframes msgbox-fade-out {
   0% {
-    transform: translate3d(-50%, -50%, 0) scale(1);
+    transform: translate3d(-50%, -50%, 0);
+    opacity: 1;
   }
   100% {
-    transform: translate3d(-50%, -50%, 0) scale(0.7);
+    transform: translate3d(-50%, calc(-50% - 20px), 0);
-  }
+    opacity: 0;
-}
-
-@-webkit-keyframes msgbox-bounce-in {
-  0% {
-    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.8);
-  }
-  100% {
-    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
-  }
-}
-
-@-webkit-keyframes msgbox-bounce-out {
-  0% {
-    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
-  }
-  100% {
-    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.7);
   }
 }

test/unit/specs/message-box.spec.js

@@ -0,0 +1,182 @@
+import MessageBox from 'packages/message-box';
+
+describe('MessageBox', () => {
+  let hasPromise = true;
+  before(() => {
+    if (!window.Promise) {
+      hasPromise = false;
+      window.Promise = require('es6-promise').Promise;
+    }
+  });
+
+  after(() => {
+    if (!hasPromise) {
+      window.Promise = undefined;
+    }
+  });
+
+  afterEach(() => {
+    const el = document.querySelector('.el-message-box__wrapper');
+    if (!el) return;
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+    MessageBox.close();
+  });
+
+  it('create and close', done => {
+    MessageBox({
+      type: 'success',
+      title: '消息',
+      message: '这是一段内容'
+    });
+    setTimeout(() => {
+      const msgbox = document.querySelector('.el-message-box__wrapper');
+      expect(msgbox.__vue__.value).to.true;
+      expect(msgbox.querySelector('.el-message-box__title').textContent).to.equal('消息');
+      expect(msgbox.querySelector('.el-message-box__message')
+        .querySelector('p').textContent).to.equal('这是一段内容');
+      MessageBox.close();
+      expect(msgbox.__vue__.value).to.false;
+      done();
+    }, 300);
+  });
+
+  it('invoke with strings', done => {
+    MessageBox('消息', '这是一段内容', 'success');
+    setTimeout(() => {
+      expect(document.querySelector('.el-message-box__wrapper')).to.exist;
+      done();
+    }, 300);
+  });
+
+  it('alert', done => {
+    MessageBox.alert('这是一段内容', {
+      title: '标题名称',
+      type: 'warning'
+    });
+    setTimeout(() => {
+      document.querySelector('.v-modal').click();
+      expect(document.querySelector('.el-message-box__wrapper')
+        .__vue__.value).to.true;
+      expect(document.querySelector('.el-message-box__wrapper')
+        .__vue__.type).to.equal('warning');
+      done();
+    }, 300);
+  });
+
+  it('confirm', done => {
+    MessageBox.confirm('这是一段内容', {
+      title: '标题名称',
+      type: 'warning'
+    });
+    setTimeout(() => {
+      document.querySelector('.el-message-box__wrapper')
+        .querySelector('.el-button-primary').click();
+      expect(document.querySelector('.el-message-box__wrapper')
+        .__vue__.value).to.false;
+      done();
+    }, 200);
+  });
+
+  it('prompt', done => {
+    MessageBox.prompt('这是一段内容', {
+      title: '标题名称',
+      inputPattern: /test/,
+      inputErrorMessage: 'validation failed'
+    });
+    setTimeout(() => {
+      expect(document.querySelector('.el-message-box__input')).to.exist;
+      const messageBox = document.querySelector('.el-message-box__wrapper').__vue__;
+      messageBox.inputValue = 'no';
+      setTimeout(() => {
+        expect(document.querySelector('.el-message-box__errormsg')
+          .textContent).to.equal('validation failed');
+        done();
+      }, 100);
+    }, 200);
+  });
+
+  describe('custom validator', () => {
+    it('returns a string', done => {
+      const validator = value => {
+        if (value !== 'test') return 'wrong';
+        return true;
+      };
+      MessageBox.prompt('这是一段内容', {
+        title: '标题名称',
+        inputValidator: validator
+      });
+      setTimeout(() => {
+        const messageBox = document.querySelector('.el-message-box__wrapper').__vue__;
+        messageBox.inputValue = 'no';
+        setTimeout(() => {
+          expect(document.querySelector('.el-message-box__errormsg')
+            .textContent).to.equal('wrong');
+          messageBox.inputValue = 'test';
+          setTimeout(() => {
+            expect(document.querySelector('.el-message-box__errormsg')
+              .textContent).to.equal('');
+            done();
+          }, 100);
+        }, 100);
+      }, 200);
+    });
+
+    it('returns false', done => {
+      const validator = value => false;
+      MessageBox.prompt('这是一段内容', {
+        title: '标题名称',
+        inputValidator: validator
+      });
+      setTimeout(() => {
+        const messageBox = document.querySelector('.el-message-box__wrapper').__vue__;
+        messageBox.inputValue = 'no';
+        setTimeout(() => {
+          expect(document.querySelector('.el-message-box__errormsg')
+            .textContent).to.equal('输入的数据不合法!');
+          done();
+        }, 100);
+      }, 200);
+    });
+  });
+
+  it('callback', done => {
+    MessageBox({
+      title: '消息',
+      message: '这是一段内容'
+    }, action => {
+      expect(action).to.equal('cancel');
+      done();
+    });
+    setTimeout(() => {
+      document.querySelector('.el-message-box__close').click();
+    }, 300);
+  });
+
+  describe('promise', () => {
+    it('resolve', done => {
+      MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示')
+        .then(action => {
+          expect(action).to.equal('confirm');
+          done();
+        });
+      setTimeout(() => {
+        document.querySelector('.el-message-box__wrapper')
+          .querySelector('.el-button-primary').click();
+      }, 300);
+    });
+
+    it('reject', done => {
+      MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示')
+        .catch(action => {
+          expect(action).to.equal('cancel');
+          done();
+        });
+      setTimeout(() => {
+        document.querySelector('.el-message-box__wrapper')
+          .querySelector('.el-button-default').click();
+      }, 300);
+    });
+  });
+});