|
| 1 | +import{html,render,unsafeHTML}from'..' |
| 2 | + |
| 3 | +describe('unsafeHTML',()=>{ |
| 4 | +it('renders basic text',async()=>{ |
| 5 | +constsurface=document.createElement('section') |
| 6 | +render(html`<div>${unsafeHTML('Hello World')}</div>`,surface) |
| 7 | +expect(surface.innerHTML).to.equal('<div>Hello World</div>') |
| 8 | +}) |
| 9 | +it('disallows use inside of an attribute',()=>{ |
| 10 | +constsurface=document.createElement('section') |
| 11 | +render(html`<divstyle="${unsafeHTML('Hello World')}"></div>`,surface) |
| 12 | +expect(surface.innerHTML).to.equal('<div style=""></div>') |
| 13 | +}) |
| 14 | +it('renders the given value as HTML',async()=>{ |
| 15 | +constsurface=document.createElement('section') |
| 16 | +render(html`<div>${unsafeHTML('<span>Hello World</span>')}</div>`,surface) |
| 17 | +expect(surface.innerHTML).to.equal('<div><span>Hello World</span></div>') |
| 18 | +}) |
| 19 | +it('renders multiple children',async()=>{ |
| 20 | +constsurface=document.createElement('section') |
| 21 | +render(html`<div>${unsafeHTML('<span>Hello</span><span>World</span>')}</div>`,surface) |
| 22 | +expect(surface.innerHTML).to.equal('<div><span>Hello</span><span>World</span></div>') |
| 23 | +}) |
| 24 | +it('updates correctly',async()=>{ |
| 25 | +constsurface=document.createElement('section') |
| 26 | +constfn=name=>html`<div>${unsafeHTML(`<span>Hello</span><span>${name}</span>`)}</div>` |
| 27 | +render(fn('World'),surface) |
| 28 | +expect(surface.innerHTML).to.equal('<div><span>Hello</span><span>World</span></div>') |
| 29 | +render(fn('Universe'),surface) |
| 30 | +render(fn('<a href="">Universe</a>'),surface) |
| 31 | +expect(surface.innerHTML).to.equal('<div><span>Hello</span><span><a href="">Universe</a></span></div>') |
| 32 | +}) |
| 33 | +}) |