it('parse a node with one level of children', function(){
var node = dom('div', null, [
dom('span'),
dom('hr'),
'Hello World'
]);
var tree = new Tree(node);
assert(tree.getNode('0') === node);
assert(tree.getNode('0.0') === node.children[0]);
assert(tree.getNode('0.1') === node.children[1]);
assert(tree.getNode('0.2') === node.children[2]);
});
it('should remove nodes', function(){
var i = 1;
var Page = component({
render: function(dom){
if (i === 1) return dom('div', null, [dom('span', { id: 'foo' })]);
if (i === 2) return dom('div');
}
});
var view = Page.render(el);
assert(document.querySelector('#foo'));
i = 2;
view.forceUpdate();
assert(document.querySelector('#foo') == null);
});
it('should get nodes using a string path', function(){
var child = dom();
var node = dom('div', null, [
dom(),
dom('div', null, [child])
]);
var tree = new Tree(node);
assert(tree.getNode('0.1.0') === child);
});
it('parse nodes with keys', function(){
var node = dom('div', null, [
dom('span', { key: 'foo' }, [
dom()
])
]);
var tree = new Tree(node);
assert(tree.getNode('0.foo.0') === node.children[0].children[0]);
});
it('should remove references to child components when they are removed', function(){
var Component = component({
render: function(n, state, props){
return n('div', null, ['Component']);
}
});
var Wrapper = component({
render: function(n, state, props){
if (props.type === 'component') return n(Component);
return n('div', null, ['Element']);
}
});
var mount = Wrapper.render(el, { type: 'component' });
assert(mount.rendered.children['0']);
mount.setProps({ type: 'element' });
mount.forceUpdate();
assert.equal(el.innerHTML, '<div>Element</div>');
assert(mount.rendered.children['0'] == null);
});
it('should change tag names and update parent components that reference the element', function(){
var i = 0;
var ComponentA = component({
render: function(n, state, props){
return n(props.type, null, ['test']);
}
});
var ComponentB = component({
render: function(n, state, props){
return n(ComponentA, { type: props.type });
}
});
var mount = ComponentB.render(el, { type: 'span' });
assert(mount.rendered.el === mount.rendered.children['0'].el);
mount.setProps({ type: 'div' });
mount.forceUpdate();
assert(mount.rendered.el === mount.rendered.children['0'].el);
mount.setProps({ type: 'b' });
mount.forceUpdate();
assert.equal(mount.rendered.el.outerHTML, '<b>test</b>');
assert.equal(mount.rendered.children['0'].el.outerHTML, '<b>test</b>');
});
it('should replace components', function(){
var ComponentA = component({
render: function(n, state, props){
return n('div', null, ['A']);
}
});
var ComponentB = component({
render: function(n, state, props){
return n('div', null, ['B']);
}
});
var ComponentC = component({
render: function(n, state, props){
if (props.type === 'A') return n(ComponentA);
return n(ComponentB);
}
});
var mount = ComponentC.render(el, { type: 'A' });
assert.equal(el.innerHTML, '<div>A</div>');
mount.setProps({ type: 'B' });
mount.forceUpdate();
assert.equal(el.innerHTML, '<div>B</div>');
assert(mount.rendered.children['0'].instance instanceof ComponentB);
})
it('should remove child nodes', function(){
var i = 1;
var Page = component({
render: function(dom){
if (i === 1) return dom('div', { id: 'root' }, [dom('span', { id: 'foo' }), dom('span', { id: 'bar' }), dom('span', { id: 'baz' })]);
if (i === 2) return dom('div', { id: 'root' }, [dom('span', { id: 'foo' })]);
}
});
var view = Page.render(el);
assert(document.querySelector('#foo'));
assert(document.querySelector('#bar'));
assert(document.querySelector('#baz'));
i = 2;
view.forceUpdate();
console.log(document.querySelector('#root').innerHTML)
assert(document.querySelector('#foo'));
assert(document.querySelector('#bar') == null);
assert(document.querySelector('#baz') == null);
});
it('should create unique ids', function(){
var one = dom();
var two = dom();
assert(one.id !== two.id);
});
it('should create divs by default', function(){
assert(dom().tagName === 'div');
});
it('should set attributes', function(){
var node = dom('div', { name: 'Foo' });
assert(node.attributes.name === 'Foo');
});
it('should add the key as an attribute', function(){
var a = dom('div', { key: 'foo' });
assert(a.attributes['data-key'] === 'foo');
});
it('should set the tagName', function(){
assert(dom('span').tagName === 'span');
});
it('parse a single node', function(){
var node = dom();
var tree = new Tree(node);
assert(tree.getNode('0') === node);
});
it('should get the path for a node', function(){
var node = dom();
var tree = new Tree(node);
assert(tree.getPath(node) === '0');
});