ant-design/components/config-provider/__tests__/nonce.test.tsx

99 lines
2.7 KiB
TypeScript
Raw Normal View History

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);
});
});
2022-03-08 14:01:53 +08:00
describe('csp', () => {
it('raw', () => {
render(
2022-03-08 14:01:53 +08:00
<ConfigProvider csp={{ nonce: 'little' }}>
<SmileOutlined />
</ConfigProvider>,
);
const styleNode = document.querySelector('style');
expect(styleNode?.nonce).toEqual('little');
2022-03-08 14:01:53 +08:00
});
2022-03-08 14:01:53 +08:00
it('mix with iconPrefixCls', () => {
const { container } = render(
2022-03-08 14:01:53 +08:00
<ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
<SmileOutlined />
</ConfigProvider>,
);
const styleNode = document.querySelector('style');
expect(container.querySelector('.bamboo-smile')).toBeTruthy();
expect(styleNode?.nonce).toEqual('light');
2022-03-08 14:01:53 +08:00
});
});
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');
});
});
});