import React from 'react';
import ConfigProvider from '..';
import { fireEvent, render } from '../../../tests/utils';
import Alert from '../../alert';
import Anchor from '../../anchor';
import Avatar from '../../avatar';
import Badge from '../../badge';
import Breadcrumb from '../../breadcrumb';
import Calendar from '../../calendar';
import Card from '../../card';
import Carousel from '../../carousel';
import Cascader from '../../cascader';
import Checkbox from '../../checkbox';
import Collapse from '../../collapse';
import ColorPicker from '../../color-picker';
import DatePicker from '../../date-picker';
import Descriptions from '../../descriptions';
import Divider from '../../divider';
import Drawer from '../../drawer';
import Dropdown from '../../dropdown';
import Empty from '../../empty';
import Flex from '../../flex';
import Form from '../../form';
import Image from '../../image';
import Input from '../../input';
import Layout from '../../layout';
import List from '../../list';
import Mentions from '../../mentions';
import Menu from '../../menu';
import message from '../../message';
import Modal from '../../modal';
import notification from '../../notification';
import Pagination from '../../pagination';
import Progress from '../../progress';
import Radio from '../../radio';
import Rate from '../../rate';
import Result from '../../result';
import Segmented from '../../segmented';
import Select from '../../select';
import Skeleton from '../../skeleton';
import Slider from '../../slider';
import Space from '../../space';
import Spin from '../../spin';
import Statistic from '../../statistic';
import Steps from '../../steps';
import Switch from '../../switch';
import Table from '../../table';
import Tabs from '../../tabs';
import Tag from '../../tag';
import TimePicker from '../../time-picker';
import Timeline from '../../timeline';
import Tour from '../../tour';
import Transfer from '../../transfer';
import Tree from '../../tree';
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('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 Drawer className & closeIcon works', () => {
render(
close,
}}
>
,
);
const selectors = '.ant-drawer-content .ant-drawer-close .cp-test-close-icon';
expect(document.querySelector('.ant-drawer-content')).toHaveClass('test-class');
expect(document.querySelector(selectors)).toBeTruthy();
});
it('Should Drawer style works', () => {
render(
,
);
expect(document.querySelector('.ant-drawer-content')).toHaveStyle(
'color: red; font-size: 16px;',
);
});
it('Should Carousel className works', () => {
const { container } = render(
test item
,
);
expect(container.querySelector('.slick-slider')).toHaveClass('test-class');
});
it('Should Carousel style works', () => {
const { container } = render(
test item 1
test item 2
,
);
expect(container.querySelector('.slick-slider')).toHaveStyle('color: red; font-size: 16px;');
});
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 Collapse className works', () => {
const items = [
{
key: '1',
label: 'test label',
children: item
,
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-collapse')).toHaveClass('test-class');
});
it('Should Collapse style works', () => {
const items = [
{
key: '1',
label: 'test label',
children: item
,
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-collapse')).toHaveStyle('color: red; font-size: 16px;');
});
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 Skeleton className works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-skeleton')).toHaveClass('test-class');
});
it('Should Skeleton style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-skeleton')).toHaveStyle('color: red; font-size: 16px;');
});
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 Statistic className works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-statistic')).toHaveClass('test-class');
});
it('Should Statistic style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-statistic')).toHaveStyle('color: red; font-size: 16px;');
});
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 & closeIcon works', () => {
const { container, baseElement } = render(
cp-test-closeIcon },
}}
>
,
);
const element = container?.querySelector('.ant-image img');
expect(element).toHaveClass('config-provider-image');
expect(element).toHaveStyle({ backgroundColor: 'red' });
fireEvent.click(container.querySelector('.ant-image')!);
expect(
baseElement.querySelector('.ant-image-preview-close .cp-test-closeIcon'),
).toBeTruthy();
});
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 List className works', () => {
const listData = [
{
title: 'Test Title',
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-list')).toHaveClass('test-class');
});
it('Should List style works', () => {
const listData = [
{
title: 'Test Title',
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-list')).toHaveStyle('color: red; font-size: 16px;');
});
it('Should Menu className works', () => {
const menuItems = [
{
label: 'Test Label',
key: 'test',
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-menu')).toHaveClass('test-class');
});
it('Should Menu style works', () => {
const menuItems = [
{
label: 'Test Label',
key: 'test',
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-menu')).toHaveStyle('color: red; font-size: 16px;');
});
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 & closeIcon works', () => {
const { baseElement } = render(
cp-test-closeIcon,
}}
>
test
,
);
const selectors = '.ant-modal-content .ant-modal-close .cp-test-closeIcon';
const element = baseElement.querySelector('.ant-modal');
expect(element).toHaveClass('cp-modal');
expect(element).toHaveStyle({ background: 'red' });
expect(element?.querySelector(selectors)).toBeTruthy();
});
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 Alert className works', () => {
const { container, rerender } = render(
cp-test-icon,
closable: { 'aria-label': 'close' },
}}
>
,
);
expect(container.querySelector('.ant-alert')).toHaveClass('test-class');
expect(container.querySelector('.ant-alert .cp-test-icon')).toBeTruthy();
expect(container.querySelectorAll('*[aria-label="close"]')).toBeTruthy();
rerender(
cp-test-icon,
},
}}
>
,
);
expect(container.querySelector('.ant-alert')).toHaveClass('test-class');
expect(container.querySelector('.ant-alert .cp-test-icon')).toBeTruthy();
expect(container.querySelectorAll('*[aria-label="close"]')).toBeTruthy();
});
it('Should Alert style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-alert')).toHaveStyle('color: red; font-size: 16px;');
});
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 Progress className works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-progress')).toHaveClass('test-class');
});
it('Should Progress style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-progress')).toHaveStyle('color: red; font-size: 16px;');
});
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 & closeIcon works', () => {
const { container } = render(
cp-test-closeIcon,
}}
>
Test
CheckableTag
,
);
const element = container.querySelector('.ant-tag');
expect(element).toHaveClass('cp-tag');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
const checkableElement = container.querySelector('.ant-tag-checkable');
expect(checkableElement).toHaveClass('cp-tag');
expect(checkableElement).toHaveStyle({ backgroundColor: 'blue' });
expect(element?.querySelector('.cp-test-closeIcon')).toBeTruthy();
});
it('Should Table className & style works', () => {
const { container } = render(
cp-test-icon },
}}
>
,
);
const element = container.querySelector('.ant-table-wrapper');
expect(element).toHaveClass('cp-table');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
expect(container.querySelector('.ant-table-tbody .cp-test-icon')).toBeTruthy();
});
it('Should Calendar className works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-picker-calendar')).toHaveClass('test-class');
});
it('Should Calendar style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-picker-calendar')).toHaveStyle(
'color: red; font-size: 16px;',
);
});
it('Should Card className & style & classNames & styles works', () => {
const { container } = render(
test
,
);
const element = container.querySelector('.ant-card');
expect(element).toHaveClass('cp-card');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
const head = container.querySelector('.ant-card-body');
expect(head).toHaveClass('custom-body');
expect(head).toHaveStyle({ color: 'red' });
});
it('Should Tabs className & style & addIcon & moreIcon & removeIcon works', () => {
const { container } = render(
cp-test-addIcon,
moreIcon: cp-test-moreIcon,
removeIcon: cp-test-removeIcon,
}}
>
tab, children: children }]}
/>
,
);
const element = container.querySelector('.ant-tabs');
expect(element).toHaveClass('cp-tabs');
expect(element).toHaveStyle({ backgroundColor: 'red' });
expect(element?.querySelector('.cp-test-addIcon')).toBeTruthy();
expect(element?.querySelector('.cp-test-moreIcon')).toBeTruthy();
expect(element?.querySelector('.cp-test-removeIcon')).toBeTruthy();
});
it('Should TimePicker className works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
});
it('Should TimePicker style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
});
it('Should RangePicker className works', () => {
const { RangePicker } = TimePicker;
const { container } = render(
,
);
expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
});
it('Should RangePicker style works', () => {
const { RangePicker } = TimePicker;
const { container } = render(
,
);
expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
});
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 & closeIcon works', () => {
const Demo: React.FC = () => {
const [api, holder] = notification.useNotification();
return (
cp-test-icon,
}}
>
{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' });
expect(element?.querySelector('.ant-notification .cp-test-icon')).toBeTruthy();
});
it('Should Timeline className works', () => {
const items = [
{
children: 'test item',
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-timeline')).toHaveClass('test-class');
});
it('Should Timeline style works', () => {
const items = [
{
children: 'test item',
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-timeline')).toHaveStyle('color: red; font-size: 16px;');
});
it('Should Transfer className works', () => {
const mockData = [
{
key: '0-0',
title: `content`,
description: `description of content`,
},
];
const { container } = render(
cp-test-selectionsIcon,
}}
>
,
);
expect(container.querySelector('.ant-transfer')).toHaveClass('test-class');
expect(container.querySelector('.cp-test-selectionsIcon')).toBeTruthy();
});
it('Should Transfer style works', () => {
const mockData = [
{
key: '0-0',
title: `content`,
description: `description of content`,
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-transfer')).toHaveStyle('color: red; font-size: 16px;');
});
it('Should Tree className works', () => {
const treeData = [
{
title: 'test-title',
key: '0-0',
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-tree')).toHaveClass('test-class');
});
it('Should Tree style works', () => {
const treeData = [
{
title: 'test-title',
key: '0-0',
},
];
const { container } = render(
,
);
expect(container.querySelector('.ant-tree-list')).toHaveStyle(
'color: red; font-size: 16px; position: relative;',
);
});
it('Should ColorPicker className & style works', () => {
const { container } = render(
,
);
const element = container.querySelector('.ant-color-picker-trigger');
expect(element).toHaveClass('cp-colorPicker');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should DatePicker className works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
});
it('Should DatePicker style works', () => {
const { container } = render(
,
);
expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
});
it('Should Flex className & style works', () => {
const { container } = render(
test
,
);
const element = container.querySelector('.ant-flex');
expect(element).toHaveClass('cp-flex');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
it('Should Dropdown className & style works', () => {
const { container } = render(
test
,
);
const element = container.querySelector('.ant-dropdown');
expect(element).toHaveClass('cp-dropdown');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Tour closeIcon works', () => {
const { container } = render(
cp-test-closeIcon }}
>
,
);
const selectors = '.ant-tour .ant-tour-inner .ant-tour-close .cp-test-closeIcon';
const element = container.querySelector(selectors);
expect(element).toBeTruthy();
});
});