2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-15 06:47:30 +00:00
iconify/packages/browser-tests/tests/10-node-attributes-test.ts

220 lines
5.1 KiB
TypeScript
Raw Normal View History

2020-04-28 09:47:35 +00:00
import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
const expect = chai.expect;
// Dummy svgAttributes variable
const svgAttributes: Record<string, unknown> = {};
/**
* Copy attributes from placeholder to SVG.
*
* This is similar to code used in render.ts
*
* @param placeholderElement
* @param svg
*/
function copyData(placeholderElement, svg) {
const svgStyle = svg.style;
// Copy attributes from placeholder
const placeholderAttributes = placeholderElement.attributes;
for (let i = 0; i < placeholderAttributes.length; i++) {
const item = placeholderAttributes.item(i);
if (item) {
const name = item.name;
if (
name !== 'class' &&
name !== 'style' &&
svgAttributes[name] === void 0
) {
try {
svg.setAttribute(name, item.value);
} catch (err) {}
}
}
}
// Copy styles from placeholder
const placeholderStyle = placeholderElement.style;
for (let i = 0; i < placeholderStyle.length; i++) {
const attr = placeholderStyle[i];
const value = placeholderStyle[attr];
if (value !== '') {
svgStyle[attr] = value;
}
}
}
describe('Testing copying node data', () => {
it('Inline attributes', () => {
const node = getNode('node-attributes');
node.innerHTML = '<p title="Testing" data-foo="bar">Test</p>';
const source = node.querySelector('p');
const target = document.createElement('span');
copyData(source, target);
// Test title
expect(source.getAttribute('title')).to.be.equal(
'Testing',
'Source title should be set'
);
expect(target.getAttribute('title')).to.be.equal(
'Testing',
'Target title should be set'
);
// Test data-*
expect(source.getAttribute('data-foo')).to.be.equal(
'bar',
'Source data-foo should be set'
);
expect(target.getAttribute('data-foo')).to.be.equal(
'bar',
'Target data-foo should be set'
);
});
it('Inline style', () => {
const node = getNode('node-attributes');
node.innerHTML =
'<p style="color: red; border: 1px solid green; vertical-align: -.1em">Test</p>';
const source = node.querySelector('p');
const target = document.createElement('span');
copyData(source, target);
// Test color
expect(source.style.color).to.be.equal(
'red',
'Source color should be red'
);
expect(target.style.color).to.be.equal(
'red',
'Target color should be red'
);
// Test border width
expect(source.style.borderWidth).to.be.equal(
'1px',
'Source border width should be 1px'
);
expect(target.style.borderWidth).to.be.equal(
'1px',
'Target border width should be 1px'
);
// Test background color
expect(source.style.backgroundColor).to.be.equal(
'',
'Source background color should not be set'
);
expect(target.style.backgroundColor).to.be.equal(
'',
'Target background color should not be set'
);
});
it('DOM style', () => {
const node = getNode('node-attributes');
node.innerHTML = '<p>Test</p>';
const source = node.querySelector('p');
source.style.color = 'green';
source.style.border = '2px solid blue';
const target = document.createElement('span');
copyData(source, target);
// Test color
expect(source.style.color).to.be.equal(
'green',
'Source color should be green'
);
expect(target.style.color).to.be.equal(
'green',
'Target color should be green'
);
// Test border width
expect(source.style.borderWidth).to.be.equal(
'2px',
'Source border width should be 2px'
);
expect(target.style.borderWidth).to.be.equal(
'2px',
'Target border width should be 2px'
);
// Test background color
expect(source.style.backgroundColor).to.be.equal(
'',
'Source background color should not be set'
);
expect(target.style.backgroundColor).to.be.equal(
'',
'Target background color should not be set'
);
});
it('Overwriting source style before copy', () => {
const node = getNode('node-attributes');
node.innerHTML = '<p style="color: blue">Test</p>';
const source = node.querySelector('p');
// Overwrite inline style
source.style.color = 'purple';
const target = document.createElement('span');
copyData(source, target);
// Test color
expect(source.style.color).to.be.equal(
'purple',
'Source color should be purple'
);
expect(target.style.color).to.be.equal(
'purple',
'Target color should be purple'
);
});
it('Overwriting target style during copy', () => {
const node = getNode('node-attributes');
node.innerHTML = '<p style="color: blue">Test</p>';
const source = node.querySelector('p');
const target = document.createElement('span');
// Set target style
target.style.color = 'purple';
target.style.verticalAlign = '-0.2em';
copyData(source, target);
// Test color
expect(source.style.color).to.be.equal(
'blue',
'Source color should be blue'
);
expect(target.style.color).to.be.equal(
'blue',
'Target color should be blue'
);
// Test vertical-align
expect(source.style.verticalAlign).to.be.equal(
'',
'Source vartical-align should not be set'
);
expect(target.style.verticalAlign).to.be.equal(
'-0.2em',
'Target vertical-align should be set'
);
});
});