add test && fix ajax response in callback (#767)

pull/777/head
baiyaaaaa 2016-11-01 15:46:10 +08:00 committed by cinwell.li
parent 65a0250287
commit 23d4dbbce4
6 changed files with 254 additions and 12 deletions

View File

@ -11,6 +11,11 @@
- 更新 TimePicker 滚动条在 IE10+ 下隐藏
- 新增 Dropdown 的 command api #432
- 修复 Slider 在 Form 中的显示问题
- 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题
#### 非兼容性更新
- Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)
### 1.0.0-rc.8

View File

@ -145,9 +145,9 @@
| show-upload-list | 是否显示已上传文件列表 | boolean | — | true |
| type | 上传控件类型 | string | select,drag | select |
| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)thumbnail-mode 模式下此参数无效)| string | — | — |
| on-preview | 可选参数, 点击已上传的文件链接时的钩子 | function(file) | — | — |
| on-preview | 可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据 | function(file) | — | — |
| on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
| on-success | 可选参数, 文件上传成功时的钩子 | function(file, fileList) | — | — |
| on-error | 可选参数, 文件上传失败时的钩子 | function(err, file, fileList) | — | — |
| on-success | 可选参数, 文件上传成功时的钩子 | function(response, file, fileList) | — | — |
| on-error | 可选参数, 文件上传失败时的钩子 | function(err, response, file) | — | — |
| before-upload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
| thumbnail-mode | 是否设置为图片模式,该模式下会显示图片缩略图 | boolean | — | false |

View File

@ -1,5 +1,5 @@
function getError(action, option, xhr) {
const msg = `cannot post ${action} ${xhr.status}'`;
const msg = `fail to post ${action} ${xhr.status}'`;
const err = new Error(msg);
err.status = xhr.status;
err.method = 'post';
@ -20,12 +20,14 @@ function getBody(xhr) {
}
}
export default function upload(action, option) {
export default function upload(option) {
if (typeof XMLHttpRequest === 'undefined') {
return;
}
const xhr = new XMLHttpRequest();
const action = option.action;
if (xhr.upload) {
xhr.upload.onprogress = function progress(e) {
if (e.total > 0) {
@ -65,6 +67,10 @@ export default function upload(action, option) {
const headers = option.headers || {};
if (headers['X-Requested-With'] !== null) {
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
}
for (let item in headers) {
if (headers.hasOwnProperty(item) && headers[item] !== null) {
xhr.setRequestHeader(item, headers[item]);

View File

@ -111,14 +111,14 @@ export default {
_file.status = 'finished';
_file.response = res;
this.onSuccess(_file, this.fileList);
this.onSuccess(res, _file, this.fileList);
setTimeout(() => {
_file.showProgress = false;
}, 1000);
}
},
handleError(err, file) {
handleError(err, response, file) {
var _file = this.getFile(file);
var fileList = this.fileList;
@ -126,7 +126,7 @@ export default {
fileList.splice(fileList.indexOf(_file), 1);
this.onError(err, _file, fileList);
this.onError(err, response, file);
},
handleRemove(file) {
var fileList = this.fileList;
@ -182,7 +182,8 @@ export default {
'on-error': this.handleError,
'on-preview': this.handlePreview,
'on-remove': this.handleRemove
}
},
ref: 'upload-inner'
};
var uploadComponent = typeof FormData !== 'undefined'

View File

@ -130,20 +130,21 @@ export default {
let formData = new FormData();
formData.append(this.name, file);
ajax(this.action, {
ajax({
headers: this.headers,
withCredentials: this.withCredentials,
file: file,
data: this.data,
filename: this.name,
action: this.action,
onProgress: e => {
this.onProgress(e, file);
},
onSuccess: res => {
this.onSuccess(res, file);
},
onError: err => {
this.onError(err, file);
onError: (err, response) => {
this.onError(err, response, file);
}
});
},

View File

@ -0,0 +1,229 @@
import { createVue, destroyVM } from '../util.js';
import ajax from 'packages/upload/src/ajax';
const noop = () => {
};
const option = {
onSuccess: noop,
data: { a: 'abc', b: 'bcd' },
filename: 'file.png',
file: 'foo',
action: '/upload',
headers: { region: 'shanghai' }
};
let requests, xhr;
describe('ajax', () => {
beforeEach(() => {
xhr = sinon.useFakeXMLHttpRequest();
requests = [];
xhr.onCreate = req => requests.push(req);
option.onError = noop;
option.onSuccess = noop;
});
afterEach(() => {
xhr.restore();
});
it('request success', done => {
option.onError = done;
option.onSuccess = ret => {
expect(ret).to.eql({ success: true });
done();
};
ajax(option);
requests[0].respond(200, {}, '{"success": true}');
});
it('request width header', done => {
ajax(option);
expect(requests[0].requestHeaders).to.eql({
'X-Requested-With': 'XMLHttpRequest',
region: 'shanghai'
});
done();
});
it('40x code should be error', done => {
option.onError = e => {
expect(e.toString()).to.contain('404');
done();
};
option.onSuccess = () => done('404 should throw error');
ajax(option);
requests[0].respond(404, {}, 'Not found');
});
it('2xx code should be success', done => {
option.onError = done;
option.onSuccess = ret => {
expect(ret).to.equal('');
done();
};
ajax(option);
requests[0].respond(204, {});
});
});
describe('Upload', () => {
let requests;
let xhr;
beforeEach(() => {
xhr = sinon.useFakeXMLHttpRequest();
requests = [];
xhr.onCreate = req => requests.push(req);
});
afterEach(() => {
xhr.restore();
});
describe('ajax upload', () => {
if (typeof FormData === 'undefined') {
return;
}
let uploader;
let handlers = {};
const props = {
props: {
action: '/upload',
onSuccess(res, file, fileList) {
console.log('onSuccess', res);
if (handlers.onSuccess) {
handlers.onSuccess(res, file, fileList);
}
},
onError(err, response, file) {
console.log('onError', err, response);
if (handlers.onError) {
handlers.onError(err, response, file);
}
},
onPreview(file) {
console.log('onPreview', file);
if (handlers.onPreview) {
handlers.onPreview(file);
}
}
}
};
beforeEach(() => {
uploader = createVue({
render(h) {
return (
<el-upload {...props} ref="upload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
);
}
}, true).$refs.upload;
});
afterEach(() => {
destroyVM(uploader);
handlers = {};
});
it('upload success', done => {
const files = [{
name: 'success.png',
type: 'xml'
}];
handlers.onSuccess = (res, file, fileList) => {
expect(file.name).to.equal('success.png');
expect(fileList.length).to.equal(1);
expect(res).to.equal('success.png');
done();
};
uploader.$refs['upload-inner'].handleChange({ target: { files }});
setTimeout(() => {
requests[0].respond(200, {}, `${files[0].name}`);
}, 100);
});
it('upload fail', done => {
const files = [{
name: 'fail.png',
type: 'xml'
}];
handlers.onError = (err, response, file) => {
expect(err instanceof Error).to.equal(true);
expect(response).to.equal('error 400');
done();
};
uploader.$refs['upload-inner'].handleChange({ target: { files }});
setTimeout(() => {
requests[0].respond(400, {}, 'error 400');
}, 100);
});
it('preview file', done => {
const files = [{
name: 'success.png',
type: 'xml'
}];
handlers.onPreview = (file) => {
expect(file.response).to.equal('success.png');
done();
};
handlers.onSuccess = (res, file, fileList) => {
uploader.$nextTick(_ => {
uploader.$el.querySelector('.el-upload__files .is-finished a').click();
});
};
uploader.$refs['upload-inner'].handleChange({ target: { files }});
setTimeout(() => {
requests[0].respond(200, {}, `${files[0].name}`);
}, 100);
});
it('file remove', done => {
const files = [{
name: 'success.png',
type: 'xml'
}];
handlers.onSuccess = (res, file, fileList) => {
uploader.$el.querySelector('.el-upload__files .el-upload__btn-delete').click();
uploader.$nextTick(_ => {
expect(uploader.fileList.length).to.equal(0);
expect(uploader.$el.querySelector('.el-upload__files')).to.not.exist;
done();
});
};
uploader.$refs['upload-inner'].handleChange({ target: { files }});
setTimeout(() => {
requests[0].respond(200, {}, `${files[0].name}`);
}, 100);
});
it('clear files', done => {
const files = [{
name: 'success.png',
type: 'xml'
}];
handlers.onSuccess = (res, file, fileList) => {
uploader.clearFiles();
uploader.$nextTick(_ => {
expect(uploader.fileList.length).to.equal(0);
expect(uploader.$el.querySelector('.el-upload__files')).to.not.exist;
done();
});
};
uploader.$refs['upload-inner'].handleChange({ target: { files }});
setTimeout(() => {
requests[0].respond(200, {}, `${files[0].name}`);
}, 100);
});
});
});