2020-08-24 10:09:57 +08:00
|
|
|
import React, { useState } from 'react';
|
2018-07-10 12:29:20 +08:00
|
|
|
import { mount, render } from 'enzyme';
|
2017-11-09 20:13:59 +08:00
|
|
|
import Layout from '..';
|
2019-04-08 22:20:18 +08:00
|
|
|
import Icon from '../../icon';
|
|
|
|
import Menu from '../../menu';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2017-11-09 20:13:59 +08:00
|
|
|
|
|
|
|
const { Sider, Content } = Layout;
|
|
|
|
|
|
|
|
describe('Layout', () => {
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Layout);
|
|
|
|
mountTest(Content);
|
|
|
|
mountTest(Sider);
|
2020-04-20 19:18:53 +08:00
|
|
|
mountTest(() => (
|
|
|
|
<Layout>
|
2020-08-24 10:09:57 +08:00
|
|
|
<Sider breakpoint="xs" />
|
2020-04-20 19:18:53 +08:00
|
|
|
<Content />
|
|
|
|
</Layout>
|
|
|
|
));
|
2019-08-26 22:53:20 +08:00
|
|
|
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Layout);
|
|
|
|
rtlTest(Content);
|
|
|
|
rtlTest(Sider);
|
|
|
|
|
2020-08-24 10:09:57 +08:00
|
|
|
it('detect the sider as children', () => {
|
2017-11-09 20:13:59 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
<Layout>
|
|
|
|
<Sider>Sider</Sider>
|
|
|
|
<Content>Content</Content>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Layout>,
|
2017-11-09 20:13:59 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
|
2020-08-24 10:09:57 +08:00
|
|
|
wrapper.unmount();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('umount from multiple siders', async () => {
|
|
|
|
const App = () => {
|
|
|
|
const [hide1, setHide1] = useState(false);
|
|
|
|
const [hide2, setHide2] = useState(false);
|
|
|
|
return (
|
|
|
|
<Layout>
|
|
|
|
{hide1 ? null : <Sider>Sider</Sider>}
|
|
|
|
{hide2 ? null : <Sider>Sider</Sider>}
|
|
|
|
<Content>
|
|
|
|
<button onClick={() => setHide1(true)} type="button">
|
|
|
|
hide sider 1
|
|
|
|
</button>
|
|
|
|
<button onClick={() => setHide2(true)} type="button">
|
|
|
|
hide sider 2
|
|
|
|
</button>
|
|
|
|
</Content>
|
|
|
|
</Layout>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
const wrapper = mount(<App />);
|
|
|
|
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
|
|
|
|
wrapper.find('button').at(0).simulate('click');
|
|
|
|
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
|
|
|
|
wrapper.find('button').at(1).simulate('click');
|
|
|
|
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(false);
|
2017-11-09 20:13:59 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('detect the sider inside the children', async () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Layout>
|
2018-12-07 16:17:45 +08:00
|
|
|
<div>
|
|
|
|
<Sider>Sider</Sider>
|
|
|
|
</div>
|
2017-11-09 20:13:59 +08:00
|
|
|
<Content>Content</Content>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Layout>,
|
2017-11-09 20:13:59 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
|
|
|
|
});
|
2018-02-24 10:35:04 +08:00
|
|
|
|
|
|
|
it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', async () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Layout>
|
2018-12-07 16:17:45 +08:00
|
|
|
<div>
|
|
|
|
<Sider collapsible>Sider</Sider>
|
|
|
|
</div>
|
2018-02-24 10:35:04 +08:00
|
|
|
<Content>Content</Content>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Layout>,
|
2018-02-24 10:35:04 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-has-trigger')).toBe(true);
|
|
|
|
});
|
2018-05-12 02:30:33 +08:00
|
|
|
|
|
|
|
it('should have 50% width of sidebar', async () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Layout>
|
2018-12-07 16:17:45 +08:00
|
|
|
<div>
|
|
|
|
<Sider width="50%">Sider</Sider>
|
|
|
|
</div>
|
2018-05-12 02:30:33 +08:00
|
|
|
<Content>Content</Content>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Layout>,
|
2018-05-12 02:30:33 +08:00
|
|
|
);
|
2020-04-20 19:18:53 +08:00
|
|
|
expect(wrapper.find('.ant-layout-sider').at(0).prop('style').width).toBe('50%');
|
|
|
|
expect(wrapper.find('.ant-layout-sider').at(0).prop('style').flex).toBe('0 0 50%');
|
2018-05-12 02:30:33 +08:00
|
|
|
});
|
|
|
|
|
2020-11-25 17:28:17 +08:00
|
|
|
describe('zeroWidth', () => {
|
|
|
|
it('detect ant-layout-sider-zero-width class in sider when its width is 0%', async () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Layout>
|
|
|
|
<div>
|
|
|
|
<Sider width="0%">Sider</Sider>
|
|
|
|
</div>
|
|
|
|
<Content>Content</Content>
|
|
|
|
</Layout>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-zero-width')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('should collapsible', () => {
|
|
|
|
it('uncontrolled', () => {
|
|
|
|
const onCollapse = jest.fn();
|
|
|
|
|
|
|
|
const wrapper = mount(
|
|
|
|
<Layout>
|
|
|
|
<Sider collapsible breakpoint="lg" collapsedWidth="0" onCollapse={onCollapse}>
|
|
|
|
Sider
|
|
|
|
</Sider>
|
|
|
|
<Content>Content</Content>
|
|
|
|
</Layout>,
|
|
|
|
);
|
|
|
|
|
|
|
|
onCollapse.mockReset();
|
|
|
|
|
|
|
|
wrapper.find('.ant-layout-sider-zero-width-trigger').simulate('click');
|
|
|
|
expect(onCollapse).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('controlled', () => {
|
|
|
|
const Demo = () => {
|
|
|
|
const [collapsed, setCollapsed] = React.useState(true);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Layout>
|
|
|
|
<Sider
|
|
|
|
collapsed={collapsed}
|
|
|
|
collapsible
|
|
|
|
breakpoint="lg"
|
|
|
|
collapsedWidth="0"
|
|
|
|
onCollapse={setCollapsed}
|
|
|
|
>
|
|
|
|
Sider
|
|
|
|
</Sider>
|
|
|
|
<Content>Content</Content>
|
|
|
|
</Layout>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = mount(<Demo />);
|
|
|
|
expect(wrapper.find(Sider).prop('collapsed')).toBeTruthy();
|
|
|
|
|
|
|
|
wrapper.find('.ant-layout-sider-zero-width-trigger').simulate('click');
|
|
|
|
expect(wrapper.find(Sider).prop('collapsed')).toBeFalsy();
|
|
|
|
});
|
|
|
|
});
|
2018-05-12 02:30:33 +08:00
|
|
|
});
|
2018-05-23 23:46:28 +08:00
|
|
|
|
|
|
|
it('detect ant-layout-sider-dark as default theme', async () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = mount(<Sider>Sider</Sider>);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-dark')).toBe(true);
|
2018-05-23 23:46:28 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('detect ant-layout-sider-light when set light theme', async () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = mount(<Sider theme="light">Sider</Sider>);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-light')).toBe(true);
|
2018-05-23 23:46:28 +08:00
|
|
|
});
|
2018-07-10 12:29:20 +08:00
|
|
|
|
|
|
|
it('renders string width correctly', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = render(<Sider width="200">Sider</Sider>);
|
2018-07-10 12:29:20 +08:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
|
|
});
|
2018-08-10 17:04:40 +08:00
|
|
|
|
|
|
|
it('should be controlled by collapsed', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = mount(<Sider>Sider</Sider>);
|
2020-11-20 08:56:12 +08:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
2018-08-10 17:04:40 +08:00
|
|
|
wrapper.setProps({ collapsed: true });
|
2020-11-20 08:56:12 +08:00
|
|
|
wrapper.update();
|
|
|
|
expect(wrapper).toMatchSnapshot();
|
2018-08-10 17:04:40 +08:00
|
|
|
});
|
2019-03-14 11:46:47 +08:00
|
|
|
|
|
|
|
it('should not add ant-layout-has-sider when `hasSider` is `false`', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Layout hasSider={false}>
|
|
|
|
<Sider>Sider</Sider>
|
|
|
|
</Layout>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(false);
|
|
|
|
});
|
2019-04-08 22:20:18 +08:00
|
|
|
|
|
|
|
it('render correct with Tooltip', () => {
|
|
|
|
jest.useFakeTimers();
|
|
|
|
const wrapper = mount(
|
|
|
|
<Sider collapsible collapsed={false}>
|
|
|
|
<Menu mode="inline">
|
|
|
|
<Menu.Item key="1">
|
|
|
|
<Icon type="user" />
|
|
|
|
<span>Light</span>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>
|
|
|
|
</Sider>,
|
|
|
|
);
|
|
|
|
|
2021-05-24 16:24:00 +08:00
|
|
|
wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter');
|
2019-04-08 22:20:18 +08:00
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
|
2021-05-24 16:24:00 +08:00
|
|
|
wrapper.find('.ant-menu-item').hostNodes().simulate('mouseout');
|
2019-04-08 22:20:18 +08:00
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
|
|
|
|
|
|
|
wrapper.setProps({ collapsed: true });
|
2021-05-24 16:24:00 +08:00
|
|
|
wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter');
|
2019-04-08 22:20:18 +08:00
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('.ant-tooltip-inner').length).toBeTruthy();
|
|
|
|
|
|
|
|
jest.useRealTimers();
|
|
|
|
});
|
2017-11-09 20:13:59 +08:00
|
|
|
});
|
2018-06-03 13:03:21 +08:00
|
|
|
|
2019-05-27 20:53:43 +08:00
|
|
|
describe('Sider', () => {
|
|
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
errorSpy.mockReset();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterAll(() => {
|
|
|
|
errorSpy.mockRestore();
|
|
|
|
});
|
|
|
|
|
2018-06-03 13:03:21 +08:00
|
|
|
it('should trigger onBreakpoint', async () => {
|
|
|
|
const onBreakpoint = jest.fn();
|
|
|
|
|
|
|
|
mount(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Sider breakpoint="md" onBreakpoint={onBreakpoint}>
|
|
|
|
Sider
|
|
|
|
</Sider>,
|
2018-06-03 13:03:21 +08:00
|
|
|
);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(onBreakpoint).toHaveBeenCalledWith(true);
|
2018-06-03 13:03:21 +08:00
|
|
|
});
|
2019-05-27 20:53:43 +08:00
|
|
|
|
|
|
|
it('should warning if use `inlineCollapsed` with menu', () => {
|
|
|
|
mount(
|
|
|
|
<Sider collapsible>
|
|
|
|
<Menu mode="inline" inlineCollapsed />
|
|
|
|
</Sider>,
|
|
|
|
);
|
|
|
|
expect(errorSpy).toHaveBeenCalledWith(
|
|
|
|
'Warning: [antd: Menu] `inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
|
|
|
|
);
|
|
|
|
});
|
2019-10-02 11:46:24 +08:00
|
|
|
|
2019-10-06 17:39:54 +08:00
|
|
|
it('zeroWidthTriggerStyle should work', () => {
|
2019-10-02 11:46:24 +08:00
|
|
|
const wrapper = mount(
|
2019-10-06 17:39:54 +08:00
|
|
|
<Sider collapsedWidth={0} collapsible zeroWidthTriggerStyle={{ background: '#F96' }}>
|
2019-10-02 11:46:24 +08:00
|
|
|
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
|
|
|
<Menu.Item key="1">
|
|
|
|
<Icon type="user" />
|
|
|
|
<span>nav 1</span>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>
|
|
|
|
</Sider>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-layout-sider-zero-width-trigger').props().style).toEqual({
|
|
|
|
background: '#F96',
|
|
|
|
});
|
|
|
|
});
|
2020-07-16 12:07:59 +08:00
|
|
|
|
|
|
|
it('should be able to customize zero width trigger by trigger prop', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Sider collapsedWidth={0} collapsible trigger={<span className="my-trigger" />}>
|
|
|
|
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
|
|
|
<Menu.Item key="1">
|
|
|
|
<Icon type="user" />
|
|
|
|
<span>nav 1</span>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>
|
|
|
|
</Sider>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-layout-sider-zero-width-trigger').find('.my-trigger').length).toBe(1);
|
|
|
|
});
|
2021-02-02 19:58:41 +08:00
|
|
|
|
|
|
|
it('should get aside element from ref', () => {
|
|
|
|
const ref = React.createRef();
|
|
|
|
const onSelect = jest.fn();
|
|
|
|
|
|
|
|
mount(
|
|
|
|
<Sider onSelect={onSelect} ref={ref}>
|
|
|
|
Sider
|
|
|
|
</Sider>,
|
|
|
|
);
|
|
|
|
expect(ref.current instanceof HTMLElement).toBe(true);
|
|
|
|
});
|
2018-06-03 13:03:21 +08:00
|
|
|
});
|