mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-19 11:58:41 +08:00
631e501754
Some checks failed
Publish Any Commit / build (push) Has been cancelled
🔀 Sync mirror to Gitee / mirror (push) Has been cancelled
✅ test / lint (push) Has been cancelled
✅ test / test-react-legacy (16, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (16, 2/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 2/2) (push) Has been cancelled
✅ test / test-node (push) Has been cancelled
✅ test / test-react-latest (dom, 1/2) (push) Has been cancelled
✅ test / test-react-latest (dom, 2/2) (push) Has been cancelled
✅ test / build (push) Has been cancelled
✅ test / test lib/es module (es, 1/2) (push) Has been cancelled
✅ test / test lib/es module (es, 2/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 1/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 2/2) (push) Has been cancelled
👁️ Visual Regression Persist Start / test image (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 2/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Has been cancelled
✅ test / test-coverage (push) Has been cancelled
388 lines
11 KiB
TypeScript
388 lines
11 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { UserOutlined } from '@ant-design/icons';
|
|
import { renderToString } from 'react-dom/server';
|
|
|
|
import Layout from '..';
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
|
import { act, fireEvent, render } from '../../../tests/utils';
|
|
import Menu from '../../menu';
|
|
|
|
const { Sider, Content, Footer, Header } = Layout;
|
|
|
|
describe('Layout', () => {
|
|
mountTest(Layout);
|
|
mountTest(Content);
|
|
mountTest(Sider);
|
|
mountTest(() => (
|
|
<Layout>
|
|
<Sider breakpoint="xs" />
|
|
<Content />
|
|
</Layout>
|
|
));
|
|
|
|
rtlTest(Layout);
|
|
rtlTest(Content);
|
|
rtlTest(Sider);
|
|
|
|
it('detect the sider as children', () => {
|
|
const { container, unmount } = render(
|
|
<Layout>
|
|
<Sider>Sider</Sider>
|
|
<Content>Content</Content>
|
|
</Layout>,
|
|
);
|
|
expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
|
|
true,
|
|
);
|
|
unmount();
|
|
});
|
|
|
|
it('umount from multiple siders', async () => {
|
|
const App: React.FC = () => {
|
|
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 { container } = render(<App />);
|
|
expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
|
|
true,
|
|
);
|
|
fireEvent.click(container.querySelectorAll('button')[0]);
|
|
expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
|
|
true,
|
|
);
|
|
fireEvent.click(container.querySelectorAll('button')[1]);
|
|
expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
|
|
false,
|
|
);
|
|
});
|
|
|
|
it('detect the sider inside the children', async () => {
|
|
const { container } = render(
|
|
<Layout>
|
|
<div>
|
|
<Sider>Sider</Sider>
|
|
</div>
|
|
<Content>Content</Content>
|
|
</Layout>,
|
|
);
|
|
expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
|
|
true,
|
|
);
|
|
});
|
|
|
|
it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', async () => {
|
|
const { container } = render(
|
|
<Layout>
|
|
<div>
|
|
<Sider collapsible>Sider</Sider>
|
|
</div>
|
|
<Content>Content</Content>
|
|
</Layout>,
|
|
);
|
|
expect(
|
|
container
|
|
.querySelector('.ant-layout-sider')
|
|
?.className.includes('ant-layout-sider-has-trigger'),
|
|
).toBe(true);
|
|
});
|
|
|
|
it('should have 50% width of sidebar', async () => {
|
|
const { container } = render(
|
|
<Layout>
|
|
<div>
|
|
<Sider width="50%">Sider</Sider>
|
|
</div>
|
|
<Content>Content</Content>
|
|
</Layout>,
|
|
);
|
|
expect(container.querySelector<HTMLElement>('.ant-layout-sider')?.style.width).toBe('50%');
|
|
expect(container.querySelector<HTMLElement>('.ant-layout-sider')?.style.flex).toBe('0 0 50%');
|
|
});
|
|
|
|
describe('zeroWidth', () => {
|
|
it('detect ant-layout-sider-zero-width class in sider when its width is 0%', async () => {
|
|
const { container } = render(
|
|
<Layout>
|
|
<div>
|
|
<Sider width="0%">Sider</Sider>
|
|
</div>
|
|
<Content>Content</Content>
|
|
</Layout>,
|
|
);
|
|
expect(
|
|
container
|
|
.querySelector('.ant-layout-sider')
|
|
?.className.includes('ant-layout-sider-zero-width'),
|
|
).toBe(true);
|
|
});
|
|
|
|
describe('should collapsible', () => {
|
|
it('uncontrolled', () => {
|
|
const onCollapse = jest.fn();
|
|
|
|
const { container } = render(
|
|
<Layout>
|
|
<Sider collapsible breakpoint="lg" collapsedWidth="0" onCollapse={onCollapse}>
|
|
Sider
|
|
</Sider>
|
|
<Content>Content</Content>
|
|
</Layout>,
|
|
);
|
|
|
|
onCollapse.mockReset();
|
|
fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger')!);
|
|
expect(onCollapse).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('controlled', () => {
|
|
const Demo: React.FC = () => {
|
|
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 { container } = render(<Demo />);
|
|
expect(container.querySelector('.ant-layout-sider-collapsed')).toBeTruthy();
|
|
fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger')!);
|
|
expect(container.querySelector('.ant-layout-sider-collapsed')).toBeFalsy();
|
|
});
|
|
});
|
|
});
|
|
|
|
it('detect ant-layout-sider-dark as default theme', async () => {
|
|
const { container } = render(<Sider>Sider</Sider>);
|
|
expect(
|
|
container.querySelector('.ant-layout-sider')?.className.includes('ant-layout-sider-dark'),
|
|
).toBe(true);
|
|
});
|
|
|
|
it('detect ant-layout-sider-light when set light theme', async () => {
|
|
const { container } = render(<Sider theme="light">Sider</Sider>);
|
|
expect(
|
|
container.querySelector('.ant-layout-sider')?.className.includes('ant-layout-sider-light'),
|
|
).toBe(true);
|
|
});
|
|
|
|
it('renders string width correctly', () => {
|
|
const { asFragment } = render(<Sider width="200">Sider</Sider>);
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
});
|
|
|
|
it('should be controlled by collapsed', () => {
|
|
const { asFragment, rerender } = render(<Sider>Sider</Sider>);
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
rerender(<Sider collapsed>Sider</Sider>);
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
});
|
|
|
|
it('should not add ant-layout-has-sider when `hasSider` is `false`', () => {
|
|
const { container } = render(
|
|
<Layout hasSider={false}>
|
|
<Sider>Sider</Sider>
|
|
</Layout>,
|
|
);
|
|
expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
|
|
false,
|
|
);
|
|
});
|
|
|
|
it('render correct with Tooltip', () => {
|
|
jest.useFakeTimers();
|
|
const { container, rerender } = render(
|
|
<Sider collapsible collapsed={false}>
|
|
<Menu mode="inline">
|
|
<Menu.Item key="1">
|
|
<UserOutlined />
|
|
<span>Light</span>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Sider>,
|
|
);
|
|
|
|
fireEvent.mouseEnter(container.querySelector('.ant-menu-item')!);
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
expect(container.querySelectorAll('.ant-tooltip-inner').length).toBeFalsy();
|
|
rerender(
|
|
<Sider collapsible collapsed>
|
|
<Menu mode="inline">
|
|
<Menu.Item key="1">
|
|
<UserOutlined />
|
|
<span>Light</span>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Sider>,
|
|
);
|
|
fireEvent.mouseEnter(container.querySelector('.ant-menu-item')!);
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
expect(container.querySelectorAll('.ant-tooltip-inner').length).toBeTruthy();
|
|
|
|
jest.useRealTimers();
|
|
});
|
|
});
|
|
|
|
describe('Sider', () => {
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
|
|
afterEach(() => {
|
|
errorSpy.mockReset();
|
|
});
|
|
|
|
afterAll(() => {
|
|
errorSpy.mockRestore();
|
|
});
|
|
|
|
it('should trigger onBreakpoint', async () => {
|
|
const onBreakpoint = jest.fn();
|
|
|
|
render(
|
|
<Sider breakpoint="md" onBreakpoint={onBreakpoint}>
|
|
Sider
|
|
</Sider>,
|
|
);
|
|
expect(onBreakpoint).toHaveBeenCalledWith(true);
|
|
});
|
|
|
|
it('should controlled collapse work when using with Layout.Sider', () => {
|
|
const Demo = () => {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
const toggleCollapsed = () => {
|
|
setCollapsed(!collapsed);
|
|
};
|
|
|
|
return (
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|
<Layout.Sider collapsed={collapsed}>
|
|
<button type="button" onClick={toggleCollapsed}>
|
|
"trigger"
|
|
</button>
|
|
<Menu
|
|
theme="dark"
|
|
inlineCollapsed={collapsed}
|
|
defaultSelectedKeys={['1']}
|
|
mode="inline"
|
|
>
|
|
<Menu.SubMenu key="sub1" icon={<UserOutlined />} title="User">
|
|
<Menu.Item key="3">Tom</Menu.Item>
|
|
<Menu.Item key="4">Bill</Menu.Item>
|
|
<Menu.Item key="5">Alex</Menu.Item>
|
|
</Menu.SubMenu>
|
|
</Menu>
|
|
</Layout.Sider>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
const { getByRole, queryByRole } = render(<Demo />);
|
|
|
|
const menu = queryByRole('menu');
|
|
expect(menu).toHaveClass('ant-menu-inline');
|
|
|
|
const button = getByRole('button');
|
|
fireEvent.click(button);
|
|
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
|
|
expect(menu).toHaveClass('ant-menu-inline-collapsed');
|
|
|
|
fireEvent.click(button);
|
|
|
|
expect(menu).not.toHaveClass('ant-menu-inline-collapsed');
|
|
});
|
|
|
|
it('zeroWidthTriggerStyle should work', () => {
|
|
const { container } = render(
|
|
<Sider collapsedWidth={0} collapsible zeroWidthTriggerStyle={{ background: '#F96' }}>
|
|
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
|
<Menu.Item key="1">
|
|
<UserOutlined />
|
|
<span>nav 1</span>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Sider>,
|
|
);
|
|
expect(
|
|
container.querySelector<HTMLDivElement>('.ant-layout-sider-zero-width-trigger')?.style
|
|
.background,
|
|
).toEqual('rgb(255, 153, 102)');
|
|
});
|
|
|
|
it('should be able to customize zero width trigger by trigger prop', () => {
|
|
const { container } = render(
|
|
<Sider collapsedWidth={0} collapsible trigger={<span className="my-trigger" />}>
|
|
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
|
<Menu.Item key="1">
|
|
<UserOutlined />
|
|
<span>nav 1</span>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Sider>,
|
|
);
|
|
expect(
|
|
container.querySelector('.ant-layout-sider-zero-width-trigger')?.querySelector('.my-trigger'),
|
|
).toBeTruthy();
|
|
});
|
|
|
|
(['Layout', 'Header', 'Footer', 'Sider'] as const).forEach((tag) => {
|
|
const ComponentMap = { Layout, Header, Footer, Sider };
|
|
|
|
it(`should get ${tag} element from ref`, () => {
|
|
const ref = React.createRef<HTMLDivElement>();
|
|
const onSelect = jest.fn();
|
|
const Component = ComponentMap[tag];
|
|
render(
|
|
<Component onSelect={onSelect} ref={ref}>
|
|
{tag}
|
|
</Component>,
|
|
);
|
|
expect(ref.current instanceof HTMLElement).toBe(true);
|
|
});
|
|
});
|
|
|
|
it('auto check hasSider', () => {
|
|
const htmlContent = renderToString(
|
|
<Layout>
|
|
<div />
|
|
<Sider />
|
|
<div />
|
|
</Layout>,
|
|
);
|
|
|
|
expect(htmlContent).toContain('ant-layout-has-sider');
|
|
});
|
|
});
|