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

Some contents...

Some contents...

Some contents...

, ); const element = baseElement.querySelector('.ant-modal'); expect(element).toHaveClass('cp-modal'); expect(element).toHaveStyle({ background: 'red' }); }); it('Should Result className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-result'); expect(element).toHaveClass('cp-result'); expect(element).toHaveStyle({ backgroundColor: 'red' }); }); it('Should Radio className & style works', () => { const { container } = render( Radio , ); expect(container.querySelector('.ant-radio-wrapper')).toHaveClass('cp-className'); expect(container.querySelector('.ant-radio-wrapper')).toHaveStyle({ background: 'red' }); }); it('Should Slider className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-slider'); expect(element).toHaveClass('cp-slider'); expect(element).toHaveStyle({ backgroundColor: 'red' }); }); it('Should Anchor className & style works', () => { const { container } = render( , ); expect(container.querySelector('.ant-anchor-wrapper')).toHaveClass('cp-className'); expect(container.querySelector('.ant-anchor-wrapper')).toHaveStyle({ background: 'red' }); }); it('Should Breadcrumb className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-breadcrumb'); expect(element).toHaveClass('cp-breadcrumb'); expect(element).toHaveStyle({ backgroundColor: 'red' }); }); it('Should Checkbox className & style works', () => { const { container } = render( Checkbox , ); expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-checkbox'); expect(container.querySelector('.ant-checkbox-wrapper')).toHaveStyle({ background: 'red' }); }); it('Should Pagination className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-pagination'); expect(element).toHaveClass('cp-pagination'); expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); it('Should Descriptions className & style works', () => { const { container } = render( muxin , ); expect(container.querySelector('.ant-descriptions')).toHaveClass('cp-className'); expect(container.querySelector('.ant-descriptions')).toHaveStyle({ background: 'red' }); }); it('Should Empty className & style works', () => { const { container } = render( , ); expect(container.querySelector('.ant-empty')).toHaveClass('cp-className'); expect(container.querySelector('.ant-empty')).toHaveStyle({ background: 'red' }); }); it('Should Badge className & style & classNames works', () => { const { container } = render( test , ); const element = container.querySelector('.ant-badge'); // test className expect(element).toHaveClass('cp-badge'); expect(element).toHaveClass('cp-badge-root'); expect(element?.querySelector('sup')).toHaveClass('cp-badge-indicator'); // test style expect(element).toHaveStyle({ color: 'yellow' }); expect(element?.querySelector('sup')).toHaveStyle({ color: 'green', backgroundColor: 'blue', }); }); it('Should Rate className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-rate'); expect(element).toHaveClass('cp-rate'); expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); it('Should Switch className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-switch'); expect(element).toHaveClass('cp-switch'); expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); it('Should Avatar className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-avatar'); expect(element).toHaveClass('cp-avatar'); expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); it('Should Tag className & style works', () => { const { container } = render( Test , ); const element = container.querySelector('.ant-tag'); expect(element).toHaveClass('cp-tag'); expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); it('Should Table className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-table-wrapper'); expect(element).toHaveClass('cp-table'); expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); it('Should Card className & style works', () => { const { container } = render( test , ); const element = container.querySelector('.ant-card'); expect(element).toHaveClass('cp-card'); expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); it('Should Tabs className & style works', () => { const { container } = render( , ); const element = container.querySelector('.ant-tabs'); expect(element).toHaveClass('cp-tabs'); expect(element).toHaveStyle({ backgroundColor: 'red' }); }); it('Should message className & style works', () => { const Demo: React.FC = () => { const [messageApi, contextHolder] = message.useMessage(); return ( {contextHolder} ); }; const { container } = render(); fireEvent.click(container.querySelector('button')!); const element = document ?.querySelector('.ant-message') ?.querySelector('.ant-message-notice'); expect(element).toHaveClass('cp-message'); expect(element).toHaveStyle({ color: 'blue' }); }); it('Should Upload className & style works', () => { const { container } = render( upload , ); const element = container?.querySelector('.ant-upload-wrapper'); expect(element).toHaveClass('cp-upload'); expect(element?.querySelector('.ant-upload')).toHaveStyle({ color: 'blue' }); }); it('Should notification className & style works', () => { const Demo: React.FC = () => { const [api, holder] = notification.useNotification(); return ( {holder} ); }; const { container } = render(); fireEvent.click(container.querySelector('button')!); const element = document ?.querySelector('.ant-notification') ?.querySelector('.ant-notification-notice'); expect(element).toHaveClass('cp-notification'); expect(element).toHaveStyle({ color: 'blue' }); }); });