it('should clear the rendering if `null` content is provided', () => {
let host = document.createElement('div');
VirtualDOM.render(h('div', ['bar', 'foo']), host);
expect(host.children[0].childNodes.length).to.equal(2);
VirtualDOM.render(null, host);
expect(host.children.length).to.equal(0);
});
it('should update the text of a text node', () => {
let host = document.createElement('div');
VirtualDOM.render(h.div('foo'), host);
let div = host.children[0];
expect(div.textContent).to.equal('foo');
VirtualDOM.render(h.div('bar'), host);
expect(host.children[0]).to.equal(div);
expect(div.textContent).to.equal('bar');
});
it('should update attributes', () => {
let host = document.createElement('div');
let attrs1 = {
alt: 'foo', height: '100', style: { color: 'white' },
dataset: { foo: '2', bar: '2' }, onload: () => { }, srcset: 'foo'
};
let attrs2 = {
alt: 'bar', width: '100', style: { border: '1px' },
dataset: { bar: '1', baz: '3' }, sizes: 'baz'
};
VirtualDOM.render([h.a(), h.img(attrs1)], host);
VirtualDOM.render([h.a(), h.img(attrs2)], host);
expect((host.children[1] as HTMLImageElement).alt).to.equal('bar');
});
it('should render the delta from the previous rendering', () => {
let host = document.createElement('div');
let children = [h.a(), h.span(), h.img()];
VirtualDOM.render(children, host);
let first = host.children[0];
let last = host.children[2];
expect(first.nodeName.toLowerCase()).to.equal('a');
expect(last.nodeName.toLowerCase()).to.equal('img');
children = [children[0], h.div(), children[1]];
VirtualDOM.render(children, host);
expect(host.children[0]).to.equal(first);
expect(host.children[2]).to.not.equal(last);
expect(host.children[2].nodeName.toLowerCase()).to.equal('span');
});
it('should handle a new keyed item', () => {
let host = document.createElement('div');
let children1 = [
h.span({ key: '1' }),
h.span({ key: '2' }),
h.span({ key: '3' }),
h.span({ key: '4' })
];
let children2 = [
h.span({ key: '1' }),
h.span({ key: '2' }),
h.span({ key: '3' }),
h.div({ key: '5' })
];
VirtualDOM.render(children1, host);
VirtualDOM.render(children2, host);
expect(host.children[3].nodeName.toLowerCase()).to.equal('div');
});
it('should still recreate the DOM node if the node type changes', () => {
let host = document.createElement('div');
let children1 = [
h.span({ key: '1' }),
h.span({ key: '2' }),
h.span({ key: '3' }),
h.span({ key: '4' })
];
let children2 = [
h.span({ key: '1' }),
h.div({ key: '3' }),
h.span({ key: '2' }),
h.span({ key: '4' })
];
VirtualDOM.render(children1, host);
VirtualDOM.render(children2, host);
expect(host.children[1].nodeName.toLowerCase()).to.equal('div');
});
it('should not recreate a DOM node that moves if it has a key id', () => {
let host = document.createElement('div');
let children1 = [
h.span({ key: '1' }),
h.span({ key: '2' }),
h.span({ key: '3' }),
h.span({ key: '4' })
];
let children2 = [
h.span({ key: '1' }),
h.span({ key: '3' }),
h.span({ key: '2' }),
h.span({ key: '4' })
];
VirtualDOM.render(children1, host);
let child1 = host.children[1];
let child2 = host.children[2];
VirtualDOM.render(children2, host);
expect(host.children[1]).to.equal(child2);
expect(host.children[2]).to.equal(child1);
});
it('should render virtual DOM content into a host elememnt', () => {
let host = document.createElement('div');
VirtualDOM.render(h.img(), host);
expect(host.children[0].nodeName.toLowerCase()).to.equal('img');
});