2016-12-14 14:48:09 +08:00
|
|
|
import React from 'react';
|
2017-09-15 10:50:45 +08:00
|
|
|
import { render } from 'enzyme';
|
2017-05-18 14:22:47 +08:00
|
|
|
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();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-08-16 15:22:38 +08:00
|
|
|
describe('Icon.createFromIconfontCN()', () => {
|
|
|
|
const IconFont = Icon.createFromIconfontCN({
|
2018-08-15 17:21:02 +08:00
|
|
|
namespace: 'iconfont-foo',
|
2018-08-16 15:22:38 +08:00
|
|
|
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
|
|
|
});
|