diff --git a/devui/upload/__tests__/upload.spec.ts b/devui/upload/__tests__/upload.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..31dcf2239c7aae1b3f7a42a593626cb9b9dedc0f --- /dev/null +++ b/devui/upload/__tests__/upload.spec.ts @@ -0,0 +1,198 @@ +import { mount } from '@vue/test-utils' +import { ref, nextTick, reactive } from 'vue' +import DSingleUpload from '../src/single-upload' +import DMultipleUpload from '../src/multiple-upload' +const getMockFile = (element: Element, files: File[]): void => { + Object.defineProperty(element, 'files', { + get() { + return files + }, + }) +} + +describe('single upload', () => { + it('should render correctly', () => { + const TestComponent = { + components: { + 'd-single-upload': DSingleUpload, + }, + template: ` + + `, + setup() { + const fileOptions = reactive({ + accept: '', + multiple: false, + webkitdirectory: false, + }) + const uploadOptions = reactive({ + uri: 'http://localhost:4000/files/upload', + }) + const uploadedFiles = ref([]) + return { + fileOptions, + uploadedFiles, + uploadOptions, + } + }, + } + mount(TestComponent) + }) + it('should work with `disabled` prop', () => { + const TestComponent = { + components: { + 'd-single-upload': DSingleUpload, + }, + template: ` + + `, + setup() { + const fileOptions = reactive({ + accept: '', + multiple: false, + webkitdirectory: false, + }) + const uploadOptions = reactive({ + uri: 'http://localhost:4000/files/upload', + }) + const uploadedFiles = ref([]) + return { + fileOptions, + uploadedFiles, + uploadOptions, + } + }, + } + const wrapper = mount(TestComponent) + expect(wrapper.find('.devui-input-group.disabled').exists()).toBe(true) + }) + it('should work with `before-upload auto-upload withoutBtn` prop', async () => { + const beforeUpload = jest.fn(async () => true) + + const TestComponent = { + components: { + 'd-single-upload': DSingleUpload, + }, + template: ` + + `, + setup() { + const fileOptions = reactive({ + accept: '', + multiple: false, + webkitdirectory: false, + }) + const uploadOptions = reactive({ + uri: 'http://localhost:4000/files/upload', + }) + const uploadedFiles = ref([]) + return { + fileOptions, + uploadedFiles, + uploadOptions, + beforeUpload, + } + }, + } + const wrapper = mount(TestComponent) + const uploadElment = wrapper.find('.devui-input-group') + await uploadElment.trigger('click') + await nextTick() + const input = document.getElementById('d-upload-temp') + const fileList = [new File(['test'], 'file.txt')] + getMockFile(input, fileList) + const evt = new Event('change') + await input.dispatchEvent(evt) + expect(beforeUpload).toHaveBeenCalled() + expect(wrapper.find('.devui-upload button').exists()).toBe(false) + }) + it('should work with `showTip placeholderText uploadText` prop', async () => { + const TestComponent = { + components: { + 'd-single-upload': DSingleUpload, + }, + template: ` + + `, + setup() { + const fileOptions = reactive({ + accept: '', + multiple: false, + webkitdirectory: false, + }) + const uploadOptions = reactive({ + uri: 'http://localhost:4000/files/upload', + }) + const uploadedFiles = ref([]) + return { + fileOptions, + uploadedFiles, + uploadOptions, + } + }, + } + const wrapper = mount(TestComponent) + expect(wrapper.find('.devui-upload-tip').exists()).toBe(true) + expect(wrapper.find('.devui-upload-placeholder').text()).toBe('select file') + expect(wrapper.find('.devui-upload button').text()).toBe('upload') + }) +}) + +describe('multi upload', () => { + it('should render correctly', () => { + const TestComponent = { + components: { + 'd-multi-upload': DMultipleUpload, + }, + template: ` +
+ +
+ `, + setup() { + const fileOptions = reactive({ + accept: '', + multiple: true, + webkitdirectory: false, + }) + const uploadOptions = reactive({ + uri: 'http://localhost:4000/files/upload', + }) + const uploadedFiles = ref([]) + return { + fileOptions, + uploadedFiles, + uploadOptions, + } + }, + } + mount(TestComponent) + }) +}) diff --git a/devui/upload/src/file-drop-directive.ts b/devui/upload/src/file-drop-directive.ts index eae3e67e741af3225e02ed66703d2d299bb87ca3..e74602f6911ee9ceb94cf7f4269d9acf8a20e72e 100644 --- a/devui/upload/src/file-drop-directive.ts +++ b/devui/upload/src/file-drop-directive.ts @@ -10,7 +10,7 @@ interface BindingType { const getTransfer = (event: any) => { return event.dataTransfer ? event.dataTransfer - : event.originalEvent.dataTransfer + : event.originalEvent?.dataTransfer } const haveFiles = (types: any) => { diff --git a/devui/upload/src/upload-types.ts b/devui/upload/src/upload-types.ts index cc5ad91580ad011c1da666b74eb0bd755f5cd25b..1567766aa35c53c34003545ebc17f4299dac26e8 100644 --- a/devui/upload/src/upload-types.ts +++ b/devui/upload/src/upload-types.ts @@ -53,10 +53,6 @@ export const uploadProps = { type: Object as PropType, required: true, }, - filePath: { - type: String, - required: true, - }, autoUpload: { type: Boolean, default: false, @@ -134,9 +130,6 @@ export const multiUploadProps = { type: Object as PropType, required: true, }, - filePath: { - type: String, - }, autoUpload: { type: Boolean, default: false, diff --git a/docs/components/upload/index.md b/docs/components/upload/index.md index 6300ab68fb1b8789e32e91a372c6fd051dbe73cb..eddf5a362c6aa8e1f569a0203a92c056b2a897de 100644 --- a/docs/components/upload/index.md +++ b/docs/components/upload/index.md @@ -221,7 +221,6 @@ export default { :file-options="fileOptions" :upload-options="uploadOptions" v-model:uploaded-files="uploadedFiles" - filePath="name" @success-event="onSuccess" @error-event="onError" :showTip="true" @@ -290,7 +289,6 @@ export default { :file-options="fileOptions" :upload-options="uploadOptions" v-model:uploaded-files="uploadedFiles" - filePath="name" @success-event="onSuccess" @error-event="onError" :showTip="true" @@ -358,7 +356,6 @@ export default { :file-options="fileOptions" :upload-options="uploadOptions" v-model:uploaded-files="uploadedFiles" - filePath="name" @success-event="onSuccess" @error-event="onError" :showTip="true" @@ -1188,21 +1185,20 @@ export default { d-single-upload 参数 -| **参数** | **类型** | **默认** | 说明 | **跳转 Demo** | -| ---------------------- | --------------------------------- | ---------- | ---------------------------------------------------------------------------------------- | --------------------- | -| fileOptions | [IFileOptions](#ifileoptions) | -- | 必选，待上传文件配置 | [基本用法](#基本用法) | -| filePath | `string` | -- | 文件路径 | [基本用法](#基本用法) | -| uploadOptions | [IUploadOptions](#iuploadoptions) | \-- | 必选，上传配置 | [基本用法](#基本用法) | -| autoUpload | `boolean` | false | 可选，是否自动上传 | [基本用法](#基本用法) | -| placeholderText | `string` | '选择文件' | 可选，上传输入框中的 Placeholder 文字 | [基本用法](#基本用法) | -| uploadText | `string` | '上传' | 可选，上传按钮文字 | [基本用法](#基本用法) | -| uploadedFiles | `Array` | [] | 可选，获取已上传的文件列表 | [基本用法](#基本用法) | -| withoutBtn | `boolean` | false | 可选，是否舍弃按钮 | [基本用法](#基本用法) | -| enableDrop | `boolean` | false | 可选，是否支持拖拽 | [基本用法](#基本用法) | +| **参数** | **类型** | **默认** | 说明 | **跳转 Demo** | +| ---------------------- | --------------------------------- | ---------- | ------------------------------------------------------------ | --------------------- | +| fileOptions | [IFileOptions](#ifileoptions) | -- | 必选，待上传文件配置 | [基本用法](#基本用法) | +| uploadOptions | [IUploadOptions](#iuploadoptions) | \-- | 必选，上传配置 | [基本用法](#基本用法) | +| autoUpload | `boolean` | false | 可选，是否自动上传 | [基本用法](#基本用法) | +| placeholderText | `string` | '选择文件' | 可选，上传输入框中的 Placeholder 文字 | [基本用法](#基本用法) | +| uploadText | `string` | '上传' | 可选，上传按钮文字 | [基本用法](#基本用法) | +| uploadedFiles | `Array` | [] | 可选，获取已上传的文件列表 | [基本用法](#基本用法) | +| withoutBtn | `boolean` | false | 可选，是否舍弃按钮 | [基本用法](#基本用法) | +| enableDrop | `boolean` | false | 可选，是否支持拖拽 | [基本用法](#基本用法) | | beforeUpload | `boolean Promise ` | \-- | 可选，上传前的回调，通过返回`true` or `false` ,控制文件是否上传,参数为文件信息及上传配置 | [基本用法](#基本用法) | -| dynamicUploadOptionsFn | [IUploadOptions](#iuploadoptions) | \-- | 为文件动态设置自定义的上传参数, 参数为当前选中文件及`uploadOptions`的值 | [基本用法](#基本用法) | -| disabled | `boolean` | false | 可选，是否禁用上传组件 | [基本用法](#基本用法) | -| showTip | `boolean` | false | 可选，是否显示上传提示信息 | [自动上传](#自动上传) | +| dynamicUploadOptionsFn | [IUploadOptions](#iuploadoptions) | \-- | 为文件动态设置自定义的上传参数, 参数为当前选中文件及`uploadOptions`的值 | [基本用法](#基本用法) | +| disabled | `boolean` | false | 可选，是否禁用上传组件 | [基本用法](#基本用法) | +| showTip | `boolean` | false | 可选，是否显示上传提示信息 | [自动上传](#自动上传) | d-single-upload 事件 @@ -1220,7 +1216,6 @@ d-multiple-upload 参数 | **参数** | **类型** | **默认** | 说明 | **跳转 Demo** | | ---------------------- | --------------------------------- | -------------- | ---------------------------------------------------------------------------------------- | ------------------------- | | fileOptions | [IFileOptions](#ifileoptions) | -- | 必选，待上传文件配置 | [多文件上传](#多文件上传) | -| filePath | `string` | -- | 文件路径 | [多文件上传](#多文件上传) | | uploadOptions | [IUploadOptions](#iuploadoptions) | \-- | 必选，上传配置 | [多文件上传](#多文件上传) | | autoUpload | `boolean` | false | 可选，是否自动上传 | [自动上传](#自动上传) | | placeholderText | `string` | '选择多个文件' | 可选，上传输入框中的 Placeholder 文字 | [基本用法](#基本用法) | diff --git a/jest.config.js b/jest.config.js index 5fcd4828d69687c9380fc1d57a44e651ff84225e..fb480498a9a4fbc5dd7b770fe650a92c1b23b9d5 100644 --- a/jest.config.js +++ b/jest.config.js @@ -15,7 +15,7 @@ module.exports = { }, ], }, - + transformIgnorePatterns: ['node_modules/?!(lodash-es)'], // The glob patterns Jest uses to detect test files testMatch: ['**/**/*.spec.(ts|tsx)'], diff --git a/jest.setup.js b/jest.setup.js index f5a273459680efa81784f858753098bbc55d23a9..88b32b6bfce791bbb17b96c726429ccafc482c05 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -1,5 +1,14 @@ import { config } from '@vue/test-utils' import Icon from './devui/icon/src/icon' +import Button from './devui/button/src/button' +import Progress from './devui/progress/src/progress' +import fileDropDirective from './devui/upload/src/file-drop-directive' config.global.components = { 'd-icon': Icon, + 'd-button': Button, + 'd-progress': Progress, +} + +config.global.directives = { + FileDrop: fileDropDirective, }