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 = '>'; 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(( test ), scratch); expect(scratch.getElementsByTagName('a')) .to.have.property('0') .that.is.a('HTMLAnchorElement'); }); });