2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-14 06:28:24 +00:00
iconify/iconify-icon/icon/tests/render-icon-test.ts

159 lines
4.0 KiB
TypeScript
Raw Normal View History

2022-06-19 14:47:45 +00:00
import { defaultIconProps } from '@iconify/utils/lib/icon/defaults';
2022-04-29 20:19:22 +00:00
import {
cleanupGlobals,
expectedBlock,
expectedInline,
setupDOM,
styleOpeningTag,
} from '../src/tests/helpers';
2022-04-29 20:19:22 +00:00
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: {
2022-06-19 14:47:45 +00:00
...defaultIconProps,
2022-04-29 20:19:22 +00:00
body: '<g />',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
},
});
// Test HTML
expect(node.innerHTML).toBe(
`${styleOpeningTag}${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g></g></svg>`
2022-04-29 20:19:22 +00:00
);
// Replace icon content
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
2022-06-19 14:47:45 +00:00
...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(
`${styleOpeningTag}${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: {
2022-06-19 14:47:45 +00:00
...defaultIconProps,
body: '<g />',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
preserveAspectRatio: 'xMidYMid meet',
},
});
// Test HTML
expect(node.innerHTML).toBe(
`${styleOpeningTag}${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>`
2022-04-29 20:19:22 +00:00
);
});
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: {
2022-06-19 14:47:45 +00:00
...defaultIconProps,
2022-04-29 20:19:22 +00:00
body: '<g />',
},
},
renderedMode: 'mask',
inline: true,
customisations: {
...defaultCustomisations,
},
});
// Test HTML
expect(node.innerHTML).toBe(
`${styleOpeningTag}${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>`
2022-04-29 20:19:22 +00:00
);
// Change mode to background, add some customisations
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
2022-06-19 14:47:45 +00:00
...defaultIconProps,
2022-04-29 20:19:22 +00:00
body: '<g />',
},
},
renderedMode: 'bg',
inline: true,
customisations: {
...defaultCustomisations,
width: 24,
},
});
// Test HTML
expect(node.innerHTML).toBe(
`${styleOpeningTag}${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>`
2022-04-29 20:19:22 +00:00
);
});
});