import React from 'react';
import ConfigProvider from '..';
import { fireEvent, render } from '../../../tests/utils';
import Anchor from '../../anchor';
import Avatar from '../../avatar';
import Badge from '../../badge';
import Breadcrumb from '../../breadcrumb';
import Card from '../../card';
import Cascader from '../../cascader';
import Checkbox from '../../checkbox';
import Descriptions from '../../descriptions';
import Divider from '../../divider';
import Empty from '../../empty';
import Form from '../../form';
import Image from '../../image';
import Input from '../../input';
import Layout from '../../layout';
import Mentions from '../../mentions';
import message from '../../message';
import Modal from '../../modal';
import notification from '../../notification';
import Pagination from '../../pagination';
import Radio from '../../radio';
import Rate from '../../rate';
import Result from '../../result';
import Segmented from '../../segmented';
import Select from '../../select';
import Slider from '../../slider';
import Space from '../../space';
import Spin from '../../spin';
import Steps from '../../steps';
import Switch from '../../switch';
import Table from '../../table';
import Tabs from '../../tabs';
import Tag from '../../tag';
import Typography from '../../typography';
import Upload from '../../upload';
describe('ConfigProvider support style and className props', () => {
it('Should Space classNames works', () => {
const { container } = render(
Text1
Text2
,
);
expect(container.querySelector('.ant-space-item')).toHaveClass('test-classNames');
});
it('Should Space className works', () => {
const { container } = render(
Text1
Text2
,
);
expect(container.querySelector('.ant-space')).toHaveClass('test-classNames');
});
it('Should Space styles works', () => {
const { container } = render(
Text1
Text2
,
);
expect(container.querySelector('.ant-space-item')).toHaveStyle(
'margin-right: 8px; color: red;',
);
});
it('Should Space style works', () => {
const { container } = render(
Text1
Text2
,
);
expect(container.querySelector('.ant-space')).toHaveStyle('color: red;');
});
it('Should Divider className works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-divider')).toHaveClass('config-provider-className');
});
it('Should Divider style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-divider'))?.toHaveStyle({ color: 'red', height: '80px' });
});
it('Should Cascader className & style works', () => {
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
const { container } = render(
,
);
const element = container.querySelector('.ant-cascader');
expect(element).toHaveClass('cp-cascader');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Typography className & style works', () => {
const { container } = render(
test
,
);
const element = container.querySelector('.ant-typography');
expect(element).toHaveClass('cp-typography');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Spin className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-spin');
expect(element).toHaveClass('config-provider-spin');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Segmented className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-segmented');
expect(element).toHaveClass('config-provider-segmented');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Select className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-select');
expect(element).toHaveClass('cp-select');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Steps className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-steps');
expect(element).toHaveClass('config-provider-steps');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Form className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-form');
expect(element).toHaveClass('cp-form');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Image className & style works', () => {
const { container } = render(
,
);
const element = container
?.querySelector('.ant-image')
?.querySelector('img');
expect(element).toHaveClass('config-provider-image');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Input className & style & classNames & styles works', () => {
const { container } = render(
,
);
const wrapperElement = container.querySelector('.ant-input-affix-wrapper');
expect(wrapperElement).toHaveClass('cp-input');
expect(wrapperElement).toHaveStyle({ backgroundColor: 'red' });
const prefixElement = container.querySelector('.ant-input-prefix');
expect(prefixElement).toHaveClass('cp-classNames-prefix');
expect(prefixElement).toHaveStyle({ color: 'black' });
const inputElement = container.querySelector('.ant-input');
expect(inputElement).toHaveClass('cp-classNames-input');
expect(inputElement).toHaveStyle({ color: 'blue' });
});
it('Should Layout className & style works', () => {
const { baseElement } = render(
Header
Content
Footer
,
);
const element = baseElement.querySelector('.ant-layout');
expect(element).toHaveClass('cp-layout');
expect(element).toHaveStyle({ background: 'red' });
});
it('Should Mentions className & style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-mentions')).toHaveClass('cp-className');
expect(container.querySelector('.ant-mentions')).toHaveStyle({ background: 'red' });
});
it('Should Modal className & style works', () => {
const { baseElement } = render(
Some contents...
Some contents...
Some contents...
,
);
const element = baseElement.querySelector('.ant-modal');
expect(element).toHaveClass('cp-modal');
expect(element).toHaveStyle({ background: 'red' });
});
it('Should Result className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-result');
expect(element).toHaveClass('cp-result');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Radio className & style works', () => {
const { container } = render(
Radio
,
);
expect(container.querySelector('.ant-radio-wrapper')).toHaveClass('cp-className');
expect(container.querySelector('.ant-radio-wrapper')).toHaveStyle({ background: 'red' });
});
it('Should Slider className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-slider');
expect(element).toHaveClass('cp-slider');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Anchor className & style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-anchor-wrapper')).toHaveClass('cp-className');
expect(container.querySelector('.ant-anchor-wrapper')).toHaveStyle({ background: 'red' });
});
it('Should Breadcrumb className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-breadcrumb');
expect(element).toHaveClass('cp-breadcrumb');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Checkbox className & style works', () => {
const { container } = render(
Checkbox
,
);
expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-checkbox');
expect(container.querySelector('.ant-checkbox-wrapper')).toHaveStyle({ background: 'red' });
});
it('Should Pagination className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-pagination');
expect(element).toHaveClass('cp-pagination');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Descriptions className & style works', () => {
const { container } = render(
muxin
,
);
expect(container.querySelector('.ant-descriptions')).toHaveClass('cp-className');
expect(container.querySelector('.ant-descriptions')).toHaveStyle({ background: 'red' });
});
it('Should Empty className & style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-empty')).toHaveClass('cp-className');
expect(container.querySelector('.ant-empty')).toHaveStyle({ background: 'red' });
});
it('Should Badge className & style & classNames works', () => {
const { container } = render(
test
,
);
const element = container.querySelector('.ant-badge');
// test className
expect(element).toHaveClass('cp-badge');
expect(element).toHaveClass('cp-badge-root');
expect(element?.querySelector('sup')).toHaveClass('cp-badge-indicator');
// test style
expect(element).toHaveStyle({ color: 'yellow' });
expect(element?.querySelector('sup')).toHaveStyle({
color: 'green',
backgroundColor: 'blue',
});
});
it('Should Rate className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-rate');
expect(element).toHaveClass('cp-rate');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Switch className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-switch');
expect(element).toHaveClass('cp-switch');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Avatar className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-avatar');
expect(element).toHaveClass('cp-avatar');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Tag className & style works', () => {
const { container } = render(
Test
,
);
const element = container.querySelector('.ant-tag');
expect(element).toHaveClass('cp-tag');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Table className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-table-wrapper');
expect(element).toHaveClass('cp-table');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Card className & style works', () => {
const { container } = render(
test
,
);
const element = container.querySelector('.ant-card');
expect(element).toHaveClass('cp-card');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Tabs className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-tabs');
expect(element).toHaveClass('cp-tabs');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should message className & style works', () => {
const Demo: React.FC = () => {
const [messageApi, contextHolder] = message.useMessage();
return (
{contextHolder}
);
};
const { container } = render();
fireEvent.click(container.querySelector('button')!);
const element = document
?.querySelector('.ant-message')
?.querySelector('.ant-message-notice');
expect(element).toHaveClass('cp-message');
expect(element).toHaveStyle({ color: 'blue' });
});
it('Should Upload className & style works', () => {
const { container } = render(
upload
,
);
const element = container?.querySelector('.ant-upload-wrapper');
expect(element).toHaveClass('cp-upload');
expect(element?.querySelector('.ant-upload')).toHaveStyle({ color: 'blue' });
});
it('Should notification className & style works', () => {
const Demo: React.FC = () => {
const [api, holder] = notification.useNotification();
return (
{holder}
);
};
const { container } = render();
fireEvent.click(container.querySelector('button')!);
const element = document
?.querySelector('.ant-notification')
?.querySelector('.ant-notification-notice');
expect(element).toHaveClass('cp-notification');
expect(element).toHaveStyle({ color: 'blue' });
});
});