test: upload uploadList

7 years ago · a7f194dfe5
parent 1673785a80
commit a7f194dfe5
3 changed files with 537 additions and 4 deletions
--- a/components/upload/tests/snapshots/uploadlist.test.js.snap
+++ b/components/upload/tests/snapshots/uploadlist.test.js.snap
@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Upload List handle error 1`] = `
+<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"><div class="ant-upload-list-item ant-upload-list-item-uploading"><div class="ant-upload-list-item-info"><span><i class="anticon anticon-loading anticon-spin"></i><span title="foo.png" class="ant-upload-list-item-name">foo.png</span></span>
+</div>
+<i class="anticon anticon-cross"></i>
+<div class="ant-upload-list-item-progress">
+  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
+    <div>
+      <div class="ant-progress-outer">
+        <div class="ant-progress-inner">
+          <div class="ant-progress-bg" style="width: 0%; height: 2px;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</span>
+</span>
+`;
+
+exports[`Upload List handle error 2`] = `
+<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"><div class="ant-upload-list-item ant-upload-list-item-uploading"><div class="ant-upload-list-item-info"><span><i class="anticon anticon-loading anticon-spin"></i><span title="foo.png" class="ant-upload-list-item-name">foo.png</span></span>
+</div>
+<i class="anticon anticon-cross"></i>
+<div class="ant-upload-list-item-progress">
+  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
+    <div>
+      <div class="ant-progress-outer">
+        <div class="ant-progress-inner">
+          <div class="ant-progress-bg" style="width: 0%; height: 2px;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</span>
+</span>
+`;
+
+exports[`Upload List should be uploading when upload a file 1`] = `<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"></span></span>`;
+
+exports[`Upload List should non-image format file preview 1`] = `
+<span><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><span tag="div" class="ant-upload-list ant-upload-list-picture"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.zip" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"></i></a><a href="https://cdn.xxx.com/aaa.zip" target="_blank" rel="noopener noreferrer" title="not-image" class="ant-upload-list-item-name">not-image</a></span></div>
+<i
+  class="anticon anticon-cross"></i>
+  <!---->
+  </div>
+  <div class="ant-upload-list-item ant-upload-list-item-done">
+    <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"></i></a><a href="https://cdn.xxx.com/aaa" target="_blank" rel="noopener noreferrer" title="image" class="ant-upload-list-item-name">image</a></span></div>
+    <i
+      class="anticon anticon-cross"></i>
+      <!---->
+  </div>
+  <div class="ant-upload-list-item ant-upload-list-item-done">
+    <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.xx" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"></i></a><a href="https://cdn.xxx.com/aaa.xx" target="_blank" rel="noopener noreferrer" title="not-image" class="ant-upload-list-item-name">not-image</a></span></div>
+    <i
+      class="anticon anticon-cross"></i>
+      <!---->
+  </div>
+  <div class="ant-upload-list-item ant-upload-list-item-done">
+    <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.png/xx.xx" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"></i></a><a href="https://cdn.xxx.com/aaa.png/xx.xx" target="_blank" rel="noopener noreferrer" title="not-image" class="ant-upload-list-item-name">not-image</a></span></div>
+    <i
+      class="anticon anticon-cross"></i>
+      <!---->
+  </div>
+  <div class="ant-upload-list-item ant-upload-list-item-done">
+    <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/xx.xx/aaa.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://cdn.xxx.com/xx.xx/aaa.png" alt="image"></a><a href="https://cdn.xxx.com/xx.xx/aaa.png" target="_blank" rel="noopener noreferrer" title="image" class="ant-upload-list-item-name">image</a></span></div>
+    <i
+      class="anticon anticon-cross"></i>
+      <!---->
+  </div>
+  <div class="ant-upload-list-item ant-upload-list-item-done">
+    <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/xx.xx/aaa.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk" alt="image"></a><a href="https://cdn.xxx.com/xx.xx/aaa.png" target="_blank" rel="noopener noreferrer" title="image" class="ant-upload-list-item-name">image</a></span></div>
+    <i
+      class="anticon anticon-cross"></i>
+      <!---->
+  </div>
+  <div class="ant-upload-list-item ant-upload-list-item-done">
+    <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/xx.xx/aaa.png?query=123" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"></i></a><a href="https://cdn.xxx.com/xx.xx/aaa.png?query=123" target="_blank" rel="noopener noreferrer" title="image" class="ant-upload-list-item-name">image</a></span></div>
+    <i
+      class="anticon anticon-cross"></i>
+      <!---->
+  </div>
+  <div class="ant-upload-list-item ant-upload-list-item-done">
+    <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/xx.xx/aaa.png#anchor" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"></i></a><a href="https://cdn.xxx.com/xx.xx/aaa.png#anchor" target="_blank" rel="noopener noreferrer" title="image" class="ant-upload-list-item-name">image</a></span></div>
+    <i
+      class="anticon anticon-cross"></i>
+      <!---->
+  </div>
+  <div class="ant-upload-list-item ant-upload-list-item-done">
+    <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"></i></a><a href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot" target="_blank" rel="noopener noreferrer" title="image" class="ant-upload-list-item-name">image</a></span></div>
+    <i
+      class="anticon anticon-cross"></i>
+      <!---->
+  </div>
+  </span>
+  </span>
+`;
--- a/components/upload/tests/upload.test.js
+++ b/components/upload/tests/upload.test.js
@ -1,10 +1,14 @@
 import { mount } from '@vue/test-utils'
 import Upload from '..'
 import { fileToObject } from '../utils'
+import PropsTypes from '../../_util/vue-types'
+import { UploadListProps } from '../interface'
+
+UploadListProps.items = PropsTypes.any

 describe('Upload', () => {
  it('should get refs inside Upload in componentDidMount', () => {
-    let ref
+    let ref = null
    const APP = {
      mounted () {
        ref = this.$refs.input
@ -25,7 +29,7 @@ describe('Upload', () => {
    const data = jest.fn()
    const props = {
      propsData: {
-        action: 'http://upload.com',
+        action: 'http://jsonplaceholder.typicode.com/posts/',
        beforeUpload: () => new Promise(resolve =>
          setTimeout(() => resolve('success'), 100)
        ),
@ -44,6 +48,7 @@ describe('Upload', () => {
      },
      sync: false,
    }
+    Upload.props
    const wrapper = mount(Upload, props)
    setTimeout(() => {
      const mockFile = new File(['foo'], 'foo.png', {
@ -61,7 +66,7 @@ describe('Upload', () => {
    const data = jest.fn()
    const props = {
      propsData: {
-        action: 'http://upload.com',
+        action: 'http://jsonplaceholder.typicode.com/posts/',
        beforeUpload: () => false,
        data,
      },
@ -134,7 +139,7 @@ describe('Upload', () => {
    const data = jest.fn()
    const props = {
      propsData: {
-        action: 'http://upload.com',
+        action: 'http://jsonplaceholder.typicode.com/posts/',
        beforeUpload () {},
        data,
      },
--- a/components/upload/tests/uploadlist.test.js
+++ b/components/upload/tests/uploadlist.test.js
@ -0,0 +1,427 @@
+import { mount } from '@vue/test-utils'
+import Vue from 'vue'
+import Upload from '..'
+import Form from '../../form'
+import { errorRequest, successRequest } from './requests'
+import PropsTypes from '../../_util/vue-types'
+import { UploadListProps } from '../interface'
+
+UploadListProps.items = PropsTypes.any
+
+const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout))
+const fileList = [{
+  uid: -1,
+  name: 'xxx.png',
+  status: 'done',
+  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+}, {
+  uid: -2,
+  name: 'yyy.png',
+  status: 'done',
+  url: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+  thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+}]
+
+describe('Upload List', () => {
+  // https://github.com/ant-design/ant-design/issues/4653
+  it('should use file.thumbUrl for <img /> in priority', (done) => {
+    const props = {
+      propsData: {
+        defaultFileList: fileList,
+        listType: 'picture',
+        action: '',
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+    Vue.nextTick(() => {
+      fileList.forEach((file, i) => {
+        const linkNode = wrapper.findAll('.ant-upload-list-item-thumbnail').at(i)
+        const imgNode = wrapper.findAll('.ant-upload-list-item-thumbnail img').at(i)
+        expect(linkNode.attributes().href).toBe(file.url)
+        expect(imgNode.attributes().src).toBe(file.thumbUrl)
+      })
+      done()
+    })
+  })
+
+  // https://github.com/ant-design/ant-design/issues/7269
+  it('should remove correct item when uid is 0', (done) => {
+    const list = [{
+      uid: 0,
+      name: 'xxx.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+    }, {
+      uid: 1,
+      name: 'xxx.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+    }]
+    const props = {
+      propsData: {
+        defaultFileList: list,
+        action: '',
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+    setTimeout(async () => {
+      expect(wrapper.findAll('.ant-upload-list-item').length).toBe(2)
+      wrapper.findAll('.ant-upload-list-item').at(0).find('.anticon-cross').trigger('click')
+      await delay(400)
+      // wrapper.update();
+      expect(wrapper.findAll('.ant-upload-list-item').length).toBe(1)
+      done()
+    }, 0)
+  })
+
+  it('should be uploading when upload a file', (done) => {
+    const props = {
+      propsData: {
+        action: 'http://jsonplaceholder.typicode.com/posts/',
+        customRequest: successRequest,
+      },
+      listeners: {
+        change: ({ file }) => {
+          if (file.status === 'uploading') {
+            expect(wrapper.html()).toMatchSnapshot()
+            done()
+          }
+          if (file.status === 'done') {
+            expect(wrapper.html()).toMatchSnapshot()
+            done()
+          }
+        },
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+    setTimeout(() => {
+      const mockFile = new File(['foo'], 'foo.png', {
+        type: 'image/png',
+      })
+      wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
+        target: {
+          files: [mockFile],
+        },
+      })
+    }, 0)
+  })
+
+  it('handle error', (done) => {
+    const props = {
+      propsData: {
+        action: 'http://jsonplaceholder.typicode.com/posts/',
+        customRequest: errorRequest,
+      },
+      listeners: {
+        change: ({ file }) => {
+          if (file.status !== 'uploading') {
+            expect(wrapper.html()).toMatchSnapshot()
+            done()
+          }
+        },
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+    setTimeout(() => {
+      const mockFile = new File(['foo'], 'foo.png', {
+        type: 'image/png',
+      })
+      wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
+        target: {
+          files: [mockFile],
+        },
+      })
+    }, 0)
+  })
+
+  it('does concat filelist when beforeUpload returns false', (done) => {
+    const handleChange = jest.fn()
+    const props = {
+      propsData: {
+        action: 'http://jsonplaceholder.typicode.com/posts/',
+        listType: 'picture',
+        defaultFileList: fileList,
+        beforeUpload: () => false,
+      },
+      listeners: {
+        change: handleChange,
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+
+    setTimeout(() => {
+      const mockFile = new File(['foo'], 'foo.png', {
+        type: 'image/png',
+      })
+      wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
+        target: {
+          files: [mockFile],
+        },
+      })
+      Vue.nextTick(() => {
+        expect(wrapper.vm.sFileList.length).toBe(fileList.length + 1)
+        expect(handleChange.mock.calls[0][0].fileList).toHaveLength(3)
+        done()
+      })
+    }, 0)
+  })
+
+  // https://github.com/ant-design/ant-design/issues/7762
+  // it('work with form validation', (done) => {
+  //   let errors
+  //   const TestForm = {
+  //     methods: {
+  //       handleSubmit () {
+  //         const { validateFields } = this.form
+  //         validateFields((err) => {
+  //           errors = err
+  //         })
+  //       },
+  //     },
+  //     render () {
+  //       const { getFieldDecorator } = this.form
+
+  //       return (
+  //         <Form onSubmit={this.handleSubmit}>
+  //           <Form.Item>
+  //             {getFieldDecorator('file', {
+  //               valuePropname: 'fileList',
+  //               getValueFromEvent: e => e.fileList,
+  //               rules: [
+  //                 {
+  //                   required: true,
+  //                   validator: (rule, value, callback) => {
+  //                     if (!value || value.length === 0) {
+  //                       callback('file required')
+  //                     } else {
+  //                       callback()
+  //                     }
+  //                   },
+  //                 },
+  //               ],
+  //             })(
+  //               <Upload
+  //                 beforeUpload={() => false}
+  //               >
+  //                 <button>upload</button>
+  //               </Upload>
+  //             )}
+  //           </Form.Item>
+  //         </Form>
+  //       )
+  //     },
+  //   }
+
+  //   const App = Form.create()(TestForm)
+  //   console.dir(App)
+  //   const wrapper = mount(() => {
+  //     return <App />
+  //   })
+  //   setTimeout(async () => {
+  //     wrapper.find(Form).trigger('submit')
+  //     expect(errors.file.errors).toEqual([{ message: 'file required', field: 'file' }])
+
+  //     const mockFile = new File(['foo'], 'foo.png', {
+  //       type: 'image/png',
+  //     })
+  //     wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
+  //       target: {
+  //         files: [mockFile],
+  //       },
+  //     })
+  //     wrapper.find(Form).trigger('submit')
+  //     expect(errors).toBeNull()
+  //     done()
+  //   }, 0)
+  // })
+
+  it('should support onPreview', (done) => {
+    const handlePreview = jest.fn()
+    const props = {
+      propsData: {
+        defaultFileList: fileList,
+        listType: 'picture-card',
+        action: '',
+      },
+      listeners: {
+        preview: handlePreview,
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+    setTimeout(async () => {
+      wrapper.findAll('.anticon-eye-o').at(0).trigger('click')
+      expect(handlePreview).toBeCalledWith(fileList[0])
+      wrapper.findAll('.anticon-eye-o').at(1).trigger('click')
+      expect(handlePreview).toBeCalledWith(fileList[1])
+      done()
+    }, 0)
+  })
+
+  it('should support onRemove', (done) => {
+    const handleRemove = jest.fn()
+    const handleChange = jest.fn()
+    const props = {
+      propsData: {
+        defaultFileList: fileList,
+        listType: 'picture-card',
+        action: '',
+      },
+      listeners: {
+        remove: handleRemove,
+        change: handleChange,
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+    jest.setTimeout(300000)
+    setTimeout(async () => {
+      wrapper.findAll('.anticon-delete').at(0).trigger('click')
+      expect(handleRemove).toBeCalledWith(fileList[0])
+      wrapper.findAll('.anticon-delete').at(1).trigger('click')
+      expect(handleRemove).toBeCalledWith(fileList[1])
+      await delay(0)
+      expect(handleChange.mock.calls.length).toBe(2)
+      done()
+    }, 0)
+  })
+
+  it('should generate thumbUrl from file', (done) => {
+    const handlePreview = jest.fn()
+    const newFileList = [...fileList]
+    const newFile = { ...fileList[0], uid: -3, originFileObj: new File([], 'xxx.png') }
+    delete newFile.thumbUrl
+    newFileList.push(newFile)
+    const props = {
+      propsData: {
+        defaultFileList: newFileList,
+        listType: 'picture-card',
+        action: '',
+      },
+      listeners: {
+        preview: handlePreview,
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+    setTimeout(async () => {
+      const newFile = { ...fileList[2], uid: -4, originFileObj: new File([], 'xxx.png') }
+      wrapper.setProps({
+        defaultFileList: newFileList.push(newFile),
+      })
+      await delay(200)
+      expect(wrapper.vm.sFileList[2].thumbUrl).not.toBeFalsy()
+      done()
+    }, 1000)
+  })
+
+  it('should non-image format file preview', (done) => {
+    const list = [
+      {
+        name: 'not-image',
+        status: 'done',
+        uid: -3,
+        url: 'https://cdn.xxx.com/aaa.zip',
+        thumbUrl: 'data:application/zip;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
+        originFileObj: new File([], 'aaa.zip'),
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -4,
+        url: 'https://cdn.xxx.com/aaa',
+      },
+      {
+        name: 'not-image',
+        status: 'done',
+        uid: -5,
+        url: 'https://cdn.xxx.com/aaa.xx',
+      },
+      {
+        name: 'not-image',
+        status: 'done',
+        uid: -6,
+        url: 'https://cdn.xxx.com/aaa.png/xx.xx',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -7,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -8,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png',
+        thumbUrl: 'data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -9,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=123',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -10,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png#anchor',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -11,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot',
+      },
+    ]
+    const props = {
+      propsData: {
+        defaultFileList: list,
+        listType: 'picture',
+        action: '',
+      },
+      slots: {
+        default: '<button>upload</button>',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Upload, props)
+    Vue.nextTick(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    })
+  })
+})