Merge pull request #594 from Leopoldthecoder/msgbox-test

MessageBox: update animation/add test
pull/596/head
杨奕 2016-10-23 10:22:32 +08:00 committed by GitHub
commit 6cee4e7c18
6 changed files with 216 additions and 35 deletions

View File

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

View File

@ -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;

View File

@ -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",

View File

@ -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>

View File

@ -118,48 +118,32 @@
}
}
.msgbox-bounce-enter-active {
-webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
.msgbox-fade-enter-active {
animation: msgbox-fade-in .3s;
}
.msgbox-bounce-leave-active {
-webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
.msgbox-fade-leave-active {
animation: msgbox-fade-out .3s;
}
@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);
}
}
@-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);
transform: translate3d(-50%, calc(-50% - 20px), 0);
opacity: 0;
}
}

View File

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