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-close') .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 ( //