2017-02-22 16:06:08 +08:00
|
|
|
/* eslint-disable react/no-string-refs, react/prefer-es6-class */
|
|
|
|
import React from 'react';
|
2021-04-13 09:49:58 +08:00
|
|
|
import { mount, render } from 'enzyme';
|
2020-08-29 21:28:44 +08:00
|
|
|
import { act } from 'react-dom/test-utils';
|
2021-01-01 21:40:42 +08:00
|
|
|
import produce from 'immer';
|
2021-03-11 19:29:20 +08:00
|
|
|
import { cloneDeep } from 'lodash';
|
2017-02-22 16:06:08 +08:00
|
|
|
import Upload from '..';
|
2019-05-08 20:26:19 +08:00
|
|
|
import Form from '../../form';
|
2021-04-20 09:58:02 +08:00
|
|
|
import { getFileItem, removeFileItem, isImageUrl } from '../utils';
|
2018-05-31 22:37:09 +08:00
|
|
|
import { setup, teardown } from './mock';
|
2020-05-14 15:57:04 +08:00
|
|
|
import { resetWarned } from '../../_util/devWarning';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2020-12-15 17:09:52 +08:00
|
|
|
import { sleep } from '../../../tests/utils';
|
2017-02-22 16:06:08 +08:00
|
|
|
|
|
|
|
describe('Upload', () => {
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Upload);
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Upload);
|
2019-08-26 22:53:20 +08:00
|
|
|
|
2018-05-31 22:37:09 +08:00
|
|
|
beforeEach(() => setup());
|
|
|
|
afterEach(() => teardown());
|
|
|
|
|
2020-09-07 16:41:28 +08:00
|
|
|
// Mock for rc-util raf
|
2020-09-08 11:34:29 +08:00
|
|
|
window.requestAnimationFrame = callback => {
|
2020-09-07 16:41:28 +08:00
|
|
|
window.setTimeout(callback, 16);
|
|
|
|
};
|
2020-09-08 11:34:29 +08:00
|
|
|
window.cancelAnimationFrame = id => {
|
2020-09-07 16:41:28 +08:00
|
|
|
window.clearTimeout(id);
|
|
|
|
};
|
|
|
|
|
2017-02-22 16:06:08 +08:00
|
|
|
// https://github.com/react-component/upload/issues/36
|
|
|
|
it('should get refs inside Upload in componentDidMount', () => {
|
|
|
|
let ref;
|
2017-04-30 18:47:15 +08:00
|
|
|
class App extends React.Component {
|
2017-02-22 16:06:08 +08:00
|
|
|
componentDidMount() {
|
|
|
|
ref = this.refs.input;
|
2017-04-27 21:12:23 +08:00
|
|
|
}
|
2018-06-22 21:05:13 +08:00
|
|
|
|
2017-02-22 16:06:08 +08:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<Upload supportServerRender={false}>
|
|
|
|
<input ref="input" />
|
|
|
|
</Upload>
|
|
|
|
);
|
2017-04-27 21:12:23 +08:00
|
|
|
}
|
|
|
|
}
|
2017-02-22 16:06:08 +08:00
|
|
|
mount(<App />);
|
|
|
|
expect(ref).toBeDefined();
|
|
|
|
});
|
2017-10-10 14:45:18 +08:00
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
it('return promise in beforeUpload', done => {
|
2017-10-10 14:45:18 +08:00
|
|
|
const data = jest.fn();
|
|
|
|
const props = {
|
|
|
|
action: 'http://upload.com',
|
2021-11-26 12:18:21 +08:00
|
|
|
beforeUpload: () => new Promise(resolve => { setTimeout(() => resolve('success'), 100); }),
|
2017-10-10 14:45:18 +08:00
|
|
|
data,
|
|
|
|
onChange: ({ file }) => {
|
|
|
|
if (file.status !== 'uploading') {
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(data).toHaveBeenCalled();
|
2017-10-10 14:45:18 +08:00
|
|
|
done();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload {...props}>
|
2018-06-22 21:05:13 +08:00
|
|
|
<button type="button">upload</button>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Upload>,
|
2017-10-10 14:45:18 +08:00
|
|
|
);
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
2018-12-10 00:16:51 +08:00
|
|
|
files: [{ file: 'foo.png' }],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-09-29 12:33:24 +08:00
|
|
|
it('beforeUpload can be falsy', done => {
|
|
|
|
const props = {
|
|
|
|
action: 'http://upload.com',
|
|
|
|
beforeUpload: false,
|
|
|
|
onChange: ({ file }) => {
|
|
|
|
if (file.status !== 'uploading') {
|
|
|
|
done();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload {...props}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('input').simulate('change', {
|
2017-10-10 14:45:18 +08:00
|
|
|
target: {
|
2018-12-10 00:16:51 +08:00
|
|
|
files: [{ file: 'foo.png' }],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('upload promise return file in beforeUpload', done => {
|
|
|
|
const data = jest.fn();
|
|
|
|
const props = {
|
|
|
|
action: 'http://upload.com',
|
|
|
|
beforeUpload: file =>
|
2021-11-26 12:18:21 +08:00
|
|
|
new Promise(resolve => {
|
2018-12-10 00:16:51 +08:00
|
|
|
setTimeout(() => {
|
|
|
|
const result = file;
|
|
|
|
result.name = 'test.png';
|
|
|
|
resolve(result);
|
2021-11-26 12:18:21 +08:00
|
|
|
}, 100);
|
|
|
|
}),
|
2018-12-10 00:16:51 +08:00
|
|
|
data,
|
|
|
|
onChange: ({ file }) => {
|
|
|
|
if (file.status !== 'uploading') {
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(data).toHaveBeenCalled();
|
2018-12-10 00:16:51 +08:00
|
|
|
expect(file.name).toEqual('test.png');
|
|
|
|
done();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload {...props}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
2018-12-07 16:17:45 +08:00
|
|
|
files: [{ file: 'foo.png' }],
|
2017-10-10 14:45:18 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
2017-10-12 14:48:35 +08:00
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
it('should not stop upload when return value of beforeUpload is false', done => {
|
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: 'bar',
|
|
|
|
name: 'bar.png',
|
|
|
|
},
|
|
|
|
];
|
2018-04-28 11:06:32 +08:00
|
|
|
const mockFile = new File(['foo'], 'foo.png', {
|
|
|
|
type: 'image/png',
|
|
|
|
});
|
2017-10-12 14:48:35 +08:00
|
|
|
const data = jest.fn();
|
|
|
|
const props = {
|
|
|
|
action: 'http://upload.com',
|
2018-06-06 12:13:06 +08:00
|
|
|
fileList,
|
2017-10-12 14:48:35 +08:00
|
|
|
beforeUpload: () => false,
|
|
|
|
data,
|
2018-06-06 12:13:06 +08:00
|
|
|
onChange: ({ file, fileList: updatedFileList }) => {
|
2018-04-28 11:06:32 +08:00
|
|
|
expect(file instanceof File).toBe(true);
|
2018-06-06 12:13:06 +08:00
|
|
|
expect(updatedFileList.map(f => f.name)).toEqual(['bar.png', 'foo.png']);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(data).not.toHaveBeenCalled();
|
2017-10-12 14:48:35 +08:00
|
|
|
done();
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload {...props}>
|
2018-06-22 21:05:13 +08:00
|
|
|
<button type="button">upload</button>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Upload>,
|
2017-10-12 14:48:35 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
2018-12-07 16:17:45 +08:00
|
|
|
files: [mockFile],
|
2017-10-12 14:48:35 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
it('should not stop upload when return value of beforeUpload is not false', done => {
|
2017-10-12 14:48:35 +08:00
|
|
|
const data = jest.fn();
|
|
|
|
const props = {
|
|
|
|
action: 'http://upload.com',
|
|
|
|
beforeUpload() {},
|
|
|
|
data,
|
|
|
|
onChange: () => {
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(data).toHaveBeenCalled();
|
2017-10-12 14:48:35 +08:00
|
|
|
done();
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload {...props}>
|
2018-06-22 21:05:13 +08:00
|
|
|
<button type="button">upload</button>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Upload>,
|
2017-10-12 14:48:35 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
2018-12-07 16:17:45 +08:00
|
|
|
files: [{ file: 'foo.png' }],
|
2017-10-12 14:48:35 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
2018-05-02 13:56:54 +08:00
|
|
|
|
2019-02-11 20:29:43 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/14779
|
|
|
|
it('should contain input file control if upload button is hidden', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload action="http://upload.com">
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper.find('input[type="file"]').length).toBe(1);
|
|
|
|
wrapper.setProps({ children: null });
|
|
|
|
expect(wrapper.find('input[type="file"]').length).toBe(1);
|
|
|
|
});
|
|
|
|
|
2019-05-08 20:26:19 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/14298
|
|
|
|
it('should not have id if upload children is null, avoid being triggered by label', () => {
|
2019-07-03 20:14:39 +08:00
|
|
|
const Demo = ({ children }) => (
|
|
|
|
<Form>
|
2019-08-29 23:41:46 +08:00
|
|
|
<Form.Item name="upload" label="Upload" valuePropName="fileList">
|
2019-07-03 20:14:39 +08:00
|
|
|
<Upload>{children}</Upload>
|
|
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
|
2019-05-08 20:26:19 +08:00
|
|
|
const wrapper = mount(
|
2019-07-03 20:14:39 +08:00
|
|
|
<Demo>
|
2019-05-08 20:26:19 +08:00
|
|
|
<div>upload</div>
|
2019-07-03 20:14:39 +08:00
|
|
|
</Demo>,
|
2019-05-08 20:26:19 +08:00
|
|
|
);
|
2019-07-03 20:14:39 +08:00
|
|
|
|
2019-05-08 20:26:19 +08:00
|
|
|
expect(wrapper.find('input#upload').length).toBe(1);
|
|
|
|
wrapper.setProps({ children: null });
|
|
|
|
expect(wrapper.find('input#upload').length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/16478
|
2020-05-16 14:25:49 +08:00
|
|
|
it('should not have id if Upload is disabled, avoid being triggered by label', () => {
|
2019-07-03 20:14:39 +08:00
|
|
|
const Demo = ({ disabled }) => (
|
|
|
|
<Form>
|
2019-08-29 23:41:46 +08:00
|
|
|
<Form.Item name="upload" label="Upload" valuePropName="fileList">
|
2019-07-03 20:14:39 +08:00
|
|
|
<Upload disabled={disabled}>
|
|
|
|
<div>upload</div>
|
|
|
|
</Upload>
|
|
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
|
|
|
|
const wrapper = mount(<Demo />);
|
2019-05-08 20:26:19 +08:00
|
|
|
expect(wrapper.find('input#upload').length).toBe(1);
|
|
|
|
wrapper.setProps({ disabled: true });
|
|
|
|
expect(wrapper.find('input#upload').length).toBe(0);
|
|
|
|
});
|
|
|
|
|
2020-05-16 14:25:49 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/24197
|
|
|
|
it('should not have id if upload.Dragger is disabled, avoid being triggered by label', () => {
|
|
|
|
const Demo = ({ disabled }) => (
|
|
|
|
<Form>
|
|
|
|
<Form.Item name="upload" label="Upload" valuePropName="fileList">
|
|
|
|
<Upload.Dragger disabled={disabled}>
|
|
|
|
<div>upload</div>
|
|
|
|
</Upload.Dragger>
|
|
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
|
|
|
|
const wrapper = mount(<Demo />);
|
|
|
|
expect(wrapper.find('input#upload').length).toBe(1);
|
|
|
|
wrapper.setProps({ disabled: true });
|
|
|
|
expect(wrapper.find('input#upload').length).toBe(0);
|
|
|
|
});
|
|
|
|
|
2018-08-10 17:04:40 +08:00
|
|
|
it('should be controlled by fileList', () => {
|
2020-09-07 16:41:28 +08:00
|
|
|
jest.useFakeTimers();
|
2018-12-07 16:17:45 +08:00
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'foo.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'http://www.baidu.com/xxx.png',
|
|
|
|
},
|
|
|
|
];
|
2020-08-18 15:44:31 +08:00
|
|
|
const ref = React.createRef();
|
|
|
|
const wrapper = mount(<Upload ref={ref} />);
|
|
|
|
expect(ref.current.fileList).toEqual([]);
|
2020-09-07 16:41:28 +08:00
|
|
|
|
2018-08-10 17:04:40 +08:00
|
|
|
wrapper.setProps({ fileList });
|
2020-09-07 16:41:28 +08:00
|
|
|
jest.runAllTimers();
|
2020-08-18 15:44:31 +08:00
|
|
|
expect(ref.current.fileList).toEqual(fileList);
|
2020-09-07 16:41:28 +08:00
|
|
|
jest.useRealTimers();
|
2018-08-10 17:04:40 +08:00
|
|
|
});
|
|
|
|
|
2021-04-13 09:49:58 +08:00
|
|
|
it('should be able to get uid at first', () => {
|
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
name: 'foo.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'http://www.baidu.com/xxx.png',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
render(<Upload fileList={fileList} />);
|
|
|
|
fileList.forEach(file => {
|
|
|
|
expect(file.uid).toBeDefined();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-05-02 13:56:54 +08:00
|
|
|
describe('util', () => {
|
2018-12-01 18:30:05 +08:00
|
|
|
it('should be able to get fileItem', () => {
|
|
|
|
const file = { uid: '-1', name: 'item.jpg' };
|
2018-12-07 16:17:45 +08:00
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'item.jpg',
|
|
|
|
},
|
|
|
|
];
|
2018-12-01 18:30:05 +08:00
|
|
|
const targetItem = getFileItem(file, fileList);
|
|
|
|
expect(targetItem).toBe(fileList[0]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should be able to remove fileItem', () => {
|
|
|
|
const file = { uid: '-1', name: 'item.jpg' };
|
2018-12-07 16:17:45 +08:00
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'item.jpg',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
uid: '-2',
|
|
|
|
name: 'item2.jpg',
|
|
|
|
},
|
|
|
|
];
|
2018-12-01 18:30:05 +08:00
|
|
|
const targetItem = removeFileItem(file, fileList);
|
|
|
|
expect(targetItem).toEqual(fileList.slice(1));
|
|
|
|
});
|
|
|
|
|
2021-03-13 23:46:32 +08:00
|
|
|
it('remove fileItem and fileList with immutable data', () => {
|
2021-01-01 21:40:42 +08:00
|
|
|
const file = { uid: '-3', name: 'item3.jpg' };
|
|
|
|
const fileList = produce(
|
|
|
|
[
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'item.jpg',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
uid: '-2',
|
|
|
|
name: 'item2.jpg',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
draftState => {
|
|
|
|
draftState.push({
|
|
|
|
uid: '-3',
|
|
|
|
name: 'item3.jpg',
|
|
|
|
});
|
|
|
|
},
|
|
|
|
);
|
|
|
|
const targetItem = removeFileItem(file, fileList);
|
|
|
|
expect(targetItem).toEqual(fileList.slice(0, 2));
|
|
|
|
});
|
2021-01-16 18:06:26 +08:00
|
|
|
|
2018-12-01 18:30:05 +08:00
|
|
|
it('should not be able to remove fileItem', () => {
|
|
|
|
const file = { uid: '-3', name: 'item.jpg' };
|
2018-12-07 16:17:45 +08:00
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'item.jpg',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
uid: '-2',
|
|
|
|
name: 'item2.jpg',
|
|
|
|
},
|
|
|
|
];
|
2018-12-01 18:30:05 +08:00
|
|
|
const targetItem = removeFileItem(file, fileList);
|
|
|
|
expect(targetItem).toBe(null);
|
|
|
|
});
|
2021-04-20 09:58:02 +08:00
|
|
|
|
|
|
|
it('isImageUrl should work correctly when file.url is null', () => {
|
|
|
|
const file = {
|
|
|
|
url: null,
|
|
|
|
};
|
|
|
|
expect(isImageUrl(file)).toBe(true);
|
|
|
|
});
|
2018-05-02 13:56:54 +08:00
|
|
|
});
|
2018-09-14 11:43:02 +08:00
|
|
|
|
|
|
|
it('should support linkProps as object', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'foo.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'http://www.baidu.com/xxx.png',
|
|
|
|
linkProps: {
|
|
|
|
download: 'image',
|
|
|
|
rel: 'noopener',
|
|
|
|
},
|
2018-09-14 11:43:02 +08:00
|
|
|
},
|
2018-12-07 16:17:45 +08:00
|
|
|
];
|
|
|
|
const wrapper = mount(<Upload fileList={fileList} />);
|
2018-09-14 11:43:02 +08:00
|
|
|
const linkNode = wrapper.find('a.ant-upload-list-item-name');
|
|
|
|
expect(linkNode.props().download).toBe('image');
|
|
|
|
expect(linkNode.props().rel).toBe('noopener');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should support linkProps as json stringify', () => {
|
|
|
|
const linkPropsString = JSON.stringify({
|
|
|
|
download: 'image',
|
|
|
|
rel: 'noopener',
|
|
|
|
});
|
2018-12-07 16:17:45 +08:00
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'foo.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'http://www.baidu.com/xxx.png',
|
|
|
|
linkProps: linkPropsString,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const wrapper = mount(<Upload fileList={fileList} />);
|
2018-09-14 11:43:02 +08:00
|
|
|
const linkNode = wrapper.find('a.ant-upload-list-item-name');
|
|
|
|
expect(linkNode.props().download).toBe('image');
|
|
|
|
expect(linkNode.props().rel).toBe('noopener');
|
|
|
|
});
|
2019-01-12 18:08:10 +08:00
|
|
|
|
2019-01-13 13:37:20 +08:00
|
|
|
it('should not stop remove when return value of onRemove is false', done => {
|
2019-01-12 18:08:10 +08:00
|
|
|
const mockRemove = jest.fn(() => false);
|
|
|
|
const props = {
|
|
|
|
onRemove: mockRemove,
|
|
|
|
fileList: [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'foo.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'http://www.baidu.com/xxx.png',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(<Upload {...props} />);
|
|
|
|
|
2019-10-16 10:44:56 +08:00
|
|
|
wrapper.find('div.ant-upload-list-item .anticon-delete').simulate('click');
|
2019-01-12 18:08:10 +08:00
|
|
|
|
2021-06-01 10:11:24 +08:00
|
|
|
setTimeout(() => {
|
2019-01-13 13:37:20 +08:00
|
|
|
wrapper.update();
|
2019-01-12 18:08:10 +08:00
|
|
|
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(mockRemove).toHaveBeenCalled();
|
2019-01-13 13:37:20 +08:00
|
|
|
expect(props.fileList).toHaveLength(1);
|
|
|
|
expect(props.fileList[0].status).toBe('done');
|
|
|
|
done();
|
|
|
|
});
|
2019-01-12 18:08:10 +08:00
|
|
|
});
|
2019-02-27 18:37:44 +08:00
|
|
|
|
2019-09-23 10:16:09 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/18902
|
|
|
|
it('should not abort uploading until return value of onRemove is resolved as true', done => {
|
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
const props = {
|
2021-03-13 23:46:32 +08:00
|
|
|
onRemove: async () => {
|
|
|
|
await act(async () => {
|
|
|
|
await sleep(100);
|
|
|
|
wrapper.update();
|
|
|
|
expect(props.fileList).toHaveLength(1);
|
|
|
|
expect(props.fileList[0].status).toBe('uploading');
|
|
|
|
});
|
|
|
|
|
|
|
|
return true;
|
|
|
|
},
|
2019-09-23 10:16:09 +08:00
|
|
|
fileList: [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'foo.png',
|
|
|
|
status: 'uploading',
|
|
|
|
url: 'http://www.baidu.com/xxx.png',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
onChange: () => {
|
|
|
|
expect(props.fileList).toHaveLength(1);
|
|
|
|
expect(props.fileList[0].status).toBe('removed');
|
|
|
|
done();
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
wrapper = mount(<Upload {...props} />);
|
|
|
|
|
2019-10-16 10:44:56 +08:00
|
|
|
wrapper.find('div.ant-upload-list-item .anticon-delete').simulate('click');
|
2019-09-23 10:16:09 +08:00
|
|
|
});
|
|
|
|
|
2019-09-11 21:46:56 +08:00
|
|
|
it('should not stop download when return use onDownload', done => {
|
|
|
|
const mockRemove = jest.fn(() => false);
|
|
|
|
const props = {
|
|
|
|
onRemove: mockRemove,
|
2020-02-20 22:47:14 +08:00
|
|
|
showUploadList: {
|
|
|
|
showDownloadIcon: true,
|
|
|
|
},
|
2019-09-11 21:46:56 +08:00
|
|
|
fileList: [
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'foo.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'http://www.baidu.com/xxx.png',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(<Upload {...props} onDownload={() => {}} />);
|
|
|
|
|
2019-10-16 10:44:56 +08:00
|
|
|
wrapper.find('div.ant-upload-list-item .anticon-download').simulate('click');
|
2019-09-11 21:46:56 +08:00
|
|
|
|
2021-06-01 10:11:24 +08:00
|
|
|
setTimeout(() => {
|
2019-09-11 21:46:56 +08:00
|
|
|
wrapper.update();
|
|
|
|
|
|
|
|
expect(props.fileList).toHaveLength(1);
|
|
|
|
expect(props.fileList[0].status).toBe('done');
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-02-27 18:37:44 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/14439
|
|
|
|
it('should allow call abort function through upload instance', () => {
|
2020-08-18 15:44:31 +08:00
|
|
|
const ref = React.createRef();
|
|
|
|
mount(
|
|
|
|
<Upload ref={ref}>
|
2019-02-27 18:37:44 +08:00
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
2020-08-18 15:44:31 +08:00
|
|
|
expect(typeof ref.current.upload.abort).toBe('function');
|
2019-03-09 13:36:16 +08:00
|
|
|
});
|
|
|
|
|
2019-08-04 12:18:46 +08:00
|
|
|
it('correct dragCls when type is drag', () => {
|
2019-03-09 13:36:16 +08:00
|
|
|
const fileList = [{ status: 'uploading', uid: 'file' }];
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload type="drag" fileList={fileList}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-upload-drag-uploading').length).toBe(1);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('return when targetItem is null', () => {
|
|
|
|
const fileList = [{ uid: 'file' }];
|
2020-08-18 15:44:31 +08:00
|
|
|
const ref = React.createRef();
|
|
|
|
mount(
|
|
|
|
<Upload ref={ref} type="drag" fileList={fileList}>
|
2019-03-09 13:36:16 +08:00
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
2020-08-18 15:44:31 +08:00
|
|
|
);
|
|
|
|
expect(ref.current.onSuccess('', { uid: 'fileItem' })).toBe(undefined);
|
|
|
|
expect(ref.current.onProgress('', { uid: 'fileItem' })).toBe(undefined);
|
|
|
|
expect(ref.current.onError('', '', { uid: 'fileItem' })).toBe(undefined);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should replace file when targetItem already exists', () => {
|
|
|
|
const fileList = [{ uid: 'file', name: 'file' }];
|
|
|
|
const ref = React.createRef();
|
2021-03-13 23:46:32 +08:00
|
|
|
const wrapper = mount(
|
2020-08-18 15:44:31 +08:00
|
|
|
<Upload ref={ref} defaultFileList={fileList}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
2021-03-13 23:46:32 +08:00
|
|
|
|
|
|
|
const newFile = {
|
2020-08-18 15:44:31 +08:00
|
|
|
uid: 'file',
|
|
|
|
name: 'file1',
|
2021-03-13 23:46:32 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
act(() => {
|
|
|
|
ref.current.onBatchStart([
|
|
|
|
{
|
|
|
|
file: newFile,
|
|
|
|
parsedFile: newFile,
|
|
|
|
},
|
|
|
|
]);
|
2020-08-18 15:44:31 +08:00
|
|
|
});
|
2021-03-13 23:46:32 +08:00
|
|
|
|
|
|
|
wrapper.update();
|
|
|
|
|
2020-08-18 15:44:31 +08:00
|
|
|
expect(ref.current.fileList.length).toBe(1);
|
|
|
|
expect(ref.current.fileList[0].originFileObj).toEqual({
|
|
|
|
name: 'file1',
|
|
|
|
uid: 'file',
|
|
|
|
});
|
2021-03-13 23:46:32 +08:00
|
|
|
|
|
|
|
wrapper.unmount();
|
2019-03-09 13:36:16 +08:00
|
|
|
});
|
2019-08-27 18:29:20 +08:00
|
|
|
|
|
|
|
it('warning if set `value`', () => {
|
|
|
|
resetWarned();
|
|
|
|
|
|
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
|
|
mount(<Upload value={[]} />);
|
|
|
|
expect(errorSpy).toHaveBeenCalledWith(
|
2020-04-14 16:48:23 +08:00
|
|
|
'Warning: [antd: Upload] `value` is not a valid prop, do you mean `fileList`?',
|
2019-08-27 18:29:20 +08:00
|
|
|
);
|
|
|
|
errorSpy.mockRestore();
|
|
|
|
});
|
2020-02-19 20:12:44 +08:00
|
|
|
|
2020-09-15 11:54:47 +08:00
|
|
|
it('should be treated as file but not an image', () => {
|
2020-02-27 10:53:30 +08:00
|
|
|
const file = {
|
|
|
|
status: 'done',
|
|
|
|
uid: '-1',
|
|
|
|
type: 'video/mp4',
|
|
|
|
url: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
|
|
|
|
};
|
|
|
|
const wrapper = mount(<Upload listType="picture-card" fileList={[file]} />);
|
2020-02-19 20:12:44 +08:00
|
|
|
expect(wrapper.find('img').length).toBe(0);
|
|
|
|
});
|
2020-06-19 10:59:21 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/25077
|
|
|
|
it('should support events', () => {
|
|
|
|
const onClick = jest.fn();
|
|
|
|
const onMouseEnter = jest.fn();
|
|
|
|
const onMouseLeave = jest.fn();
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
wrapper.find('.ant-upload').at(1).simulate('click');
|
|
|
|
expect(onClick).toHaveBeenCalled();
|
|
|
|
wrapper.find('.ant-upload').at(1).simulate('mouseEnter');
|
|
|
|
expect(onMouseEnter).toHaveBeenCalled();
|
|
|
|
wrapper.find('.ant-upload').at(1).simulate('mouseLeave');
|
|
|
|
expect(onMouseLeave).toHaveBeenCalled();
|
|
|
|
});
|
2020-08-29 21:28:44 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/26427
|
|
|
|
it('should sync file list with control mode', done => {
|
|
|
|
let callTimes = 0;
|
|
|
|
|
|
|
|
const customRequest = jest.fn(async options => {
|
|
|
|
options.onProgress({ percent: 0 });
|
|
|
|
const url = Promise.resolve('https://ant.design');
|
|
|
|
options.onProgress({ percent: 100 });
|
|
|
|
options.onSuccess({}, { ...options.file, url });
|
|
|
|
});
|
|
|
|
|
|
|
|
const Demo = () => {
|
|
|
|
const [fileList, setFileList] = React.useState([]);
|
|
|
|
|
|
|
|
const onChange = e => {
|
|
|
|
const newFileList = Array.isArray(e) ? e : e.fileList;
|
|
|
|
setFileList(newFileList);
|
|
|
|
const file = newFileList[0];
|
|
|
|
|
|
|
|
callTimes += 1;
|
|
|
|
|
|
|
|
switch (callTimes) {
|
|
|
|
case 1:
|
|
|
|
case 2:
|
|
|
|
expect(file).toEqual(expect.objectContaining({ status: 'uploading', percent: 0 }));
|
|
|
|
break;
|
|
|
|
|
2021-03-13 23:46:32 +08:00
|
|
|
case 3:
|
2020-08-29 21:28:44 +08:00
|
|
|
expect(file).toEqual(expect.objectContaining({ status: 'uploading', percent: 100 }));
|
|
|
|
break;
|
|
|
|
|
2021-03-13 23:46:32 +08:00
|
|
|
case 4:
|
2020-08-29 21:28:44 +08:00
|
|
|
expect(file).toEqual(expect.objectContaining({ status: 'done', percent: 100 }));
|
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
|
|
|
// Do nothing
|
|
|
|
}
|
|
|
|
|
|
|
|
if (callTimes >= 4) {
|
|
|
|
done();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Upload customRequest={customRequest} onChange={onChange} fileList={fileList}>
|
|
|
|
<button type="button">Upload</button>
|
|
|
|
</Upload>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(<Demo />);
|
|
|
|
|
|
|
|
act(() => {
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
|
|
|
files: [{ file: 'foo.png' }],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2020-12-15 17:09:52 +08:00
|
|
|
|
|
|
|
describe('maxCount', () => {
|
|
|
|
it('replace when only 1', async () => {
|
|
|
|
const onChange = jest.fn();
|
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: 'bar',
|
|
|
|
name: 'bar.png',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const props = {
|
|
|
|
action: 'http://upload.com',
|
|
|
|
fileList,
|
|
|
|
onChange,
|
|
|
|
maxCount: 1,
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload {...props}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
|
|
|
files: [
|
|
|
|
new File(['foo'], 'foo.png', {
|
|
|
|
type: 'image/png',
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
await sleep(20);
|
|
|
|
|
|
|
|
expect(onChange.mock.calls[0][0].fileList).toHaveLength(1);
|
|
|
|
expect(onChange.mock.calls[0][0].fileList[0]).toEqual(
|
|
|
|
expect.objectContaining({
|
|
|
|
name: 'foo.png',
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('maxCount > 1', async () => {
|
|
|
|
const onChange = jest.fn();
|
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
uid: 'bar',
|
|
|
|
name: 'bar.png',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const props = {
|
|
|
|
action: 'http://upload.com',
|
|
|
|
fileList,
|
|
|
|
onChange,
|
|
|
|
maxCount: 2,
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload {...props}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
|
|
|
files: [
|
|
|
|
new File(['foo'], 'foo.png', {
|
|
|
|
type: 'image/png',
|
|
|
|
}),
|
|
|
|
new File(['invisible'], 'invisible.png', {
|
|
|
|
type: 'image/png',
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
await sleep(20);
|
|
|
|
|
|
|
|
expect(onChange.mock.calls[0][0].fileList).toHaveLength(2);
|
|
|
|
expect(onChange.mock.calls[0][0].fileList).toEqual([
|
|
|
|
expect.objectContaining({
|
|
|
|
name: 'bar.png',
|
|
|
|
}),
|
|
|
|
expect.objectContaining({
|
|
|
|
name: 'foo.png',
|
|
|
|
}),
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
});
|
2021-01-13 14:31:49 +08:00
|
|
|
|
|
|
|
it('auto fill file uid', () => {
|
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
name: 'bamboo.png',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
expect(fileList[0].uid).toBeFalsy();
|
|
|
|
|
|
|
|
mount(
|
|
|
|
<Upload fileList={fileList}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(fileList[0].uid).toBeTruthy();
|
|
|
|
});
|
2021-03-11 19:29:20 +08:00
|
|
|
|
|
|
|
it('Proxy should support deepClone', async () => {
|
|
|
|
const onChange = jest.fn();
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Upload onChange={onChange}>
|
|
|
|
<button type="button">upload</button>
|
|
|
|
</Upload>,
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
|
|
|
files: [
|
|
|
|
new File(['foo'], 'foo.png', {
|
|
|
|
type: 'image/png',
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
await sleep();
|
|
|
|
|
|
|
|
const { file } = onChange.mock.calls[0][0];
|
|
|
|
const clone = cloneDeep(file);
|
|
|
|
|
|
|
|
expect(Object.getOwnPropertyDescriptor(file, 'name')).toEqual(
|
|
|
|
expect.objectContaining({ value: 'foo.png' }),
|
|
|
|
);
|
|
|
|
|
|
|
|
['uid', 'name', 'lastModified', 'lastModifiedDate', 'size', 'type'].forEach(key => {
|
|
|
|
expect(key in clone).toBeTruthy();
|
|
|
|
});
|
|
|
|
});
|
2021-03-30 11:59:30 +08:00
|
|
|
|
|
|
|
it('not break on freeze object', async () => {
|
|
|
|
const fileList = [
|
|
|
|
{
|
|
|
|
fileName: 'Test.png',
|
|
|
|
name: 'SupportIS App - potwierdzenie.png',
|
|
|
|
thumbUrl: null,
|
|
|
|
downloadUrl: 'https://localhost:5001/api/files/ff2917ce-e4b9-4542-84da-31cdbe7c273f',
|
|
|
|
status: 'done',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const frozenFileList = fileList.map(file => Object.freeze(file));
|
|
|
|
|
|
|
|
const wrapper = mount(<Upload fileList={frozenFileList} />);
|
|
|
|
const rmBtn = wrapper.find('.ant-upload-list-item-card-actions-btn').last();
|
|
|
|
rmBtn.simulate('click');
|
|
|
|
|
|
|
|
// Wait for Upload async remove
|
|
|
|
await act(async () => {
|
|
|
|
await sleep();
|
|
|
|
});
|
|
|
|
});
|
2021-05-08 18:14:57 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/30390
|
|
|
|
// IE11 Does not support the File constructor
|
|
|
|
it('should not break in IE if beforeUpload returns false', async () => {
|
|
|
|
const onChange = jest.fn();
|
|
|
|
const wrapper = mount(<Upload beforeUpload={() => false} fileList={[]} onChange={onChange} />);
|
|
|
|
const fileConstructor = () => {
|
|
|
|
throw new TypeError("Object doesn't support this action");
|
|
|
|
};
|
|
|
|
global.File = jest.fn().mockImplementationOnce(fileConstructor);
|
|
|
|
|
|
|
|
await act(async () =>
|
|
|
|
wrapper.find('input').simulate('change', {
|
|
|
|
target: {
|
|
|
|
files: [{ file: 'foo.png' }],
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(onChange.mock.calls[0][0].fileList).toHaveLength(1);
|
|
|
|
});
|
2017-02-22 16:06:08 +08:00
|
|
|
});
|