implement keys
This commit is contained in:
parent
31a6fe606c
commit
53672e62d7
4 changed files with 223 additions and 3 deletions
|
|
@ -89,3 +89,128 @@ test('config handler context', function() {
|
|||
}})
|
||||
m.render(dummyEl, view);
|
||||
})
|
||||
|
||||
test('node identity remove firstChild', function() {
|
||||
expect(2);
|
||||
var view1 = m('div', {}, [
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:2}, 'E2'),
|
||||
]);
|
||||
m.render(dummyEl, view1);
|
||||
|
||||
var node2 = dummyEl.firstChild.lastChild;
|
||||
equal(node2.innerHTML, 'E2')
|
||||
|
||||
var view2 = m('div', {}, [
|
||||
m('div', {key:2}, 'E2'),
|
||||
]);
|
||||
m.render(dummyEl, view2);
|
||||
|
||||
equal(dummyEl.firstChild.firstChild, node2);
|
||||
|
||||
})
|
||||
|
||||
test('node identity change order', function() {
|
||||
expect(2);
|
||||
var view1 = m('div', {}, [
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:2}, 'E2'),
|
||||
m('div', {key:3}, 'E3'),
|
||||
]);
|
||||
m.render(dummyEl, view1);
|
||||
|
||||
var e2 = dummyEl.firstChild.firstChild.nextSibling;
|
||||
equal(e2.innerHTML, 'E2')
|
||||
|
||||
var view2 = m('div', {}, [
|
||||
m('div', {key:2}, 'E2'),
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:3}, 'E3'),
|
||||
]);
|
||||
m.render(dummyEl, view2);
|
||||
|
||||
equal(dummyEl.firstChild.firstChild, e2);
|
||||
})
|
||||
|
||||
test('node identity remove in the middle', function() {
|
||||
expect(2);
|
||||
var view1 = m('div', {}, [
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:2}, 'E2'),
|
||||
m('div', {key:3}, 'E3'),
|
||||
]);
|
||||
m.render(dummyEl, view1);
|
||||
|
||||
var e3 = dummyEl.firstChild.lastChild;
|
||||
equal(e3.innerHTML, 'E3')
|
||||
|
||||
var view2 = m('div', {}, [
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:3}, 'E3'),
|
||||
]);
|
||||
m.render(dummyEl, view2);
|
||||
|
||||
equal(dummyEl.firstChild.firstChild.nextSibling, e3);
|
||||
|
||||
})
|
||||
|
||||
test('node identity remove last', function() {
|
||||
expect(4);
|
||||
var view1 = m('div', {}, [
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:2}, 'E2'),
|
||||
m('div', {key:3}, 'E3'),
|
||||
]);
|
||||
m.render(dummyEl, view1);
|
||||
|
||||
var e1 = dummyEl.firstChild.firstChild;
|
||||
equal(e1.innerHTML, 'E1')
|
||||
var e2 = dummyEl.firstChild.firstChild.nextSibling;
|
||||
equal(e2.innerHTML, 'E2')
|
||||
|
||||
var view2 = m('div', {}, [
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:2}, 'E2'),
|
||||
]);
|
||||
m.render(dummyEl, view2);
|
||||
|
||||
equal(dummyEl.firstChild.firstChild, e1);
|
||||
equal(dummyEl.firstChild.firstChild.nextSibling, e2);
|
||||
|
||||
})
|
||||
|
||||
test('node identity shuffle and remove', function() {
|
||||
expect(8);
|
||||
var view1 = m('div', {}, [
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:2}, 'E2'),
|
||||
m('div', {key:3}, 'E3'),
|
||||
m('div', {key:4}, 'E4'),
|
||||
m('div', {key:5}, 'E5'),
|
||||
]);
|
||||
m.render(dummyEl, view1);
|
||||
|
||||
var e1 = dummyEl.firstChild.firstChild;
|
||||
equal(e1.innerHTML, 'E1')
|
||||
var e2 = e1.nextSibling;
|
||||
equal(e2.innerHTML, 'E2')
|
||||
var e3 = e2.nextSibling;
|
||||
equal(e3.innerHTML, 'E3')
|
||||
var e4 = e3.nextSibling;
|
||||
equal(e4.innerHTML, 'E4')
|
||||
var e5 = e4.nextSibling;
|
||||
equal(e5.innerHTML, 'E5')
|
||||
|
||||
var view2 = m('div', {}, [
|
||||
m('div', {key:4}, 'E4'),
|
||||
m('div', {key:10}, 'E10'),
|
||||
m('div', {key:1}, 'E1'),
|
||||
m('div', {key:2}, 'E2'),
|
||||
]);
|
||||
m.render(dummyEl, view2);
|
||||
|
||||
equal(dummyEl.firstChild.firstChild, e4, 'e4 is first element');
|
||||
equal(dummyEl.firstChild.firstChild.nextSibling.nextSibling, e1, 'e1 is third element');
|
||||
equal(dummyEl.firstChild.firstChild.nextSibling.nextSibling.nextSibling, e2, 'e2 is fourth element');
|
||||
|
||||
})
|
||||
|
|
@ -507,6 +507,47 @@ function testMithril(mock) {
|
|||
m.render(root, m("div", ["asdf", "asdf2", "asdf3"]));
|
||||
return true
|
||||
})
|
||||
test(function() {
|
||||
//https://github.com/lhorie/mithril.js/issues/98
|
||||
//insert at beginning
|
||||
var root = mock.document.createElement("div")
|
||||
m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3})])
|
||||
var firstBefore = root.childNodes[0]
|
||||
m.render(root, [m("a", {key: 4}), m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3})])
|
||||
var firstAfter = root.childNodes[1]
|
||||
return firstBefore == firstAfter && root.childNodes[0].key == 4 && root.childNodes.length == 4
|
||||
})
|
||||
test(function() {
|
||||
//https://github.com/lhorie/mithril.js/issues/98
|
||||
var root = mock.document.createElement("div")
|
||||
m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3})])
|
||||
var firstBefore = root.childNodes[0]
|
||||
m.render(root, [m("a", {key: 4}), m("a", {key: 1}), m("a", {key: 2})])
|
||||
var firstAfter = root.childNodes[1]
|
||||
return firstBefore == firstAfter && root.childNodes[0].key == 4 && root.childNodes.length == 3
|
||||
})
|
||||
test(function() {
|
||||
//https://github.com/lhorie/mithril.js/issues/98
|
||||
var root = mock.document.createElement("div")
|
||||
m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3})])
|
||||
var firstBefore = root.childNodes[1]
|
||||
m.render(root, [m("a", {key: 2}), m("a", {key: 3}), m("a", {key: 4})])
|
||||
var firstAfter = root.childNodes[0]
|
||||
return firstBefore == firstAfter && root.childNodes[0].key === "2" && root.childNodes.length === 3
|
||||
})
|
||||
test(function() {
|
||||
//https://github.com/lhorie/mithril.js/issues/98
|
||||
var root = mock.document.createElement("div")
|
||||
m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3}), m("a", {key: 4}), m("a", {key: 5})])
|
||||
var firstBefore = root.childNodes[0]
|
||||
var secondBefore = root.childNodes[1]
|
||||
var fourthBefore = root.childNodes[3]
|
||||
m.render(root, [m("a", {key: 4}), m("a", {key: 10}), m("a", {key: 1}), m("a", {key: 2})])
|
||||
var firstAfter = root.childNodes[2]
|
||||
var secondAfter = root.childNodes[3]
|
||||
var fourthAfter = root.childNodes[0]
|
||||
return firstBefore === firstAfter && secondBefore === secondAfter && fourthBefore === fourthAfter && root.childNodes[1].key == "10" && root.childNodes.length === 4
|
||||
})
|
||||
//end m.render
|
||||
|
||||
//m.redraw
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ mock.window = new function() {
|
|||
if (referenceIndex < 0) this.childNodes.push(node)
|
||||
else {
|
||||
var index = this.childNodes.indexOf(node)
|
||||
this.childNodes.splice(referenceIndex, index < 0 ? 0 : 1, node)
|
||||
if (index > -1) this.childNodes.splice(index, 1)
|
||||
this.childNodes.splice(referenceIndex, 0, node)
|
||||
}
|
||||
},
|
||||
insertAdjacentHTML: function(position, html) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue