test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

test: move test cases to @testing/library for Drawer (#35839)

Browse Source
This commit is contained in:
yykoypj 2022-06-01 09:40:25 +08:00 committed by GitHub
parent cfd25f9650
commit 166100ee1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>,

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('');
});
});