2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-13 22:18:24 +00:00
iconify/iconify-icon/icon/tests/render-icon-test.ts
2022-09-07 21:25:59 +03:00

158 lines
3.9 KiB
TypeScript

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: '<g />',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
},
});
// Test HTML
expect(node.innerHTML).toBe(
`<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g></g></svg>`
);
// Replace icon content
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
...defaultIconProps,
width: 24,
height: 24,
body: '<g><path d="" /></g>',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
rotate: 1,
height: 'auto',
},
});
// Test HTML
expect(node.innerHTML).toBe(
`<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g><path d=""></path></g></g></svg>`
);
});
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: '<g />',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
preserveAspectRatio: 'xMidYMid meet',
},
});
// Test HTML
expect(node.innerHTML).toBe(
`<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet"><g></g></svg>`
);
});
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: '<g />',
},
},
renderedMode: 'mask',
inline: true,
customisations: {
...defaultCustomisations,
},
});
// Test HTML
expect(node.innerHTML).toBe(
`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; background-color: currentColor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%;"></span>`
);
// Change mode to background, add some customisations
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
...defaultIconProps,
body: '<g />',
},
},
renderedMode: 'bg',
inline: true,
customisations: {
...defaultCustomisations,
width: 24,
},
});
// Test HTML
expect(node.innerHTML).toBe(
`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 24px; height: 24px; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
);
});
});