mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
1632 lines
50 KiB
TypeScript
1632 lines
50 KiB
TypeScript
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 FloatButton from '../../float-button';
|
|
import Form from '../../form';
|
|
import Image from '../../image';
|
|
import Input from '../../input';
|
|
import InputNumber from '../../input-number';
|
|
import Layout from '../../layout';
|
|
import List from '../../list';
|
|
import Mentions from '../../mentions';
|
|
import Menu from '../../menu';
|
|
import type { MenuProps } 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 Splitter from '../../splitter';
|
|
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 TreeSelect from '../../tree-select';
|
|
import Typography from '../../typography';
|
|
import Upload from '../../upload';
|
|
|
|
describe('ConfigProvider support style and className props', () => {
|
|
it('Should Space classNames works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
space={{
|
|
classNames: {
|
|
item: 'test-classNames',
|
|
},
|
|
}}
|
|
>
|
|
<Space>
|
|
<span>Text1</span>
|
|
<span>Text2</span>
|
|
</Space>
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector('.ant-space-item')).toHaveClass('test-classNames');
|
|
});
|
|
|
|
it('Should Space className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
space={{
|
|
className: 'test-classNames',
|
|
}}
|
|
>
|
|
<Space>
|
|
<span>Text1</span>
|
|
<span>Text2</span>
|
|
</Space>
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector('.ant-space')).toHaveClass('test-classNames');
|
|
});
|
|
|
|
it('Should Space styles works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
space={{
|
|
styles: {
|
|
item: {
|
|
color: 'red',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Space>
|
|
<span>Text1</span>
|
|
<span>Text2</span>
|
|
</Space>
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector('.ant-space-item')).toHaveStyle('color: red;');
|
|
});
|
|
|
|
it('Should Space style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
space={{
|
|
style: {
|
|
color: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Space>
|
|
<span>Text1</span>
|
|
<span>Text2</span>
|
|
</Space>
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector('.ant-space')).toHaveStyle('color: red;');
|
|
});
|
|
|
|
it('Should Divider className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
divider={{
|
|
className: 'config-provider-className',
|
|
}}
|
|
>
|
|
<Divider />
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector('.ant-divider')).toHaveClass('config-provider-className');
|
|
});
|
|
|
|
it('Should Divider style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
divider={{
|
|
style: {
|
|
color: 'red',
|
|
height: 80,
|
|
},
|
|
}}
|
|
>
|
|
<Divider />
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector('.ant-divider'))?.toHaveStyle({ color: 'red', height: '80px' });
|
|
});
|
|
|
|
it('Should Drawer className & closeIcon works', () => {
|
|
render(
|
|
<ConfigProvider
|
|
drawer={{
|
|
className: 'test-class',
|
|
closeIcon: <span className="cp-test-close-icon">close</span>,
|
|
}}
|
|
>
|
|
<Drawer title="Test Drawer" open />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const selectors = '.ant-drawer-content .ant-drawer-close .cp-test-close-icon';
|
|
expect(document.querySelector('.ant-drawer-content')).toHaveClass('test-class');
|
|
expect(document.querySelector<HTMLSpanElement>(selectors)).toBeTruthy();
|
|
});
|
|
|
|
it('Should support closable', () => {
|
|
render(
|
|
<ConfigProvider
|
|
drawer={{
|
|
closable: {
|
|
closeIcon: <span className="cp-test-close-icon">close</span>,
|
|
'aria-label': 'Close Btn',
|
|
},
|
|
}}
|
|
>
|
|
<Drawer title="Test Drawer" open />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const selectors = '.ant-drawer-content .ant-drawer-close .cp-test-close-icon';
|
|
expect(document.querySelector<HTMLSpanElement>(selectors)).toBeTruthy();
|
|
expect(document.querySelector('*[aria-label="Close Btn"]')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Drawer style works', () => {
|
|
render(
|
|
<ConfigProvider
|
|
drawer={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Drawer title="Test Drawer" style={{ fontSize: '16px' }} open />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(document.querySelector('.ant-drawer-content')).toHaveStyle(
|
|
'color: red; font-size: 16px;',
|
|
);
|
|
});
|
|
|
|
it('Should Carousel className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
carousel={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<Carousel>
|
|
<div>
|
|
<h3>test item</h3>
|
|
</div>
|
|
</Carousel>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.slick-slider')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should Carousel style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider carousel={{ style: { color: 'red' } }}>
|
|
<Carousel style={{ fontSize: '16px' }}>
|
|
<div>
|
|
<h3>test item 1</h3>
|
|
</div>
|
|
<div>
|
|
<h3>test item 2</h3>
|
|
</div>
|
|
</Carousel>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider cascader={{ className: 'cp-cascader', style: { backgroundColor: 'red' } }}>
|
|
<Cascader open options={options} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const element = container.querySelector<HTMLElement>('.ant-cascader');
|
|
expect(element).toHaveClass('cp-cascader');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Collapse className & expandIcon works', () => {
|
|
const items = [
|
|
{
|
|
key: '1',
|
|
label: 'test label',
|
|
children: <p>item</p>,
|
|
},
|
|
];
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
collapse={{
|
|
className: 'test-class',
|
|
expandIcon: (props) => <span className="cp-test-icon">{props.isActive}</span>,
|
|
}}
|
|
>
|
|
<Collapse items={items} />
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector('.ant-collapse')).toHaveClass('test-class');
|
|
expect(container.querySelector<HTMLSpanElement>('.cp-test-icon')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Collapse style works', () => {
|
|
const items = [
|
|
{
|
|
key: '1',
|
|
label: 'test label',
|
|
children: <p>item</p>,
|
|
},
|
|
];
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
collapse={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Collapse items={items} style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-collapse')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should Typography className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
typography={{ className: 'cp-typography', style: { backgroundColor: 'red' } }}
|
|
>
|
|
<Typography>test</Typography>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLElement>('.ant-typography');
|
|
expect(element).toHaveClass('cp-typography');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Skeleton className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
skeleton={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<Skeleton />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-skeleton')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should Skeleton style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
skeleton={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Skeleton style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-skeleton')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should Spin className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
spin={{ className: 'config-provider-spin', style: { backgroundColor: 'red' } }}
|
|
>
|
|
<Spin />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-spin');
|
|
expect(element).toHaveClass('config-provider-spin');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Statistic className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
statistic={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<Statistic title="Test Title" value={100} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-statistic')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should Statistic style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
statistic={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Statistic style={{ fontSize: '16px' }} title="Test Title" value={100} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-statistic')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should Segmented className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
segmented={{ className: 'config-provider-segmented', style: { backgroundColor: 'red' } }}
|
|
>
|
|
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-segmented');
|
|
expect(element).toHaveClass('config-provider-segmented');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Select className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider select={{ className: 'cp-select', style: { backgroundColor: 'red' } }}>
|
|
<Select
|
|
options={[
|
|
{ value: 'jack', label: 'Jack' },
|
|
{ value: 'lucy', label: 'Lucy' },
|
|
]}
|
|
/>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-select');
|
|
expect(element).toHaveClass('cp-select');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Steps className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
steps={{ className: 'config-provider-steps', style: { backgroundColor: 'red' } }}
|
|
>
|
|
<Steps items={[{ title: 'title', description: 'description' }]} />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-steps');
|
|
expect(element).toHaveClass('config-provider-steps');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Form className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider form={{ className: 'cp-form', style: { backgroundColor: 'red' } }}>
|
|
<Form name="basic">
|
|
<Form.Item label="Username" name="username">
|
|
<Input />
|
|
</Form.Item>
|
|
</Form>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const element = container.querySelector<HTMLDivElement>('.ant-form');
|
|
expect(element).toHaveClass('cp-form');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Image className & style & closeIcon works', () => {
|
|
const { container, baseElement } = render(
|
|
<ConfigProvider
|
|
image={{
|
|
className: 'config-provider-image',
|
|
style: { backgroundColor: 'red' },
|
|
preview: { closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span> },
|
|
}}
|
|
>
|
|
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container?.querySelector<HTMLImageElement>('.ant-image img');
|
|
expect(element).toHaveClass('config-provider-image');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
fireEvent.click(container.querySelector<HTMLDivElement>('.ant-image')!);
|
|
expect(
|
|
baseElement.querySelector<HTMLSpanElement>('.ant-image-preview-close .cp-test-closeIcon'),
|
|
).toBeTruthy();
|
|
});
|
|
|
|
it('Should Input className & style & classNames & styles & autoComplete & allowClear works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
input={{
|
|
className: 'cp-input',
|
|
style: { backgroundColor: 'red' },
|
|
classNames: {
|
|
input: 'cp-classNames-input',
|
|
prefix: 'cp-classNames-prefix',
|
|
},
|
|
styles: {
|
|
input: {
|
|
color: 'blue',
|
|
},
|
|
prefix: {
|
|
color: 'black',
|
|
},
|
|
},
|
|
allowClear: {
|
|
clearIcon: <span className="cp-test-icon">cp-test-icon</span>,
|
|
},
|
|
autoComplete: 'test-cp-autocomplete',
|
|
}}
|
|
>
|
|
<Input
|
|
autoComplete="test-autocomplete"
|
|
placeholder="Basic usage"
|
|
value="test"
|
|
prefix="￥"
|
|
/>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const wrapperElement = container.querySelector<HTMLSpanElement>('.ant-input-affix-wrapper');
|
|
expect(wrapperElement).toHaveClass('cp-input');
|
|
expect(wrapperElement).toHaveStyle({ backgroundColor: 'red' });
|
|
|
|
const prefixElement = container.querySelector<HTMLDivElement>('.ant-input-prefix');
|
|
expect(prefixElement).toHaveClass('cp-classNames-prefix');
|
|
expect(prefixElement).toHaveStyle({ color: 'black' });
|
|
|
|
const inputElement = container.querySelector<HTMLDivElement>('.ant-input');
|
|
expect(inputElement).toHaveClass('cp-classNames-input');
|
|
expect(inputElement).toHaveStyle({ color: 'blue' });
|
|
expect(inputElement?.getAttribute('autocomplete')).toBe('test-autocomplete');
|
|
expect(inputElement?.getAttribute('autocomplete')).not.toBe('test-cp-autocomplete');
|
|
expect(
|
|
container?.querySelector<HTMLSpanElement>('.ant-input-affix-wrapper .cp-test-icon'),
|
|
).toBeTruthy();
|
|
});
|
|
|
|
it('Should Input.TextArea autoComplete & className & style & classNames & styles & allowClear works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
textArea={{
|
|
className: 'cp-textArea',
|
|
style: { backgroundColor: 'yellow' },
|
|
classNames: {
|
|
textarea: 'cp-classNames-textArea',
|
|
count: 'cp-classNames-count',
|
|
},
|
|
styles: {
|
|
textarea: {
|
|
color: 'blue',
|
|
},
|
|
count: {
|
|
color: 'red',
|
|
},
|
|
},
|
|
allowClear: {
|
|
clearIcon: <span className="cp-test-icon">cp-test-icon</span>,
|
|
},
|
|
autoComplete: 'test-cp-autocomplete',
|
|
}}
|
|
>
|
|
<Input.TextArea
|
|
autoComplete="test-autocomplete"
|
|
placeholder="Basic usage"
|
|
value="test"
|
|
prefix="￥"
|
|
count={{ show: true }}
|
|
/>
|
|
</ConfigProvider>,
|
|
);
|
|
const wrapperElement = container.querySelector<HTMLSpanElement>('.ant-input-affix-wrapper');
|
|
expect(wrapperElement).toHaveClass('cp-textArea');
|
|
expect(wrapperElement).toHaveStyle({ backgroundColor: 'yellow' });
|
|
|
|
const inputElement = container.querySelector<HTMLTextAreaElement>('.ant-input');
|
|
expect(inputElement).toHaveClass('cp-classNames-textArea');
|
|
expect(inputElement).toHaveStyle({ color: 'blue' });
|
|
expect(inputElement?.getAttribute('autocomplete')).toBe('test-autocomplete');
|
|
expect(inputElement?.getAttribute('autocomplete')).not.toBe('test-cp-autocomplete');
|
|
|
|
const countElement = container.querySelector<HTMLSpanElement>(
|
|
'.ant-input-affix-wrapper .ant-input-data-count',
|
|
);
|
|
expect(countElement).toHaveClass('cp-classNames-count');
|
|
expect(countElement).toHaveStyle({ color: 'red' });
|
|
|
|
expect(
|
|
container?.querySelector<HTMLSpanElement>('.ant-input-affix-wrapper .cp-test-icon'),
|
|
).toBeTruthy();
|
|
});
|
|
|
|
it('Should Layout className & style works', () => {
|
|
const { baseElement } = render(
|
|
<ConfigProvider
|
|
layout={{
|
|
className: 'cp-layout',
|
|
style: {
|
|
background: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Layout>
|
|
<Layout.Header>Header</Layout.Header>
|
|
<Layout.Content>Content</Layout.Content>
|
|
<Layout.Footer>Footer</Layout.Footer>
|
|
</Layout>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const element = baseElement.querySelector<HTMLDivElement>('.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(
|
|
<ConfigProvider
|
|
list={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<List dataSource={listData} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-list')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should List style works', () => {
|
|
const listData = [
|
|
{
|
|
title: 'Test Title',
|
|
},
|
|
];
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
list={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<List style={{ fontSize: '16px' }} dataSource={listData} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-list')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should Menu className & expandIcon works', () => {
|
|
const menuItems: MenuProps['items'] = [
|
|
{
|
|
label: <span>Test Label</span>,
|
|
key: 'test',
|
|
children: [
|
|
{
|
|
label: <span>Test Label children</span>,
|
|
key: 'test-children',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
const App: React.FC<{ expand?: React.ReactNode }> = ({ expand }) => (
|
|
<ConfigProvider menu={{ className: 'test-class', expandIcon: expand }}>
|
|
<Menu items={menuItems} />
|
|
</ConfigProvider>
|
|
);
|
|
const { container, rerender } = render(<App />);
|
|
expect(container.querySelector<HTMLElement>('.ant-menu')).toHaveClass('test-class');
|
|
rerender(<App expand={<span className="test-cp-icon">test-cp-icon</span>} />);
|
|
expect(container.querySelector<HTMLSpanElement>('.ant-menu .test-cp-icon')).toBeTruthy();
|
|
rerender(<App expand={null} />);
|
|
expect(container.querySelector<HTMLElement>('.ant-menu-submenu-arrow')).toBeFalsy();
|
|
rerender(<App expand={false} />);
|
|
expect(container.querySelector<HTMLElement>('.ant-menu-submenu-arrow')).toBeFalsy();
|
|
});
|
|
|
|
it('Should Menu style works', () => {
|
|
const menuItems = [
|
|
{
|
|
label: 'Test Label',
|
|
key: 'test',
|
|
},
|
|
];
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
menu={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Menu items={menuItems} style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-menu')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should Mentions className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
mentions={{
|
|
className: 'cp-className',
|
|
style: {
|
|
background: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Mentions
|
|
defaultValue="@afc163"
|
|
options={[
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
{
|
|
value: 'yesmeck',
|
|
label: 'yesmeck',
|
|
},
|
|
]}
|
|
/>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider
|
|
modal={{
|
|
className: 'cp-modal',
|
|
style: { background: 'red' },
|
|
closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span>,
|
|
}}
|
|
>
|
|
<Modal open>test</Modal>
|
|
</ConfigProvider>,
|
|
);
|
|
const selectors = '.ant-modal-content .ant-modal-close .cp-test-closeIcon';
|
|
const element = baseElement.querySelector<HTMLDivElement>('.ant-modal');
|
|
expect(element).toHaveClass('cp-modal');
|
|
expect(element).toHaveStyle({ background: 'red' });
|
|
expect(element?.querySelector<HTMLSpanElement>(selectors)).toBeTruthy();
|
|
});
|
|
|
|
it('Should Result className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider result={{ className: 'cp-result', style: { backgroundColor: 'red' } }}>
|
|
<Result />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-result');
|
|
expect(element).toHaveClass('cp-result');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Radio className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
radio={{
|
|
className: 'cp-className',
|
|
style: {
|
|
background: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Radio>Radio</Radio>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider slider={{ className: 'cp-slider', style: { backgroundColor: 'red' } }}>
|
|
<Slider />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-slider');
|
|
expect(element).toHaveClass('cp-slider');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Alert className works', () => {
|
|
const { container, rerender } = render(
|
|
<ConfigProvider
|
|
alert={{
|
|
className: 'test-class',
|
|
closeIcon: <span className="cp-test-icon">cp-test-icon</span>,
|
|
closable: { 'aria-label': 'close' },
|
|
}}
|
|
>
|
|
<Alert message="Test Message" />
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector<HTMLDivElement>('.ant-alert')).toHaveClass('test-class');
|
|
expect(container.querySelector<HTMLSpanElement>('.ant-alert .cp-test-icon')).toBeTruthy();
|
|
expect(container.querySelectorAll('*[aria-label="close"]')).toBeTruthy();
|
|
rerender(
|
|
<ConfigProvider
|
|
alert={{
|
|
className: 'test-class',
|
|
closable: {
|
|
'aria-label': 'close',
|
|
closeIcon: <span className="cp-test-icon">cp-test-icon</span>,
|
|
},
|
|
}}
|
|
>
|
|
<Alert message="Test Message" />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector<HTMLDivElement>('.ant-alert')).toHaveClass('test-class');
|
|
expect(container.querySelector<HTMLSpanElement>('.ant-alert .cp-test-icon')).toBeTruthy();
|
|
expect(container.querySelectorAll('*[aria-label="close"]')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Alert style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
alert={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Alert style={{ fontSize: '16px' }} message="Test Message" />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-alert')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should Anchor className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
anchor={{
|
|
className: 'cp-className',
|
|
style: {
|
|
background: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Anchor
|
|
items={[
|
|
{
|
|
key: 'part-1',
|
|
href: '#part-1',
|
|
title: 'Part 1',
|
|
},
|
|
{
|
|
key: 'part-2',
|
|
href: '#part-2',
|
|
title: 'Part 2',
|
|
},
|
|
]}
|
|
/>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider
|
|
breadcrumb={{ className: 'cp-breadcrumb', style: { backgroundColor: 'red' } }}
|
|
>
|
|
<Breadcrumb />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLElement>('.ant-breadcrumb');
|
|
expect(element).toHaveClass('cp-breadcrumb');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Checkbox className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
checkbox={{
|
|
className: 'cp-checkbox',
|
|
style: {
|
|
background: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Checkbox>Checkbox</Checkbox>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider
|
|
pagination={{ className: 'cp-pagination', style: { backgroundColor: 'blue' } }}
|
|
>
|
|
<Pagination />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLUListElement>('.ant-pagination');
|
|
expect(element).toHaveClass('cp-pagination');
|
|
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
|
});
|
|
|
|
it('Should Progress className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
progress={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<Progress />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-progress')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should Progress style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
progress={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Progress style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-progress')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should Descriptions className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
descriptions={{
|
|
className: 'cp-className',
|
|
style: {
|
|
background: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Descriptions title="User Info">
|
|
<Descriptions.Item label="UserName">muxin</Descriptions.Item>
|
|
</Descriptions>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider
|
|
empty={{
|
|
className: 'cp-className',
|
|
style: {
|
|
background: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Empty />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider
|
|
badge={{
|
|
className: 'cp-badge',
|
|
style: {
|
|
backgroundColor: 'blue',
|
|
},
|
|
classNames: {
|
|
root: 'cp-badge-root',
|
|
indicator: 'cp-badge-indicator',
|
|
},
|
|
styles: {
|
|
root: { color: 'yellow' },
|
|
indicator: { color: 'green' },
|
|
},
|
|
}}
|
|
>
|
|
<Badge count={10}>test</Badge>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLSpanElement>('.ant-badge');
|
|
|
|
// test className
|
|
expect(element).toHaveClass('cp-badge');
|
|
expect(element).toHaveClass('cp-badge-root');
|
|
expect(element?.querySelector<HTMLElement>('sup')).toHaveClass('cp-badge-indicator');
|
|
|
|
// test style
|
|
expect(element).toHaveStyle({ color: 'yellow' });
|
|
expect(element?.querySelector<HTMLElement>('sup')).toHaveStyle({
|
|
color: 'green',
|
|
backgroundColor: 'blue',
|
|
});
|
|
});
|
|
|
|
it('Should Rate className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider rate={{ className: 'cp-rate', style: { backgroundColor: 'blue' } }}>
|
|
<Rate />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLUListElement>('.ant-rate');
|
|
expect(element).toHaveClass('cp-rate');
|
|
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
|
});
|
|
|
|
it('Should Switch className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider switch={{ className: 'cp-switch', style: { backgroundColor: 'blue' } }}>
|
|
<Switch />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLButtonElement>('.ant-switch');
|
|
expect(element).toHaveClass('cp-switch');
|
|
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
|
});
|
|
|
|
it('Should Avatar className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider avatar={{ className: 'cp-avatar', style: { backgroundColor: 'blue' } }}>
|
|
<Avatar />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLSpanElement>('.ant-avatar');
|
|
expect(element).toHaveClass('cp-avatar');
|
|
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
|
});
|
|
|
|
it('Should Tag className & style & closeIcon works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
tag={{
|
|
className: 'cp-tag',
|
|
style: { backgroundColor: 'blue' },
|
|
closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span>,
|
|
}}
|
|
>
|
|
<Tag>Test</Tag>
|
|
<Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLSpanElement>('.ant-tag');
|
|
expect(element).toHaveClass('cp-tag');
|
|
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
|
|
|
const checkableElement = container.querySelector<HTMLSpanElement>('.ant-tag-checkable');
|
|
expect(checkableElement).toHaveClass('cp-tag');
|
|
expect(checkableElement).toHaveStyle({ backgroundColor: 'blue' });
|
|
expect(element?.querySelector<HTMLSpanElement>('.cp-test-closeIcon')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Tag support aria-* in closable', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
tag={{
|
|
closable: {
|
|
closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span>,
|
|
'aria-label': 'Close Tag',
|
|
},
|
|
}}
|
|
>
|
|
<Tag>Test</Tag>
|
|
<Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLSpanElement>('.ant-tag');
|
|
expect(element?.querySelector('.ant-tag-close-icon')).toBeTruthy();
|
|
expect(element?.querySelector('.ant-tag-close-icon')?.getAttribute('aria-label')).toBe(
|
|
'Close Tag',
|
|
);
|
|
expect(element?.querySelector('.cp-test-closeIcon')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Tag hide closeIcon when closeIcon=false', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
tag={{
|
|
closeIcon: false,
|
|
}}
|
|
>
|
|
<Tag>Test</Tag>
|
|
<Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLSpanElement>('.ant-tag');
|
|
expect(element?.querySelector('.ant-tag-close-icon')).toBeFalsy();
|
|
});
|
|
|
|
it('Should Tag show default closeIcon when closeIcon=true', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
tag={{
|
|
closeIcon: true,
|
|
}}
|
|
>
|
|
<Tag>Test</Tag>
|
|
<Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLSpanElement>('.ant-tag');
|
|
expect(element?.querySelector('.ant-tag-close-icon')).toBeTruthy();
|
|
expect(element?.querySelector('.anticon-close')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Table className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
table={{
|
|
className: 'cp-table',
|
|
style: { backgroundColor: 'blue' },
|
|
expandable: { expandIcon: () => <span className="cp-test-icon">cp-test-icon</span> },
|
|
}}
|
|
>
|
|
<Table
|
|
columns={[{ title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true }]}
|
|
dataSource={[{ key: '1', name: 'Jim Green', age: 40, address: 'test', tags: ['loser'] }]}
|
|
/>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-table-wrapper');
|
|
expect(element).toHaveClass('cp-table');
|
|
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
|
expect(container.querySelector<HTMLSpanElement>('.ant-table-tbody .cp-test-icon')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Calendar className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
calendar={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<Calendar />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-picker-calendar')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should Calendar style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
calendar={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Calendar style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-picker-calendar')).toHaveStyle(
|
|
'color: red; font-size: 16px;',
|
|
);
|
|
});
|
|
|
|
it('Should Card className & style & classNames & styles works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
card={{
|
|
className: 'cp-card',
|
|
style: { backgroundColor: 'blue' },
|
|
classNames: { body: 'custom-body' },
|
|
styles: { body: { color: 'red' } },
|
|
}}
|
|
>
|
|
<Card>test</Card>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-card');
|
|
expect(element).toHaveClass('cp-card');
|
|
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
|
const head = container.querySelector<HTMLDivElement>('.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(
|
|
<ConfigProvider
|
|
tabs={{
|
|
className: 'cp-tabs',
|
|
style: { backgroundColor: 'red' },
|
|
addIcon: <span className="cp-test-addIcon">cp-test-addIcon</span>,
|
|
more: { icon: <span className="cp-test-moreIcon">cp-test-moreIcon</span> },
|
|
removeIcon: <span className="cp-test-removeIcon">cp-test-removeIcon</span>,
|
|
}}
|
|
>
|
|
<Tabs
|
|
type="editable-card"
|
|
items={[{ key: '1', label: <span>tab</span>, children: <span>children</span> }]}
|
|
/>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-tabs');
|
|
expect(element).toHaveClass('cp-tabs');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
expect(element?.querySelector<HTMLSpanElement>('.cp-test-addIcon')).toBeTruthy();
|
|
expect(element?.querySelector<HTMLSpanElement>('.cp-test-moreIcon')).toBeTruthy();
|
|
expect(element?.querySelector<HTMLSpanElement>('.cp-test-removeIcon')).toBeTruthy();
|
|
});
|
|
|
|
it('Should TimePicker className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
timePicker={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<TimePicker />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should TimePicker style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
timePicker={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<TimePicker style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should RangePicker className works', () => {
|
|
const { RangePicker } = TimePicker;
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
rangePicker={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<RangePicker />
|
|
</ConfigProvider>,
|
|
);
|
|
expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should RangePicker style works', () => {
|
|
const { RangePicker } = TimePicker;
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
rangePicker={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<RangePicker style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
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 (
|
|
<ConfigProvider message={{ className: 'cp-message', style: { color: 'blue' } }}>
|
|
{contextHolder}
|
|
<button type="button" onClick={() => messageApi.success('success')}>
|
|
test
|
|
</button>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
const { container } = render(<Demo />);
|
|
fireEvent.click(container.querySelector<HTMLButtonElement>('button')!);
|
|
const element = document
|
|
?.querySelector<HTMLDivElement>('.ant-message')
|
|
?.querySelector<HTMLDivElement>('.ant-message-notice');
|
|
expect(element).toHaveClass('cp-message');
|
|
expect(element).toHaveStyle({ color: 'blue' });
|
|
});
|
|
|
|
it('Should Upload className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider upload={{ className: 'cp-upload', style: { color: 'blue' } }}>
|
|
<Upload type="drag">upload</Upload>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container?.querySelector<HTMLSpanElement>('.ant-upload-wrapper');
|
|
expect(element).toHaveClass('cp-upload');
|
|
expect(element?.querySelector<HTMLDivElement>('.ant-upload')).toHaveStyle({ color: 'blue' });
|
|
});
|
|
|
|
it('Should notification className & style & closeIcon works', () => {
|
|
const Demo: React.FC = () => {
|
|
const [api, holder] = notification.useNotification();
|
|
return (
|
|
<ConfigProvider
|
|
notification={{
|
|
className: 'cp-notification',
|
|
style: { color: 'blue' },
|
|
closeIcon: <span className="cp-test-icon">cp-test-icon</span>,
|
|
}}
|
|
>
|
|
<button type="button" onClick={() => api.open({ message: 'test', duration: 0 })}>
|
|
test
|
|
</button>
|
|
{holder}
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
const { container } = render(<Demo />);
|
|
fireEvent.click(container.querySelector<HTMLButtonElement>('button')!);
|
|
const element = document
|
|
?.querySelector<HTMLDivElement>('.ant-notification')
|
|
?.querySelector<HTMLDivElement>('.ant-notification-notice');
|
|
expect(element).toHaveClass('cp-notification');
|
|
expect(element).toHaveStyle({ color: 'blue' });
|
|
expect(element?.querySelector<HTMLSpanElement>('.ant-notification .cp-test-icon')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Timeline className works', () => {
|
|
const items = [
|
|
{
|
|
children: 'test item',
|
|
},
|
|
];
|
|
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
timeline={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<Timeline items={items} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-timeline')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should Timeline style works', () => {
|
|
const items = [
|
|
{
|
|
children: 'test item',
|
|
},
|
|
];
|
|
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
timeline={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Timeline items={items} style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider
|
|
transfer={{
|
|
className: 'test-class',
|
|
selectionsIcon: <span className="cp-test-selectionsIcon">cp-test-selectionsIcon</span>,
|
|
}}
|
|
>
|
|
<Transfer dataSource={mockData} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-transfer')).toHaveClass('test-class');
|
|
expect(container.querySelector<HTMLSpanElement>('.cp-test-selectionsIcon')).toBeTruthy();
|
|
});
|
|
|
|
it('Should Transfer style works', () => {
|
|
const mockData = [
|
|
{
|
|
key: '0-0',
|
|
title: `content`,
|
|
description: `description of content`,
|
|
},
|
|
];
|
|
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
transfer={{
|
|
style: {
|
|
color: 'red',
|
|
},
|
|
}}
|
|
>
|
|
<Transfer dataSource={mockData} style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
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(
|
|
<ConfigProvider
|
|
tree={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<Tree treeData={treeData} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-tree')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should Tree style works', () => {
|
|
const treeData = [
|
|
{
|
|
title: 'test-title',
|
|
key: '0-0',
|
|
},
|
|
];
|
|
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
tree={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<Tree treeData={treeData} style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-tree-list')).toHaveStyle(
|
|
'color: red; font-size: 16px; position: relative;',
|
|
);
|
|
});
|
|
|
|
it('Should ColorPicker className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
colorPicker={{ className: 'cp-colorPicker', style: { backgroundColor: 'red' } }}
|
|
>
|
|
<ColorPicker />
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-color-picker-trigger');
|
|
expect(element).toHaveClass('cp-colorPicker');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should DatePicker className works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
datePicker={{
|
|
className: 'test-class',
|
|
}}
|
|
>
|
|
<DatePicker />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
|
|
});
|
|
|
|
it('Should DatePicker style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
datePicker={{
|
|
style: { color: 'red' },
|
|
}}
|
|
>
|
|
<DatePicker style={{ fontSize: '16px' }} />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
|
|
});
|
|
|
|
it('Should Flex className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider flex={{ className: 'cp-flex', style: { backgroundColor: 'blue' } }}>
|
|
<Flex>test</Flex>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-flex');
|
|
expect(element).toHaveClass('cp-flex');
|
|
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
|
});
|
|
|
|
it('Should Dropdown className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider dropdown={{ className: 'cp-dropdown', style: { backgroundColor: 'red' } }}>
|
|
<Dropdown menu={{ items: [{ label: 'foo', key: '1' }] }} open>
|
|
<span>test</span>
|
|
</Dropdown>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-dropdown');
|
|
expect(element).toHaveClass('cp-dropdown');
|
|
expect(element).toHaveStyle({ backgroundColor: 'red' });
|
|
});
|
|
|
|
it('Should Splitter className & style works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider splitter={{ className: 'cp-splitter', style: { backgroundColor: 'yellow' } }}>
|
|
<Splitter>test</Splitter>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLDivElement>('.ant-splitter');
|
|
expect(element).toHaveClass('cp-splitter');
|
|
expect(element).toHaveStyle({ backgroundColor: 'yellow' });
|
|
});
|
|
|
|
it('Should Tour closeIcon works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
tour={{ closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span> }}
|
|
>
|
|
<Tour steps={[{ title: 'test' }]} open />
|
|
</ConfigProvider>,
|
|
);
|
|
const selectors = '.ant-tour .ant-tour-inner .ant-tour-close .cp-test-closeIcon';
|
|
const element = container.querySelector<HTMLSpanElement>(selectors);
|
|
expect(element).toBeTruthy();
|
|
});
|
|
|
|
it('Should FloatButton.Group closeIcon works', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
floatButtonGroup={{ closeIcon: <span className="test-cp-icon">test-cp-icon</span> }}
|
|
>
|
|
<FloatButton.Group trigger="click" open>
|
|
<FloatButton />
|
|
</FloatButton.Group>
|
|
</ConfigProvider>,
|
|
);
|
|
const element = container.querySelector<HTMLSpanElement>('.test-cp-icon');
|
|
expect(element).toBeTruthy();
|
|
});
|
|
|
|
it('should variant config work', () => {
|
|
const { container } = render(
|
|
<ConfigProvider
|
|
input={{ variant: 'filled' }}
|
|
inputNumber={{ variant: 'filled' }}
|
|
textArea={{ variant: 'filled' }}
|
|
mentions={{ variant: 'borderless' }}
|
|
select={{ variant: 'filled' }}
|
|
cascader={{ variant: 'outlined' }}
|
|
treeSelect={{ variant: 'borderless' }}
|
|
datePicker={{ variant: 'filled' }}
|
|
rangePicker={{ variant: 'filled' }}
|
|
timePicker={{ variant: 'borderless' }}
|
|
>
|
|
<Input className="input-variant" />
|
|
<InputNumber className="input-number-variant" />
|
|
<Input.TextArea className="textarea-variant" />
|
|
<Mentions className="mentions-variant" />
|
|
<Select className="select-variant" />
|
|
<Cascader className="cascader-variant" />
|
|
<TreeSelect className="tree-select-variant" />
|
|
<DatePicker className="date-picker-variant" />
|
|
<DatePicker.RangePicker className="range-picker-variant" />
|
|
<TimePicker className="time-picker-variant" />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
expect(container.querySelector('.input-variant')).toHaveClass('ant-input-filled');
|
|
expect(container.querySelector('.input-number-variant')).toHaveClass('ant-input-number-filled');
|
|
expect(container.querySelector('.textarea-variant')).toHaveClass('ant-input-filled');
|
|
expect(container.querySelector('.mentions-variant')).toHaveClass('ant-mentions-borderless');
|
|
expect(container.querySelector('.select-variant')).toHaveClass('ant-select-filled');
|
|
expect(container.querySelector('.cascader-variant')).toHaveClass('ant-select-outlined');
|
|
expect(container.querySelector('.tree-select-variant')).toHaveClass('ant-select-borderless');
|
|
expect(container.querySelector('.date-picker-variant')).toHaveClass('ant-picker-filled');
|
|
expect(container.querySelector('.range-picker-variant')).toHaveClass('ant-picker-filled');
|
|
expect(container.querySelector('.time-picker-variant')).toHaveClass('ant-picker-borderless');
|
|
});
|
|
});
|