import React from 'react'; import { Icon, InlineIcon, addIcon } from '../'; import renderer from 'react-test-renderer'; const iconData = { body: '', width: 24, height: 24, }; const iconDataWithID = { body: '', width: 128, height: 128, }; describe('Creating component', () => { test('basic icon', () => { const component = renderer.create(); 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, 'focusable': false, '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(); 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, 'focusable': false, '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, }); }); test('using storage', () => { addIcon('test-icon', iconData); const component = renderer.create(); 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, 'focusable': false, 'role': 'img', 'style': {}, 'dangerouslySetInnerHTML': { __html: iconData.body, }, 'width': '1em', 'height': '1em', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height, }, children: null, }); }); test('missing icon from storage', () => { const component = renderer.create(); const tree = component.toJSON(); expect(tree).toStrictEqual(null); }); test('replacing id', () => { const component = renderer.create(); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconDataWithID.body); }); }); describe('Passing attributes', () => { test('title', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.title).toStrictEqual('Icon!'); }); test('aria-hidden', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props['aria-hidden']).toStrictEqual(void 0); }); test('ariaHidden', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props['aria-hidden']).toStrictEqual(void 0); }); test('style', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.style).toMatchObject({ verticalAlign: '0', color: 'red', }); }); test('color', () => { const component = renderer.create(); const tree = component.toJSON(); expect(tree.props.style).toMatchObject({ color: 'red', }); }); test('color with style', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.style).toMatchObject({ color: 'red', }); }); test('attributes that cannot change', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.viewBox).toStrictEqual('0 0 24 24'); expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMid meet'); }); }); describe('Dimensions', () => { test('height', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.height).toStrictEqual('48'); expect(tree.props.width).toStrictEqual('48'); }); test('width and height', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.height).toStrictEqual('48'); expect(tree.props.width).toStrictEqual('32'); }); test('auto', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.height).toStrictEqual('24'); expect(tree.props.width).toStrictEqual('24'); }); }); describe('Rotation', () => { test('number', () => { const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconData.body); expect(body).toMatch('rotate(90 '); }); test('string', () => { const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconData.body); expect(body).toMatch('rotate(180 '); }); }); describe('Flip', () => { test('boolean', () => { const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconData.body); expect(body).toMatch('scale(-1 1)'); }); test('string', () => { const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconData.body); expect(body).toMatch('scale(1 -1)'); }); test('string and boolean', () => { const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconData.body); // horizontal + vertical = 180deg rotation expect(body).toMatch('rotate(180 '); }); test('string for boolean attribute', () => { const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconData.body); expect(body).toMatch('scale(-1 1)'); }); test('shorthand and boolean', () => { // 'flip' is processed after 'hFlip', overwriting value const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconData.body); expect(body).toMatch('scale(-1 1)'); }); test('shorthand and boolean as string', () => { const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toStrictEqual(iconData.body); // horizontal + vertical = 180deg rotation expect(body).toMatch('rotate(180 '); }); test('wrong case', () => { const component = renderer.create( ); const tree = component.toJSON(); const body = tree.props.dangerouslySetInnerHTML.__html; expect(body).not.toMatch('scale('); }); }); describe('Alignment and slice', () => { test('vAlign and slice', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMin slice'); }); test('string', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.preserveAspectRatio).toStrictEqual('xMinYMax meet'); }); }); describe('Inline attribute', () => { test('string', () => { const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.style.verticalAlign).toStrictEqual('-0.125em'); }); test('false string', () => { // "false" = true const component = renderer.create( ); const tree = component.toJSON(); expect(tree.props.style.verticalAlign).toStrictEqual('-0.125em'); }); });