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