2023-05-05 20:52:44 +08:00
|
|
|
import React from 'react';
|
2022-11-18 09:55:42 +08:00
|
|
|
import { SmileOutlined } from '@ant-design/icons';
|
2022-02-18 14:17:32 +08:00
|
|
|
import ConfigProvider from '..';
|
|
|
|
import Button from '../../button';
|
2022-06-09 10:42:22 +08:00
|
|
|
import Divider from '../../divider';
|
2022-10-11 21:33:29 +08:00
|
|
|
import { render } from '../../../tests/utils';
|
2022-02-18 14:17:32 +08:00
|
|
|
|
|
|
|
describe('ConfigProvider.DynamicTheme', () => {
|
|
|
|
beforeEach(() => {
|
2022-11-18 09:55:42 +08:00
|
|
|
Array.from(document.querySelectorAll('style')).forEach((style) => {
|
2022-02-18 14:17:32 +08:00
|
|
|
style.parentNode?.removeChild(style);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('customize primary color', () => {
|
2022-10-11 21:33:29 +08:00
|
|
|
render(
|
2022-02-18 14:17:32 +08:00
|
|
|
<ConfigProvider
|
|
|
|
theme={{
|
|
|
|
token: {
|
2022-07-20 18:35:09 +08:00
|
|
|
colorPrimary: '#f00000',
|
2022-02-18 14:17:32 +08:00
|
|
|
},
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Button />
|
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
|
|
|
|
|
|
|
const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
|
|
|
|
|
|
|
|
expect(
|
2022-11-18 09:55:42 +08:00
|
|
|
dynamicStyles.some((style) => {
|
2022-02-18 14:17:32 +08:00
|
|
|
const { innerHTML } = style;
|
|
|
|
return (
|
2022-07-15 19:27:29 +08:00
|
|
|
innerHTML.includes('.ant-btn-primary') && innerHTML.includes('background-color:#f00000')
|
2022-02-18 14:17:32 +08:00
|
|
|
);
|
|
|
|
}),
|
|
|
|
).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('not crash on null token', () => {
|
|
|
|
expect(() => {
|
2022-10-11 21:33:29 +08:00
|
|
|
render(
|
2022-02-18 14:17:32 +08:00
|
|
|
<ConfigProvider
|
|
|
|
theme={{
|
|
|
|
token: null as any,
|
|
|
|
}}
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
}).not.toThrow();
|
|
|
|
});
|
2022-06-09 10:42:22 +08:00
|
|
|
|
|
|
|
it('should support overriding aliasToken', () => {
|
2022-10-11 21:33:29 +08:00
|
|
|
render(
|
2022-06-09 10:42:22 +08:00
|
|
|
<ConfigProvider
|
|
|
|
theme={{
|
2022-09-15 21:26:04 +08:00
|
|
|
token: {
|
|
|
|
colorSplit: 'blue',
|
2022-06-09 10:42:22 +08:00
|
|
|
},
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Divider />
|
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
|
|
|
|
|
|
|
const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
|
|
|
|
|
|
|
|
expect(
|
2022-11-18 09:55:42 +08:00
|
|
|
dynamicStyles.some((style) => {
|
2022-06-09 10:42:22 +08:00
|
|
|
const { innerHTML } = style;
|
|
|
|
return (
|
|
|
|
innerHTML.includes('.ant-divider') && innerHTML.includes('border-block-start:0 blue')
|
|
|
|
);
|
|
|
|
}),
|
|
|
|
).toBeTruthy();
|
|
|
|
});
|
2022-11-18 09:55:42 +08:00
|
|
|
|
|
|
|
it('should support iconPrefixCls', () => {
|
|
|
|
const { container } = render(
|
|
|
|
<ConfigProvider iconPrefixCls="test-icon">
|
|
|
|
<SmileOutlined />
|
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(container.querySelector('.test-icon')).toBeTruthy();
|
|
|
|
|
|
|
|
const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
|
|
|
|
expect(
|
|
|
|
dynamicStyles.some((style) => {
|
|
|
|
const { innerHTML } = style;
|
|
|
|
return innerHTML.includes('.test-icon');
|
|
|
|
}),
|
|
|
|
).toBeTruthy();
|
|
|
|
});
|
2022-02-18 14:17:32 +08:00
|
|
|
});
|