import { mount } from '@vue/test-utils' import Vue from 'vue' import Upload from '..' 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 in priority', (done) => { const props = { propsData: { defaultFileList: fileList, listType: 'picture', action: '', }, slots: { default: '', }, 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: '', }, 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: '', }, 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: '', }, 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: '', }, 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 ( //