import { defaultIconProps } from '@iconify/utils/lib/icon/defaults';
import {
cleanupGlobals,
expectedBlock,
expectedInline,
setupDOM,
} from '../src/tests/helpers';
import { updateStyle } from '../src/render/style';
import { renderIcon } from '../src/render/icon';
import { defaultCustomisations } from '../src/attributes/customisations';
describe('Testing rendering loaded icon', () => {
afterEach(cleanupGlobals);
it('Render as SVG', () => {
// Setup DOM
const doc = setupDOM('').window.document;
// Create container node and add style
const node = doc.createElement('div');
updateStyle(node, false);
// Render SVG
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
...defaultIconProps,
body: '',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
},
});
// Test HTML
expect(node.innerHTML).toBe(
``
);
// Replace icon content
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
...defaultIconProps,
width: 24,
height: 24,
body: '',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
rotate: 1,
height: 'auto',
},
});
// Test HTML
expect(node.innerHTML).toBe(
``
);
});
it('SVG with custom preserveAspectRatio', () => {
// Setup DOM
const doc = setupDOM('').window.document;
// Create container node and add style
const node = doc.createElement('div');
updateStyle(node, false);
// Render SVG
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
...defaultIconProps,
body: '',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
preserveAspectRatio: 'xMidYMid meet',
},
});
// Test HTML
expect(node.innerHTML).toBe(
``
);
});
it('Render as SPAN', () => {
// Setup DOM
const doc = setupDOM('').window.document;
// Create container node and add style
const node = doc.createElement('div');
updateStyle(node, true);
// Render SVG
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
...defaultIconProps,
body: '',
},
},
renderedMode: 'mask',
inline: true,
customisations: {
...defaultCustomisations,
},
});
// Test HTML
expect(node.innerHTML).toBe(
``
);
// Change mode to background, add some customisations
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
...defaultIconProps,
body: '',
},
},
renderedMode: 'bg',
inline: true,
customisations: {
...defaultCustomisations,
width: 24,
},
});
// Test HTML
expect(node.innerHTML).toBe(
``
);
});
});