mirror of
https://github.com/iconify/iconify.git
synced 2024-11-10 07:11:00 +00:00
90 lines
3.7 KiB
JavaScript
90 lines
3.7 KiB
JavaScript
import { render } from '@testing-library/svelte';
|
|
import { Icon, addIcon, addCollection } from '../../dist/offline';
|
|
|
|
const iconData = {
|
|
body:
|
|
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
|
|
width: 24,
|
|
height: 24,
|
|
};
|
|
|
|
describe('Using storage', () => {
|
|
test('using storage', () => {
|
|
addIcon('test-icon', iconData);
|
|
|
|
const component = render(Icon, { icon: 'test-icon' });
|
|
const node = component.container.querySelector('svg');
|
|
const html = node.parentNode.innerHTML;
|
|
|
|
expect(html).toEqual(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
|
);
|
|
});
|
|
|
|
test('using storage with icon set', () => {
|
|
const iconSet = {
|
|
prefix: 'mdi-light',
|
|
icons: {
|
|
account: {
|
|
body:
|
|
'<path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"/>',
|
|
},
|
|
home: {
|
|
body:
|
|
'<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
|
|
},
|
|
},
|
|
width: 24,
|
|
height: 24,
|
|
};
|
|
|
|
addCollection(iconSet);
|
|
|
|
const component = render(Icon, { icon: 'mdi-light:account' });
|
|
const node = component.container.querySelector('svg');
|
|
const html = node.parentNode.innerHTML;
|
|
|
|
expect(html).toEqual(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
|
|
);
|
|
});
|
|
|
|
test('using storage with icon set with custom prefix', () => {
|
|
const iconSet = {
|
|
prefix: 'mdi-light',
|
|
icons: {
|
|
'account-alert': {
|
|
body:
|
|
'<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
|
|
},
|
|
'link': {
|
|
body:
|
|
'<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
|
|
},
|
|
},
|
|
width: 24,
|
|
height: 24,
|
|
};
|
|
|
|
addCollection(iconSet, 'custom-');
|
|
|
|
const component = render(Icon, { icon: 'custom-link' });
|
|
const node = component.container.querySelector('svg');
|
|
const html = node.parentNode.innerHTML;
|
|
|
|
expect(html).toEqual(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
|
|
);
|
|
});
|
|
|
|
test('missing icon from storage', () => {
|
|
const component = render(Icon, {
|
|
icon: 'missing-icon',
|
|
});
|
|
const html = component.container.innerHTML;
|
|
|
|
// Empty container div
|
|
expect(html).toEqual('<div></div>');
|
|
});
|
|
});
|