mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-12 23:35:38 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

chore: auto merge branchs (#35859)

Browse Source 
chore: Next merge master
This commit is contained in:
github-actions[bot] 2022-06-01 11:34:36 +00:00 committed by GitHub
commit 175b67a368
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 837 additions and 932 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.en-US.md
View File

@ -15,6 +15,16 @@ timeline: true
---
## 4.20.7
`2022-05-30`
- 🐞 Fix Drawer form instance lost bug when opened. [#35706](https://github.com/ant-design/ant-design/pull/35706) [@crazyair](https://github.com/crazyair)
- 🐞 Fix Segmented options invalid space between icon and text when using the icon prop. [#35701](https://github.com/ant-design/ant-design/pull/35701)
- 💄 Optimize Popover arrow style. [#35717](https://github.com/ant-design/ant-design/pull/35717)
- TypeScript
- 🤖 Fix Card type hints problem. [#35753](https://github.com/ant-design/ant-design/pull/35753)
## 4.20.6
`2022-05-22`

10
CHANGELOG.zh-CN.md
View File

@ -15,6 +15,16 @@ timeline: true
---
## 4.20.7
`2022-05-30`
- 🐞 修复 Drawer 打开时 form 实例为 null 的问题。[#35706](https://github.com/ant-design/ant-design/pull/35706) [@crazyair](https://github.com/crazyair)
- 🐞 修复 Segmented 组件中选项使用 icon 属性时图标与文字之间的间距失效问题。[#35701](https://github.com/ant-design/ant-design/pull/35701)
- 💄 优化 Popover 的箭头效果。[#35717](https://github.com/ant-design/ant-design/pull/35717)
- TypeScript
- 🤖 修复 Card 组件的类型提示。[#35753](https://github.com/ant-design/ant-design/pull/35753)
## 4.20.6
`2022-05-22`

55
components/drawer/__tests__/Drawer.test.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { mount } from 'enzyme';
import { render } from '../../../tests/utils';
import Drawer from '..';
import ConfigProvider from '../../config-provider';
@ -19,71 +18,71 @@ describe('Drawer', () => {
rtlTest(Drawer);
it('render correctly', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Drawer visible width={400} getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('getContainer return undefined', () => {
let wrapper = mount(<DrawerTest getContainer={() => undefined} />);
expect(wrapper.render()).toMatchSnapshot();
wrapper = mount(<DrawerTest getContainer={false} />);
expect(wrapper.render()).toMatchSnapshot();
const { container: wrapper, rerender } = render(<DrawerTest getContainer={() => undefined} />);
expect(wrapper.firstChild).toMatchSnapshot();
rerender(<DrawerTest getContainer={false} />);
expect(wrapper.firstChild).toMatchSnapshot();
});
it('render top drawer', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Drawer visible height={400} placement="top" getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('have a title', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Drawer visible title="Test Title" getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('closable is false', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Drawer visible closable={false} getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('destroyOnClose is true', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Drawer destroyOnClose visible={false} getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('className is test_drawer', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Drawer destroyOnClose visible={false} className="test_drawer" getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('style/drawerStyle/headerStyle/bodyStyle should work', () => {
const style = {
backgroundColor: '#08c',
};
const wrapper = mount(
const { container: wrapper } = render(
<Drawer
visible
style={style}
@ -95,44 +94,44 @@ describe('Drawer', () => {
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('have a footer', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Drawer visible footer="Test Footer" getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('forceRender works', () => {
const wrapper = mount(
const { baseElement, rerender } = render(
<Drawer>
<button type="button" className="forceRender">
should not be rendered
</button>
</Drawer>,
);
expect(wrapper.find('button.forceRender').length).toBe(0);
const wrapper2 = mount(
expect(baseElement.querySelectorAll('button.forceRender').length).toBe(0);
rerender(
<Drawer forceRender>
<button type="button" className="forceRender">
should be rendered
</button>
</Drawer>,
);
expect(wrapper2.find('button.forceRender').length).toBe(1);
expect(baseElement.querySelectorAll('button.forceRender').length).toBe(1);
});
it('support closeIcon', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Drawer visible closable closeIcon={<span>close</span>} width={400} getContainer={false}>
Here is content of Drawer
</Drawer>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('ConfigProvider should not warning', () => {
@ -151,7 +150,7 @@ describe('Drawer', () => {
it('should support ref', () => {
const ref = React.createRef();
mount(
render(
<Drawer visible ref={ref} width={400}>
Here is content of Drawer
</Drawer>,

19
components/drawer/__tests__/DrawerEvent.test.js
View File

@ -68,6 +68,25 @@ describe('Drawer', () => {
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
});
it('dom should be existed after close twice when getContainer is false', () => {
const { container, rerender } = render(getDrawer({ visible: true, getContainer: false }));
rerender(getDrawer({ visible: false, getContainer: false }));
const ev = new TransitionEvent('transitionend', { bubbles: true });
ev.propertyName = 'transform';
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
rerender(getDrawer({ visible: true, getContainer: false }));
const ev2 = new TransitionEvent('transitionend', { bubbles: true });
ev2.propertyName = 'transform';
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev2);
rerender(getDrawer({ visible: false, getContainer: false }));
const ev3 = new TransitionEvent('transitionend', { bubbles: true });
ev3.propertyName = 'transform';
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev3);
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
});
it('test afterVisibleChange', async () => {
const afterVisibleChange = jest.fn();
const { rerender } = render(getDrawer({ afterVisibleChange, visible: true }));

80
components/drawer/__tests__/MultiDrawer.test.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { mount } from 'enzyme';
import Drawer from '..';
import Button from '../../button';
import { render, fireEvent } from '../../../tests/utils';
class MultiDrawer extends React.Component {
state = { visible: false, childrenDrawer: false, hasChildren: true };
@ -110,68 +110,68 @@ class MultiDrawer extends React.Component {
describe('Drawer', () => {
it('render right MultiDrawer', () => {
const wrapper = mount(<MultiDrawer placement="right" />);
wrapper.find('button#open_drawer').simulate('click');
wrapper.find('button#open_two_drawer').simulate('click');
const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
const { container: wrapper } = render(<MultiDrawer placement="right" />);
fireEvent.click(wrapper.querySelector('button#open_drawer'));
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
expect(translateX).toEqual('translateX(-180px)');
expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
});
it('render left MultiDrawer', () => {
const wrapper = mount(<MultiDrawer placement="left" />);
wrapper.find('button#open_drawer').simulate('click');
wrapper.find('button#open_two_drawer').simulate('click');
const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
const { container: wrapper } = render(<MultiDrawer placement="left" />);
fireEvent.click(wrapper.querySelector('button#open_drawer'));
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
expect(translateX).toEqual('translateX(180px)');
expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
wrapper.find('.Two-level .ant-drawer-close').simulate('click');
expect(wrapper.find('.childrenDrawer').text()).toEqual('false');
expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
fireEvent.click(wrapper.querySelector('.Two-level .ant-drawer-close'));
expect(wrapper.querySelector('.childrenDrawer').innerHTML).toEqual('false');
});
it('render top MultiDrawer', () => {
const wrapper = mount(<MultiDrawer placement="top" />);
wrapper.find('button#open_drawer').simulate('click');
wrapper.find('button#open_two_drawer').simulate('click');
const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
const { container: wrapper } = render(<MultiDrawer placement="top" />);
fireEvent.click(wrapper.querySelector('button#open_drawer'));
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
expect(translateX).toEqual('translateY(180px)');
expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
});
it('render MultiDrawer is child in unmount', () => {
const wrapper = mount(<MultiDrawer placement="top" mask={false} />);
wrapper.find('button#open_drawer').simulate('click');
wrapper.find('button#open_two_drawer').simulate('click');
wrapper.find('button#remove_drawer').simulate('click');
let translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
expect(translateX).toEqual(undefined);
wrapper.find('button#open_two_drawer').simulate('click');
translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
const { container: wrapper } = render(<MultiDrawer placement="top" mask={false} />);
fireEvent.click(wrapper.querySelector('button#open_drawer'));
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
fireEvent.click(wrapper.querySelector('button#remove_drawer'));
let translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
expect(translateX).toEqual('');
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
expect(translateX).toEqual('translateY(180px)');
expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
});
it('custom MultiDrawer push distance', () => {
const wrapper = mount(<MultiDrawer push={{ distance: 256 }} />);
wrapper.find('button#open_drawer').simulate('click');
wrapper.find('button#open_two_drawer').simulate('click');
const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
const { container: wrapper } = render(<MultiDrawer push={{ distance: 256 }} />);
fireEvent.click(wrapper.querySelector('button#open_drawer'));
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
expect(translateX).toEqual('translateX(-256px)');
});
it('custom MultiDrawer push with true', () => {
const wrapper = mount(<MultiDrawer push />);
wrapper.find('button#open_drawer').simulate('click');
wrapper.find('button#open_two_drawer').simulate('click');
const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
const { container: wrapper } = render(<MultiDrawer push />);
fireEvent.click(wrapper.querySelector('button#open_drawer'));
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
expect(translateX).toEqual('translateX(-180px)');
});
it('custom MultiDrawer push with false', () => {
const wrapper = mount(<MultiDrawer push={false} />);
wrapper.find('button#open_drawer').simulate('click');
wrapper.find('button#open_two_drawer').simulate('click');
const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
expect(translateX).toBeUndefined();
const { container: wrapper } = render(<MultiDrawer push={false} />);
fireEvent.click(wrapper.querySelector('button#open_drawer'));
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
expect(translateX).toEqual('');
});
});

9
components/drawer/index.tsx
View File

@ -319,15 +319,12 @@ const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
className={drawerClassName}
getContainer={getContainer}
afterVisibleChange={open => {
if (!open) {
if (destroyCloseRef.current === false) {
// set true only once
if (open) {
destroyCloseRef.current = false;
} else if (destroyOnClose) {
destroyCloseRef.current = true;
}
if (destroyOnClose) {
setLoad(false);
}
}
afterVisibleChange?.(open);
}}
>

49
components/image/__tests__/index.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { render, fireEvent } from '../../../tests/utils';
import Image from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
@ -10,49 +10,60 @@ describe('Image', () => {
mountTest(Image);
rtlTest(Image);
it('Image preview props set false', () => {
const wrapper = mount(<Image src={src} preview={false} />);
const { container: wrapper } = render(<Image src={src} preview={false} />);
expect(wrapper.find('Image').at(0).prop('preview')).toBe(false);
expect(wrapper.find('Image').at(1).prop('preview')).toBe(false);
fireEvent.click(wrapper.querySelector('.ant-image'));
expect(wrapper.querySelector('.ant-image-preview-root')).toBe(null);
});
it('Group preview props set false', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Image.PreviewGroup preview={false}>
<Image src={src} />
</Image.PreviewGroup>,
);
expect(wrapper.find('Group').prop('preview')).toBe(false);
fireEvent.click(wrapper.querySelector('.ant-image'));
expect(wrapper.querySelector('.ant-image-preview-root')).toBe(null);
});
it('Default preview props', () => {
const wrapper = mount(<Image src={src} preview={{ visible: true }} />);
const { container: wrapper, baseElement } = render(
<Image src={src} preview={{ visible: true }} />,
);
expect(wrapper.find('Preview').prop('transitionName')).toBe('ant-zoom');
expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('ant-fade');
fireEvent.click(wrapper.querySelector('.ant-image'));
expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('ant-fade');
expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('ant-zoom');
});
it('Default Group preview props', () => {
const wrapper = mount(
const { container: wrapper, baseElement } = render(
<Image.PreviewGroup preview={{ visible: true }}>
<Image src={src} />
</Image.PreviewGroup>,
);
expect(wrapper.find('Preview').prop('transitionName')).toBe('ant-zoom');
expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('ant-fade');
fireEvent.click(wrapper.querySelector('.ant-image'));
expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('ant-fade');
expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('ant-zoom');
});
it('Customize preview props', () => {
const wrapper = mount(
const { container: wrapper, baseElement } = render(
<Image
src={src}
preview={{ visible: true, transitionName: 'abc', maskTransitionName: 'def' }}
/>,
);
expect(wrapper.find('Preview').prop('transitionName')).toBe('abc');
expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('def');
fireEvent.click(wrapper.querySelector('.ant-image'));
expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('abc');
expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('def');
});
it('Customize Group preview props', () => {
const wrapper = mount(
const { container: wrapper, baseElement } = render(
<Image.PreviewGroup
preview={{ visible: true, transitionName: 'abc', maskTransitionName: 'def' }}
>
@ -60,7 +71,9 @@ describe('Image', () => {
</Image.PreviewGroup>,
);
expect(wrapper.find('Preview').prop('transitionName')).toBe('abc');
expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('def');
fireEvent.click(wrapper.querySelector('.ant-image'));
expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('abc');
expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('def');
});
});

43
components/list/__tests__/Item.test.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { mount } from 'enzyme';
import List from '..';
import ConfigProvider from '../../config-provider';
import { render } from '../../../tests/utils';
@ -20,7 +19,7 @@ describe('List Item Layout', () => {
];
it('horizontal itemLayout List which contains string nodes should not be flex container', () => {
const wrapper = mount(
const { container: wrapper } = render(
<List
dataSource={data}
renderItem={item => (
@ -30,11 +29,13 @@ describe('List Item Layout', () => {
)}
/>,
);
expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(true);
expect(
wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'),
).toBe(true);
});
it('horizontal itemLayout List should be flex container defaultly', () => {
const wrapper = mount(
it('horizontal itemLayout List should be flex container by default', () => {
const { container: wrapper } = render(
<List
dataSource={data}
renderItem={item => (
@ -47,11 +48,13 @@ describe('List Item Layout', () => {
)}
/>,
);
expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(false);
expect(
wrapper.querySelector('.ant-list-item').classList.contains('ant-list-item-no-flex'),
).toBe(false);
});
it('vertical itemLayout List should be flex container when there is extra node', () => {
const wrapper = mount(
const { container: wrapper } = render(
<List
itemLayout="vertical"
dataSource={data}
@ -65,11 +68,13 @@ describe('List Item Layout', () => {
)}
/>,
);
expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(false);
expect(
wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'),
).toBe(false);
});
it('vertical itemLayout List should not be flex container when there is not extra node', () => {
const wrapper = mount(
const { container: wrapper } = render(
<List
itemLayout="vertical"
dataSource={data}
@ -83,11 +88,13 @@ describe('List Item Layout', () => {
)}
/>,
);
expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(true);
expect(
wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'),
).toBe(true);
});
it('horizontal itemLayout List should accept extra node', () => {
const wrapper = mount(
const { container: wrapper } = render(
<List
dataSource={data}
renderItem={item => (
@ -104,11 +111,11 @@ describe('List Item Layout', () => {
)}
/>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('should render in RTL direction', () => {
const wrapper = mount(
const { container: wrapper } = render(
<ConfigProvider direction="rtl">
<List
dataSource={data}
@ -127,7 +134,7 @@ describe('List Item Layout', () => {
/>
</ConfigProvider>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('rowKey could be string', () => {
@ -145,14 +152,14 @@ describe('List Item Layout', () => {
title: `ant design`,
},
];
const wrapper = mount(
const { container: wrapper } = render(
<List
dataSource={dataWithId}
rowKey="id"
renderItem={item => <List.Item>{item.title}</List.Item>}
/>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('rowKey could be function', () => {
@ -170,14 +177,14 @@ describe('List Item Layout', () => {
title: `ant design`,
},
];
const wrapper = mount(
const { container: wrapper } = render(
<List
dataSource={dataWithId}
rowKey={item => item.id}
renderItem={item => <List.Item>{item.title}</List.Item>}
/>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('should ref', () => {

6
components/list/__tests__/empty.test.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import { render } from 'enzyme';
import { render } from '../../../tests/utils';
import List from '..';
describe('List', () => {
it('renders empty list', () => {
const wrapper = render(<List dataSource={[]} renderItem={() => <List.Item />} />);
expect(wrapper).toMatchSnapshot();
const { container } = render(<List dataSource={[]} renderItem={() => <List.Item />} />);
expect(container.firstChild).toMatchSnapshot();
});
});

8
components/list/__tests__/index.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { render } from '../../../tests/utils';
import List from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
@ -16,7 +16,9 @@ describe('List', () => {
const renderItem = item => <List.Item>{item}</List.Item>;
const dataSource = [];
const wrapper = mount(<List renderItem={renderItem} dataSource={dataSource} locale={locale} />);
expect(wrapper.find('div').first().props().locale).toBe(undefined);
const { container } = render(
<List renderItem={renderItem} dataSource={dataSource} locale={locale} />,
);
expect(container.querySelector('div.ant-list').getAttribute('locale')).toBe(null);
});
});

14
components/list/__tests__/loading.test.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { render } from 'enzyme';
import { LoadingOutlined } from '@ant-design/icons';
import { render } from '../../../tests/utils';
import List from '..';
@ -9,20 +9,20 @@ describe('List', () => {
const loading = {
spinning: true,
};
const wrapper = render(
const { container: wrapper } = render(
<List loading={loading} dataSource={[]} renderItem={() => <List.Item />} />,
);
expect(wrapper.find('.ant-list-empty-text')).toHaveLength(0);
expect(wrapper.querySelectorAll('.ant-list-empty-text')).toHaveLength(0);
});
it('renders object loading', () => {
const loading = {
spinning: true,
};
const wrapper = render(
const { container: wrapper } = render(
<List loading={loading} dataSource={[1]} renderItem={() => <List.Item />} />,
);
expect(wrapper.find('.ant-spin-spinning')).toHaveLength(1);
expect(wrapper.querySelectorAll('.ant-spin-spinning')).toHaveLength(1);
});
it('renders object loading with indicator', () => {
@ -32,9 +32,9 @@ describe('List', () => {
spinning: true,
indicator: antIcon,
};
const wrapper = render(
const { container: wrapper } = render(
<List loading={loading} dataSource={[1]} renderItem={() => <List.Item />} />,
);
expect(wrapper.find('.anticon-loading')).toHaveLength(1);
expect(wrapper.querySelectorAll('.anticon-loading')).toHaveLength(1);
});
});

152
components/list/__tests__/pagination.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { fireEvent, render } from '../../../tests/utils';
import List from '..';
import { noop } from '../../_util/warning';
@ -26,47 +26,58 @@ describe('List.pagination', () => {
}
function renderedNames(wrapper) {
return wrapper.find('.ant-list-item').map(row => row.text());
return Array.prototype.map.call(
wrapper.querySelectorAll('.ant-list-item'),
row => row.textContent,
);
}
it('renders pagination correctly', () => {
const wrapper = render(createList());
expect(wrapper).toMatchSnapshot();
const { container } = render(createList());
expect(container.firstChild).toMatchSnapshot();
});
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => {
const wrapper = mount(createList({ pagination: { pageSize: 3, hideOnSinglePage: true } }));
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true } });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true } });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
const { container: wrapper, rerender } = render(
createList({
pagination: {
pageSize: 3,
hideOnSinglePage: true,
},
}),
);
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: { pageSize: 3, hideOnSinglePage: false } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: { pageSize: 4, hideOnSinglePage: true } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createList({ pagination: { pageSize: 4, hideOnSinglePage: false } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: { pageSize: 5, hideOnSinglePage: true } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createList({ pagination: { pageSize: 5, hideOnSinglePage: false } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
});
it('paginate data', () => {
const wrapper = mount(createList());
const { container: wrapper } = render(createList());
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
wrapper.find('Pager').last().simulate('click');
const paginationItems = wrapper.querySelectorAll('.ant-pagination-item');
fireEvent.click(paginationItems[paginationItems.length - 1]);
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
});
it('repaginates when pageSize change', () => {
const wrapper = mount(createList());
const { container: wrapper, rerender } = render(createList());
wrapper.setProps({ pagination: { pageSize: 1 } });
rerender(createList({ pagination: { pageSize: 1 } }));
expect(renderedNames(wrapper)).toEqual(['Jack']);
});
it('fires change event', () => {
const handlePaginationChange = jest.fn();
const wrapper = mount(
const { container: wrapper } = render(
createList({
pagination: {
...pagination,
@ -76,7 +87,8 @@ describe('List.pagination', () => {
}),
);
wrapper.find('Pager').last().simulate('click');
const paginationItems = wrapper.querySelectorAll('.ant-pagination-item');
fireEvent.click(paginationItems[paginationItems.length - 1]);
expect(handlePaginationChange).toHaveBeenCalledWith(2, 2);
});
@ -84,56 +96,70 @@ describe('List.pagination', () => {
// https://github.com/ant-design/ant-design/issues/4532
// https://codepen.io/afc163/pen/pWVRJV?editors=001
it('should display pagination as prop pagination change between true and false', () => {
const wrapper = mount(createList());
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination });
wrapper.update();
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
wrapper.find('.ant-pagination-item-2').simulate('click');
const { container: wrapper, rerender } = render(createList());
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
rerender(createList({ pagination: false }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createList({ pagination }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
fireEvent.click(wrapper.querySelector('.ant-pagination-item-2'));
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: true });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: false }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createList({ pagination: true }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
// Legacy code will make pageSize ping with 10, here we fixed to keep sync by current one
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
});
// https://github.com/ant-design/ant-design/issues/5259
it('change to correct page when data source changes', () => {
const wrapper = mount(createList({ pagination: { pageSize: 1 } }));
wrapper.find('.ant-pagination-item-3').simulate('click');
wrapper.setProps({ dataSource: [data[0]] });
expect(wrapper.find('.ant-pagination-item-1').hasClass('ant-pagination-item-active')).toBe(
true,
const { container: wrapper, rerender } = render(createList({ pagination: { pageSize: 1 } }));
fireEvent.click(wrapper.querySelector('.ant-pagination-item-3'));
rerender(createList({ dataSource: [data[0]] }));
expect(wrapper.querySelector('.ant-pagination-item-1')).toHaveClass(
'ant-pagination-item-active',
);
});
it('specify the position of pagination', () => {
const wrapper = mount(createList({ pagination: { position: 'top' } }));
expect(wrapper.find('.ant-list').childAt(0).find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'bottom' } });
expect(wrapper.find('.ant-list').children().last().find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'both' } });
expect(wrapper.find('.ant-pagination')).toHaveLength(2);
expect(wrapper.find('.ant-list').childAt(0).find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-list').children().last().find('.ant-pagination')).toHaveLength(1);
const { container: wrapper, rerender } = render(
createList({ pagination: { position: 'top' } }),
);
expect(wrapper.querySelector('.ant-list').querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: { position: 'bottom' } }));
expect(
wrapper.querySelector('.ant-list').lastElementChild.querySelectorAll('.ant-pagination'),
).toHaveLength(1);
rerender(createList({ pagination: { position: 'both' } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(2);
expect(
wrapper.querySelector('.ant-list').firstElementChild.querySelectorAll('.ant-pagination'),
).toHaveLength(1);
expect(
wrapper.querySelector('.ant-list').lastElementChild.querySelectorAll('.ant-pagination'),
).toHaveLength(1);
});
it('should change page size work', () => {
const wrapper = mount(createList({ pagination: { showSizeChanger: true } }));
expect(wrapper.find('Pagination').first().render()).toMatchSnapshot();
const { container: wrapper } = render(createList({ pagination: { showSizeChanger: true } }));
expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
wrapper.find('.ant-select-selector').simulate('mousedown');
wrapper.find('.ant-select-item-option').at(2).simulate('click');
fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
fireEvent.click(wrapper.querySelectorAll('.ant-select-item-option')[2]);
wrapper.find('.ant-select-selector').simulate('mousedown');
expect(wrapper.find('Pagination').first().render()).toMatchSnapshot();
fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/24913
@ -141,7 +167,7 @@ describe('List.pagination', () => {
it('should onChange called when pageSize change', () => {
const handlePaginationChange = jest.fn();
const handlePageSizeChange = () => {};
const wrapper = mount(
const { container: wrapper } = render(
createList({
pagination: {
...pagination,
@ -152,13 +178,13 @@ describe('List.pagination', () => {
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
wrapper.find('.ant-select-item-option').at(1).simulate('click');
fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
fireEvent.click(wrapper.querySelectorAll('.ant-select-item-option')[1]);
expect(handlePaginationChange).toHaveBeenCalledWith(1, 10);
});
it('should default work', () => {
const wrapper = mount(
const { container: wrapper } = render(
createList({
pagination: {
defaultPageSize: 3,
@ -169,11 +195,11 @@ describe('List.pagination', () => {
}),
);
expect(wrapper.find('Pagination').first().render()).toMatchSnapshot();
expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
});
it('should not crash when pagination is null', () => {
mount(
render(
createList({
pagination: null,
}),

132
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

@ -6854,11 +6854,11 @@ exports[`Locale Provider should display the text as ar 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -11938,11 +11938,11 @@ exports[`Locale Provider should display the text as az 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -17022,11 +17022,11 @@ exports[`Locale Provider should display the text as bg 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -22106,11 +22106,11 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -27190,11 +27190,11 @@ exports[`Locale Provider should display the text as by 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -32274,11 +32274,11 @@ exports[`Locale Provider should display the text as ca 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -37358,11 +37358,11 @@ exports[`Locale Provider should display the text as cs 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -42442,11 +42442,11 @@ exports[`Locale Provider should display the text as da 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -47526,11 +47526,11 @@ exports[`Locale Provider should display the text as de 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -52610,11 +52610,11 @@ exports[`Locale Provider should display the text as el 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -57694,11 +57694,11 @@ exports[`Locale Provider should display the text as en 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -62778,11 +62778,11 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -67862,11 +67862,11 @@ exports[`Locale Provider should display the text as es 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -72946,11 +72946,11 @@ exports[`Locale Provider should display the text as et 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -78030,11 +78030,11 @@ exports[`Locale Provider should display the text as fa 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -83114,11 +83114,11 @@ exports[`Locale Provider should display the text as fi 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -88198,11 +88198,11 @@ exports[`Locale Provider should display the text as fr 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -93282,11 +93282,11 @@ exports[`Locale Provider should display the text as fr 2`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -98366,11 +98366,11 @@ exports[`Locale Provider should display the text as fr 3`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -103450,11 +103450,11 @@ exports[`Locale Provider should display the text as ga 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -108534,11 +108534,11 @@ exports[`Locale Provider should display the text as gl 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -113618,11 +113618,11 @@ exports[`Locale Provider should display the text as he 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -118702,11 +118702,11 @@ exports[`Locale Provider should display the text as hi 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -123786,11 +123786,11 @@ exports[`Locale Provider should display the text as hr 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -128870,11 +128870,11 @@ exports[`Locale Provider should display the text as hu 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -133954,11 +133954,11 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -139038,11 +139038,11 @@ exports[`Locale Provider should display the text as id 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -144122,11 +144122,11 @@ exports[`Locale Provider should display the text as is 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -149206,11 +149206,11 @@ exports[`Locale Provider should display the text as it 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -154290,11 +154290,11 @@ exports[`Locale Provider should display the text as ja 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -159374,11 +159374,11 @@ exports[`Locale Provider should display the text as ka 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -164458,11 +164458,11 @@ exports[`Locale Provider should display the text as kk 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -169542,11 +169542,11 @@ exports[`Locale Provider should display the text as km 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -174626,11 +174626,11 @@ exports[`Locale Provider should display the text as kn 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -179710,11 +179710,11 @@ exports[`Locale Provider should display the text as ko 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -184794,11 +184794,11 @@ exports[`Locale Provider should display the text as ku 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -189878,11 +189878,11 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -194962,11 +194962,11 @@ exports[`Locale Provider should display the text as lt 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -200046,11 +200046,11 @@ exports[`Locale Provider should display the text as lv 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -205130,11 +205130,11 @@ exports[`Locale Provider should display the text as mk 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -210214,11 +210214,11 @@ exports[`Locale Provider should display the text as ml 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -215298,11 +215298,11 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -220382,11 +220382,11 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -225466,11 +225466,11 @@ exports[`Locale Provider should display the text as nb 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -230550,11 +230550,11 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -235634,11 +235634,11 @@ exports[`Locale Provider should display the text as nl 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -240718,11 +240718,11 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -245802,11 +245802,11 @@ exports[`Locale Provider should display the text as pl 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -250886,11 +250886,11 @@ exports[`Locale Provider should display the text as pt 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -255970,11 +255970,11 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -261054,11 +261054,11 @@ exports[`Locale Provider should display the text as ro 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -266138,11 +266138,11 @@ exports[`Locale Provider should display the text as ru 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -271222,11 +271222,11 @@ exports[`Locale Provider should display the text as sk 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -276306,11 +276306,11 @@ exports[`Locale Provider should display the text as sl 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -281390,11 +281390,11 @@ exports[`Locale Provider should display the text as sr 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -286474,11 +286474,11 @@ exports[`Locale Provider should display the text as sv 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -291558,11 +291558,11 @@ exports[`Locale Provider should display the text as ta 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -296642,11 +296642,11 @@ exports[`Locale Provider should display the text as th 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -301726,11 +301726,11 @@ exports[`Locale Provider should display the text as tk 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -306810,11 +306810,11 @@ exports[`Locale Provider should display the text as tr 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -311894,11 +311894,11 @@ exports[`Locale Provider should display the text as uk 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -316978,11 +316978,11 @@ exports[`Locale Provider should display the text as ur 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -322062,11 +322062,11 @@ exports[`Locale Provider should display the text as vi 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -327146,11 +327146,11 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -332230,11 +332230,11 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
@ -337314,11 +337314,11 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
aria-labelledby="test-id"
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"

2
components/menu/index.en-US.md
View File

@ -33,7 +33,7 @@ const items = [
{ label: 'item 2', key: 'item-2' }, // which is required
{
label: 'sub menu',
key: 'submenu'
key: 'submenu',
children: [{ label: 'item 3', key: 'submenu-item-1' }],
},
];

76
components/modal/__tests__/Modal.test.js
View File

@ -1,76 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import Modal from '..';
import Button from '../../button';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
jest.mock('rc-util/lib/Portal');
class ModalTester extends React.Component {
constructor(props) {
super(props);
this.state = { visible: false };
}
componentDidMount() {
this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
}
saveContainer = container => {
this.container = container;
};
getContainer = () => this.container;
render() {
const { visible } = this.state;
return (
<div>
<div ref={this.saveContainer} />
<Modal {...this.props} visible={visible} getContainer={this.getContainer}>
Here is content of Modal
</Modal>
</div>
);
}
}
describe('Modal', () => {
mountTest(Modal);
rtlTest(Modal);
it('render correctly', () => {
const wrapper = mount(<ModalTester />);
expect(wrapper.render()).toMatchSnapshot();
});
it('render without footer', () => {
const wrapper = mount(<ModalTester footer={null} />);
expect(wrapper.render()).toMatchSnapshot();
});
it('onCancel should be called', () => {
const onCancel = jest.fn();
const wrapper = mount(<Modal visible onCancel={onCancel} />);
wrapper.find('.ant-btn').first().simulate('click');
expect(onCancel).toHaveBeenCalled();
});
it('onOk should be called', () => {
const onOk = jest.fn();
const wrapper = mount(<Modal visible onOk={onOk} />);
wrapper.find('.ant-btn').last().simulate('click');
expect(onOk).toHaveBeenCalled();
});
it('support closeIcon', () => {
const wrapper = mount(<Modal closeIcon={<a>closeIcon</a>} visible />);
expect(wrapper.render()).toMatchSnapshot();
});
it('danger type', () => {
const wrapper = mount(<Modal okType="danger" visible />);
expect(wrapper.find(Button).last().props().danger).toBeTruthy();
});
});

93
components/modal/__tests__/Modal.test.tsx Normal file
View File

@ -0,0 +1,93 @@
import React from 'react';
import Modal from '..';
import type { ModalProps } from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render, fireEvent } from '../../../tests/utils';
jest.mock('rc-util/lib/Portal');
class ModalTester extends React.Component<ModalProps, { visible: boolean }> {
state = { visible: false };
componentDidMount() {
this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
}
container = React.createRef<HTMLDivElement>();
getContainer = () => this.container?.current!;
render() {
const { visible } = this.state;
return (
<div>
<div ref={this.container} />
<Modal {...this.props} visible={visible} getContainer={this.getContainer}>
Here is content of Modal
</Modal>
</div>
);
}
}
describe('Modal', () => {
mountTest(Modal);
rtlTest(Modal);
it('support closeIcon', () => {
render(<Modal closeIcon={<a>closeIcon</a>} visible />);
expect(document.body.querySelectorAll('.ant-modal-root')[0]).toMatchSnapshot();
});
it('render correctly', () => {
const { asFragment } = render(<ModalTester />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('render without footer', () => {
const { asFragment } = render(<ModalTester footer={null} />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('onCancel should be called', () => {
const onCancel = jest.fn();
render(<Modal visible onCancel={onCancel} />);
fireEvent.click(document.body.querySelectorAll('.ant-btn')[0]);
expect(onCancel).toHaveBeenCalled();
});
it('onOk should be called', () => {
const onOk = jest.fn();
render(<Modal visible onOk={onOk} />);
const btns = document.body.querySelectorAll('.ant-btn');
fireEvent.click(btns[btns.length - 1]);
expect(onOk).toHaveBeenCalled();
});
it('danger type', () => {
render(<Modal okType="danger" okText="123" visible />);
const btns = document.body.querySelectorAll('.ant-btn');
expect(btns[btns.length - 1].classList.contains('ant-btn-dangerous')).toBeTruthy();
});
it('mouse position', () => {
const Demo = () => {
const [visible, setVisible] = React.useState(false);
const containerRef = React.useRef<HTMLDivElement>(null);
return (
<div ref={containerRef}>
<div id="trigger" onClick={() => setVisible(true)}>
click me
</div>
<Modal visible={visible} getContainer={() => containerRef.current!} />
</div>
);
};
const { container } = render(<Demo />);
fireEvent.click(container.querySelectorAll('#trigger')[0]);
expect(
(container.querySelectorAll('.ant-modal')[0] as HTMLDivElement).style.transformOrigin,
).toBeTruthy();
});
});

0
components/modal/__tests__/__snapshots__/Modal.test.js.snap → components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
View File

0
components/modal/__tests__/__snapshots__/demo.test.js.snap → components/modal/__tests__/__snapshots__/demo.test.ts.snap
View File

0
components/modal/__tests__/demo.test.js → components/modal/__tests__/demo.test.ts
View File

54
components/modal/__tests__/hook.test.js → components/modal/__tests__/hook.test.tsx
View File

@ -2,11 +2,12 @@ import React from 'react';
import CSSMotion from 'rc-motion';
import { act } from 'react-dom/test-utils';
import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
import { mount } from 'enzyme';
import Modal from '..';
import Button from '../../button';
import Input from '../../input';
import ConfigProvider from '../../config-provider';
import { render, fireEvent } from '../../../tests/utils';
import type { ModalFunc } from '../confirm';
jest.mock('rc-util/lib/Portal');
jest.mock('rc-motion');
@ -15,13 +16,14 @@ describe('Modal.hook', () => {
// Inject CSSMotion to replace with No transition support
const MockCSSMotion = genCSSMotion(false);
Object.keys(MockCSSMotion).forEach(key => {
// @ts-ignore
CSSMotion[key] = MockCSSMotion[key];
});
it('hooks support context', () => {
jest.useFakeTimers();
const Context = React.createContext('light');
let instance;
let instance: ReturnType<ModalFunc>;
const Demo = () => {
const [modal, contextHolder] = Modal.useModal();
@ -43,12 +45,12 @@ describe('Modal.hook', () => {
);
};
const wrapper = mount(<Demo />);
wrapper.find('button').simulate('click');
const { container } = render(<Demo />);
fireEvent.click(container.querySelectorAll('button')[0]);
expect(wrapper.find('.test-hook').text()).toEqual('bamboo');
expect(wrapper.find('.ant-btn').length).toBeTruthy();
expect(wrapper.find('.ant-modal-body').length).toBeTruthy();
expect(document.body.querySelectorAll('.test-hook')[0].textContent).toBe('bamboo');
expect(document.body.querySelectorAll('.ant-btn').length).toBeTruthy();
expect(document.body.querySelectorAll('.ant-modal-body').length).toBeTruthy();
// Update instance
act(() => {
@ -56,16 +58,14 @@ describe('Modal.hook', () => {
content: <div className="updated-content" />,
});
});
wrapper.update();
expect(wrapper.find('.updated-content')).toHaveLength(1);
expect(document.body.querySelectorAll('.updated-content')).toHaveLength(1);
// Destroy
act(() => {
instance.destroy();
jest.runAllTimers();
});
wrapper.update();
expect(wrapper.find('Modal')).toHaveLength(0);
expect(document.body.querySelectorAll('Modal')).toHaveLength(0);
jest.useRealTimers();
});
@ -88,14 +88,14 @@ describe('Modal.hook', () => {
);
};
const wrapper = mount(
const { container } = render(
<ConfigProvider direction="rtl">
<Demo />
</ConfigProvider>,
);
wrapper.find('button').simulate('click');
expect(wrapper.find('.ant-input-rtl').length).toBeTruthy();
fireEvent.click(container.querySelectorAll('button')[0]);
expect(document.body.querySelectorAll('.ant-input-rtl').length).toBeTruthy();
});
it('hooks modal should trigger onCancel', () => {
@ -125,14 +125,14 @@ describe('Modal.hook', () => {
);
};
const wrapper = mount(<Demo />);
const { container } = render(<Demo />);
wrapper.find('.open-hook-modal-btn').simulate('click');
wrapper.find('.ant-modal-confirm-btns .ant-btn').first().simulate('click');
fireEvent.click(container.querySelectorAll('.open-hook-modal-btn')[0]);
fireEvent.click(document.body.querySelectorAll('.ant-modal-confirm-btns .ant-btn')[0]);
expect(cancelCount).toEqual(1); // click cancel btn, trigger onCancel
wrapper.find('.open-hook-modal-btn').simulate('click');
wrapper.find('.ant-modal-wrap').simulate('click');
fireEvent.click(container.querySelectorAll('.open-hook-modal-btn')[0]);
fireEvent.click(document.body.querySelectorAll('.ant-modal-wrap')[0]);
expect(cancelCount).toEqual(2); // click modal wrapper, trigger onCancel
});
@ -160,10 +160,11 @@ describe('Modal.hook', () => {
);
};
const wrapper = mount(<Demo />);
wrapper.find('.open-hook-modal-btn').simulate('click');
expect(wrapper.find('.ant-modal-confirm-title').text()).toEqual('Bamboo');
const { container } = render(<Demo />);
fireEvent.click(container.querySelectorAll('.open-hook-modal-btn')[0]);
expect(document.body.querySelectorAll('.ant-modal-confirm-title')[0].textContent).toEqual(
'Bamboo',
);
});
it('destroy before render', () => {
@ -188,9 +189,8 @@ describe('Modal.hook', () => {
);
};
const wrapper = mount(<Demo />);
wrapper.find('.open-hook-modal-btn').simulate('click');
expect(wrapper.exists('.ant-modal-confirm-title')).toBeFalsy();
const { container } = render(<Demo />);
fireEvent.click(container.querySelectorAll('.open-hook-modal-btn')[0]);
expect(document.body.classList.contains('ant-modal-confirm-title')).toBeFalsy();
});
});

126
components/skeleton/style/index.less
View File

@ -1,6 +1,6 @@
// @import '../../style/themes/index';
// @import '../../style/mixins/index';
//
// @skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';
// @skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar';
// @skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title';
@ -9,80 +9,79 @@
// @skeleton-input-prefix-cls: ~'@{skeleton-prefix-cls}-input';
// @skeleton-image-prefix-cls: ~'@{skeleton-prefix-cls}-image';
// @skeleton-block-radius: 4px;
//
// .@{skeleton-prefix-cls} {
// display: table;
// width: 100%;
//
// &-header {
// display: table-cell;
// padding-right: @padding-md;
// vertical-align: top;
//
// // Avatar
// .@{skeleton-avatar-prefix-cls} {
// .skeleton-element-avatar();
// }
// }
//
// &-content {
// display: table-cell;
// width: 100%;
// vertical-align: top;
//
// // Title
// .@{skeleton-title-prefix-cls} {
// width: 100%;
// height: @skeleton-title-height;
// margin-top: @margin-md;
// background: @skeleton-color;
// border-radius: @skeleton-block-radius;
//
// + .@{skeleton-paragraph-prefix-cls} {
// margin-top: @skeleton-title-paragraph-margin-top;
// }
// }
//
// // paragraph
// .@{skeleton-paragraph-prefix-cls} {
// padding: 0;
//
// > li {
// width: 100%;
// height: @skeleton-paragraph-li-height;
// list-style: none;
// background: @skeleton-color;
// border-radius: @skeleton-block-radius;
//
// &:last-child:not(:first-child):not(:nth-child(2)) {
// width: 61%;
// }
//
// + li {
// margin-top: @skeleton-paragraph-li-margin-top;
// }
// }
// }
// }
//
// &-with-avatar &-content {
// // Title
// .@{skeleton-title-prefix-cls} {
// margin-top: @margin-sm;
//
// + .@{skeleton-paragraph-prefix-cls} {
// margin-top: @skeleton-paragraph-margin-top;
// }
// }
// }
//
// &-round &-content {
// .@{skeleton-title-prefix-cls},
// .@{skeleton-paragraph-prefix-cls} > li {
// border-radius: 100px;
// }
// }
//
// // With active animation
// &.@{skeleton-prefix-cls}-active {
// & .@{skeleton-prefix-cls}-content {
@ -91,54 +90,54 @@
// .skeleton-color();
// }
// }
//
// .@{skeleton-avatar-prefix-cls} {
// .skeleton-color();
// }
//
// .@{skeleton-button-prefix-cls} {
// .skeleton-color();
// }
//
// .@{skeleton-input-prefix-cls} {
// .skeleton-color();
// }
//
// .@{skeleton-image-prefix-cls} {
// .skeleton-color();
// }
// }
//
// // Skeleton Block Button, Input
// &.@{skeleton-prefix-cls}-block {
// width: 100%;
//
// .@{skeleton-button-prefix-cls} {
// width: 100%;
// }
//
// .@{skeleton-input-prefix-cls} {
// width: 100%;
// }
// }
//
// // Skeleton element
// &-element {
// display: inline-block;
// width: auto;
//
// .@{skeleton-button-prefix-cls} {
// .skeleton-element-button();
// }
//
// .@{skeleton-avatar-prefix-cls} {
// .skeleton-element-avatar();
// }
//
// .@{skeleton-input-prefix-cls} {
// .skeleton-element-input();
// }
//
// .@{skeleton-image-prefix-cls} {
// .skeleton-element-image();
// }
@ -150,13 +149,13 @@
// vertical-align: top;
// background: @skeleton-color;
// border-radius: @border-radius-base;
//
// .skeleton-element-button-size(@btn-height-base);
//
// &-lg {
// .skeleton-element-button-size(@btn-height-lg);
// }
//
// &-sm {
// .skeleton-element-button-size(@btn-height-sm);
// }
@ -166,35 +165,35 @@
// display: inline-block;
// vertical-align: top;
// background: @skeleton-color;
//
// .skeleton-element-avatar-size(@avatar-size-base);
//
// &-lg {
// .skeleton-element-avatar-size(@avatar-size-lg);
// }
//
// &-sm {
// .skeleton-element-avatar-size(@avatar-size-sm);
// }
// }
//
// // Input
// .skeleton-element-input() {
// display: inline-block;
// vertical-align: top;
// background: @skeleton-color;
//
// .skeleton-element-input-size(@input-height-base);
//
// &-lg {
// .skeleton-element-input-size(@input-height-lg);
// }
//
// &-sm {
// .skeleton-element-input-size(@input-height-sm);
// }
// }
//
// // Image
// .skeleton-element-image() {
// display: flex;
@ -202,84 +201,95 @@
// justify-content: center;
// vertical-align: top;
// background: @skeleton-color;
//
// .skeleton-element-image-size(@image-size-base*2);
//
// &-path {
// fill: #bfbfbf;
// }
//
// &-svg {
// .skeleton-element-image-size(@image-size-base);
// max-width: @image-size-base * 4;
// max-height: @image-size-base * 4;
// }
// }
//
// .skeleton-element-avatar-size(@size) {
// width: @size;
// .skeleton-element-common-size(@size);
//
// &.@{skeleton-avatar-prefix-cls}-circle {
// border-radius: 50%;
// }
// }
//
// .skeleton-element-button-size(@size) {
// width: @size * 2;
// min-width: @size * 2;
// .skeleton-element-common-size(@size);
//
// &.@{skeleton-button-prefix-cls}-circle {
// width: @size;
// min-width: @size;
// border-radius: 50%;
// }
//
// &.@{skeleton-button-prefix-cls}-round {
// border-radius: @size;
// }
// }
//
// .skeleton-element-input-size(@size) {
// width: @size * 5;
// min-width: @size * 5;
// .skeleton-element-common-size(@size);
// }
//
// .skeleton-element-image-size(@size) {
// width: @size;
// .skeleton-element-common-size(@size);
//
// &.@{skeleton-image-prefix-cls}-circle {
// border-radius: 50%;
// }
// }
//
// .skeleton-element-common-size(@size) {
// height: @size;
// line-height: @size;
// }
//
// .skeleton-color() {
// position: relative;
// overflow: hidden;
// background: #fff;
// &::after {
// position: absolute;
// top: 0;
// right: -150%;
// bottom: 0;
// left: -150%;
// background: linear-gradient(
// 90deg,
// @skeleton-color 25%,
// @skeleton-to-color 37%,
// @skeleton-color 63%
// );
// background-size: 400% 100%;
// animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
// content: "";
// }
//
// }
// @keyframes ~"@{skeleton-prefix-cls}-loading" {
// 0% {
// background-position: 100% 50%;
// transform: translateX(-37.5%);
// }
//
// 100% {
// background-position: 0 50%;
// transform: translateX(37.5%);
// }
// }
//
// @import './rtl';

2
components/skeleton/style/index.tsx
View File

@ -207,7 +207,6 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
controlHeightSM,
skeletonColor,
padding,
margin,
marginSM,
borderRadius,
skeletonTitleHeight,
@ -253,7 +252,6 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
[`${skeletonTitleCls}`]: {
width: '100%',
height: skeletonTitleHeight,
marginBlockStart: margin,
background: skeletonColor,
borderRadius: skeletonBlockRadius,
[`+ ${skeletonParagraphCls}`]: {

14
components/tabs/__tests__/__snapshots__/index.test.js.snap
View File

@ -15,7 +15,9 @@ exports[`Tabs renderTabBar custom-tab-bar 1`] = `
>
<div
aria-hidden="false"
aria-labelledby="rc-tabs-test-tab-1"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
id="rc-tabs-test-panel-1"
role="tabpanel"
tabindex="0"
>
@ -386,14 +388,16 @@ exports[`Tabs tabPosition remove card 1`] = `
>
<div
class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
style="transform: translate(0px, 0px);"
>
<div
class="ant-tabs-tab ant-tabs-tab-active"
>
<div
aria-controls="rc-tabs-test-panel-1"
aria-selected="true"
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-1"
role="tab"
tabindex="0"
>
@ -409,13 +413,13 @@ exports[`Tabs tabPosition remove card 1`] = `
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
>
<button
aria-controls="null-more-popup"
aria-controls="rc-tabs-test-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="null-more"
style="visibility:hidden;order:1"
id="rc-tabs-test-more"
style="visibility: hidden; order: 1;"
tabindex="-1"
type="button"
>
@ -454,7 +458,9 @@ exports[`Tabs tabPosition remove card 1`] = `
>
<div
aria-hidden="false"
aria-labelledby="rc-tabs-test-tab-1"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
id="rc-tabs-test-panel-1"
role="tabpanel"
tabindex="0"
>

29
components/tabs/__tests__/index.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { mount, render } from 'enzyme';
import { render, fireEvent } from '../../../tests/utils';
import Tabs from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
@ -24,7 +24,7 @@ describe('Tabs', () => {
beforeEach(() => {
handleEdit = jest.fn();
wrapper = mount(
const { container } = render(
<Tabs type="editable-card" onEdit={handleEdit}>
<TabPane tab="foo" key="1">
foo
@ -34,52 +34,53 @@ describe('Tabs', () => {
{false}
</Tabs>,
);
wrapper = container;
});
it('add card', () => {
wrapper.find('.ant-tabs-nav-add').first().simulate('click');
fireEvent.click(wrapper.querySelector('.ant-tabs-nav-add'));
expect(handleEdit.mock.calls[0][1]).toBe('add');
});
it('remove card', () => {
wrapper.find('.anticon-close').simulate('click');
fireEvent.click(wrapper.querySelector('.anticon-close'));
expect(handleEdit).toHaveBeenCalledWith('1', 'remove');
});
it('validateElement', () => {
expect(wrapper.find('.ant-tabs-tab').length).toBe(1);
expect(wrapper.querySelectorAll('.ant-tabs-tab').length).toBe(1);
});
});
describe('tabPosition', () => {
it('remove card', () => {
const wrapper = render(
const { container } = render(
<Tabs tabPosition="left" tabBarExtraContent="xxx">
<TabPane tab="foo" key="1">
foo
</TabPane>
</Tabs>,
);
expect(wrapper).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
describe('renderTabBar', () => {
it('custom-tab-bar', () => {
const wrapper = render(
const { container } = render(
<Tabs renderTabBar={() => <div>custom-tab-bar</div>}>
<TabPane tab="foo" key="1">
foo
</TabPane>
</Tabs>,
);
expect(wrapper).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
it('warning for onNextClick', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(<Tabs onNextClick={() => {}} />);
render(<Tabs onNextClick={() => {}} />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Tabs] `onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
);
@ -87,21 +88,21 @@ describe('Tabs', () => {
});
it('tabBarGutter should work', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Tabs tabBarGutter={0}>
<TabPane />
<TabPane />
<TabPane />
</Tabs>,
);
expect(wrapper.render()).toMatchSnapshot();
const wrapper2 = mount(
expect(wrapper.firstChild).toMatchSnapshot();
const { container: wrapper2 } = render(
<Tabs tabBarGutter={0} tabPosition="left">
<TabPane />
<TabPane />
<TabPane />
</Tabs>,
);
expect(wrapper2.render()).toMatchSnapshot();
expect(wrapper2.firstChild).toMatchSnapshot();
});
});

86
docs/react/faq.en-US.md
View File

@ -7,11 +7,11 @@ Here are the frequently asked questions about Ant Design and antd that you shoul
---
### Will you provide Sass/Stylus(etc.) style files in addition to the Less style files currently included?
## Will you provide Sass/Stylus(etc.) style files in addition to the Less style files currently included?
There is currently no plan to add support for Sass/Stylus(etc.) style files, but using tools on Google you can easily convert the provided Less files to your desired style format.
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` disappears when I click another popup component inside it. How do I resolve this?
## `Select Dropdown DatePicker TimePicker Popover Popconfirm` disappears when I click another popup component inside it. How do I resolve this?
This is an old bug that has been fixed since `v3.11.x`. If you're using an older version, you can use `<Select getPopupContainer={trigger => trigger.parentElement}>` to render a component inside Popover. (Or other `getXxxxContainer` props)
@ -19,7 +19,7 @@ https://ant.design/components/select/#Select-props
Related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
### How do I prevent `Select Dropdown DatePicker TimePicker Popover Popconfirm` scrolling with the page?
## How do I prevent `Select Dropdown DatePicker TimePicker Popover Popconfirm` scrolling with the page?
Use `<Select getPopupContainer={trigger => trigger.parentElement}>` ([API reference](/components/select/#Select-props)) to render a component inside the scroll area. If you need to config this globally in your application, try `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>` ([API reference](/components/config-provider/#API))
@ -27,75 +27,69 @@ And make sure that parentElement is `position: relative` or `position: absolute`
Related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
### How do I modify the default theme of Ant Design?
## How do I modify the default theme of Ant Design?
See: https://ant.design/docs/react/customize-theme .
### How do I modify `Menu`/`Button`(etc.)'s style?
## How do I modify `Menu`/`Button`(etc.)'s style?
While you can override a component's style, we don't recommend doing so. antd is not only a set of React components, but also a design specification as well.
### How do I replace Moment.js with Day.js to reduce bundle size？
## How do I replace Moment.js with Day.js to reduce bundle size？
Please refer to [Replace Moment.js](/docs/react/replace-moment).
### It doesn't work when I change `defaultValue` dynamically.
## It doesn't work when I change `defaultValue` dynamically.
The `defaultXxxx` (e.g. `defaultValue`) of `Input`/`Select`(etc...) only works on the first render. It is a specification of React. Please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
### Why does modifying props in mutable way not trigger a component update?
## Why does modifying props in mutable way not trigger a component update?
antd use shallow compare of props to optimize performance. You should always pass the new object when updating the state. Please ref [React's document](https://reactjs.org/docs/thinking-in-react.html)
### After I set the `value` of an `Input`/`Select`(etc.) component, the value cannot be changed by user's action.
## After I set the `value` of an `Input`/`Select`(etc.) component, the value cannot be changed by user's action.
Try `onChange` to change `value`, and please read [React's documentation](https://reactjs.org/docs/forms.html#controlled-components).
### Components are not vertically aligned when placed in single row.
## Components are not vertically aligned when placed in single row.
Try [Space](https://ant.design/components/space/) component to make them aligned.
### antd overrides my global styles
## antd overrides my global styles
Yes, antd is designed to help you develop a complete background application. To do so, we override some global styles for styling convenience, and currently these cannot be removed or changed. More info at https://github.com/ant-design/ant-design/issues/4331 .
Alternatively, follow the instructions in [How to avoid modifying global styles?](/docs/react/customize-theme#How-to-avoid-modifying-global-styles)
### I cannot install `antd` and `antd`'s dependencies in mainland China.
## I cannot install `antd` and `antd`'s dependencies in mainland China.
To potentially solve this, try [cnpm](http://npm.taobao.org/).
To potentially solve this, try [npm mirror china](https://npmmirror.com) and [cnpm](https://github.com/cnpm/cnpm).
### I set `dependencies.antd` as the git repository in `package.json`, but it doesn't work.
## I set `dependencies.antd` as the git repository in `package.json`, but it doesn't work.
Please install `antd` with either npm or yarn.
### `message` and `notification` is lower case, but other components are capitalized. Is this a typo?
## `message` and `notification` is lower case, but other components are capitalized. Is this a typo?
No, `message` is just a function, not a React Component, thus it is not a typo that it is in lower case.
### `antd` doesn't work well in mobile.
## `antd` doesn't work well in mobile.
Please check [Ant Design Mobile](http://mobile.ant.design) as a possible solution, as `antd` has not been optimized to work well on mobile. You can also try the [react-component](https://github.com/react-component/) repositories which start with 'm-' 'rn-', which are also designed for mobile.
### Does `antd` supply standalone files like 'React'?
## Does `antd` supply standalone files like 'React'?
Yes, you can [import `antd` with script tag](https://ant.design/docs/react/introduce#Import-in-Browser), but we recommend using `npm` to import `antd`, as it is simple and easy to maintain.
### I can't visit `icon` in my network environment.
You should deploy the iconfont files to your network by following this [example](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont). [#1070](https://github.com/ant-design/ant-design/issues/1070)
After 3.9.x [we will also switch to using svg icons](/components/icon#svg-icons), so you won't need to deploy iconfont locally anymore as well.
### How do I extend antd's components?
## How do I extend antd's components?
If you need some features which should not be included in antd, try to extend antd's component with [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775). [more](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1)
### How do I fix dynamic styles while using a Content Security Policy (CSP)?
## How do I fix dynamic styles while using a Content Security Policy (CSP)?
You can configure `nonce` by [ConfigProvider](/components/config-provider/#Content-Security-Policy).
### When I set `mode` to `DatePicker`/`RangePicker`, why can I not select a year or month anymore?
## When I set `mode` to `DatePicker`/`RangePicker`, why can I not select a year or month anymore?
In a real world development, you may need a `YearPicker`, `MonthRangePicker` or `WeekRangePicker`. You are trying to add `mode` to `DatePicker`/`RangePicker` expected to implement those pickers. However, the `DatePicker`/`RangePicker` cannot be selected and the panels won't close now.
@ -106,13 +100,13 @@ Like [the explaination](https://github.com/ant-design/ant-design/issues/11586#is
Likewise，`disabledDate` [cannot work on year/month panels](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118) of `<DatePicker mode="year/month" />`, but only on cells of date panel.
##### Workaround
### Workaround
You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs.
Or you can simply upgrade to [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we [added more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) to meet those requirements, and `disabledDate` could be effect on those pickers too.
### message/notification/Modal.confirm lost styles when set `prefixCls` on ConfigProvider?
## message/notification/Modal.confirm lost styles when set `prefixCls` on ConfigProvider?
Static methods like message/notification/Modal.confirm are not using the same render tree as `<Button />`, but rendered to independent DOM node created by `ReactDOM.render`, which cannot access React context from ConfigProvider. Consider two solutions here:
@ -126,11 +120,11 @@ ConfigProvider.config({
});
```
### Why shouldn't I use component internal props or state with ref?
## Why shouldn't I use component internal props or state with ref?
You should only access the API by official doc with ref. Directly access internal `props` or `state` is not recommended which will make your code strong coupling with current version. Any refactor will break your code like refactor with [Hooks](https://reactjs.org/docs/hooks-intro.html) version, delete or rename internal `props` or `state`, adjust internal node constructor, etc.
### How to spell Ant Design correctly?
## How to spell Ant Design correctly?
- ✅ **Ant Design**: Capitalized with space, for the design language.
- ✅ **antd**: all lowercase, for the React UI library.
@ -146,36 +140,6 @@ Here are some typical wrong examples:
- ❌ antdesign
- ❌ Antdesign
### Do you guys have any channel or website for submitting monetary donations, like through PayPal or Alipay?
## Do you guys have any channel or website for submitting monetary donations, like through PayPal or Alipay?
[https://opencollective.com/ant-design](https://opencollective.com/ant-design)
---
## Errors and Warnings
Here are some errors & warnings that you may encounter while using antd, although most of these are not actual bugs of antd itself.
### Adjacent JSX elements must be wrapped in an enclosing tag
Check out [this answer from StackOverflow](http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer), along with also reading [React's documentation](http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions) to solve this.
### React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
Please make sure that you import `antd`'s components correctly. Read the corresponding documentation of the `antd`'s version which you use, and pay attention to typos.
### rm is not recognized as an internal or external command
Please read [this issue](https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511), or try Linux/Unix.
### Failed propType: Invalid prop `AAA` of type `BBB` supplied to `CCC`, expected `DDD`. Check the render method of `EEE`.
Please read the corresponding documentation of the `antd`'s version which you are currently using, and make sure that you pass values with correct type to `antd`'s components,
### Unknown option: xxx/package.json.presets
Check out [this answer from Stack Overflow](http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets).
### Invariant Violation: findComponentRoot(...): Unable to find element.
You may have imported `React` twice. Set `React` & `ReactDOM` as external, if you are using webpack, see [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others (browserify, etc...), please read their documentation and find options which can set `React` & `ReactDOM` as external.

88
docs/react/faq.zh-CN.md
View File

@ -7,11 +7,11 @@ title: FAQ
---
### 你们会提供 Sass/Stylus 等格式的样式文件吗？
## 你们会提供 Sass/Stylus 等格式的样式文件吗？
暂无计划。事实上你可以使用工具（请自行 Google）将 Less 转换成 Sass/Stylus 等。
### 当我点击 `Select Dropdown DatePicker TimePicker Popover Popconfirm` 内的另一个 popup 组件时它会消失，如何解决？
## 当我点击 `Select Dropdown DatePicker TimePicker Popover Popconfirm` 内的另一个 popup 组件时它会消失，如何解决？
该问题在 `3.11.0` 后已经解决。如果你仍在使用旧版本，你可以通过 `<Select getPopupContainer={trigger => trigger.parentElement}>` 来在 Popover 中渲染组件，或者使用其他的 `getXxxxContainer` 参数。
@ -19,7 +19,7 @@ title: FAQ
相关 issue：[#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` 会跟随滚动条上下移动？
## `Select Dropdown DatePicker TimePicker Popover Popconfirm` 会跟随滚动条上下移动？
使用 `<Select getPopupContainer={trigger => trigger.parentElement}>`（[API 文档](/components/select/#Select-props)）来将组件渲染到滚动区域内，或者使用其他的 `getXxxxContainer` 参数。如果需要全局解决这个问题，可以使用 `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>`（[API 文档](/components/config-provider/#API)）
@ -27,57 +27,57 @@ title: FAQ
相关 issue：[#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
### 如何修改 Ant Design 的默认主题？
## 如何修改 Ant Design 的默认主题？
可以参考[定制主题](/docs/react/customize-theme)。
### 如何修改 Ant Design 组件的默认样式？
## 如何修改 Ant Design 组件的默认样式？
你可以覆盖它们的样式，但是我们不推荐这么做。antd 是一系列 React 组件，但同样是一套设计规范。
### 如何使用 Day.js 替换 Moment.js 来减小打包大小？
## 如何使用 Day.js 替换 Moment.js 来减小打包大小？
可以参考[替换 Moment.js](/docs/react/replace-moment)。
### 当我动态改变 `defaultValue` 的时候它并没有生效。
## 当我动态改变 `defaultValue` 的时候它并没有生效。
`Input`/`Select` 等的 `defaultXxxx`（例如 `defaultValue`）只有在第一次渲染的时候有效，这是 React 的规范，请阅读 [React 的文档](https://zh-hans.reactjs.org/docs/forms.html#controlled-components)。
### 为什么修改组件传入的对象或数组属性组件不会更新？
## 为什么修改组件传入的对象或数组属性组件不会更新？
antd 内部会对 props 进行浅比较实现性能优化。当状态变更，你总是应该传递一个新的对象。具体请参考 [React 的文档](https://zh-hans.reactjs.org/docs/thinking-in-react.html)
### 当我设置了 `Input`/`Select` 等的 `value` 时它就无法修改了。
## 当我设置了 `Input`/`Select` 等的 `value` 时它就无法修改了。
尝试使用 `onChange` 来改变 `value`，请参考 [React 的文档](https://zh-hans.reactjs.org/docs/forms.html#controlled-components)。
### 多个组件放一排时没有垂直对齐怎么办？
## 多个组件放一排时没有垂直对齐怎么办？
尝试使用 [Space](/components/space/) 组件来使他们对齐。
### antd 覆盖了我的全局样式！
## antd 覆盖了我的全局样式！
是的，antd 在设计的时候就是用来开发一个完整的应用的，为了方便，我们覆盖了一些全局样式，现在还不能移除，想要了解更多请追踪 [这个 issue](https://github.com/ant-design/ant-design/issues/4331)，或者参考这个教程 [How to avoid modifying global styles?](/docs/react/customize-theme#How-to-avoid-modifying-global-styles)
### 我没法安装 `antd` 和 `antd` 的依赖，顺便提一句，我在中国大陆。
## 我没法安装 `antd` 和 `antd` 的依赖，顺便提一句，我在中国大陆。
那啥，试试 [cnpm](http://npm.taobao.org/)。
那啥，试试 [npmmirror 国内镜像](https://npmmirror.com) 和 [cnpm](https://github.com/cnpm/cnpm)。
### 我在 package.json 里将 `dependencies.antd` 添加到了 git repository 中，但是没有用。
## 我在 package.json 里将 `dependencies.antd` 添加到了 git repository 中，但是没有用。
当然没用了，请使用 npm 安装 `antd`。
### `message` 和 `notification` 是小写的，但是其他的组件都是首字母大写的，这是手滑吗？
## `message` 和 `notification` 是小写的，但是其他的组件都是首字母大写的，这是手滑吗？
不，因为 `message` 是一个函数，而不是一个 React 组件。
### `antd` 在移动端体验不佳。
## `antd` 在移动端体验不佳。
请浏览 [Ant Design Mobile](http://mobile.ant.design) 以了解详情，`antd` 并非针对移动端设计。你可以试试 [react-component](https://github.com/react-component/)，其中带有 'm-' 'rn-' 前缀的库是为移动端设计的。
### `antd` 是否有国内镜像？
## `antd` 是否有国内镜像？
有的，你可以点击 https://ant-design.gitee.io/index-cn 访问。
有的，你可以访问 https://ant-design.antgroup.com/index-cn 或 https://ant-design.gitee.io/index-cn 。
历史版本:
@ -85,31 +85,31 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更，
- 2.x: https://ant-design-2x.gitee.io/
- 1.x: https://ant-design-1x.gitee.io/
### `antd` 会像 `React` 那样提供单文件引入吗？
## `antd` 会像 `React` 那样提供单文件引入吗？
是的，[你可以用 script 标签引入](https://ant.design/docs/react/introduce-cn#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%BC%95%E5%85%A5)。但是我们推荐使用 `npm` 来引入 `antd`，这样维护起来更简单方便。
### 在我的网络环境下没法获取到 `icon` 文件。
## 在我的网络环境下没法获取到 `icon` 文件。
你应该自行部署 iconfont 文件到你的网络上，参考这个[例子](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont)。 [#1070](https://github.com/ant-design/ant-design/issues/1070)
在 `3.9.x` 版本后，[我们会使用 svg 图标](/components/icon#svg-icons)，你就不用担心本地部署 iconfont 的问题了！
### 如何拓展 antd 的组件？
## 如何拓展 antd 的组件？
如果你需要一些 antd 没有包含的功能，你可以尝试通过 [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775) 拓展 antd 的组件。 [更多](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1)
### 我的组件默认语言是英文的？如何切回中文的。
## 我的组件默认语言是英文的？如何切回中文的。
请尝试使用 [ConfigProvider](/components/config-provider/#components-config-provider-demo-locale) 组件来包裹你的应用。
如果日期组件的国际化仍未生效，请配置 `moment.locale('zh-cn')` 并**检查你本地的 `moment` 版本和 `antd` 依赖的 `moment` 版本是否一致**。
### 开启了 Content Security Policy (CSP) 如何处理动态样式？
## 开启了 Content Security Policy (CSP) 如何处理动态样式？
你可以通过 [ConfigProvider](/components/config-provider/#Content-Security-Policy) 来配置 `nonce` 属性。
### 当我指定了 DatePicker/RangePicker 的 `mode` 属性后，点击后无法选择年份/月份？
## 当我指定了 DatePicker/RangePicker 的 `mode` 属性后，点击后无法选择年份/月份？
在业务开发中，你可能有年份选择，月份范围选择，周范围选择等需求，此时你给现有组件增加了 `mode` 属性，却发现无法进行点击选择行为，面板也不会关闭。如果给面板添加 `disabledDate` 也不会相应禁用对应的年/月/周。
@ -120,13 +120,13 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更，
同样的，`disabledDate` 对于任何 `<DatePicker />` 也只会针对**日面板**生效，[并不会对 `<DatePicker mode="year/month" />` 上的年/月面板生效](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118)。
##### 解决办法
### 解决办法
你可以参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法，利用 `mode` 和 `onPanelChange` 等方法去封装一个 `YearPicker` 等组件。
另外我们已经在在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加了更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求，现在不再需要使用 `mode="year|month"`，而是直接可以用 `YearPicker` `MonthPicker`，并且 `disabledDate` 也可以正确作用于这些 Picker。
### ConfigProvider 设置 `prefixCls` 后，message/notification/Modal.confirm 生成的节点样式丢失了？
## ConfigProvider 设置 `prefixCls` 后，message/notification/Modal.confirm 生成的节点样式丢失了？
message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式，是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上，无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式：
@ -140,11 +140,11 @@ ConfigProvider.config({
});
```
### 为什么我不应该通过 ref 访问组件内部的 props 和 state？
## 为什么我不应该通过 ref 访问组件内部的 props 和 state？
你通过 ref 获得引用时只应该使用文档提供的方法。直接读取组件内部的 `props` 和 `state` 不是一个好的设计，这会使你的代码与组件版本强耦合。任何重构都可能会使你的代码无法工作，其中重构包括且不仅限于改造成 [Hooks](https://reactjs.org/docs/hooks-intro.html) 版本、移除 / 更名内部 `props` 与 `state`、调整内部 React 节点结构等等。
### 如何正确的拼写 Ant Design？
## 如何正确的拼写 Ant Design？
- ✅ **Ant Design**：用空格分隔的首字母大写单词，指代设计语言。
- ✅ **antd**：全小写，指代 React UI 组件库。
@ -161,36 +161,6 @@ ConfigProvider.config({
- ❌ antdesign
- ❌ Antdesign
### 你们有接受捐助的渠道吗，比如支付宝或者微信支付？
## 你们有接受捐助的渠道吗，比如支付宝或者微信支付？
[https://opencollective.com/ant-design](https://opencollective.com/ant-design)
---
## 错误和警告
这里是一些你在使用 antd 的过程中可能会遇到的错误和警告，但是其中一些并不是 antd 的 bug。
### Adjacent JSX elements must be wrapped in an enclosing tag
这里有一篇[来自 StackOverflow 的回答](http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer)，另外请阅读 [React 的文档](http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions)。
### React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
请确保你正确引入了 `antd` 的组件。参考 `antd` 相应组件的文档，注意你代码中的 typo。
### rm is not recognized as an internal or external command
请阅读这个 [issue](https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511)，或者试试 Linux/Unix。
### Failed propType: Invalid prop `AAA` of type `BBB` supplied to `CCC`, expected `DDD`. Check the render method of `EEE`.
请阅读你正在使用版本的 `antd` 的文档，确保你传递给 `antd` 组件的参数类型正确。
### Unknown option: xxx/package.json.presets
这里有一篇[来自 StackOverflow 的回答](http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets)可以参考。
### Invariant Violation: findComponentRoot(...): Unable to find element.
你或许引入了 React 两次。如果你使用 webpack，请将 React & ReactDOM 设置为 external，参见：[#525](https://github.com/ant-design/ant-design/issues/525)。如果你使用其他工具（browserify 等），请阅读它们的文档并将 React & ReactDOM 设置为 external。

7
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "4.20.6",
"version": "4.20.7",
"description": "An enterprise-class UI design language and React components implementation",
"title": "Ant Design",
"keywords": [
@ -128,7 +128,7 @@
"rc-cascader": "~3.5.0",
"rc-checkbox": "~2.3.0",
"rc-collapse": "~3.3.0",
"rc-dialog": "~8.8.1",
"rc-dialog": "~8.8.2",
"rc-drawer": "~4.4.2",
"rc-dropdown": "~4.0.0",
"rc-field-form": "~1.26.1",
@ -220,7 +220,7 @@
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-compat": "^4.0.0",
"eslint-plugin-import": "^2.21.1",
"eslint-plugin-jest": "~26.3.0",
"eslint-plugin-jest": "^26.4.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-markdown": "^2.0.0",
"eslint-plugin-react": "^7.28.0",
@ -244,6 +244,7 @@
"jest-axe": "^6.0.0",
"jest-environment-jsdom": "^28.0.2",
"jest-environment-node": "^28.0.2",
"jest-image-snapshot": "^5.1.0",
"jest-puppeteer": "^6.0.0",
"jquery": "^3.4.1",
"jsdom": "^19.0.0",

2
tests/shared/imageTest.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
// Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
// eslint-disable-next-line import/no-unresolved
import { configureToMatchImageSnapshot } from '@ant-design/jest-image-snapshot';
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
import ReactDOMServer from 'react-dom/server';
import glob from 'glob';
import MockDate from 'mockdate';

145
typings/jest-image-snapshot.d.ts vendored
View File

@ -1,145 +0,0 @@
// Type definitions for jest-image-snapshot 4.3
// Project: https://github.com/americanexpress/jest-image-snapshot#readme
// Definitions by: Janeene Beeforth <https://github.com/dawnmist>
// erbridge <https://github.com/erbridge>
// Piotr Błażejewicz <https://github.com/peterblazejewicz>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.8
/// <reference types="jest" />
declare module '@ant-design/jest-image-snapshot' {
import { PixelmatchOptions } from 'pixelmatch';
import { Options as SSIMOptions } from 'ssim.js';
export interface MatchImageSnapshotOptions {
/**
* If set to true, the build will not fail when the screenshots to compare have different sizes.
*
* @default false
*/
allowSizeMismatch?: boolean | undefined;
/** Custom config passed to 'pixelmatch' or 'ssim' */
customDiffConfig?: PixelmatchOptions | Partial<SSIMOptions> | undefined;
/**
* The method by which images are compared. `pixelmatch` does a pixel by pixel comparison,
* whereas `ssim` does a structural similarity comparison.
*
* @default 'pixelmatch'
*/
comparisonMethod?: 'pixelmatch' | 'ssim' | undefined;
/** Custom snapshots directory. Absolute path of a directory to keep the snapshot in. */
customSnapshotsDir?: string | undefined;
/** A custom absolute path of a directory to keep this diff in */
customDiffDir?: string | undefined;
/**
* A custom name to give this snapshot. If not provided, one is computed automatically. When a
* function is provided it is called with an object containing testPath, currentTestName,
* counter and defaultIdentifier as its first argument. The function must return an identifier
* to use for the snapshot.
*/
customSnapshotIdentifier?:
| ((parameters: {
testPath: string;
currentTestName: string;
counter: number;
defaultIdentifier: string;
}) => string)
| string
| undefined;
/**
* Changes diff image layout direction.
*
* @default 'horizontal'
*/
diffDirection?: 'horizontal' | 'vertical' | undefined;
/**
* Will output base64 string of a diff image to console in case of failed tests (in addition to
* creating a diff image). This string can be copy-pasted to a browser address string to preview
* the diff for a failed test.
*
* @default false
*/
dumpDiffToConsole?: boolean | undefined;
/**
* Will output the image to the terminal using iTerm's Inline Images Protocol. If the term is
* not compatible, it does the same thing as `dumpDiffToConsole`.
*
* @default false
*/
dumpInlineDiffToConsole?: boolean | undefined;
/**
* Removes coloring from the console output, useful if storing the results to a file.
*
* @default false
*/
noColors?: boolean | undefined;
/**
* Sets the threshold that would trigger a test failure based on the failureThresholdType
* selected. This is different to the customDiffConfig.threshold above - the
* customDiffConfig.threshold is the per pixel failure threshold, whereas this is the failure
* threshold for the entire comparison.
*
* @default 0
*/
failureThreshold?: number | undefined;
/**
* Sets the type of threshold that would trigger a failure.
*
* @default 'pixel'
*/
failureThresholdType?: 'pixel' | 'percent' | undefined;
/**
* Updates a snapshot even if it passed the threshold against the existing one.
*
* @default false
*/
updatePassedSnapshot?: boolean | undefined;
/**
* Applies Gaussian Blur on compared images, accepts radius in pixels as value. Useful when you
* have noise after scaling images per different resolutions on your target website, usually
* setting its value to 1-2 should be enough to solve that problem.
*
* @default 0
*/
blur?: number | undefined;
/**
* Runs the diff in process without spawning a child process.
*
* @default false
*/
runInProcess?: boolean | undefined;
}
/**
* Function to be passed to jest's expect.extend. Example: import { toMatchImageSnapshot } from
* 'jest-image-snapshot'; expect.extend({ toMatchImageSnapshot });
*/
export function toMatchImageSnapshot(options?: MatchImageSnapshotOptions): {
message(): string;
pass: boolean;
};
/**
* Configurable function that can be passed to jest's expect.extend. Example: import {
* configureToMatchImageSnapshot } from 'jest-image-snapshot'; const toMatchImageSnapshot =
* configureToMatchImageSnapshot({ noColors: true }); expect.extend({ toMatchImageSnapshot });
*/
export function configureToMatchImageSnapshot(
options: MatchImageSnapshotOptions,
): () => { message(): string; pass: boolean };
/** Mutates original state with new state */
export function updateSnapshotState<TObject, TPartial>(
originalSnapshotState: TObject,
partialSnapshotState: TPartial,
): TObject & TPartial;
declare global {
namespace jest {
interface Matchers<R, T> {
toMatchImageSnapshot(options?: MatchImageSnapshotOptions): R;
}
}
}
}