test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

fix: Upload listType="picture-card" select button when children is empty (#36196)

Browse Source 
* fix: Upload listType="picture-card" select button should be hidden when children is empty

close #36183

* test: fix test case
This commit is contained in:
afc163 2022-06-23 16:45:24 +08:00 committed by GitHub
parent 2971e3b081
commit 7357f55d52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/upload/Upload.tsx
View File

@ -406,17 +406,19 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
</div>
);
const uploadButton = renderUploadButton(children ? undefined : { display: 'none' });
if (listType === 'picture-card') {
return (
<span className={classNames(`${prefixCls}-picture-card-wrapper`, className)}>
{renderUploadList(renderUploadButton(), !!children)}
{renderUploadList(uploadButton, !!children)}
</span>
);
}
return (
<span className={className}>
{renderUploadButton(children ? undefined : { display: 'none' })}
{uploadButton}
{renderUploadList()}
</span>
);

14
components/upload/__tests__/upload.test.js
View File

@ -937,8 +937,11 @@ describe('Upload', () => {
);
rerender(<Upload listType="picture-card" />);
expect(container.querySelector('.ant-upload-select-picture-card')).not.toHaveStyle({
display: 'none',
expect(container.querySelector('.ant-upload-select-picture-card')).toHaveClass(
'ant-upload-animate-inline-leave-start',
);
expect(container.querySelector('.ant-upload-select-picture-card')).toHaveStyle({
pointerEvents: 'none',
});
// Motion leave status change: start > active
@ -947,10 +950,9 @@ describe('Upload', () => {
});
fireEvent.animationEnd(container.querySelector('.ant-upload-select-picture-card'));
expect(container.querySelector('.ant-upload-select-picture-card')).toHaveStyle({
display: 'none',
});
expect(container.querySelector('.ant-upload-select-picture-card')).not.toHaveClass(
'ant-upload-animate-inline-leave-start',
);
jest.useRealTimers();
});

39
components/upload/__tests__/uploadlist.test.js
View File

@ -1499,4 +1499,43 @@ describe('Upload List', () => {
});
unmount();
});
describe('should not display upload file-select button when listType is picture-card and children is empty', () => {
it('when showUploadList is true', () => {
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',
},
];
const { container: wrapper, unmount } = render(
<Upload fileList={list} listType="picture-card" />,
);
expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
expect(wrapper.querySelectorAll('.ant-upload-select')[0].style.display).toBe('none');
unmount();
});
// https://github.com/ant-design/ant-design/issues/36183
it('when showUploadList is false', () => {
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',
},
];
const { container: wrapper, unmount } = render(
<Upload fileList={list} showUploadList={false} listType="picture-card" />,
);
expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
expect(wrapper.querySelectorAll('.ant-upload-select')[0].style.display).toBe('none');
unmount();
});
});
});