import React from 'react'; import { Icon, addIcon, addCollection } from '../../dist/offline'; import renderer from 'react-test-renderer'; const iconData = { body: '', width: 24, height: 24, }; describe('Using storage', () => { 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, 'role': 'img', 'style': {}, 'dangerouslySetInnerHTML': { __html: iconData.body, }, 'width': '1em', 'height': '1em', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height, }, children: null, }); }); test('using storage with icon set', () => { const iconSet = { prefix: 'mdi-light', icons: { account: { body: '', }, home: { body: '', }, }, width: 24, height: 24, }; addCollection(iconSet); 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, 'role': 'img', 'style': {}, 'dangerouslySetInnerHTML': { __html: iconSet.icons.account.body, }, 'width': '1em', 'height': '1em', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconSet.width + ' ' + iconSet.height, }, children: null, }); }); test('using storage with icon set with custom prefix', () => { const iconSet = { prefix: 'mdi-light', icons: { 'account-alert': { body: '', }, 'link': { body: '', }, }, width: 24, height: 24, }; addCollection(iconSet, 'custom-'); 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, 'role': 'img', 'style': {}, 'dangerouslySetInnerHTML': { __html: iconSet.icons.link.body, }, 'width': '1em', 'height': '1em', 'preserveAspectRatio': 'xMidYMid meet', 'viewBox': '0 0 ' + iconSet.width + ' ' + iconSet.height, }, children: null, }); }); test('missing icon from storage', () => { const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchObject({ type: 'span', props: {}, children: null, }); }); });