import React from 'react'; import { Icon, InlineIcon } from '../../dist/offline'; import renderer from 'react-test-renderer'; const iconData = { body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>', width: 24, height: 24, }; describe('Creating component', () => { test('basic icon', () => { const component = renderer.create(<Icon icon={iconData} />); const tree = component.toJSON(); expect(tree).toMatchObject({ type: 'svg', props: { 'xmlns': 'http://www.w3.org/2000/svg', 'xmlnsXlink': 'http://www.w3.org/1999/xlink', 'aria-hidden': true, 'role': 'img', 'style': {}, 'dangerouslySetInnerHTML': { __html: iconData.body, }, 'width': '1em', 'height': '1em', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height, }, children: null, }); }); test('inline icon', () => { const component = renderer.create(<InlineIcon icon={iconData} />); const tree = component.toJSON(); expect(tree).toMatchObject({ type: 'svg', props: { 'xmlns': 'http://www.w3.org/2000/svg', 'xmlnsXlink': 'http://www.w3.org/1999/xlink', 'aria-hidden': true, 'role': 'img', 'style': { verticalAlign: '-0.125em', }, 'dangerouslySetInnerHTML': { __html: iconData.body, }, 'width': '1em', 'height': '1em', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height, }, children: null, }); }); });