mirror of
https://github.com/iconify/iconify.git
synced 2024-12-13 22:18:24 +00:00
158 lines
3.9 KiB
TypeScript
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("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"); 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("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"); width: 24px; height: 24px; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
|
|
);
|
|
});
|
|
});
|