mirror of
https://github.com/iconify/iconify.git
synced 2024-12-13 22:18:24 +00:00
1050 lines
30 KiB
TypeScript
1050 lines
30 KiB
TypeScript
import mocha from 'mocha';
|
|
import chai from 'chai';
|
|
|
|
import { getNode } from './node';
|
|
import {
|
|
addFinder,
|
|
findPlaceholders,
|
|
} from '@iconify/iconify/lib/modules/finder';
|
|
import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify';
|
|
import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-icon';
|
|
import { getStorage, addIconSet, getIcon } from '@iconify/core/lib/storage';
|
|
import { renderIcon } from '@iconify/iconify/lib/modules/render';
|
|
import { stringToIcon } from '@iconify/core/lib/icon/name';
|
|
import { IconifyElement } from '@iconify/iconify/lib/modules/element';
|
|
|
|
const expect = chai.expect;
|
|
|
|
// Add finders
|
|
addFinder(iconifyIconFinder);
|
|
addFinder(iconifyFinder);
|
|
|
|
describe('Testing renderer', () => {
|
|
// Add mentioned icons to storage
|
|
const storage = getStorage('', 'mdi');
|
|
addIconSet(storage, {
|
|
prefix: 'mdi',
|
|
icons: {
|
|
'account-box': {
|
|
body:
|
|
'<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>',
|
|
},
|
|
'account-cash': {
|
|
body:
|
|
'<path d="M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7z" fill="currentColor"/>',
|
|
},
|
|
'account': {
|
|
body:
|
|
'<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
|
|
},
|
|
'home': {
|
|
body:
|
|
'<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
|
|
},
|
|
},
|
|
width: 24,
|
|
height: 24,
|
|
});
|
|
|
|
it('Convert placeholders to SVG', () => {
|
|
const node = getNode('renderer');
|
|
node.innerHTML =
|
|
'<div><p>Testing renderer v2</p><ul>' +
|
|
'<li>Inline icons:<br />' +
|
|
' Red icon with red border: <span class="iconify-inline" data-icon="mdi:home" style="color: red; border: 1px solid red;"></span><br />' +
|
|
' No vertical-align, green border: <i class="iconify test-icon iconify-inline iconify--mdi-account" data-icon="mdi:account" style="vertical-align: 0;" data-flip="horizontal" aria-hidden="false"></i>' +
|
|
'</li>' +
|
|
'<li>Block icons:' +
|
|
' <iconify-icon data-icon="mdi-account-cash" title="<Cash>!"></iconify-icon>' +
|
|
' <span class="iconify-icon" data-icon="mdi:account" data-flip="vertical" data-width="auto"></span>' +
|
|
'</li>' +
|
|
'<li>Changed by attribute:' +
|
|
' <iconify-icon data-icon="mdi:account-box" data-inline="true" data-rotate="2" data-width="42"></iconify-icon>' +
|
|
'</li>' +
|
|
'<li>Mix of classes:' +
|
|
' <i class="iconify iconify-icon should-be-block" data-icon="mdi:home"></i>' +
|
|
'</li>' +
|
|
'</ul></div>';
|
|
|
|
// Get items
|
|
const items = findPlaceholders(node);
|
|
expect(items.length).to.be.equal(6);
|
|
|
|
// Test finders to make sure icons are in correct order
|
|
expect(items[0].finder).to.be.equal(iconifyIconFinder);
|
|
expect(items[1].finder).to.be.equal(iconifyIconFinder);
|
|
expect(items[2].finder).to.be.equal(iconifyIconFinder);
|
|
expect(items[3].finder).to.be.equal(iconifyIconFinder);
|
|
expect(items[4].finder).to.be.equal(iconifyFinder);
|
|
expect(items[5].finder).to.be.equal(iconifyFinder);
|
|
|
|
/**
|
|
* Test third icon (first 2 should be last)
|
|
*/
|
|
let element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'account-cash',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyIconFinder);
|
|
|
|
// Get and test customisations
|
|
let customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
});
|
|
|
|
// Get icon data
|
|
let iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
let svg = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData
|
|
) as IconifyElement;
|
|
|
|
// Test SVG
|
|
expect(svg.tagName.toUpperCase()).to.be.equal('SVG');
|
|
expect(svg.getAttribute('viewBox')).to.be.equal('0 0 24 24');
|
|
expect(svg.getAttribute('height')).to.be.equal('1em');
|
|
expect(svg.getAttribute('data-icon')).to.be.equal('mdi-account-cash'); // name should stay as is
|
|
expect(svg.getAttribute('class')).to.be.equal('iconify iconify--mdi');
|
|
expect(svg.getAttribute('title')).to.be.equal('<Cash>!'); // title, unescaped
|
|
expect(svg.style.verticalAlign).to.be.equal('');
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi-account-cash');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
/**
|
|
* Test fourth item
|
|
*/
|
|
element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'account',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyIconFinder);
|
|
|
|
// Get and test customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
vFlip: true,
|
|
width: 'auto',
|
|
});
|
|
|
|
// Get icon data
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
|
|
// Test SVG
|
|
expect(svg.tagName.toUpperCase()).to.be.equal('SVG');
|
|
expect(svg.getAttribute('viewBox')).to.be.equal('0 0 24 24');
|
|
expect(svg.getAttribute('height')).to.be.equal('24');
|
|
expect(svg.getAttribute('data-icon')).to.be.equal('mdi:account');
|
|
expect(svg.getAttribute('class')).to.be.equal(
|
|
'iconify iconify--mdi iconify-icon'
|
|
);
|
|
|
|
// Block
|
|
expect(svg.style.verticalAlign).to.be.equal('');
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:account');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
/**
|
|
* Test fifth icon
|
|
*/
|
|
element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'account-box',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyIconFinder);
|
|
|
|
// Get and test customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: true,
|
|
rotate: 2,
|
|
width: '42',
|
|
});
|
|
|
|
// Get icon data
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
|
|
// Test SVG
|
|
expect(svg.tagName.toUpperCase()).to.be.equal('SVG');
|
|
expect(svg.getAttribute('viewBox')).to.be.equal('0 0 24 24');
|
|
expect(svg.getAttribute('height')).to.be.equal('42');
|
|
expect(svg.getAttribute('data-icon')).to.be.equal('mdi:account-box');
|
|
expect(svg.getAttribute('class')).to.be.equal('iconify iconify--mdi');
|
|
|
|
// IE rounds value
|
|
let verticalAlign = svg.style.verticalAlign;
|
|
expect(
|
|
verticalAlign === '-0.125em' || verticalAlign === '-0.12em'
|
|
).to.be.equal(true, 'Invalid vertical-align value: ' + verticalAlign);
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:account-box');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
// Save SVG for rotation test below
|
|
const rotationSVG = svg;
|
|
|
|
/**
|
|
* Test sixth icon
|
|
*/
|
|
element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyIconFinder);
|
|
|
|
// Get and test customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
});
|
|
|
|
// Get icon data
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
|
|
// Test SVG
|
|
expect(svg.tagName.toUpperCase()).to.be.equal('SVG');
|
|
expect(svg.getAttribute('viewBox')).to.be.equal('0 0 24 24');
|
|
expect(svg.getAttribute('height')).to.be.equal('1em');
|
|
expect(svg.getAttribute('data-icon')).to.be.equal('mdi:home');
|
|
expect(svg.getAttribute('class')).to.be.equal(
|
|
'iconify iconify--mdi iconify-icon should-be-block'
|
|
);
|
|
|
|
// Block
|
|
expect(svg.style.verticalAlign).to.be.equal('');
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:home');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
/**
|
|
* Test first icon
|
|
*/
|
|
element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyFinder);
|
|
|
|
// Get and test customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: true,
|
|
});
|
|
|
|
// Get icon data
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
|
|
// Test SVG
|
|
expect(svg.tagName.toUpperCase()).to.be.equal('SVG');
|
|
expect(svg.getAttribute('viewBox')).to.be.equal('0 0 24 24');
|
|
expect(svg.getAttribute('width')).to.be.equal('1em');
|
|
expect(svg.getAttribute('data-icon')).to.be.equal('mdi:home');
|
|
expect(svg.getAttribute('class')).to.be.equal(
|
|
'iconify iconify--mdi iconify-inline'
|
|
);
|
|
expect(svg.style.color).to.be.equal('red'); // color from inline style
|
|
expect(svg.style.borderWidth).to.be.equal('1px'); // border from inline style
|
|
|
|
// IE rounds value
|
|
verticalAlign = svg.style.verticalAlign;
|
|
expect(
|
|
verticalAlign === '-0.125em' || verticalAlign === '-0.12em'
|
|
).to.be.equal(true, 'Invalid vertical-align value: ' + verticalAlign);
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:home');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
/**
|
|
* Test second item
|
|
*/
|
|
element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'account',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyFinder);
|
|
|
|
// Get and test customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: true,
|
|
hFlip: true,
|
|
});
|
|
|
|
// Set style
|
|
element.element.style.border = '1px solid green';
|
|
|
|
// Get icon data
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
|
|
// Test SVG
|
|
expect(svg.tagName.toUpperCase()).to.be.equal('SVG');
|
|
expect(svg.getAttribute('viewBox')).to.be.equal('0 0 24 24');
|
|
expect(svg.getAttribute('height')).to.be.equal('1em');
|
|
expect(svg.getAttribute('data-icon')).to.be.equal('mdi:account');
|
|
expect(svg.getAttribute('class')).to.be.equal(
|
|
'iconify iconify--mdi test-icon iconify-inline'
|
|
); // add 'test-icon' class, remove 'iconify--mdi-account'
|
|
expect(svg.style.verticalAlign).to.be.equal('0px'); // inline style overrides verticalAlign from data-align attribute
|
|
expect(svg.style.borderWidth).to.be.equal('1px'); // style set via DOM
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:account');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
// All placeholder should have been replaced
|
|
expect(items).to.be.eql([]);
|
|
expect(findPlaceholders(node)).to.be.eql([]);
|
|
|
|
/**
|
|
* Test finding modified SVG
|
|
*/
|
|
// Remove rotation
|
|
rotationSVG.removeAttribute('data-rotate');
|
|
const items2 = findPlaceholders(node);
|
|
expect(items2.length).to.be.equal(1);
|
|
|
|
element = items2.shift();
|
|
expect(element.element).to.be.equal(rotationSVG);
|
|
expect(element.customisations).to.be.eql({
|
|
inline: true,
|
|
width: '42',
|
|
});
|
|
});
|
|
|
|
it('Change attributes', () => {
|
|
const node = getNode('renderer');
|
|
node.innerHTML =
|
|
'<div>Testing attributes v2: <span class="iconify-inline" data-icon="mdi:home" data-flip="horizontal" style="color: red; box-shadow: 0 0 2px black;"></span></div>';
|
|
|
|
// Get items
|
|
const items = findPlaceholders(node);
|
|
expect(items.length).to.be.equal(1);
|
|
|
|
/**
|
|
* Test icon
|
|
*/
|
|
let element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyFinder);
|
|
|
|
// Get and test customisations
|
|
let customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: true,
|
|
hFlip: true,
|
|
});
|
|
|
|
// Get icon data
|
|
let iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
let svg = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData
|
|
) as IconifyElement;
|
|
|
|
// Test SVG
|
|
expect(svg.tagName.toUpperCase()).to.be.equal('SVG');
|
|
expect(svg.getAttribute('viewBox')).to.be.equal('0 0 24 24');
|
|
expect(svg.getAttribute('width')).to.be.equal('1em');
|
|
expect(svg.getAttribute('data-icon')).to.be.equal('mdi:home');
|
|
expect(svg.getAttribute('class')).to.be.equal(
|
|
'iconify iconify--mdi iconify-inline'
|
|
);
|
|
expect(svg.style.color).to.be.equal('red'); // color from inline style
|
|
|
|
// IE rounds value
|
|
let verticalAlign = svg.style.verticalAlign;
|
|
expect(
|
|
verticalAlign === '-0.125em' || verticalAlign === '-0.12em'
|
|
).to.be.equal(true, 'Invalid vertical-align value: ' + verticalAlign);
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:home');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
// Copy variables for next test
|
|
let lastElement = element;
|
|
let lastCustomisations = customisations;
|
|
let lastSVG = svg;
|
|
|
|
/**
|
|
* Render SVG without changes
|
|
*/
|
|
// Create new element
|
|
element = {
|
|
element: svg,
|
|
finder: element.finder,
|
|
name: stringToIcon(element.finder.name(svg) as string),
|
|
};
|
|
expect(element).to.not.be.eql(lastElement); // different 'element' property
|
|
expect(element.name).to.be.eql(lastElement.name);
|
|
|
|
// Get customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql(lastCustomisations); // customisations were not changed
|
|
expect(customisations).to.be.eql({
|
|
inline: true,
|
|
hFlip: true,
|
|
});
|
|
|
|
// Get icon data and render SVG
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
expect(svg).to.not.be.eql(lastSVG);
|
|
|
|
// Test attributes, compare them with last SVG
|
|
expect(svg.tagName.toUpperCase()).to.be.equal('SVG');
|
|
[
|
|
'aria-hidden',
|
|
'focusable',
|
|
'role',
|
|
'width',
|
|
'height',
|
|
'viewBox',
|
|
'preserveAspectRatio',
|
|
'data-icon',
|
|
'class',
|
|
].forEach((attr) => {
|
|
expect(svg.getAttribute(attr)).to.be.equal(
|
|
lastSVG.getAttribute(attr),
|
|
'Different values for attribute ' + attr
|
|
);
|
|
});
|
|
|
|
['vertical-align', 'color'].forEach((attr) => {
|
|
expect(svg.style[attr]).to.be.equal(
|
|
lastSVG.style[attr],
|
|
'Different values for style ' + attr
|
|
);
|
|
});
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:home');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
// Copy variables for next test
|
|
lastElement = element;
|
|
lastCustomisations = customisations;
|
|
lastSVG = svg;
|
|
|
|
/**
|
|
* Rotate icon
|
|
*/
|
|
lastSVG.setAttribute('data-rotate', '1');
|
|
|
|
// Create new element
|
|
element = {
|
|
element: svg,
|
|
finder: element.finder,
|
|
name: stringToIcon(element.finder.name(svg) as string),
|
|
};
|
|
expect(element).to.not.be.eql(lastElement); // different 'element' property
|
|
expect(element.name).to.be.eql(lastElement.name);
|
|
|
|
// Get customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.not.be.eql(lastCustomisations); // customisations were changed
|
|
expect(customisations).to.be.eql({
|
|
inline: true,
|
|
rotate: 1,
|
|
hFlip: true,
|
|
});
|
|
|
|
// Get icon data and render SVG
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
expect(svg).to.not.be.eql(lastSVG);
|
|
|
|
// Test changed attributes
|
|
expect(svg.getAttribute('data-rotate')).to.be.equal('1');
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:home');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
|
|
// Copy variables for next test
|
|
lastElement = element;
|
|
lastCustomisations = customisations;
|
|
lastSVG = svg;
|
|
|
|
/**
|
|
* Change icon name and reset flip
|
|
*/
|
|
lastSVG.setAttribute('data-icon', 'mdi-account');
|
|
lastSVG.removeAttribute('data-flip');
|
|
|
|
// Create new element
|
|
element = {
|
|
element: svg,
|
|
finder: element.finder,
|
|
name: stringToIcon(element.finder.name(svg) as string),
|
|
};
|
|
expect(element).to.not.be.eql(lastElement); // different 'element' and 'name' properties
|
|
expect(element.name).to.not.be.eql(lastElement.name);
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'account',
|
|
});
|
|
|
|
// Get customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.not.be.eql(lastCustomisations); // customisations were changed
|
|
expect(customisations).to.be.eql({
|
|
inline: true,
|
|
rotate: 1,
|
|
});
|
|
|
|
// Get icon data and render SVG
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
expect(svg).to.not.be.eql(lastSVG);
|
|
|
|
// Test changed attributes
|
|
expect(svg.getAttribute('data-rotate')).to.be.equal('1');
|
|
expect(svg.getAttribute('data-icon')).to.be.equal('mdi-account');
|
|
expect(svg.getAttribute('data-flip')).to.be.equal(null);
|
|
|
|
// Test finder on SVG
|
|
expect(element.finder.name(svg)).to.be.equal('mdi-account');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
});
|
|
|
|
it('Invalid icon name', () => {
|
|
const node = getNode('renderer');
|
|
node.innerHTML =
|
|
'<div>Testing invalid icon name v2: <span class="iconify-inline" data-icon="mdi:home" data-flip="horizontal" style="color: red; box-shadow: 0 0 2px black;"></span></div>';
|
|
|
|
// Get items
|
|
const items = findPlaceholders(node);
|
|
expect(items.length).to.be.equal(1);
|
|
|
|
/**
|
|
* Test icon
|
|
*/
|
|
let element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyFinder);
|
|
|
|
// Get and test customisations
|
|
let customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: true,
|
|
hFlip: true,
|
|
});
|
|
|
|
// Get icon data
|
|
let iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
let svg = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData
|
|
) as IconifyElement;
|
|
|
|
/**
|
|
* Change icon name to invalid
|
|
*/
|
|
svg.setAttribute('data-icon', 'mdi');
|
|
const name = element.finder.name(svg);
|
|
expect(name).to.be.equal('mdi');
|
|
expect(stringToIcon(name as string)).to.be.equal(null);
|
|
});
|
|
|
|
it('Empty icon name', () => {
|
|
const node = getNode('renderer');
|
|
node.innerHTML =
|
|
'<div>Testing empty icon name v2: <span class="iconify" data-icon="mdi:home" data-flip="horizontal" style="color: red; box-shadow: 0 0 2px black;"></span></div>';
|
|
|
|
// Get items
|
|
const items = findPlaceholders(node);
|
|
expect(items.length).to.be.equal(1);
|
|
|
|
/**
|
|
* Test icon
|
|
*/
|
|
let element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyFinder);
|
|
|
|
// Get and test customisations
|
|
let customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
hFlip: true,
|
|
});
|
|
|
|
// Get icon data
|
|
let iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
let svg = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData
|
|
) as IconifyElement;
|
|
|
|
/**
|
|
* Change icon name to invalid
|
|
*/
|
|
svg.removeAttribute('data-icon');
|
|
expect(element.finder.name(svg)).to.be.equal(null);
|
|
});
|
|
|
|
it('Change icon name', () => {
|
|
const node = getNode('renderer');
|
|
node.innerHTML =
|
|
'<div>Testing icon name v2: <span class="iconify" data-icon="mdi:home" data-flip="horizontal" style="color: red; box-shadow: 0 0 2px black;"></span></div>';
|
|
|
|
// Get items
|
|
const items = findPlaceholders(node);
|
|
expect(items.length).to.be.equal(1);
|
|
|
|
/**
|
|
* Test icon
|
|
*/
|
|
let element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyFinder);
|
|
|
|
// Get and test customisations
|
|
let customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
hFlip: true,
|
|
});
|
|
|
|
// Get icon data
|
|
let iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
expect(iconData.body.indexOf('M6 17c0-2')).to.be.equal(
|
|
-1,
|
|
'Wrong icon body: ' + iconData.body
|
|
);
|
|
|
|
// Render icon
|
|
let svg = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData
|
|
) as IconifyElement;
|
|
|
|
// Copy variables for next test
|
|
let lastElement = element;
|
|
let lastCustomisations = customisations;
|
|
let lastSVG = svg;
|
|
|
|
/**
|
|
* Change name
|
|
*/
|
|
svg.setAttribute('data-icon', 'mdi:account-box');
|
|
|
|
// Create new element
|
|
element = {
|
|
element: svg,
|
|
finder: element.finder,
|
|
name: stringToIcon(element.finder.name(svg) as string),
|
|
};
|
|
expect(element).to.not.be.eql(lastElement); // different 'element' and 'name' properties
|
|
expect(element.name).to.not.be.eql(lastElement.name); // different 'name' property
|
|
|
|
// Get customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql(lastCustomisations); // customisations were not changed
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
hFlip: true,
|
|
});
|
|
|
|
// Get icon data and render SVG
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Test icon body to make sure icon was changed
|
|
expect(iconData.body.indexOf('M6 17c0-2')).to.not.be.equal(
|
|
-1,
|
|
'Wrong icon body: ' + iconData.body
|
|
);
|
|
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
expect(svg).to.not.be.eql(lastSVG);
|
|
|
|
// Test finder
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:account-box');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
});
|
|
|
|
it('Rotating icon', () => {
|
|
const node = getNode('renderer');
|
|
node.innerHTML =
|
|
'<div>Testing rotation v2: <span class="iconify-icon" data-icon="mdi:home"></span></div>';
|
|
|
|
// Get items
|
|
const items = findPlaceholders(node);
|
|
expect(items.length).to.be.equal(1);
|
|
|
|
/**
|
|
* Test icon
|
|
*/
|
|
let element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyIconFinder);
|
|
|
|
// Get and test customisations
|
|
let customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
});
|
|
|
|
// Get icon data
|
|
let iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
let svg = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData
|
|
) as IconifyElement;
|
|
let html = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData,
|
|
true
|
|
) as string;
|
|
|
|
// Test icon body to make sure icon has no transformation
|
|
expect(html.indexOf('transform="')).to.be.equal(
|
|
-1,
|
|
'Found transform in icon: ' + html
|
|
);
|
|
|
|
// Copy variables for next test
|
|
let lastElement = element;
|
|
let lastCustomisations = customisations;
|
|
let lastSVG = svg;
|
|
|
|
/**
|
|
* Rotate
|
|
*/
|
|
svg.setAttribute('data-rotate', '2');
|
|
|
|
// Create new element
|
|
element = {
|
|
element: svg,
|
|
finder: element.finder,
|
|
name: stringToIcon(element.finder.name(svg) as string),
|
|
};
|
|
expect(element).to.not.be.eql(lastElement); // different 'element' property
|
|
expect(element.name).to.be.eql(lastElement.name);
|
|
|
|
// Get customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.not.be.eql(lastCustomisations); // customisations were changed
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
rotate: 2,
|
|
});
|
|
|
|
// Get icon data and render SVG
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
expect(svg).to.not.be.eql(lastSVG);
|
|
|
|
html = renderIcon(element, customisations, iconData, true) as string;
|
|
|
|
// Test icon body to make sure icon was changed
|
|
expect(html.indexOf('transform="')).to.not.be.equal(
|
|
-1,
|
|
'Missing transform in icon: ' + html
|
|
);
|
|
|
|
// Test finder
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:home');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
});
|
|
|
|
it('Changing size', () => {
|
|
const node = getNode('renderer');
|
|
node.innerHTML =
|
|
'<div>Testing size v2: <span class="iconify" data-icon="mdi:home" style="box-shadow: 0 0 2px black;"></span></div>';
|
|
|
|
// Get items
|
|
const items = findPlaceholders(node);
|
|
expect(items.length).to.be.equal(1);
|
|
|
|
/**
|
|
* Test icon
|
|
*/
|
|
let element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyFinder);
|
|
|
|
// Get and test customisations
|
|
let customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
});
|
|
|
|
// Get icon data
|
|
let iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
let svg = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData
|
|
) as IconifyElement;
|
|
|
|
// Check dimensions
|
|
expect(svg.getAttribute('width')).to.be.equal('1em');
|
|
expect(svg.getAttribute('height')).to.be.equal('1em');
|
|
|
|
// Copy variables for next test
|
|
let lastElement = element;
|
|
let lastCustomisations = customisations;
|
|
let lastSVG = svg;
|
|
|
|
/**
|
|
* Set height
|
|
*/
|
|
svg.setAttribute('data-height', '24');
|
|
|
|
// Create new element
|
|
element = {
|
|
element: svg,
|
|
finder: element.finder,
|
|
name: stringToIcon(element.finder.name(svg) as string),
|
|
};
|
|
expect(element).to.not.be.eql(lastElement); // different 'element' property
|
|
expect(element.name).to.be.eql(lastElement.name);
|
|
|
|
// Get customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.not.be.eql(lastCustomisations); // customisations were changed
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
height: '24',
|
|
});
|
|
|
|
// Get icon data and render SVG
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
expect(svg).to.not.be.eql(lastSVG);
|
|
|
|
// Check dimensions
|
|
expect(svg.getAttribute('width')).to.be.equal('24');
|
|
expect(svg.getAttribute('height')).to.be.equal('24');
|
|
|
|
// Test finder
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:home');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
});
|
|
|
|
it('Changing alignment', () => {
|
|
const node = getNode('renderer');
|
|
node.innerHTML =
|
|
'<div>Testing alignment v2: <span class="iconify" data-icon="mdi:home" data-width="48" data-height="24" style="box-shadow: 0 0 2px black;"></span></div>';
|
|
|
|
// Get items
|
|
const items = findPlaceholders(node);
|
|
expect(items.length).to.be.equal(1);
|
|
|
|
/**
|
|
* Test icon
|
|
*/
|
|
let element = items.shift();
|
|
|
|
// Test element
|
|
expect(element.name).to.be.eql({
|
|
provider: '',
|
|
prefix: 'mdi',
|
|
name: 'home',
|
|
});
|
|
expect(element.finder).to.be.equal(iconifyFinder);
|
|
|
|
// Get and test customisations
|
|
let customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
width: '48',
|
|
height: '24',
|
|
});
|
|
|
|
// Get icon data
|
|
let iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
// Render icon
|
|
let svg = renderIcon(
|
|
element,
|
|
customisations,
|
|
iconData
|
|
) as IconifyElement;
|
|
|
|
// Check dimensions and alignment
|
|
expect(svg.getAttribute('width')).to.be.equal('48');
|
|
expect(svg.getAttribute('height')).to.be.equal('24');
|
|
expect(svg.getAttribute('preserveAspectRatio')).to.be.equal(
|
|
'xMidYMid meet'
|
|
);
|
|
|
|
// Copy variables for next test
|
|
let lastElement = element;
|
|
let lastCustomisations = customisations;
|
|
let lastSVG = svg;
|
|
|
|
/**
|
|
* Set alignment
|
|
*/
|
|
svg.setAttribute('data-align', 'left, bottom');
|
|
|
|
// Create new element
|
|
element = {
|
|
element: svg,
|
|
finder: element.finder,
|
|
name: stringToIcon(element.finder.name(svg) as string),
|
|
};
|
|
expect(element).to.not.be.eql(lastElement); // different 'element' property
|
|
expect(element.name).to.be.eql(lastElement.name);
|
|
|
|
// Get customisations
|
|
customisations = element.finder.customisations(element.element);
|
|
expect(customisations).to.not.be.eql(lastCustomisations); // customisations were changed
|
|
expect(customisations).to.be.eql({
|
|
inline: false,
|
|
width: '48',
|
|
height: '24',
|
|
hAlign: 'left',
|
|
vAlign: 'bottom',
|
|
});
|
|
|
|
// Get icon data and render SVG
|
|
iconData = getIcon(storage, element.name.name);
|
|
expect(iconData).to.not.be.equal(null);
|
|
|
|
svg = renderIcon(element, customisations, iconData) as IconifyElement;
|
|
expect(svg).to.not.be.eql(lastSVG);
|
|
|
|
// Check dimensions and alignment
|
|
expect(svg.getAttribute('width')).to.be.equal('48');
|
|
expect(svg.getAttribute('height')).to.be.equal('24');
|
|
expect(svg.getAttribute('preserveAspectRatio')).to.be.equal(
|
|
'xMinYMax meet'
|
|
);
|
|
|
|
// Test finder
|
|
expect(element.finder.name(svg)).to.be.equal('mdi:home');
|
|
expect(element.finder.customisations(svg)).to.be.eql(customisations);
|
|
});
|
|
});
|