import { render } from '@testing-library/svelte';
import Icon, { addIcon, addCollection } from '../../dist/offline';
const iconData = {
body: '',
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(
''
);
});
test('using storage with icon set', () => {
const iconSet = {
prefix: 'mdi-light',
icons: {
account: {
body: '',
},
home: {
body: '',
},
},
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(
''
);
});
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 = render(Icon, { icon: 'custom-link' });
const node = component.container.querySelector('svg');
const html = node.parentNode.innerHTML;
expect(html).toEqual(
''
);
});
test('missing icon from storage', () => {
const component = render(Icon, {
icon: 'missing-icon',
});
const html = component.container.innerHTML;
// Empty container div
expect(html).toEqual('');
});
});