github-forks
/
snabbdom
mirror of https://github.com/snabbdom/snabbdom.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Don't assume the root node won't be replaced

Browse Source
pull/56/head
Sylvain Prat 9 years ago
parent 7ca1d13783
commit 2341c26e26
5 changed files with 138 additions and 142 deletions
Show Stats Download Patch File Download Diff File

29
test/attachto.js
Unescape Escape View File

@ -12,12 +12,13 @@ describe('attachTo', function() {
vnode0 = elm;
});
it('adds element to target', function() {
patch(vnode0, h('div', [
h('div#wrapper', [
h('div', 'Some element'),
attachTo(elm, h('div#attached', 'Test')),
]),
]));
var vnode1 = h('div', [
h('div#wrapper', [
h('div', 'Some element'),
attachTo(elm, h('div#attached', 'Test')),
]),
]);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 2);
});
it('updates element at target', function() {
@ -33,9 +34,9 @@ describe('attachTo', function() {
attachTo(elm, h('div#attached', 'New text')),
]),
]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children[0].innerHTML, 'First text');
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children[0].innerHTML, 'New text');
});
it('element can be inserted before modal', function() {
@ -52,9 +53,9 @@ describe('attachTo', function() {
attachTo(elm, h('div#attached', 'Text')),
]),
]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children[0].innerHTML, 'Text');
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children[0].innerHTML, 'Text');
});
it('removes element at target', function() {
@ -69,9 +70,9 @@ describe('attachTo', function() {
h('div', 'Some element'),
]),
]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children[0].innerHTML, 'First text');
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 1);
});
it('remove hook recieves real element', function() {
@ -91,7 +92,7 @@ describe('attachTo', function() {
h('div', 'Some element'),
]),
]);
patch(vnode0, vnode1);
patch(vnode1, vnode2);
elm = patch(vnode0, vnode1).elm;
elm = patch(vnode1, vnode2).elm;
});
});

138
test/core.js
Unescape Escape View File

@ -57,49 +57,49 @@ describe('snabbdom', function() {
});
describe('created element', function() {
it('has tag', function() {
patch(vnode0, h('div'));
elm = patch(vnode0, h('div')).elm;
assert.equal(elm.tagName, 'DIV');
});
it('has different tag and id', function() {
var elm = document.createElement('div');
vnode0.appendChild(elm);
var vnode1 = h('span#id');
patch(elm, vnode1);
assert.equal(vnode1.elm.tagName, 'SPAN');
assert.equal(vnode1.elm.id, 'id');
elm = patch(elm, vnode1).elm;
assert.equal(elm.tagName, 'SPAN');
assert.equal(elm.id, 'id');
});
it('has id', function() {
patch(vnode0, h('div', [h('div#unique')]));
elm = patch(vnode0, h('div', [h('div#unique')])).elm;
assert.equal(elm.firstChild.id, 'unique');
});
it('has correct namespace', function() {
patch(vnode0, h('div', [h('div', {ns: 'http://www.w3.org/2000/svg'})]));
elm = patch(vnode0, h('div', [h('div', {ns: 'http://www.w3.org/2000/svg'})])).elm;
assert.equal(elm.firstChild.namespaceURI, 'http://www.w3.org/2000/svg');
});
it('is recieves classes in selector', function() {
patch(vnode0, h('div', [h('i.am.a.class')]));
elm = patch(vnode0, h('div', [h('i.am.a.class')])).elm;
assert(elm.firstChild.classList.contains('am'));
assert(elm.firstChild.classList.contains('a'));
assert(elm.firstChild.classList.contains('class'));
});
it('is recieves classes in class property', function() {
patch(vnode0, h('i', {class: {am: true, a: true, class: true, not: false}}));
elm = patch(vnode0, h('i', {class: {am: true, a: true, class: true, not: false}})).elm;
assert(elm.classList.contains('am'));
assert(elm.classList.contains('a'));
assert(elm.classList.contains('class'));
assert(!elm.classList.contains('not'));
});
it('handles classes from both selector and property', function() {
patch(vnode0, h('div', [h('i.has', {class: {classes: true}})]));
elm = patch(vnode0, h('div', [h('i.has', {class: {classes: true}})])).elm;
assert(elm.firstChild.classList.contains('has'));
assert(elm.firstChild.classList.contains('classes'));
});
it('can create elements with text content', function() {
patch(vnode0, h('div', ['I am a string']));
elm = patch(vnode0, h('div', ['I am a string'])).elm;
assert.equal(elm.innerHTML, 'I am a string');
});
it('can create elements with span and text content', function() {
patch(vnode0, h('a', [h('span'), 'I am a string']));
elm = patch(vnode0, h('a', [h('span'), 'I am a string'])).elm;
assert.equal(elm.childNodes[0].tagName, 'SPAN');
assert.equal(elm.childNodes[1].textContent, 'I am a string');
});
@ -109,7 +109,7 @@ describe('snabbdom', function() {
var vnode1 = h('i', {class: {i: true, am: true, horse: true}});
var vnode2 = h('i', {class: {i: true, am: true, horse: false}});
patch(vnode0, vnode1);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert(elm.classList.contains('i'));
assert(elm.classList.contains('am'));
assert(!elm.classList.contains('horse'));
@ -118,7 +118,7 @@ describe('snabbdom', function() {
var vnode1 = h('i', {class: {i: true, am: true, horse: true}});
var vnode2 = h('i', {class: {i: true, am: true, horse: false}});
patch(vnode0, vnode1);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert(elm.classList.contains('i'));
assert(elm.classList.contains('am'));
assert(!elm.classList.contains('horse'));
@ -135,9 +135,9 @@ describe('snabbdom', function() {
it('appends elements', function() {
var vnode1 = h('span', [1].map(spanNum));
var vnode2 = h('span', [1, 2, 3].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 1);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 3);
assert.equal(elm.children[1].innerHTML, '2');
assert.equal(elm.children[2].innerHTML, '3');
@ -145,42 +145,42 @@ describe('snabbdom', function() {
it('prepends elements', function() {
var vnode1 = h('span', [4, 5].map(spanNum));
var vnode2 = h('span', [1, 2, 3, 4, 5].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 2);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['1', '2', '3', '4', '5']);
});
it('add elements in the middle', function() {
var vnode1 = h('span', [1, 2, 4, 5].map(spanNum));
var vnode2 = h('span', [1, 2, 3, 4, 5].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 4);
assert.equal(elm.children.length, 4);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['1', '2', '3', '4', '5']);
});
it('add elements at begin and end', function() {
var vnode1 = h('span', [2, 3, 4].map(spanNum));
var vnode2 = h('span', [1, 2, 3, 4, 5].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 3);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['1', '2', '3', '4', '5']);
});
it('adds children to parent with no children', function() {
var vnode1 = h('span', {key: 'span'});
var vnode2 = h('span', {key: 'span'}, [1, 2, 3].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 0);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['1', '2', '3']);
});
it('removes all children from parent', function() {
var vnode1 = h('span', {key: 'span'}, [1, 2, 3].map(spanNum));
var vnode2 = h('span', {key: 'span'});
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ['1', '2', '3']);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 0);
});
});
@ -188,17 +188,17 @@ describe('snabbdom', function() {
it('removes elements from the beginning', function() {
var vnode1 = h('span', [1, 2, 3, 4, 5].map(spanNum));
var vnode2 = h('span', [3, 4, 5].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 5);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['3', '4', '5']);
});
it('removes elements from the end', function() {
var vnode1 = h('span', [1, 2, 3, 4, 5].map(spanNum));
var vnode2 = h('span', [1, 2, 3].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 5);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 3);
assert.equal(elm.children[0].innerHTML, '1');
assert.equal(elm.children[1].innerHTML, '2');
@ -207,9 +207,9 @@ describe('snabbdom', function() {
it('removes elements from the middle', function() {
var vnode1 = h('span', [1, 2, 3, 4, 5].map(spanNum));
var vnode2 = h('span', [1, 2, 4, 5].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 5);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 4);
assert.deepEqual(elm.children[0].innerHTML, '1');
assert.equal(elm.children[0].innerHTML, '1');
@ -222,9 +222,9 @@ describe('snabbdom', function() {
it('moves element forward', function() {
var vnode1 = h('span', [1, 2, 3, 4].map(spanNum));
var vnode2 = h('span', [2, 3, 1, 4].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 4);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 4);
assert.equal(elm.children[0].innerHTML, '2');
assert.equal(elm.children[1].innerHTML, '3');
@ -234,9 +234,9 @@ describe('snabbdom', function() {
it('moves element to end', function() {
var vnode1 = h('span', [1, 2, 3].map(spanNum));
var vnode2 = h('span', [2, 3, 1].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 3);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 3);
assert.equal(elm.children[0].innerHTML, '2');
assert.equal(elm.children[1].innerHTML, '3');
@ -245,9 +245,9 @@ describe('snabbdom', function() {
it('moves element backwards', function() {
var vnode1 = h('span', [1, 2, 3, 4].map(spanNum));
var vnode2 = h('span', [1, 4, 2, 3].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 4);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 4);
assert.equal(elm.children[0].innerHTML, '1');
assert.equal(elm.children[1].innerHTML, '4');
@ -257,9 +257,9 @@ describe('snabbdom', function() {
it('swaps first and last', function() {
var vnode1 = h('span', [1, 2, 3, 4].map(spanNum));
var vnode2 = h('span', [4, 2, 3, 1].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 4);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 4);
assert.equal(elm.children[0].innerHTML, '4');
assert.equal(elm.children[1].innerHTML, '2');
@ -271,9 +271,9 @@ describe('snabbdom', function() {
it('move to left and replace', function() {
var vnode1 = h('span', [1, 2, 3, 4, 5].map(spanNum));
var vnode2 = h('span', [4, 1, 2, 3, 6].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 5);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 5);
assert.equal(elm.children[0].innerHTML, '4');
assert.equal(elm.children[1].innerHTML, '1');
@ -284,17 +284,17 @@ describe('snabbdom', function() {
it('moves to left and leaves hole', function() {
var vnode1 = h('span', [1, 4, 5].map(spanNum));
var vnode2 = h('span', [4, 6].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 3);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['4', '6']);
});
it('handles moved and set to undefined element ending at the end', function() {
var vnode1 = h('span', [2, 4, 5].map(spanNum));
var vnode2 = h('span', [4, 5, 3].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 3);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.children.length, 3);
assert.equal(elm.children[0].innerHTML, '4');
assert.equal(elm.children[1].innerHTML, '5');
@ -303,10 +303,10 @@ describe('snabbdom', function() {
it('moves a key in non-keyed nodes with a size up', function() {
var vnode1 = h('span', [1, 'a', 'b', 'c'].map(spanNum));
var vnode2 = h('span', ['d', 'a', 'b', 'c', 1, 'e'].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.childNodes.length, 4);
assert.equal(elm.textContent, '1abc');
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.childNodes.length, 6);
assert.equal(elm.textContent, 'dabc1e');
});
@ -314,17 +314,17 @@ describe('snabbdom', function() {
it('reverses elements', function() {
var vnode1 = h('span', [1, 2, 3, 4, 5, 6, 7, 8].map(spanNum));
var vnode2 = h('span', [8, 7, 6, 5, 4, 3, 2, 1].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 8);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['8', '7', '6', '5', '4', '3', '2', '1']);
});
it('something', function() {
var vnode1 = h('span', [0, 1, 2, 3, 4, 5].map(spanNum));
var vnode2 = h('span', [4, 3, 2, 1, 5, 0].map(spanNum));
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 6);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['4', '3', '2', '1', '5', '0']);
});
it('handles random shuffles', function() {
@ -339,7 +339,7 @@ describe('snabbdom', function() {
}));
var shufArr = shuffle(arr.slice(0));
var elm = document.createElement('div');
patch(elm, vnode1);
elm = patch(elm, vnode1).elm;
for (i = 0; i < elms; ++i) {
assert.equal(elm.children[i].innerHTML, i.toString());
opacities[i] = Math.random().toFixed(5).toString();
@ -347,7 +347,7 @@ describe('snabbdom', function() {
var vnode2 = h('span', arr.map(function(n) {
return spanNumWithOpacity(shufArr[n], opacities[n]);
}));
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
for (i = 0; i < elms; ++i) {
assert.equal(elm.children[i].innerHTML, shufArr[i].toString());
assert.equal(opacities[i].indexOf(elm.children[i].style.opacity), 0);
@ -359,58 +359,58 @@ describe('snabbdom', function() {
it('appends elements', function() {
var vnode1 = h('div', [h('span', 'Hello')]);
var vnode2 = h('div', [h('span', 'Hello'), h('span', 'World')]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ['Hello']);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['Hello', 'World']);
});
it('handles unmoved text nodes', function() {
var vnode1 = h('div', ['Text', h('span', 'Span')]);
var vnode2 = h('div', ['Text', h('span', 'Span')]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.childNodes[0].textContent, 'Text');
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.childNodes[0].textContent, 'Text');
});
it('handles changing text children', function() {
var vnode1 = h('div', ['Text', h('span', 'Span')]);
var vnode2 = h('div', ['Text2', h('span', 'Span')]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.childNodes[0].textContent, 'Text');
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.childNodes[0].textContent, 'Text2');
});
it('prepends element', function() {
var vnode1 = h('div', [h('span', 'World')]);
var vnode2 = h('div', [h('span', 'Hello'), h('span', 'World')]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ['World']);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['Hello', 'World']);
});
it('prepends element of different tag type', function() {
var vnode1 = h('div', [h('span', 'World')]);
var vnode2 = h('div', [h('div', 'Hello'), h('span', 'World')]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ['World']);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(prop('tagName'), elm.children), ['DIV', 'SPAN']);
assert.deepEqual(map(inner, elm.children), ['Hello', 'World']);
});
it('removes elements', function() {
var vnode1 = h('div', [h('span', 'One'), h('span', 'Two'), h('span', 'Three')]);
var vnode2 = h('div', [h('span', 'One'), h('span', 'Three')]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ['One', 'Two', 'Three']);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(inner, elm.children), ['One', 'Three']);
});
it('reorders elements', function() {
var vnode1 = h('div', [h('span', 'One'), h('div', 'Two'), h('b', 'Three')]);
var vnode2 = h('div', [h('b', 'Three'), h('span', 'One'), h('div', 'Two')]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ['One', 'Two', 'Three']);
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.deepEqual(map(prop('tagName'), elm.children), ['B', 'SPAN', 'DIV']);
assert.deepEqual(map(inner, elm.children), ['Three', 'One', 'Two']);
});
@ -571,9 +571,9 @@ describe('snabbdom', function() {
{remove: function(_, rm) { rm2 = rm; }},
]);
var vnode1 = h('div', [h('a', {hook: {remove: function(_, rm) { rm3 = rm; }}})]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 1);
patch(vnode1, vnode0);
elm = patch(vnode1, vnode0).elm;
assert.equal(elm.children.length, 1);
rm1();
assert.equal(elm.children.length, 1);

20
test/eventlisteners.js
Unescape Escape View File

@ -18,7 +18,7 @@ describe('event listeners', function() {
var vnode = h('div', {on: {click: clicked}}, [
h('a', 'Click my parent'),
]);
patch(vnode0, vnode);
elm = patch(vnode0, vnode).elm;
elm.click();
assert.equal(1, result.length);
});
@ -31,9 +31,9 @@ describe('event listeners', function() {
var vnode2 = h('div', {on: {click: function(ev) { result.push(2); }}}, [
h('a', 'Click my parent'),
]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
elm.click();
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
elm.click();
assert.deepEqual(result, [1, 2]);
});
@ -43,7 +43,7 @@ describe('event listeners', function() {
var vnode = h('div', {on: {click: [clicked, 1]}}, [
h('a', 'Click my parent'),
]);
patch(vnode0, vnode);
elm = patch(vnode0, vnode).elm;
elm.click();
assert.deepEqual(result, [1]);
});
@ -59,11 +59,11 @@ describe('event listeners', function() {
var vnode3 = h('div', {on: {click: [clicked, 3]}}, [
h('a', 'Click my parent'),
]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
elm.click();
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
elm.click();
patch(vnode2, vnode3);
elm = patch(vnode2, vnode3).elm;
elm.click();
assert.deepEqual(result, [1, 2, 3]);
});
@ -79,11 +79,11 @@ describe('event listeners', function() {
var vnode3 = h('div', {on: {click: [clicked, 2, 3]}}, [
h('a', 'Click my parent'),
]);
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
elm.click();
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
elm.click();
patch(vnode2, vnode3);
elm = patch(vnode2, vnode3).elm;
elm.click();
assert.deepEqual(result, [[1, 2, 3], [1, 2], [2, 3]]);
});

12
test/style.js
Unescape Escape View File

@ -15,20 +15,20 @@ describe('style', function() {
vnode0 = elm;
});
it('is being styled', function() {
patch(vnode0, h('div', {style: {fontSize: '12px'}}));
elm = patch(vnode0, h('div', {style: {fontSize: '12px'}})).elm;
assert.equal(elm.style.fontSize, '12px');
});
it('updates styles', function() {
var vnode1 = h('i', {style: {fontSize: '14px', display: 'inline'}});
var vnode2 = h('i', {style: {fontSize: '12px', display: 'block'}});
var vnode3 = h('i', {style: {fontSize: '10px', display: 'block'}});
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.style.fontSize, '14px');
assert.equal(elm.style.display, 'inline');
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.style.fontSize, '12px');
assert.equal(elm.style.display, 'block');
patch(vnode2, vnode3);
elm = patch(vnode2, vnode3).elm;
assert.equal(elm.style.fontSize, '10px');
assert.equal(elm.style.display, 'block');
});
@ -38,12 +38,12 @@ describe('style', function() {
]);
var vnode1 = h('i', {style: {fontSize: '14px', delayed: {fontSize: '16px'}}});
var vnode2 = h('i', {style: {fontSize: '18px', delayed: {fontSize: '20px'}}});
patch(vnode0, vnode1);
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.style.fontSize, '14px');
fakeRaf.step();
fakeRaf.step();
assert.equal(elm.style.fontSize, '16px');
patch(vnode1, vnode2);
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.style.fontSize, '18px');
fakeRaf.step();
fakeRaf.step();

81
test/thunk.js
Unescape Escape View File

@ -7,15 +7,10 @@ var h = require('../h');
var thunk = require('../thunk');
describe('thunk', function() {
var parent, vnode0;
var elm, vnode0;
beforeEach(function() {
parent = document.createElement('div');
vnode0 = document.createElement('div');
parent.appendChild(vnode0);
elm = vnode0 = document.createElement('div');
});
function elm() {
return parent.firstChild;
}
it('returns vnode with data and render function', function() {
function numberInSpan(n) {
return h('span', 'Number is ' + n);
@ -59,15 +54,15 @@ describe('thunk', function() {
var vnode3 = h('div', [
thunk('num', numberInSpan, 2)
]);
patch(vnode0, vnode1);
assert.equal(elm().firstChild.tagName.toLowerCase(), 'span');
assert.equal(elm().firstChild.innerHTML, 'Number is 1');
patch(vnode1, vnode2);
assert.equal(elm().firstChild.tagName.toLowerCase(), 'span');
assert.equal(elm().firstChild.innerHTML, 'Number is 1');
patch(vnode2, vnode3);
assert.equal(elm().firstChild.tagName.toLowerCase(), 'span');
assert.equal(elm().firstChild.innerHTML, 'Number is 2');
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.firstChild.tagName.toLowerCase(), 'span');
assert.equal(elm.firstChild.innerHTML, 'Number is 1');
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.firstChild.tagName.toLowerCase(), 'span');
assert.equal(elm.firstChild.innerHTML, 'Number is 1');
elm = patch(vnode2, vnode3).elm;
assert.equal(elm.firstChild.tagName.toLowerCase(), 'span');
assert.equal(elm.firstChild.innerHTML, 'Number is 2');
assert.equal(called, 2);
});
it('renders correctly when root', function() {
@ -80,17 +75,17 @@ describe('thunk', function() {
var vnode2 = thunk('num', numberInSpan, 1);
var vnode3 = thunk('num', numberInSpan, 2);
patch(vnode0, vnode1);
assert.equal(elm().tagName.toLowerCase(), 'span');
assert.equal(elm().innerHTML, 'Number is 1');
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.tagName.toLowerCase(), 'span');
assert.equal(elm.innerHTML, 'Number is 1');
patch(vnode1, vnode2);
assert.equal(elm().tagName.toLowerCase(), 'span');
assert.equal(elm().innerHTML, 'Number is 1');
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.tagName.toLowerCase(), 'span');
assert.equal(elm.innerHTML, 'Number is 1');
patch(vnode2, vnode3);
assert.equal(elm().tagName.toLowerCase(), 'span');
assert.equal(elm().innerHTML, 'Number is 2');
elm = patch(vnode2, vnode3).elm;
assert.equal(elm.tagName.toLowerCase(), 'span');
assert.equal(elm.innerHTML, 'Number is 2');
assert.equal(called, 2);
});
it('can mutate its root tag', function() {
@ -101,13 +96,13 @@ describe('thunk', function() {
var vnode1 = h('div', [thunk('oddEven', oddEven, 1)]);
var vnode2 = h('div', [thunk('oddEven', oddEven, 4)]);
patch(vnode0, vnode1);
assert.equal(elm().firstChild.tagName.toLowerCase(), 'div');
assert.equal(elm().firstChild.className, 'odd');
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.firstChild.tagName.toLowerCase(), 'div');
assert.equal(elm.firstChild.className, 'odd');
patch(vnode1, vnode2);
assert.equal(elm().firstChild.tagName.toLowerCase(), 'p');
assert.equal(elm().firstChild.className, 'even');
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.firstChild.tagName.toLowerCase(), 'p');
assert.equal(elm.firstChild.className, 'even');
});
it('can be replaced and removed', function() {
function numberInSpan(n) {
@ -120,13 +115,13 @@ describe('thunk', function() {
var vnode1 = h('div', [thunk('num', numberInSpan, 1)]);
var vnode2 = h('div', [thunk('oddEven', oddEven, 4)]);
patch(vnode0, vnode1);
assert.equal(elm().firstChild.tagName.toLowerCase(), 'span');
assert.equal(elm().firstChild.className, 'numberInSpan');
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.firstChild.tagName.toLowerCase(), 'span');
assert.equal(elm.firstChild.className, 'numberInSpan');
patch(vnode1, vnode2);
assert.equal(elm().firstChild.tagName.toLowerCase(), 'div');
assert.equal(elm().firstChild.className, 'even');
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.firstChild.tagName.toLowerCase(), 'div');
assert.equal(elm.firstChild.className, 'even');
});
it('can be replaced and removed when root', function() {
function numberInSpan(n) {
@ -139,12 +134,12 @@ describe('thunk', function() {
var vnode1 = thunk('num', numberInSpan, 1);
var vnode2 = thunk('oddEven', oddEven, 4);
patch(vnode0, vnode1);
assert.equal(elm().tagName.toLowerCase(), 'span');
assert.equal(elm().className, 'numberInSpan');
elm = patch(vnode0, vnode1).elm;
assert.equal(elm.tagName.toLowerCase(), 'span');
assert.equal(elm.className, 'numberInSpan');
patch(vnode1, vnode2);
assert.equal(elm().tagName.toLowerCase(), 'div');
assert.equal(elm().className, 'even');
elm = patch(vnode1, vnode2).elm;
assert.equal(elm.tagName.toLowerCase(), 'div');
assert.equal(elm.className, 'even');
});
});

Write Preview
Loading…
Cancel
Save