ant-design/components/empty/__tests__/index.test.tsx
thinkasany 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 (#52208)
* feat: ConfigProvider support classNames and styles for Empty

* fix

* fix
2025-01-03 14:48:16 +08:00

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