ant-design/components/upload/__tests__/uploadlist.test.js

207 lines
5.8 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { mount } from 'enzyme';
import Upload from '..';
import Form from '../../form';
2017-10-15 17:30:50 +08:00
import { errorRequest, successRequest } from './requests';
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', () => {
const wrapper = mount(
<Upload defaultFileList={fileList} listType="picture">
<button>upload</button>
</Upload>
);
fileList.forEach((file, i) => {
const linkNode = wrapper.find('.ant-upload-list-item-thumbnail').at(i);
const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
expect(linkNode.prop('href')).toBe(file.url);
expect(imgNode.prop('src')).toBe(file.thumbUrl);
});
});
// https://github.com/ant-design/ant-design/issues/7269
it('should remove correct item when uid is 0', async () => {
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 wrapper = mount(
<Upload defaultFileList={list}>
<button>upload</button>
</Upload>
);
expect(wrapper.find('.ant-upload-list-item').length).toBe(2);
wrapper.find('.ant-upload-list-item').at(0).find('.anticon-cross').simulate('click');
await delay(400);
2017-09-20 16:26:18 +08:00
wrapper.update();
expect(wrapper.find('.ant-upload-list-item').hostNodes().length).toBe(1);
});
2017-10-10 15:59:13 +08:00
it('should be uploading when upload a file', (done) => {
let wrapper;
const onChange = ({ file }) => {
if (file.status === 'uploading') {
expect(wrapper.render()).toMatchSnapshot();
}
2017-10-15 17:30:50 +08:00
if (file.status === 'done') {
expect(wrapper.render()).toMatchSnapshot();
done();
}
};
wrapper = mount(
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
onChange={onChange}
customRequest={successRequest}
>
<button>upload</button>
</Upload>
);
wrapper.find('input').simulate('change', {
target: {
files: [
{ filename: 'foo.png' },
],
},
});
});
it('handle error', (done) => {
let wrapper;
const onChange = ({ file }) => {
if (file.status !== 'uploading') {
expect(wrapper.render()).toMatchSnapshot();
done();
}
};
wrapper = mount(
2017-10-15 17:30:50 +08:00
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
onChange={onChange}
customRequest={errorRequest}
>
2017-10-10 15:59:13 +08:00
<button>upload</button>
</Upload>
);
wrapper.find('input').simulate('change', {
target: {
files: [
{ filename: 'foo.png' },
],
},
});
});
it('does not change filelist when beforeUpload returns false', () => {
const handleChange = jest.fn();
const wrapper = mount(
<Upload
listType="picture"
defaultFileList={fileList}
onChange={handleChange}
beforeUpload={() => false}
>
<button>upload</button>
</Upload>
);
wrapper.find('input').simulate('change', {
target: {
files: [
{ filename: 'foo.png' },
],
},
});
expect(wrapper.state().fileList).toBe(fileList);
expect(handleChange.mock.calls[0][0].fileList).toHaveLength(1);
});
// https://github.com/ant-design/ant-design/issues/7762
it('work with form validation', () => {
let errors;
class TestForm extends React.Component {
handleSubmit = () => {
const { validateFields } = this.props.form;
validateFields((err) => {
errors = err;
});
}
render() {
const { getFieldDecorator } = this.props.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);
const wrapper = mount(<App />);
wrapper.find(Form).simulate('submit');
expect(errors.file.errors).toEqual([{ message: 'file required', field: 'file' }]);
wrapper.find('input').simulate('change', {
target: {
files: [
{ filename: 'foo.png' },
],
},
});
wrapper.find(Form).simulate('submit');
expect(errors).toBeNull();
});
});