mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-23 18:04:12 +08:00
9fcce8ffdc
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* feat: ConfigProvider support classNames and styles for Empty * fix * fix
95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import Empty from '..';
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
|
import { render } from '../../../tests/utils';
|
|
import ConfigProvider from '../../config-provider';
|
|
import theme from '../../theme';
|
|
|
|
describe('Empty', () => {
|
|
mountTest(Empty);
|
|
rtlTest(Empty);
|
|
|
|
it('image size should change', () => {
|
|
const { container } = render(<Empty styles={{ image: { height: 20 } }} />);
|
|
expect(container.querySelector<HTMLDivElement>('.ant-empty-image')?.style.height).toBe('20px');
|
|
});
|
|
|
|
it('description can be false', () => {
|
|
const { container } = render(<Empty description={false} />);
|
|
expect(container.querySelector('.ant-empty-description')).toBeFalsy();
|
|
});
|
|
|
|
it('should render in RTL direction', () => {
|
|
const { asFragment } = render(
|
|
<ConfigProvider direction="rtl">
|
|
<Empty />
|
|
</ConfigProvider>,
|
|
);
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
});
|
|
|
|
it('dark mode compatible', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
theme={{
|
|
algorithm: theme.darkAlgorithm,
|
|
}}
|
|
>
|
|
<Empty />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('svg')).toHaveStyle({
|
|
opacity: 0.65,
|
|
});
|
|
});
|
|
|
|
it('should apply custom styles to Empty', () => {
|
|
const customClassNames = {
|
|
root: 'custom-root',
|
|
description: 'custom-description',
|
|
footer: 'custom-footer',
|
|
image: 'custom-image',
|
|
};
|
|
|
|
const customStyles = {
|
|
root: { color: 'red' },
|
|
description: { color: 'green' },
|
|
footer: { color: 'yellow' },
|
|
image: { backgroundColor: 'black' },
|
|
};
|
|
|
|
const { container } = render(
|
|
<Empty
|
|
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|
classNames={customClassNames}
|
|
styles={customStyles}
|
|
description={'Description'}
|
|
>
|
|
<div>Create Now</div>
|
|
</Empty>,
|
|
);
|
|
|
|
const emptyElement = container.querySelector('.ant-empty') as HTMLElement;
|
|
const emptyFooterElement = container.querySelector('.ant-empty-footer') as HTMLElement;
|
|
const emptyDescriptionElement = container.querySelector(
|
|
'.ant-empty-description',
|
|
) as HTMLElement;
|
|
const emptyImageElement = container.querySelector('.ant-empty-image') as HTMLElement;
|
|
|
|
// check classNames
|
|
expect(emptyElement.classList).toContain('custom-root');
|
|
expect(emptyFooterElement.classList).toContain('custom-footer');
|
|
expect(emptyDescriptionElement.classList).toContain('custom-description');
|
|
expect(emptyImageElement.classList).toContain('custom-image');
|
|
|
|
// check styles
|
|
expect(emptyElement.style.color).toBe('red');
|
|
expect(emptyDescriptionElement.style.color).toBe('green');
|
|
expect(emptyFooterElement.style.color).toBe('yellow');
|
|
expect(emptyImageElement.style.backgroundColor).toBe('black');
|
|
});
|
|
});
|