refactor(comp:upload): fix review

packages/components/config/src/defaultConfig.ts

@@ -209,15 +209,14 @@ const upload: UploadConfig = {
   name: 'file',
   withCredentials: false,
   requestMethod: 'post',
-  strokeColor: '#20CC94',
 }
 
 const uploadList: UploadListConfig = {
   listType: 'text',
   icon: {
-    file: true,
-    remove: true,
-    retry: true,
+    file: 'paper-clip',
+    remove: 'delete',
+    retry: 'edit',
   },
 }
 

packages/components/config/src/types.ts

@@ -21,7 +21,7 @@ import type { MessageType } from '@idux/components/message'
 import type { ModalType } from '@idux/components/modal'
 import type { NotificationPlacement, NotificationType } from '@idux/components/notification'
 import type { PaginationSize } from '@idux/components/pagination'
-import type { ProgressFormat, ProgressGradient, ProgressIcons, ProgressSize } from '@idux/components/progress'
+import type { ProgressFormat, ProgressIcons, ProgressSize } from '@idux/components/progress'
 import type { ResultStatus } from '@idux/components/result'
 import type { SpaceSize } from '@idux/components/space'
 import type { SpinSize, SpinTipAlignType } from '@idux/components/spin'
@@ -196,13 +196,12 @@ export interface UploadConfig {
   name: string
   withCredentials: boolean
   requestMethod: UploadRequestMethod
-  strokeColor: ProgressGradient | string
   customRequest?: (option: UploadRequestOption) => { abort: () => void }
 }
 
 export interface UploadListConfig {
   listType: UploadListType
-  icon: Partial<Record<UploadIconType, string | boolean | VNode>>
+  icon: Partial<Record<UploadIconType, string | VNode>>
 }
 
 // Data Display

packages/components/default.less

@@ -15,7 +15,7 @@
 @import './breadcrumb/style/themes/default.less';
 @import './button/style/themes/default.less';
 @import './card/style/themes/default.less';
-@import './carousel/style//themes/default.less';
+@import './carousel/style/themes/default.less';
 @import './checkbox/style/themes/default.less';
 @import './collapse/style/themes/default.less';
 @import './date-picker/style/themes/default.less';

packages/components/types.d.ts

@@ -69,6 +69,7 @@ import type { TimePickerComponent } from '@idux/components/time-picker'
 import type { TimelineComponent, TimelineItemComponent } from '@idux/components/timeline'
 import type { TooltipComponent } from '@idux/components/tooltip'
 import type { TreeComponent } from '@idux/components/tree'
+import type { UploadComponent, UploadListComponent } from '@idux/components/upload'
 
 declare module 'vue' {
   export interface GlobalComponents {
@@ -154,6 +155,8 @@ declare module 'vue' {
     IxTimePicker: TimePickerComponent
     IxTooltip: TooltipComponent
     IxTree: TreeComponent
+    IxUpload: UploadComponent
+    IxUploadList: UploadListComponent
   }
 }
 

packages/components/upload/__tests__/__snapshots__/list.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Upload list render render work 1`] = `"<!---->"`;

packages/components/upload/__tests__/__snapshots__/upload.spec.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Upload render render work 1`] = `
+"<div>
+  <div class=\\"ix-upload-selector\\"><input class=\\"ix-upload-input\\" type=\\"file\\">
+    <!---->
+  </div>
+  <!---->
+  <div class=\\"ix-upload-tip\\">
+    <!---->
+  </div>
+</div>"
+`;

packages/components/upload/__tests__/list.spec.ts

@@ -2,7 +2,7 @@ import type { UploadListProps } from '../src/types'
 import type { MountingOptions } from '@vue/test-utils'
 
 import { flushPromises, mount } from '@vue/test-utils'
-import { h } from 'vue'
+import { h, ref } from 'vue'
 
 import { renderWork } from '@tests'
 
@@ -12,28 +12,46 @@ import UploadFilesListCpm from '../src/List'
 import { uploadToken } from '../src/token'
 
 const uploadListMount = (options?: MountingOptions<Partial<UploadListProps>>) => {
-  return mount(UploadFilesListCpm, (options ?? {}) as unknown as MountingOptions<UploadListProps>)
+  const { global: { provide: { [uploadToken as unknown as string]: provideObj } = {}, ...restGlobal } = {}, ...rest } =
+    options as MountingOptions<UploadListProps>
+
+  return mount(UploadFilesListCpm, {
+    global: {
+      provide: {
+        [uploadToken as symbol]: {
+          props: {},
+          files: { value: [] },
+          setSelectorVisible: () => {},
+          ...provideObj,
+        },
+      },
+      ...restGlobal,
+    },
+    ...rest,
+  })
 }
 
 describe('Upload list render', () => {
-  renderWork<UploadListProps>(UploadFilesListCpm)
+  renderWork<UploadListProps>(UploadFilesListCpm, {
+    global: { provide: { [uploadToken as symbol]: { props: {}, files: { value: [] }, setSelectorVisible: () => {} } } },
+  })
 
   test('type work', async () => {
     const wrapper = uploadListMount({
-      provide: {
-        [uploadToken as symbol]: {
-          props: {
-            files: [
+      global: {
+        provide: {
+          [uploadToken as symbol]: {
+            files: ref([
               {
                 uid: 'test1',
                 name: 'idux.svg',
                 thumbUrl: '/icons/logo.svg',
               },
-            ],
+            ]),
           },
         },
       },
-    } as MountingOptions<Partial<UploadListProps>>)
+    })
     await flushPromises()
 
     expect(wrapper.classes()).toContain('ix-upload-list-text')
@@ -49,46 +67,44 @@ describe('Upload list render', () => {
 
   test('icon work', async () => {
     const wrapper = uploadListMount({
-      provide: {
-        [uploadToken as symbol]: {
-          props: {
-            files: [
+      global: {
+        provide: {
+          [uploadToken as symbol]: {
+            files: ref([
               {
                 uid: 'test1',
                 name: 'idux.svg',
                 errorTip: 'error',
                 status: 'error',
               },
-            ],
+            ]),
           },
         },
       },
-    } as MountingOptions<Partial<UploadListProps>>)
+    })
     await flushPromises()
 
     expect(wrapper.find('.ix-icon-paper-clip').exists()).toBeTruthy()
     expect(wrapper.find('.ix-icon-delete').exists()).toBeTruthy()
     expect(wrapper.find('.ix-icon-edit').exists()).toBeTruthy()
-    expect(wrapper.find('.ix-icon-exclamation-circle').exists()).toBeTruthy()
-    expect(wrapper.find('.ix-icon-download').exists()).toBeFalsy()
 
     const wrapperFileSuccess = uploadListMount({
-      provide: {
-        [uploadToken as symbol]: {
-          props: {
-            files: [
+      global: {
+        provide: {
+          [uploadToken as symbol]: {
+            files: ref([
               {
                 uid: 'test1',
                 name: 'idux.svg',
                 status: 'success',
               },
-            ],
+            ]),
           },
         },
       },
       props: {
         icon: {
-          download: true,
+          download: 'download',
           remove: h(IxIcon, { name: 'close' }),
           file: 'left',
         },
@@ -112,16 +128,16 @@ describe('Upload list render', () => {
     ]
 
     const wrapper = uploadListMount({
-      provide: {
-        [uploadToken as symbol]: {
-          props: {
-            files: defaultFiles,
+      global: {
+        provide: {
+          [uploadToken as symbol]: {
+            files: ref(defaultFiles),
           },
         },
       },
       props: {
         icon: {
-          download: true,
+          download: 'download',
         },
         onDownload,
       },
@@ -143,16 +159,16 @@ describe('Upload list render', () => {
     ]
 
     const wrapper = uploadListMount({
-      provide: {
-        [uploadToken as symbol]: {
-          props: {
-            files: defaultFiles,
+      global: {
+        provide: {
+          [uploadToken as symbol]: {
+            files: ref(defaultFiles),
           },
         },
       },
       props: {
         icon: {
-          preview: true,
+          preview: 'zoom-in',
         },
         onPreview,
       },
@@ -180,17 +196,17 @@ describe('Upload list render', () => {
     ]
 
     const wrapper = uploadListMount({
-      provide: {
-        [uploadToken as symbol]: {
-          props: {
-            files: defaultFiles,
+      global: {
+        provide: {
+          [uploadToken as symbol]: {
+            files: ref(defaultFiles),
+            upload,
           },
-          upload,
         },
       },
       props: {
         icon: {
-          retry: true,
+          retry: 'edit',
         },
         onRetry,
       },
@@ -215,13 +231,13 @@ describe('Upload list render', () => {
     ]
 
     const wrapper = uploadListMount({
-      provide: {
-        [uploadToken as symbol]: {
-          props: {
-            files: defaultFiles,
+      global: {
+        provide: {
+          [uploadToken as symbol]: {
+            files: ref(defaultFiles),
+            onUpdateFiles,
+            abort,
           },
-          onUpdateFiles,
-          abort,
         },
       },
       props: {

packages/components/upload/__tests__/upload.spec.ts

@@ -60,6 +60,21 @@ const uploadMount = (options?: MountingOptions<Partial<UploadProps>>) => {
 }
 
 describe('Upload render', () => {
+  let xhrMock: Partial<XMLHttpRequest> = {}
+
+  beforeEach(() => {
+    xhrMock = {
+      abort: jest.fn(),
+      send: jest.fn(),
+      open: jest.fn(),
+      setRequestHeader: jest.fn(),
+      readyState: 4,
+      status: 200,
+      withCredentials: false,
+    }
+    jest.spyOn(window, 'XMLHttpRequest').mockImplementation(() => xhrMock as XMLHttpRequest)
+  })
+
   renderWork<UploadProps>(UploadCpm, { props: { action: '/upload', files: [] } })
 
   test('slots work', async () => {
@@ -190,7 +205,7 @@ describe('Upload render', () => {
     expect(wrapper.findAll('.ix-upload-file').length).toBe(1)
   })
 
-  test('strokeColor work', async () => {
+  test('progress work', async () => {
     const wrapper = uploadMount({
       props: {
         files: [
@@ -207,11 +222,12 @@ describe('Upload render', () => {
 
     expect(wrapper.findComponent(IxProgress).props()).toMatchObject(expect.objectContaining({ strokeColor: '#20CC94' }))
 
-    await wrapper.setProps({ strokeColor: { '0%': '#108ee9', '100%': '#87d068' } })
+    await wrapper.setProps({ progress: { strokeColor: { '0%': '#108ee9', '100%': '#87d068' }, strokeWidth: 3 } })
 
     expect(wrapper.findComponent(IxProgress).props()).toMatchObject(
       expect.objectContaining({
         strokeColor: { '0%': '#108ee9', '100%': '#87d068' },
+        strokeWidth: 3,
       }),
     )
   })

packages/components/upload/demo/Icon.md

@@ -7,18 +7,8 @@ order: 10
 
 ## zh
 
-`IxUploadList`使用`icon`配置对应的图标，每个图标的取值说明如下：
-
-- 配置`true`展示该icon，采用默认图标
-- 配置`false`则不展示该icon
-- 配置`string`使用新的icon
-- 支持配置`VNode`
+`IxUploadList`使用`icon`配置对应的图标，支持 `string` 和 `VNode`
 
 ## en
 
-`IxUploadList` uses `icon` to configure the corresponding icons. The value of each icon is explained as follows:
-
-- Configure `true` to display the icon and use the default icon
-- Configure `false` to not show the icon
-- Configure `string` to use the new icon
-- Support configuration of `VNode`
+`IxUploadList` uses `icon` to configure the corresponding icon, and supports `string` and `VNode`

packages/components/upload/demo/Icon.vue

@@ -14,8 +14,9 @@ import { IxIcon } from '@idux/components/icon'
 
 const files = ref([])
 const icon = ref({
-  file: true,
+  file: 'paper-clip',
   download: 'thunderbolt',
+  retry: h(IxIcon, { name: 'reload' }),
   remove: h(IxIcon, { name: 'close' }),
 })
 </script>

packages/components/upload/demo/Operation.vue

@@ -23,11 +23,11 @@ import { ref } from 'vue'
 import { useMessage } from '@idux/components/message'
 
 const icon = ref({
-  file: true,
-  download: true,
-  retry: true,
-  remove: true,
-  preview: true,
+  file: 'paper-clip',
+  download: 'download',
+  retry: 'edit',
+  remove: 'delete',
+  preview: 'zoom-in',
 })
 const files: Ref<UploadFile[]> = ref([
   {