mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 04:48:02 +08:00
863f61d908
Co-authored-by: afc163 <afc163@gmail.com>
99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { createCache, StyleProvider } from '@ant-design/cssinjs';
|
|
import { SmileOutlined } from '@ant-design/icons';
|
|
import IconContext from '@ant-design/icons/lib/components/Context';
|
|
|
|
import ConfigProvider from '..';
|
|
import { render } from '../../../tests/utils';
|
|
import Button from '../../button';
|
|
|
|
describe('ConfigProvider.Icon', () => {
|
|
beforeEach(() => {
|
|
expect(document.querySelectorAll('style')).toHaveLength(0);
|
|
});
|
|
|
|
afterEach(() => {
|
|
document.querySelectorAll('style').forEach((style) => {
|
|
style.parentNode?.removeChild(style);
|
|
});
|
|
});
|
|
|
|
describe('csp', () => {
|
|
it('raw', () => {
|
|
render(
|
|
<ConfigProvider csp={{ nonce: 'little' }}>
|
|
<SmileOutlined />
|
|
</ConfigProvider>,
|
|
);
|
|
const styleNode = document.querySelector('style');
|
|
expect(styleNode?.nonce).toEqual('little');
|
|
});
|
|
|
|
it('mix with iconPrefixCls', () => {
|
|
const { container } = render(
|
|
<ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
|
|
<SmileOutlined />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const styleNode = document.querySelector('style');
|
|
|
|
expect(container.querySelector('.bamboo-smile')).toBeTruthy();
|
|
expect(styleNode?.nonce).toEqual('light');
|
|
});
|
|
});
|
|
|
|
it('nest', () => {
|
|
const Checker = () => {
|
|
const { csp } = React.useContext(IconContext);
|
|
return <div id="csp">{csp?.nonce}</div>;
|
|
};
|
|
|
|
const { container } = render(
|
|
<ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
|
|
<ConfigProvider>
|
|
<SmileOutlined />
|
|
<Checker />
|
|
</ConfigProvider>
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const styleNode = document.querySelector('style');
|
|
|
|
expect(container.querySelector('.bamboo-smile')).toBeTruthy();
|
|
expect(styleNode?.nonce).toEqual('light');
|
|
expect(container.querySelector('#csp')?.innerHTML).toEqual('light');
|
|
});
|
|
|
|
it('cssinjs should support nonce', () => {
|
|
render(
|
|
<StyleProvider cache={createCache()}>
|
|
<ConfigProvider csp={{ nonce: 'bamboo' }}>
|
|
<Button />
|
|
</ConfigProvider>
|
|
</StyleProvider>,
|
|
);
|
|
|
|
const styleList = Array.from(document.querySelectorAll('style'));
|
|
|
|
expect(styleList.length).toBeTruthy();
|
|
styleList.forEach((style) => {
|
|
expect(style.nonce).toEqual('bamboo');
|
|
});
|
|
});
|
|
|
|
it('nonce applies to all style tags', () => {
|
|
render(
|
|
<ConfigProvider csp={{ nonce: 'bamboo' }} theme={{ token: { borderRadius: 2 } }}>
|
|
<Button />
|
|
</ConfigProvider>,
|
|
);
|
|
|
|
const styleNodes = document.querySelectorAll('style');
|
|
|
|
styleNodes.forEach((node) => {
|
|
expect(node?.nonce).toEqual('bamboo');
|
|
});
|
|
});
|
|
});
|