import { h, render } from '../../src/preact';
/** @jsx h */
// hacky normalization of attribute order across browsers.
function sortAttributes(html) {
return html.replace(/<([a-z0-9-]+)((?:\s[a-z0-9:_.-]+=".*?")+)((?:\s*\/)?>)/gi, (s, pre, attrs, after) => {
let list = attrs.match(/\s[a-z0-9:_.-]+=".*?"/gi).sort( (a, b) => a>b ? 1 : -1 );
if (~after.indexOf('/')) after = '>'+pre+'>';
return '<' + pre + list.join('') + after;
});
}
describe('svg', () => {
let scratch;
before( () => {
scratch = document.createElement('div');
(document.body || document.documentElement).appendChild(scratch);
});
beforeEach( () => {
scratch.innerHTML = '';
});
after( () => {
scratch.parentNode.removeChild(scratch);
scratch = null;
});
it('should render SVG to string', () => {
render((
), scratch);
let html = sortAttributes(String(scratch.innerHTML).replace(' xmlns="http://www.w3.org/2000/svg"', ''));
expect(html).to.equal(sortAttributes(`
`.replace(/[\n\t]+/g,'')));
});
it('should render SVG to DOM', () => {
const Demo = () => (
);
render(, scratch);
let html = sortAttributes(String(scratch.innerHTML).replace(' xmlns="http://www.w3.org/2000/svg"', ''));
expect(html).to.equal(sortAttributes(''));
});
it('should use attributes for className', () => {
const Demo = ({ c }) => (
);
let root = render(, scratch, root);
sinon.spy(root, 'removeAttribute');
root = render(, scratch, root);
expect(root.removeAttribute).to.have.been.calledOnce.and.calledWith('class');
root.removeAttribute.restore();
root = render(
, scratch, root);
root = render(, scratch, root);
sinon.spy(root, 'setAttribute');
root = render(, scratch, root);
expect(root.setAttribute).to.have.been.calledOnce.and.calledWith('class', 'foo_2');
root.setAttribute.restore();
root = render(, scratch, root);
root = render(, scratch, root);
});
it('should still support class attribute', () => {
render((
), scratch);
expect(scratch.innerHTML).to.contain(` class="foo bar"`);
});
it('should serialize class', () => {
render((
), scratch);
expect(scratch.innerHTML).to.contain(` class="foo other"`);
});
it('should switch back to HTML for ', () => {
render((
), scratch);
expect(scratch.getElementsByTagName('a'))
.to.have.property('0')
.that.is.a('HTMLAnchorElement');
});
});