mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Uploader): add test cases (#8318)
* test(Uploader): add test cases * test(Uploader): add test cases * test(Uploader): add test cases * test(Uploader): 修复类型错误 Co-authored-by: nemo-shen <1034131477@qq.com>
This commit is contained in:
nemo-shen
GitHub
parent
1381070a12
commit
dcd5f08b3b
@ -1,173 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`delete preview image 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable preview image 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`file message should be reactive 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__mask">
|
||||
<div class="van-loading van-loading--circular van-uploader__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-uploader__mask-message">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`image-fit prop 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`max-count prop 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preview-cover slot 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
<div class="van-uploader__preview-cover">url: https://img.yzcdn.cn/vant/cat.jpeg, index: 0</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
<div class="van-uploader__preview-cover">url: https://img.yzcdn.cn/vant/cat.jpeg, index: 1</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preview-size prop 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview" style="">
|
||||
<div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render preview image 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
|
||||
<!----></i>
|
||||
<div class="van-uploader__file-name van-ellipsis">https://img.yzcdn.cn/vant/test.pdf</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
|
||||
<!----></i>
|
||||
<div class="van-uploader__file-name van-ellipsis">test.pdf</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render upload-text 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><span class="van-uploader__upload-text">Text</span><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`upload-icon prop 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-add van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
282
src/uploader/test/__snapshots__/index.spec.ts.snap
Normal file
282
src/uploader/test/__snapshots__/index.spec.ts.snap
Normal file
@ -0,0 +1,282 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`delete preview image 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"
|
||||
style="width: 30px; height: 30px;"
|
||||
>
|
||||
<img src="https://img01.yzcdn.cn/vant/cat.jpeg"
|
||||
class="van-image__img"
|
||||
style="object-fit: cover;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload"
|
||||
style="width: 30px; height: 30px;"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable preview image 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable preview image 2`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-uploader__file">
|
||||
<i class="van-badge__wrapper van-icon van-icon-description van-uploader__file-icon">
|
||||
</i>
|
||||
<div class="van-uploader__file-name van-ellipsis">
|
||||
test.jpg
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`file message should be reactive 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`image-fit prop 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image">
|
||||
<img src="https://img01.yzcdn.cn/vant/cat.jpeg"
|
||||
class="van-image__img"
|
||||
style="object-fit: contain;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preview-cover slot 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image">
|
||||
<img src="https://img01.yzcdn.cn/vant/cat.jpeg"
|
||||
class="van-image__img"
|
||||
style="object-fit: cover;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-uploader__preview-cover">
|
||||
Custom Preview Cover
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image">
|
||||
<img src="https://img01.yzcdn.cn/vant/cat.jpeg"
|
||||
class="van-image__img"
|
||||
style="object-fit: cover;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-uploader__preview-cover">
|
||||
Custom Preview Cover
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preview-size prop 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-uploader__file"
|
||||
style="width: 30px; height: 30px;"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-description van-uploader__file-icon">
|
||||
</i>
|
||||
<div class="van-uploader__file-name van-ellipsis">
|
||||
test.jpg
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload"
|
||||
style="width: 30px; height: 30px;"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render preview image 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image">
|
||||
<img src="https://img01.yzcdn.cn/vant/cat.jpeg"
|
||||
class="van-image__img"
|
||||
style="object-fit: cover;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-uploader__file">
|
||||
<i class="van-badge__wrapper van-icon van-icon-description van-uploader__file-icon">
|
||||
</i>
|
||||
<div class="van-uploader__file-name van-ellipsis">
|
||||
https://img01.yzcdn.cn/vant/test.pdf
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-uploader__file">
|
||||
<i class="van-badge__wrapper van-icon van-icon-description van-uploader__file-icon">
|
||||
</i>
|
||||
<div class="van-uploader__file-name van-ellipsis">
|
||||
test.jpg
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`upload-icon prop 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-add van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,539 +0,0 @@
|
||||
import { Uploader } from '..';
|
||||
import { mount, later, triggerDrag } from '../../../test';
|
||||
|
||||
window.File = function () {
|
||||
this.size = 10000;
|
||||
};
|
||||
|
||||
const mockFileDataUrl = 'data:image/test';
|
||||
const mockFile = new File([], 'test.jpg');
|
||||
const file = { target: { files: [mockFile] } };
|
||||
const multiFile = { target: { files: [mockFile, mockFile] } };
|
||||
const IMAGE = 'https://img.yzcdn.cn/vant/cat.jpeg';
|
||||
const PDF = 'https://img.yzcdn.cn/vant/test.pdf';
|
||||
|
||||
window.FileReader = function () {
|
||||
this.readAsText = function () {
|
||||
this.onload &&
|
||||
this.onload({
|
||||
target: {
|
||||
result: mockFileDataUrl,
|
||||
},
|
||||
});
|
||||
};
|
||||
this.readAsDataURL = this.readAsText;
|
||||
};
|
||||
|
||||
test('disabled', () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
disabled: true,
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
expect(afterRead).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('result-type as text', (done) => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
resultType: 'text',
|
||||
afterRead: (readFile) => {
|
||||
expect(readFile.content).toEqual(mockFileDataUrl);
|
||||
done();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
});
|
||||
|
||||
test('result-type as file', (done) => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
resultType: 'file',
|
||||
afterRead: (readFile) => {
|
||||
expect(readFile.file).toBeTruthy();
|
||||
expect(readFile.content).toBeFalsy();
|
||||
done();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
});
|
||||
|
||||
test('set input name', (done) => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
name: 'uploader',
|
||||
beforeRead: (readFile, detail) => {
|
||||
expect(detail.name).toEqual('uploader');
|
||||
return true;
|
||||
},
|
||||
afterRead: (readFile, detail) => {
|
||||
expect(detail.name).toEqual('uploader');
|
||||
done();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
});
|
||||
|
||||
test('unknown resultType', () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
resultType: 'xxxx',
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
wrapper.vm.onChange(file);
|
||||
expect(afterRead).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('before read return false', () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
beforeRead: () => false,
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
expect(afterRead).toHaveBeenCalledTimes(0);
|
||||
expect(input.element.value).toEqual('');
|
||||
});
|
||||
|
||||
test('before read return promise and resolve', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
beforeRead: () =>
|
||||
new Promise((resolve) => {
|
||||
resolve(file);
|
||||
}),
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('before read return promise and resolve no value', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
beforeRead: () =>
|
||||
new Promise((resolve) => {
|
||||
resolve();
|
||||
}),
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
wrapper.vm.onChange(file);
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(1);
|
||||
expect(input.element.value).toEqual('');
|
||||
});
|
||||
|
||||
test('before read return promise and reject', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
beforeRead: () =>
|
||||
new Promise((resolve, reject) => {
|
||||
reject();
|
||||
}),
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
wrapper.vm.onChange(file);
|
||||
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(0);
|
||||
expect(input.element.value).toEqual('');
|
||||
});
|
||||
|
||||
test('file size overlimit', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
maxSize: 1,
|
||||
},
|
||||
});
|
||||
wrapper.vm.onChange(file);
|
||||
wrapper.vm.onChange(multiFile);
|
||||
|
||||
await later();
|
||||
expect(wrapper.emitted('oversize')[0]).toBeTruthy();
|
||||
expect(wrapper.emitted('oversize')[1]).toBeTruthy();
|
||||
|
||||
wrapper.vm.maxSize = 100000;
|
||||
wrapper.vm.onChange(multiFile);
|
||||
|
||||
await later();
|
||||
expect(wrapper.emitted('oversize')[2]).toBeFalsy();
|
||||
});
|
||||
|
||||
test('render upload-text', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
uploadText: 'Text',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render preview image', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [
|
||||
{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' },
|
||||
{ url: 'https://img.yzcdn.cn/vant/test.pdf' },
|
||||
{ file: { name: 'test.pdf' } },
|
||||
],
|
||||
},
|
||||
listeners: {
|
||||
input(fileList) {
|
||||
wrapper.setProps({ fileList });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
await later();
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('image-fit prop', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
imageFit: 'contain',
|
||||
fileList: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }],
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('upload-icon prop', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
uploadIcon: 'add',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable preview image', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [],
|
||||
previewImage: false,
|
||||
},
|
||||
listeners: {
|
||||
input(fileList) {
|
||||
wrapper.setProps({ fileList });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
await later();
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('max-count prop', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [],
|
||||
maxCount: 1,
|
||||
},
|
||||
listeners: {
|
||||
input(fileList) {
|
||||
wrapper.setProps({ fileList });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(multiFile);
|
||||
await later();
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('preview-size prop', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [],
|
||||
previewSize: 30,
|
||||
},
|
||||
listeners: {
|
||||
input(fileList) {
|
||||
wrapper.setProps({ fileList });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
await later();
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('deletable prop', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-uploader__preview-delete').element).toBeTruthy();
|
||||
|
||||
wrapper.setProps({ deletable: false });
|
||||
expect(wrapper.find('.van-uploader__preview-delete').element).toBeFalsy();
|
||||
});
|
||||
|
||||
test('delete preview image', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
previewSize: 30,
|
||||
},
|
||||
listeners: {
|
||||
input(fileList) {
|
||||
wrapper.setProps({ fileList });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
expect(wrapper.vm.fileList.length).toEqual(0);
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
expect(wrapper.emitted('delete')[0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('before-delete prop return false', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
beforeDelete: () => false,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
expect(wrapper.emitted('delete')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('before-delete prop return true', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
beforeDelete: () => true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('before-delete prop resolved', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
beforeDelete: () => new Promise((resolve) => resolve()),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
await later();
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('before-delete prop rejected', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
beforeDelete: () => new Promise((resolve, reject) => reject()),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
await later();
|
||||
expect(wrapper.emitted('delete')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('click to preview image', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
previewFullImage: false,
|
||||
fileList: [{ url: IMAGE }, { url: PDF }],
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
const imagePreviewNode = document.querySelector('.van-image-preview');
|
||||
expect(imagePreviewNode).toBeFalsy();
|
||||
|
||||
wrapper.setProps({ previewFullImage: true });
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
|
||||
await later();
|
||||
|
||||
const imagePreviewNode2 = document.querySelector('.van-image-preview');
|
||||
const images = imagePreviewNode2.querySelectorAll(
|
||||
'.van-image-preview__image'
|
||||
);
|
||||
expect(images.length).toEqual(1);
|
||||
});
|
||||
|
||||
test('preview-options prop', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
previewOptions: {
|
||||
closeable: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
await later();
|
||||
|
||||
const closeIcon = document.querySelectorAll('.van-image-preview__close-icon');
|
||||
expect(closeIcon.length).toEqual(1);
|
||||
});
|
||||
|
||||
test('closeImagePreview method', () => {
|
||||
const close = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
mocks: {
|
||||
imagePreview: {
|
||||
close,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.closeImagePreview();
|
||||
expect(close).toHaveBeenCalledTimes(1);
|
||||
|
||||
// should not throw error
|
||||
const wrapper2 = mount(Uploader);
|
||||
wrapper2.vm.closeImagePreview();
|
||||
});
|
||||
|
||||
test('click-preview event', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
previewFullImage: false,
|
||||
fileList: [{ url: IMAGE }, { url: PDF }],
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
expect(wrapper.emitted('click-preview')[0][0]).toEqual({ url: IMAGE });
|
||||
expect(wrapper.emitted('click-preview')[0][1]).toEqual({
|
||||
name: '',
|
||||
index: 0,
|
||||
});
|
||||
});
|
||||
|
||||
test('close-preview event', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
|
||||
const preview = document.querySelector('.van-image-preview');
|
||||
const swipe = preview.querySelector('.van-swipe-item');
|
||||
triggerDrag(swipe, 0, 0);
|
||||
|
||||
await later(300);
|
||||
expect(wrapper.emitted('close-preview')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('show-upload prop', () => {
|
||||
const wrapper = mount(Uploader);
|
||||
expect(wrapper.contains('.van-uploader__upload')).toBeTruthy();
|
||||
wrapper.setProps({ showUpload: false });
|
||||
expect(wrapper.contains('.van-uploader__upload')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('file message should be reactive', (done) => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [],
|
||||
afterRead(file) {
|
||||
file.status = 'uploading';
|
||||
file.message = 1;
|
||||
setTimeout(() => {
|
||||
file.message = 2;
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
done();
|
||||
});
|
||||
},
|
||||
},
|
||||
listeners: {
|
||||
input(fileList) {
|
||||
wrapper.setProps({ fileList });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.onChange(file);
|
||||
});
|
||||
|
||||
test('multiFile upload filter max-size file', async () => {
|
||||
const SmallFile = function () {
|
||||
this.size = 100;
|
||||
};
|
||||
const multiFiles = {
|
||||
target: { files: [mockFile, new SmallFile([], 'small-test.jpg')] },
|
||||
};
|
||||
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
maxSize: 1000,
|
||||
},
|
||||
});
|
||||
wrapper.vm.onChange(multiFiles);
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('oversize')[0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('preview-cover slot', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
fileList: [{ url: IMAGE }, { url: IMAGE }],
|
||||
},
|
||||
slots: {
|
||||
'preview-cover': (item) => `url: ${item.url}, index: ${item.index}`,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
574
src/uploader/test/index.spec.ts
Normal file
574
src/uploader/test/index.spec.ts
Normal file
@ -0,0 +1,574 @@
|
||||
import Uploader, { UploaderFileListItem } from '..';
|
||||
import { mount, later, triggerDrag } from '../../../test';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
const mockFileDataUrl = 'data:image/test';
|
||||
const mockFile = new File([new ArrayBuffer(10000)], 'test.jpg');
|
||||
const IMAGE = 'https://img01.yzcdn.cn/vant/cat.jpeg';
|
||||
const PDF = 'https://img01.yzcdn.cn/vant/test.pdf';
|
||||
|
||||
(window.FileReader as any) = function (this: any) {
|
||||
(this as any).readAsText = function () {
|
||||
this.onload &&
|
||||
this.onload({
|
||||
target: {
|
||||
result: mockFileDataUrl,
|
||||
},
|
||||
});
|
||||
};
|
||||
this.readAsDataURL = this.readAsText;
|
||||
};
|
||||
|
||||
test('disabled', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
disabled: true,
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
|
||||
input.trigger('change');
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('result-type as text', async (done) => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
resultType: 'text',
|
||||
afterRead(readFile: UploaderFileListItem | UploaderFileListItem[]) {
|
||||
expect((readFile as UploaderFileListItem).content).toEqual(
|
||||
mockFileDataUrl
|
||||
);
|
||||
done();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
});
|
||||
|
||||
test('result-type as file', (done) => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
resultType: 'file',
|
||||
afterRead: (readFile: UploaderFileListItem | UploaderFileListItem[]) => {
|
||||
expect((readFile as UploaderFileListItem).file).toBeTruthy();
|
||||
expect((readFile as UploaderFileListItem).content).toBeFalsy();
|
||||
done();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
});
|
||||
|
||||
test('set input name', (done) => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
name: 'uploader',
|
||||
beforeRead: (
|
||||
file: File | File[],
|
||||
detail: { name: string | number; index: number }
|
||||
) => {
|
||||
expect(detail.name).toEqual('uploader');
|
||||
return file;
|
||||
},
|
||||
afterRead: (
|
||||
readFile: UploaderFileListItem | UploaderFileListItem[],
|
||||
detail: { name: string | number; index: number }
|
||||
) => {
|
||||
expect(detail.name).toEqual('uploader');
|
||||
done();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
});
|
||||
|
||||
test('unknown resultType', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
await wrapper.setProps({ resultType: 'xxxx' });
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('before read return false', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
beforeRead: () => undefined,
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(0);
|
||||
expect(input.element.value).toEqual('');
|
||||
});
|
||||
|
||||
test('before read return promise and resolve', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
beforeRead: (file: File | File[]) =>
|
||||
new Promise<File | File[] | undefined>((resolve) => {
|
||||
resolve(file);
|
||||
}),
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('before read return promise and resolve no value', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
beforeRead: () =>
|
||||
new Promise<undefined>((resolve) => {
|
||||
resolve(undefined);
|
||||
}),
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(1);
|
||||
expect(input.element.value).toEqual('');
|
||||
});
|
||||
|
||||
test('before read return promise and reject', async () => {
|
||||
const afterRead = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
beforeRead: () =>
|
||||
new Promise<undefined>((resolve, reject) => {
|
||||
reject();
|
||||
}),
|
||||
afterRead,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
await later();
|
||||
expect(afterRead).toHaveBeenCalledTimes(0);
|
||||
expect(input.element.value).toEqual('');
|
||||
});
|
||||
|
||||
test('file size overlimit', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
maxSize: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
|
||||
let fileList = [mockFile];
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: () => jest.fn().mockReturnValue(fileList)(),
|
||||
});
|
||||
|
||||
await input.trigger('change');
|
||||
|
||||
fileList = [mockFile, mockFile];
|
||||
await input.trigger('change');
|
||||
|
||||
await later();
|
||||
expect(wrapper.emitted<[File]>('oversize')![0]).toBeTruthy();
|
||||
expect(wrapper.emitted<[File]>('oversize')![1]).toBeTruthy();
|
||||
|
||||
await wrapper.setProps({ maxSize: 100000 });
|
||||
|
||||
fileList = [mockFile];
|
||||
await input.trigger('change');
|
||||
|
||||
await later();
|
||||
expect(wrapper.emitted<[File]>('oversize')![2]).toBeFalsy();
|
||||
});
|
||||
|
||||
test('render upload-text', () => {
|
||||
const uploadText = 'Text';
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
uploadText,
|
||||
},
|
||||
});
|
||||
|
||||
const text = wrapper.find<HTMLSpanElement>('.van-uploader__upload-text');
|
||||
expect(text?.text()).toEqual(uploadText);
|
||||
});
|
||||
|
||||
test('render preview image', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [
|
||||
{ url: 'https://img01.yzcdn.cn/vant/cat.jpeg' },
|
||||
{ url: 'https://img01.yzcdn.cn/vant/test.pdf' },
|
||||
{ file: mockFile },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('image-fit prop', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
imageFit: 'contain',
|
||||
modelValue: [{ url: 'https://img01.yzcdn.cn/vant/cat.jpeg' }],
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('upload-icon prop', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
uploadIcon: 'add',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable preview image', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [],
|
||||
previewImage: false,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.setProps({ modelValue: [{ file: mockFile }] });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
await wrapper.setProps({ previewImage: true });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('max-count prop', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [],
|
||||
maxCount: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile, mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
await later();
|
||||
expect(
|
||||
wrapper.emitted<[File | File[]]>('update:modelValue')![0][0]
|
||||
).toHaveLength(1);
|
||||
});
|
||||
|
||||
test('preview-size prop', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [],
|
||||
previewSize: 30,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.setProps({ modelValue: [{ file: mockFile }] });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('deletable prop', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-uploader__preview-delete').exists()).toBeTruthy();
|
||||
|
||||
await wrapper.setProps({ deletable: false });
|
||||
expect(wrapper.find('.van-uploader__preview-delete').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
test('delete preview image', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
previewSize: 30,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
|
||||
expect(wrapper.emitted<[File]>('update:modelValue')![0][0]).toHaveLength(0);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
expect(wrapper.emitted<[File]>('delete')![0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('before-delete prop return false', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
beforeDelete: () => false,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
expect(wrapper.emitted('delete')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('before-delete prop return true', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
beforeDelete: () => true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('before-delete prop resolved', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
beforeDelete: () => new Promise<boolean>((resolve) => resolve(true)),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
await later();
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('before-delete prop rejected', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
beforeDelete: () => new Promise<boolean>((resolve, reject) => reject()),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-uploader__preview-delete').trigger('click');
|
||||
await later();
|
||||
expect(wrapper.emitted('delete')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('click to preview image', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
previewFullImage: false,
|
||||
modelValue: [{ url: IMAGE }, { url: PDF }],
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
await later();
|
||||
expect(document.querySelector('.van-image-preview')).toBeFalsy();
|
||||
|
||||
await wrapper.setProps({ previewFullImage: true });
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
await later();
|
||||
expect(document.querySelector('.van-image-preview')).toBeTruthy();
|
||||
|
||||
const images = document.querySelectorAll<HTMLImageElement>(
|
||||
'.van-image-preview .van-image-preview__image'
|
||||
);
|
||||
expect(images).toHaveLength(1);
|
||||
});
|
||||
|
||||
test('preview-options prop', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
previewOptions: {
|
||||
images: [],
|
||||
closeable: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
await later();
|
||||
|
||||
const closeIcon = document.querySelectorAll('.van-image-preview__close-icon');
|
||||
expect(closeIcon).toHaveLength(1);
|
||||
});
|
||||
|
||||
test('closeImagePreview method', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
},
|
||||
});
|
||||
|
||||
await nextTick();
|
||||
await (wrapper.vm as Record<string, any>).closeImagePreview();
|
||||
expect(wrapper.emitted('close-preview')).toBeFalsy();
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
await (wrapper.vm as Record<string, any>).closeImagePreview();
|
||||
expect(wrapper.emitted('close-preview')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('click-preview event', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
previewFullImage: false,
|
||||
modelValue: [{ url: IMAGE }, { url: PDF }],
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
expect(wrapper.emitted<[File]>('click-preview')![0][0]).toEqual({
|
||||
url: IMAGE,
|
||||
});
|
||||
expect(
|
||||
wrapper.emitted<[File, { name: string; index: number }]>(
|
||||
'click-preview'
|
||||
)![0][1]
|
||||
).toEqual({
|
||||
name: '',
|
||||
index: 0,
|
||||
});
|
||||
});
|
||||
|
||||
test('close-preview event', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }],
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
|
||||
const preview = document.querySelector<HTMLDivElement>('.van-image-preview');
|
||||
const swipe = preview?.querySelector<HTMLDivElement>(
|
||||
'.van-swipe-item'
|
||||
) as HTMLDivElement;
|
||||
triggerDrag(swipe, 0, 0);
|
||||
|
||||
await later(300);
|
||||
expect(wrapper.emitted('close-preview')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('show-upload prop', async () => {
|
||||
const wrapper = mount(Uploader);
|
||||
|
||||
expect(wrapper.find('.van-uploader__upload').exists()).toBeTruthy();
|
||||
await wrapper.setProps({ showUpload: false });
|
||||
expect(wrapper.find('.van-uploader__upload').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
test('file message should be reactive', async (done) => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [],
|
||||
afterRead(file: UploaderFileListItem | UploaderFileListItem[]) {
|
||||
if (Array.isArray(file)) return;
|
||||
file.status = 'uploading';
|
||||
file.message = '1';
|
||||
setTimeout(() => {
|
||||
file.message = '2';
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
done();
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
});
|
||||
|
||||
test('multiFile upload filter max-size file', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
maxSize: 1000,
|
||||
},
|
||||
});
|
||||
|
||||
const smallFile = new File([new ArrayBuffer(100)], 'small.jpg');
|
||||
const input = wrapper.find<HTMLInputElement>('.van-uploader__input');
|
||||
Object.defineProperty(input.element, 'files', {
|
||||
get: jest.fn().mockReturnValue([mockFile, smallFile]),
|
||||
});
|
||||
input.trigger('change');
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted<[File]>('oversize')![0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('preview-cover slot', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
props: {
|
||||
modelValue: [{ url: IMAGE }, { url: IMAGE }],
|
||||
},
|
||||
slots: {
|
||||
'preview-cover': 'Custom Preview Cover',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
@ -10,8 +10,12 @@ test('isImageFile', () => {
|
||||
expect(isImageFile({ url: 'https://a.jfif' })).toBeTruthy();
|
||||
expect(isImageFile({ url: 'https://a.bmp' })).toBeTruthy();
|
||||
expect(isImageFile({ url: 'https://a.dpg' })).toBeTruthy();
|
||||
expect(isImageFile({ file: { type: 'image/jpg' } })).toBeTruthy();
|
||||
expect(isImageFile({ file: { type: 'application/pdf' } })).toBeFalsy();
|
||||
expect(
|
||||
isImageFile({ file: new File([], 'foo.jpg', { type: 'image/jpg' }) })
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
isImageFile({ file: new File([], 'bar.pdf', { type: 'application/pdf' }) })
|
||||
).toBeFalsy();
|
||||
expect(isImageFile({ content: 'data:image/xxx' })).toBeTruthy();
|
||||
expect(isImageFile({ content: 'data:application/xxx' })).toBeFalsy();
|
||||
expect(isImageFile({ isImage: true })).toBeTruthy();
|
||||
Loading…
x
Reference in New Issue
Block a user