ant-design/components/icon/__tests__/index.test.js

109 lines
2.9 KiB
JavaScript
Raw Normal View History

2016-12-14 14:48:09 +08:00
import React from 'react';
2017-09-15 10:50:45 +08:00
import { render } from 'enzyme';
import Icon from '..';
2016-12-14 14:48:09 +08:00
describe('Icon', () => {
2018-07-23 09:55:13 +08:00
it('should render to a <i class="xxx"><svg>...</svg></i>', () => {
2017-09-15 10:50:45 +08:00
const wrapper = render(
2018-07-23 09:55:13 +08:00
<Icon type="message" className="my-icon-classname" />
2017-09-15 10:50:45 +08:00
);
expect(wrapper).toMatchSnapshot();
2016-12-14 14:48:09 +08:00
});
2018-08-14 17:37:23 +08:00
2018-08-15 17:21:02 +08:00
it('should render correctly with rotate, flip, viewBox props', () => {
2018-08-14 17:37:23 +08:00
const wrapper = render(
<Icon type="setting" rotate={127} flip="both" viewBox="0 0 24 24" />
);
expect(wrapper).toMatchSnapshot();
});
2018-08-15 17:21:02 +08:00
it('should support pass svg paths as children', () => {
const wrapper = render(
<Icon viewBox="0 0 24 24">
2018-08-14 17:37:23 +08:00
<title>Cool Home</title>
2018-08-15 17:21:02 +08:00
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</Icon>
2018-08-14 17:37:23 +08:00
);
2018-08-15 17:21:02 +08:00
expect(wrapper).toMatchSnapshot();
});
2018-08-14 17:37:23 +08:00
2018-08-15 17:21:02 +08:00
it('should give warning and render <i>{null}</i>', () => {
2018-08-14 17:37:23 +08:00
const wrapper = render(
2018-08-15 17:21:02 +08:00
<Icon viewBox="0 0 24 24" />
2018-08-14 17:37:23 +08:00
);
expect(wrapper).toMatchSnapshot();
});
2018-08-15 17:21:02 +08:00
describe('`component` prop', () => {
it('can access to svg defs if has children', () => {
const wrapper = render(
<Icon
className="my-home-icon"
component={svgProps => (
<svg {...svgProps}>
<defs>
<linearGradient id="gradient">
<stop offset="20%" stopColor="#39F" />
<stop offset="90%" stopColor="#F3F" />
</linearGradient>
</defs>
{
React.Children.map(
svgProps.children,
child => React.cloneElement(
child,
child.type === 'path' ? { fill: 'url(#gradient)' } : {}
)
)
}
</svg>
)}
>
<title>Cool Home</title>
<path d="'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'" />
</Icon>
);
expect(wrapper).toMatchSnapshot();
});
});
it('should support svg react component', () => {
const SvgComponent = props => (
<svg viewBox="0 0 24 24" {...props}>
<title>Cool Home</title>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</svg>
);
2018-08-14 17:37:23 +08:00
const wrapper = render(
2018-08-15 17:21:02 +08:00
<Icon
2018-08-14 17:37:23 +08:00
className="my-home-icon"
2018-08-15 17:21:02 +08:00
component={SvgComponent}
>
<title>Cool Home</title>
<path d="'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'" />
</Icon>
);
expect(wrapper).toMatchSnapshot();
});
});
describe('Icon.createFromIconfontCN()', () => {
const IconFont = Icon.createFromIconfontCN({
2018-08-15 17:21:02 +08:00
namespace: 'iconfont-foo',
cdnUrl: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi',
2018-08-15 17:21:02 +08:00
prefix: 'icon-',
});
it('should support iconfont.cn', () => {
const wrapper = render(
<div className="icons-list">
<IconFont type="tuichu" />
<IconFont type="facebook" />
<IconFont type="twitter" />
</div>
2018-08-14 17:37:23 +08:00
);
expect(wrapper).toMatchSnapshot();
});
2016-12-14 14:48:09 +08:00
});