ant-design/components/space/__tests__/index.test.tsx
renovate[bot] 863f61d908
chore(deps): update dependency eslint to v9 ()
Co-authored-by: afc163 <afc163@gmail.com>
2024-09-19 03:30:19 +08:00

241 lines
6.0 KiB
TypeScript

import React, { useState } from 'react';
import Space from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
describe('Space', () => {
mountTest(Space);
rtlTest(Space);
it('should render width empty children', () => {
const { container } = render(<Space />);
expect(container.children.length).toBe(0);
});
it('should render width ConfigProvider', () => {
const { container } = render(
<ConfigProvider space={{ size: 'large' }}>
<Space>
<span>1</span>
<span>2</span>
</Space>
<Space size="middle">
<span>1</span>
<span>2</span>
</Space>
<Space size="large">
<span>1</span>
<span>2</span>
</Space>
</ConfigProvider>,
);
expect(container.children).toMatchSnapshot();
});
it('should render width ConfigProvider support 0', () => {
const { container } = render(
<ConfigProvider space={{ size: 0 }}>
<Space>
<span>1</span>
<span>2</span>
</Space>
</ConfigProvider>,
);
const item = container.querySelector('.ant-space-gap-row-small.ant-space-gap-col-small');
expect(item).toBe(null);
});
it('should render width rtl', () => {
const { container } = render(
<ConfigProvider direction="rtl">
<Space>
<span>1</span>
<span>2</span>
</Space>
<Space size="middle">
<span>1</span>
<span>2</span>
</Space>
<Space size="large">
<span>1</span>
<span>2</span>
</Space>
</ConfigProvider>,
);
expect(container.children).toMatchSnapshot();
});
it('should render width customize size', () => {
const { container } = render(
<Space size={10}>
<span>1</span>
<span>2</span>
</Space>,
);
const items = container.querySelectorAll<HTMLDivElement>('div.ant-space-item');
expect(items[0]?.style.marginRight).toBe('');
expect(items[1]?.style.marginRight).toBe('');
});
it('should render vertical space width customize size', () => {
const { container } = render(
<Space size={10} direction="vertical">
<span>1</span>
<span>2</span>
</Space>,
);
const items = container.querySelectorAll<HTMLDivElement>('div.ant-space-item');
expect(items[0]?.style.marginBottom).toBe('');
expect(items[1]?.style.marginBottom).toBe('');
});
it('should render correct with children', () => {
const { container } = render(
<Space>
text1<span>text1</span>
<>text3</>
</Space>,
);
expect(container.children[0]).toMatchSnapshot();
});
it('should render with invalidElement', () => {
const { container } = render(
<Space>
text1<span>text1</span>
text1
</Space>,
);
expect(container.querySelectorAll('div.ant-space-item').length).toBe(3);
});
it('should be keep store', () => {
function Demo() {
const [state, setState] = React.useState(1);
return (
<div
id="demo"
onClick={() => {
setState((value) => value + 1);
}}
>
{state}
</div>
);
}
function SpaceDemo() {
const [visible, setVisible] = useState(true);
function onChange() {
setVisible(!visible);
}
return (
<Space>
{visible && <div>space</div>}
<Demo />
<p onClick={onChange}>Three</p>
</Space>
);
}
const { container } = render(<SpaceDemo />);
expect(container.querySelector('#demo')).toHaveTextContent('1');
fireEvent.click(container.querySelector('#demo')!);
expect(container.querySelector('#demo')).toHaveTextContent('2');
fireEvent.click(container.querySelector('p')!);
expect(container.querySelector('#demo')).toHaveTextContent('2');
});
it('split', () => {
const { container } = render(
<Space split="-">
text1<span>text1</span>
<>text3</>
</Space>,
);
expect(container.children[0]).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/35305
it('should not throw duplicated key warning', () => {
const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(
<Space>
<div key="1" />
<div />
<div key="3" />
<div />
</Space>,
);
expect(spy).not.toHaveBeenCalledWith(
expect.stringContaining('Encountered two children with the same key'),
expect.anything(),
expect.anything(),
);
spy.mockRestore();
});
it('should render the hidden empty item wrapper', () => {
const Null: React.FC = () => null;
const { container } = render(
<Space>
<Null />
</Space>,
);
const element = container.querySelector<HTMLDivElement>('div.ant-space-item')!;
expect(element).toBeEmptyDOMElement();
expect(getComputedStyle(element).display).toBe('none');
});
it('should ref work', () => {
const ref = React.createRef<HTMLDivElement>();
const { container } = render(
<Space ref={ref}>
<span>Text1</span>
<span>Text2</span>
</Space>,
);
expect(ref.current).toBe(container.firstChild);
});
it('should classNames work', () => {
const { container } = render(
<Space classNames={{ item: 'test-classNames' }}>
<span>Text1</span>
<span>Text2</span>
</Space>,
);
expect(container.querySelector<HTMLDivElement>('.ant-space-item.test-classNames')).toBeTruthy();
});
it('should styles work', () => {
const { container } = render(
<Space styles={{ item: { color: 'red' } }}>
<span>Text1</span>
<span>Text2</span>
</Space>,
);
expect(
container.querySelector<HTMLDivElement>('.ant-space-item')?.getAttribute('style'),
).toEqual('color: red;');
});
});