Fix state initialization (#1652)
* Add test-utils/components.js and its tests * Tests: group together tests with/without components * Tests: factory => closure components * Tests: add dummy forEach blocks around sections with components * Tests: render/test-components tweaks * Tests: Wrap some component definitions in `createComponent()` calls These are the ones that would have been tedious to automate. jscodeshift will handle the remaining ones * Tests: wrap the rest of the components definitions * Tests: enable the three kind of components in all related files but api/tests/test-route.js * Add test-utils/components.js to index.html where needed * Tests: Some more render/tests/test-component.js refactoring * Tests: enable tests for #1638 * fix #1638 * Test: ensure that recycled components get a fresh state * Tests: add a test for onbeforeupdate and recycled nodes * Fix recycled components initialization fix #1641
This commit is contained in:
Pierre-Yves Gérardy
Isiah Meadows
parent
3786373b58
commit
60e8f307f1
15 changed files with 1615 additions and 1406 deletions
|
|
@ -13,6 +13,7 @@
|
|||
<script src="../../test-utils/pushStateMock.js"></script>
|
||||
<script src="../../test-utils/xhrMock.js"></script>
|
||||
<script src="../../test-utils/browserMock.js"></script>
|
||||
<script src="../../test-utils/component.js"></script>
|
||||
|
||||
<script src="../../promise/promise.js"></script>
|
||||
<script src="../../render/vnode.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var components = require("../../test-utils/components")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
|
||||
var m = require("../../render/hyperscript")
|
||||
|
|
@ -22,16 +23,6 @@ o.spec("mount", function() {
|
|||
render = coreRenderer($window).render
|
||||
})
|
||||
|
||||
o("throws on invalid `root` DOM node", function() {
|
||||
var threw = false
|
||||
try {
|
||||
mount(null, {view: function() {}})
|
||||
} catch (e) {
|
||||
threw = true
|
||||
}
|
||||
o(threw).equals(true)
|
||||
})
|
||||
|
||||
o("throws on invalid component", function() {
|
||||
var threw = false
|
||||
try {
|
||||
|
|
@ -42,227 +33,223 @@ o.spec("mount", function() {
|
|||
o(threw).equals(true)
|
||||
})
|
||||
|
||||
o("renders into `root` (POJO component)", function() {
|
||||
mount(root, {
|
||||
view : function() {
|
||||
return m("div")
|
||||
}
|
||||
})
|
||||
components.forEach(function(cmp){
|
||||
o.spec(cmp.kind, function(){
|
||||
var createComponent = cmp.create
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
|
||||
o("renders into `root` (class component)", function() {
|
||||
function Cmp(){}
|
||||
Cmp.prototype.view = function(){return m("div")}
|
||||
mount(root, Cmp)
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
|
||||
o("renders into `root` factory (factory component)", function() {
|
||||
mount(root, function(){
|
||||
return {
|
||||
view : function() {
|
||||
return m("div")
|
||||
o("throws on invalid `root` DOM node", function() {
|
||||
var threw = false
|
||||
try {
|
||||
mount(null, createComponent({view: function() {}}))
|
||||
} catch (e) {
|
||||
threw = true
|
||||
}
|
||||
}
|
||||
})
|
||||
o(threw).equals(true)
|
||||
})
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
|
||||
o("mounting null unmounts", function() {
|
||||
mount(root, {
|
||||
view : function() {
|
||||
return m("div")
|
||||
}
|
||||
})
|
||||
|
||||
mount(root, null)
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
||||
o("redraws on events", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
var onclick = o.spy()
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
mount(root, {
|
||||
view : function() {
|
||||
return m("div", {
|
||||
oninit : oninit,
|
||||
onupdate : onupdate,
|
||||
onclick : onclick,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
o(onclick.callCount).equals(1)
|
||||
o(onclick.this).equals(root.firstChild)
|
||||
o(onclick.args[0].type).equals("click")
|
||||
o(onclick.args[0].target).equals(root.firstChild)
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(1)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
o("redraws several mount points on events", function(done, timeout) {
|
||||
timeout(60)
|
||||
|
||||
var onupdate0 = o.spy()
|
||||
var oninit0 = o.spy()
|
||||
var onclick0 = o.spy()
|
||||
var onupdate1 = o.spy()
|
||||
var oninit1 = o.spy()
|
||||
var onclick1 = o.spy()
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [
|
||||
m("#child0"),
|
||||
m("#child1")
|
||||
])
|
||||
|
||||
mount(root.childNodes[0], {
|
||||
view : function() {
|
||||
return m("div", {
|
||||
oninit : oninit0,
|
||||
onupdate : onupdate0,
|
||||
onclick : onclick0,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
o(oninit0.callCount).equals(1)
|
||||
o(onupdate0.callCount).equals(0)
|
||||
|
||||
mount(root.childNodes[1], {
|
||||
view : function() {
|
||||
return m("div", {
|
||||
oninit : oninit1,
|
||||
onupdate : onupdate1,
|
||||
onclick : onclick1,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
o(oninit1.callCount).equals(1)
|
||||
o(onupdate1.callCount).equals(0)
|
||||
|
||||
root.childNodes[0].firstChild.dispatchEvent(e)
|
||||
o(onclick0.callCount).equals(1)
|
||||
o(onclick0.this).equals(root.childNodes[0].firstChild)
|
||||
|
||||
setTimeout(function() {
|
||||
o(onupdate0.callCount).equals(1)
|
||||
o(onupdate1.callCount).equals(1)
|
||||
|
||||
root.childNodes[1].firstChild.dispatchEvent(e)
|
||||
o(onclick1.callCount).equals(1)
|
||||
o(onclick1.this).equals(root.childNodes[1].firstChild)
|
||||
|
||||
setTimeout(function() {
|
||||
o(onupdate0.callCount).equals(2)
|
||||
o(onupdate1.callCount).equals(2)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
}, FRAME_BUDGET)
|
||||
|
||||
})
|
||||
|
||||
o("event handlers can skip redraw", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
mount(root, {
|
||||
view: function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate,
|
||||
onclick: function(e) {
|
||||
e.redraw = false
|
||||
o("renders into `root`", function() {
|
||||
mount(root, createComponent({
|
||||
view : function() {
|
||||
return m("div")
|
||||
}
|
||||
})
|
||||
}
|
||||
}))
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
|
||||
o("mounting null unmounts", function() {
|
||||
mount(root, createComponent({
|
||||
view : function() {
|
||||
return m("div")
|
||||
}
|
||||
}))
|
||||
|
||||
mount(root, null)
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
||||
o("redraws on events", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
var onclick = o.spy()
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
mount(root, createComponent({
|
||||
view : function() {
|
||||
return m("div", {
|
||||
oninit : oninit,
|
||||
onupdate : onupdate,
|
||||
onclick : onclick,
|
||||
})
|
||||
}
|
||||
}))
|
||||
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
o(onclick.callCount).equals(1)
|
||||
o(onclick.this).equals(root.firstChild)
|
||||
o(onclick.args[0].type).equals("click")
|
||||
o(onclick.args[0].target).equals(root.firstChild)
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(1)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
o("redraws several mount points on events", function(done, timeout) {
|
||||
timeout(60)
|
||||
|
||||
var onupdate0 = o.spy()
|
||||
var oninit0 = o.spy()
|
||||
var onclick0 = o.spy()
|
||||
var onupdate1 = o.spy()
|
||||
var oninit1 = o.spy()
|
||||
var onclick1 = o.spy()
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [
|
||||
m("#child0"),
|
||||
m("#child1")
|
||||
])
|
||||
|
||||
mount(root.childNodes[0], createComponent({
|
||||
view : function() {
|
||||
return m("div", {
|
||||
oninit : oninit0,
|
||||
onupdate : onupdate0,
|
||||
onclick : onclick0,
|
||||
})
|
||||
}
|
||||
}))
|
||||
|
||||
o(oninit0.callCount).equals(1)
|
||||
o(onupdate0.callCount).equals(0)
|
||||
|
||||
mount(root.childNodes[1], createComponent({
|
||||
view : function() {
|
||||
return m("div", {
|
||||
oninit : oninit1,
|
||||
onupdate : onupdate1,
|
||||
onclick : onclick1,
|
||||
})
|
||||
}
|
||||
}))
|
||||
|
||||
o(oninit1.callCount).equals(1)
|
||||
o(onupdate1.callCount).equals(0)
|
||||
|
||||
root.childNodes[0].firstChild.dispatchEvent(e)
|
||||
o(onclick0.callCount).equals(1)
|
||||
o(onclick0.this).equals(root.childNodes[0].firstChild)
|
||||
|
||||
setTimeout(function() {
|
||||
o(onupdate0.callCount).equals(1)
|
||||
o(onupdate1.callCount).equals(1)
|
||||
|
||||
root.childNodes[1].firstChild.dispatchEvent(e)
|
||||
o(onclick1.callCount).equals(1)
|
||||
o(onclick1.this).equals(root.childNodes[1].firstChild)
|
||||
|
||||
setTimeout(function() {
|
||||
o(onupdate0.callCount).equals(2)
|
||||
o(onupdate1.callCount).equals(2)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
}, FRAME_BUDGET)
|
||||
|
||||
})
|
||||
|
||||
o("event handlers can skip redraw", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
mount(root, createComponent({
|
||||
view: function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate,
|
||||
onclick: function(e) {
|
||||
e.redraw = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}))
|
||||
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
// Wrapped to ensure no redraw fired
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
o("redraws when the render function is run", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
|
||||
mount(root, createComponent({
|
||||
view : function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate
|
||||
})
|
||||
}
|
||||
}))
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
redrawService.redraw()
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(1)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
o("throttles", function(done, timeout) {
|
||||
timeout(200)
|
||||
|
||||
var i = 0
|
||||
mount(root, createComponent({view: function() {i++}}))
|
||||
var before = i
|
||||
|
||||
redrawService.redraw()
|
||||
redrawService.redraw()
|
||||
redrawService.redraw()
|
||||
redrawService.redraw()
|
||||
|
||||
var after = i
|
||||
|
||||
setTimeout(function(){
|
||||
o(before).equals(1) // mounts synchronously
|
||||
o(after).equals(1) // throttles rest
|
||||
o(i).equals(2)
|
||||
done()
|
||||
},40)
|
||||
})
|
||||
})
|
||||
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
// Wrapped to ensure no redraw fired
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
o("redraws when the render function is run", function(done) {
|
||||
var onupdate = o.spy()
|
||||
var oninit = o.spy()
|
||||
|
||||
mount(root, {
|
||||
view : function() {
|
||||
return m("div", {
|
||||
oninit: oninit,
|
||||
onupdate: onupdate
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
o(oninit.callCount).equals(1)
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
redrawService.redraw()
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
o(onupdate.callCount).equals(1)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
o("throttles", function(done, timeout) {
|
||||
timeout(200)
|
||||
|
||||
var i = 0
|
||||
mount(root, {view: function() {i++}})
|
||||
var before = i
|
||||
|
||||
redrawService.redraw()
|
||||
redrawService.redraw()
|
||||
redrawService.redraw()
|
||||
redrawService.redraw()
|
||||
|
||||
var after = i
|
||||
|
||||
setTimeout(function(){
|
||||
o(before).equals(1) // mounts synchronously
|
||||
o(after).equals(1) // throttles rest
|
||||
o(i).equals(2)
|
||||
done()
|
||||
},40)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -82,7 +82,7 @@ o.spec("route", function() {
|
|||
|
||||
})
|
||||
|
||||
o("routed mount points can redraw synchronously (factory component)", function() {
|
||||
o("routed mount points can redraw synchronously (closure component)", function() {
|
||||
var view = o.spy()
|
||||
|
||||
function Cmp() {return {view: view}}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ module.exports = function($window) {
|
|||
}
|
||||
function createNode(parent, vnode, hooks, ns, nextSibling) {
|
||||
var tag = vnode.tag
|
||||
if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
|
||||
if (typeof tag === "string") {
|
||||
if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
|
||||
switch (tag) {
|
||||
case "#": return createText(parent, vnode, nextSibling)
|
||||
case "<": return createHTML(parent, vnode, nextSibling)
|
||||
|
|
@ -100,7 +100,7 @@ module.exports = function($window) {
|
|||
}
|
||||
return element
|
||||
}
|
||||
function createComponent(parent, vnode, hooks, ns, nextSibling) {
|
||||
function initComponent(vnode, hooks) {
|
||||
var sentinel
|
||||
if (typeof vnode.tag === "function") {
|
||||
vnode.state = null
|
||||
|
|
@ -116,10 +116,13 @@ module.exports = function($window) {
|
|||
sentinel.$$reentrantLock$$ = true
|
||||
}
|
||||
|
||||
if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
|
||||
initLifecycle(vnode.state, vnode, hooks)
|
||||
vnode.instance = Vnode.normalize(vnode.state.view(vnode))
|
||||
sentinel.$$reentrantLock$$ = null
|
||||
|
||||
}
|
||||
function createComponent(parent, vnode, hooks, ns, nextSibling) {
|
||||
initComponent(vnode, hooks)
|
||||
if (vnode.instance != null) {
|
||||
if (vnode.instance === vnode) throw Error("A view cannot return the vnode it received as arguments")
|
||||
var element = createNode(parent, vnode.instance, hooks, ns, nextSibling)
|
||||
|
|
@ -232,11 +235,12 @@ module.exports = function($window) {
|
|||
if (oldTag === tag) {
|
||||
vnode.state = old.state
|
||||
vnode.events = old.events
|
||||
if (shouldUpdate(vnode, old)) return
|
||||
if (vnode.attrs != null) {
|
||||
updateLifecycle(vnode.attrs, vnode, hooks, recycling)
|
||||
}
|
||||
if (!recycling && shouldNotUpdate(vnode, old)) return
|
||||
if (typeof oldTag === "string") {
|
||||
if (vnode.attrs != null) {
|
||||
if (recycling) initLifecycle(vnode.attrs, vnode, hooks)
|
||||
else updateLifecycle(vnode.attrs, vnode, hooks)
|
||||
}
|
||||
switch (oldTag) {
|
||||
case "#": updateText(old, vnode); break
|
||||
case "<": updateHTML(parent, old, vnode, nextSibling); break
|
||||
|
|
@ -306,8 +310,13 @@ module.exports = function($window) {
|
|||
}
|
||||
}
|
||||
function updateComponent(parent, old, vnode, hooks, nextSibling, recycling, ns) {
|
||||
vnode.instance = Vnode.normalize(vnode.state.view(vnode))
|
||||
updateLifecycle(vnode.state, vnode, hooks, recycling)
|
||||
if (recycling) {
|
||||
initComponent(vnode, hooks)
|
||||
} else {
|
||||
vnode.instance = Vnode.normalize(vnode.state.view(vnode))
|
||||
if (vnode.attrs != null) updateLifecycle(vnode.attrs, vnode, hooks)
|
||||
updateLifecycle(vnode.state, vnode, hooks)
|
||||
}
|
||||
if (vnode.instance != null) {
|
||||
if (old.instance == null) createNode(parent, vnode.instance, hooks, ns, nextSibling)
|
||||
else updateNode(parent, old.instance, vnode.instance, hooks, nextSibling, recycling, ns)
|
||||
|
|
@ -566,11 +575,10 @@ module.exports = function($window) {
|
|||
if (typeof source.oninit === "function") source.oninit.call(vnode.state, vnode)
|
||||
if (typeof source.oncreate === "function") hooks.push(source.oncreate.bind(vnode.state, vnode))
|
||||
}
|
||||
function updateLifecycle(source, vnode, hooks, recycling) {
|
||||
if (recycling) initLifecycle(source, vnode, hooks)
|
||||
else if (typeof source.onupdate === "function") hooks.push(source.onupdate.bind(vnode.state, vnode))
|
||||
function updateLifecycle(source, vnode, hooks) {
|
||||
if (typeof source.onupdate === "function") hooks.push(source.onupdate.bind(vnode.state, vnode))
|
||||
}
|
||||
function shouldUpdate(vnode, old) {
|
||||
function shouldNotUpdate(vnode, old) {
|
||||
var forceVnodeUpdate, forceComponentUpdate
|
||||
if (vnode.attrs != null && typeof vnode.attrs.onbeforeupdate === "function") forceVnodeUpdate = vnode.attrs.onbeforeupdate.call(vnode.state, vnode, old)
|
||||
if (typeof vnode.tag !== "string" && typeof vnode.state.onbeforeupdate === "function") forceComponentUpdate = vnode.state.onbeforeupdate(vnode, old)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<script src="../../ospec/ospec.js"></script>
|
||||
<script src="../../test-utils/callAsync.js"></script>
|
||||
<script src="../../test-utils/domMock.js"></script>
|
||||
<script src="../../test-utils/component.js"></script>
|
||||
|
||||
<script src="../../render/vnode.js"></script>
|
||||
<script src="../../render/trust.js"></script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
var o = require("../../ospec/ospec")
|
||||
var callAsync = require("../../test-utils/callAsync")
|
||||
var components = require("../../test-utils/components")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var Promise = require("../../promise/promise")
|
||||
|
|
@ -169,39 +170,44 @@ o.spec("onbeforeremove", function() {
|
|||
done()
|
||||
})
|
||||
})
|
||||
o("finalizes the remove phase asynchronously when promise is returned synchronously from both attrs- and tag.onbeforeremove", function(done) {
|
||||
var onremove = o.spy()
|
||||
var onbeforeremove = function(){return Promise.resolve()}
|
||||
var component = {
|
||||
onbeforeremove: onbeforeremove,
|
||||
onremove: onremove,
|
||||
view: function() {},
|
||||
}
|
||||
render(root, [{tag: component, attrs: {onbeforeremove: onbeforeremove, onremove: onremove}}])
|
||||
render(root, [])
|
||||
callAsync(function() {
|
||||
o(onremove.callCount).equals(2) // once for `tag`, once for `attrs`
|
||||
done()
|
||||
})
|
||||
})
|
||||
o("awaits promise resolution before removing the node", function(done) {
|
||||
var view = o.spy()
|
||||
var onremove = o.spy()
|
||||
var onbeforeremove = function(){return new Promise(function(resolve){callAsync(resolve)})}
|
||||
var component = {
|
||||
onbeforeremove: onbeforeremove,
|
||||
onremove: onremove,
|
||||
view: view,
|
||||
}
|
||||
render(root, [{tag: component}])
|
||||
render(root, [])
|
||||
components.forEach(function(cmp){
|
||||
o.spec(cmp.kind, function(){
|
||||
var createComponent = cmp.create
|
||||
o("finalizes the remove phase asynchronously when promise is returned synchronously from both attrs- and tag.onbeforeremove", function(done) {
|
||||
var onremove = o.spy()
|
||||
var onbeforeremove = function(){return Promise.resolve()}
|
||||
var component = createComponent({
|
||||
onbeforeremove: onbeforeremove,
|
||||
onremove: onremove,
|
||||
view: function() {},
|
||||
})
|
||||
render(root, [{tag: component, attrs: {onbeforeremove: onbeforeremove, onremove: onremove}}])
|
||||
render(root, [])
|
||||
callAsync(function() {
|
||||
o(onremove.callCount).equals(2) // once for `tag`, once for `attrs`
|
||||
done()
|
||||
})
|
||||
})
|
||||
o("awaits promise resolution before removing the node", function(done) {
|
||||
var view = o.spy()
|
||||
var onremove = o.spy()
|
||||
var onbeforeremove = function(){return new Promise(function(resolve){callAsync(resolve)})}
|
||||
var component = createComponent({
|
||||
onbeforeremove: onbeforeremove,
|
||||
onremove: onremove,
|
||||
view: view,
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, [])
|
||||
|
||||
callAsync(function(){
|
||||
o(onremove.callCount).equals(0)
|
||||
callAsync(function(){
|
||||
o(onremove.callCount).equals(0)
|
||||
|
||||
callAsync(function() {
|
||||
o(onremove.callCount).equals(1)
|
||||
done()
|
||||
callAsync(function() {
|
||||
o(onremove.callCount).equals(1)
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var components = require("../../test-utils/components")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
|
|
@ -56,86 +57,6 @@ o.spec("onbeforeupdate", function() {
|
|||
o(root.firstChild.nodeValue).equals("a")
|
||||
})
|
||||
|
||||
o("prevents update in component", function() {
|
||||
var component = {
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", children: vnode.children}
|
||||
},
|
||||
}
|
||||
var vnode = {tag: component, children: [{tag: "#", children: "a"}]}
|
||||
var updated = {tag: component, children: [{tag: "#", children: "b"}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.firstChild.nodeValue).equals("a")
|
||||
})
|
||||
|
||||
o("prevents update if returning false in component and false in vnode", function() {
|
||||
var component = {
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
},
|
||||
}
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("a")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning true in component and true in vnode", function() {
|
||||
var component = {
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
},
|
||||
}
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning false in component but true in vnode", function() {
|
||||
var component = {
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
},
|
||||
}
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning true in component but false in vnode", function() {
|
||||
var component = {
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
},
|
||||
}
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning true", function() {
|
||||
var onbeforeupdate = function() {return true}
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
|
|
@ -147,22 +68,6 @@ o.spec("onbeforeupdate", function() {
|
|||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning true from component", function() {
|
||||
var component = {
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
},
|
||||
}
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("accepts arguments for comparison", function() {
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
|
|
@ -184,33 +89,6 @@ o.spec("onbeforeupdate", function() {
|
|||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("accepts arguments for comparison in component", function() {
|
||||
var component = {
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
},
|
||||
}
|
||||
var count = 0
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
function onbeforeupdate(vnode, old) {
|
||||
count++
|
||||
|
||||
o(old.attrs.id).equals("a")
|
||||
o(vnode.attrs.id).equals("b")
|
||||
|
||||
return old.attrs.id !== vnode.attrs.id
|
||||
}
|
||||
|
||||
o(count).equals(1)
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("is not called on creation", function() {
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
|
|
@ -226,28 +104,6 @@ o.spec("onbeforeupdate", function() {
|
|||
o(count).equals(0)
|
||||
})
|
||||
|
||||
o("is not called on component creation", function() {
|
||||
var component = {
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
},
|
||||
}
|
||||
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a"}}
|
||||
var updated = {tag: "div", attrs: {id: "b"}}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
function onbeforeupdate(vnode, old) {
|
||||
count++
|
||||
return true
|
||||
}
|
||||
|
||||
o(count).equals(0)
|
||||
})
|
||||
|
||||
o("is called only once on update", function() {
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
|
|
@ -264,26 +120,192 @@ o.spec("onbeforeupdate", function() {
|
|||
o(count).equals(1)
|
||||
})
|
||||
|
||||
o("is called only once on component update", function() {
|
||||
var component = {
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
},
|
||||
}
|
||||
o("doesn't fire on recycled nodes", function() {
|
||||
var onbeforeupdate = o.spy()
|
||||
var vnodes = [{tag: "div", key: 1}]
|
||||
var temp = []
|
||||
var updated = [{tag: "div", key: 1, attrs: {onbeforeupdate: onbeforeupdate}}]
|
||||
|
||||
var count = 0
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
function onbeforeupdate(vnode, old) {
|
||||
count++
|
||||
return true
|
||||
}
|
||||
|
||||
o(count).equals(1)
|
||||
o(vnodes[0].dom).equals(updated[0].dom)
|
||||
o(updated[0].dom.nodeName).equals("DIV")
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
})
|
||||
})
|
||||
|
||||
components.forEach(function(cmp){
|
||||
o.spec(cmp.kind, function(){
|
||||
var createComponent = cmp.create
|
||||
|
||||
o("prevents update in component", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", children: vnode.children}
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, children: [{tag: "#", children: "a"}]}
|
||||
var updated = {tag: component, children: [{tag: "#", children: "b"}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.firstChild.nodeValue).equals("a")
|
||||
})
|
||||
|
||||
o("prevents update if returning false in component and false in vnode", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("a")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning true in component and true in vnode", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning false in component but true in vnode", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning true in component but false in vnode", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning true from component", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("accepts arguments for comparison in component", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
},
|
||||
})
|
||||
var count = 0
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
function onbeforeupdate(vnode, old) {
|
||||
count++
|
||||
|
||||
o(old.attrs.id).equals("a")
|
||||
o(vnode.attrs.id).equals("b")
|
||||
|
||||
return old.attrs.id !== vnode.attrs.id
|
||||
}
|
||||
|
||||
o(count).equals(1)
|
||||
o(root.firstChild.attributes["id"].nodeValue).equals("b")
|
||||
})
|
||||
|
||||
o("is not called on component creation", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
},
|
||||
})
|
||||
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a"}}
|
||||
var updated = {tag: "div", attrs: {id: "b"}}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
function onbeforeupdate(vnode, old) {
|
||||
count++
|
||||
return true
|
||||
}
|
||||
|
||||
o(count).equals(0)
|
||||
})
|
||||
|
||||
o("is called only once on component update", function() {
|
||||
var component = createComponent({
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
},
|
||||
})
|
||||
|
||||
var count = 0
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
function onbeforeupdate(vnode, old) {
|
||||
count++
|
||||
return true
|
||||
}
|
||||
|
||||
o(count).equals(1)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var components = require("../../test-utils/components")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
|
@ -80,39 +81,6 @@ o.spec("onremove", function() {
|
|||
o(remove.this).equals(vnode.state)
|
||||
o(remove.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls onremove on nested component", function() {
|
||||
var spy = o.spy()
|
||||
var comp = {
|
||||
view: function() {return m(outer)}
|
||||
}
|
||||
var outer = {
|
||||
view: function() {return m(inner)}
|
||||
}
|
||||
var inner = {
|
||||
onremove: spy,
|
||||
view: function() {return m("div")}
|
||||
}
|
||||
render(root, {tag: comp})
|
||||
render(root, null)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
})
|
||||
o("calls onremove on nested component child", function() {
|
||||
var spy = o.spy()
|
||||
var comp = {
|
||||
view: function() {return m(outer)}
|
||||
}
|
||||
var outer = {
|
||||
view: function() {return m(inner, m("a", {onremove: spy}))}
|
||||
}
|
||||
var inner = {
|
||||
view: function(vnode) {return m("div", vnode.children)}
|
||||
}
|
||||
render(root, {tag: comp})
|
||||
render(root, null)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
})
|
||||
o("does not set onremove as an event handler", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onremove: remove}, children: []}
|
||||
|
|
@ -145,4 +113,43 @@ o.spec("onremove", function() {
|
|||
|
||||
o(vnode.dom).notEquals(updated.dom)
|
||||
})
|
||||
})
|
||||
components.forEach(function(cmp){
|
||||
o.spec(cmp.kind, function(){
|
||||
var createComponent = cmp.create
|
||||
|
||||
o("calls onremove on nested component", function() {
|
||||
var spy = o.spy()
|
||||
var comp = createComponent({
|
||||
view: function() {return m(outer)}
|
||||
})
|
||||
var outer = createComponent({
|
||||
view: function() {return m(inner)}
|
||||
})
|
||||
var inner = createComponent({
|
||||
onremove: spy,
|
||||
view: function() {return m("div")}
|
||||
})
|
||||
render(root, {tag: comp})
|
||||
render(root, null)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
})
|
||||
o("calls onremove on nested component child", function() {
|
||||
var spy = o.spy()
|
||||
var comp = createComponent({
|
||||
view: function() {return m(outer)}
|
||||
})
|
||||
var outer = createComponent({
|
||||
view: function() {return m(inner, m("a", {onremove: spy}))}
|
||||
})
|
||||
var inner = createComponent({
|
||||
view: function(vnode) {return m("div", vnode.children)}
|
||||
})
|
||||
render(root, {tag: comp})
|
||||
render(root, null)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var components = require("../../test-utils/components")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
|
|
@ -118,7 +119,7 @@ o.spec("render", function() {
|
|||
o(oninit.callCount).equals(0)
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
})
|
||||
o("does not try to re-initialize a factory component whose view has thrown", function() {
|
||||
o("does not try to re-initialize a closure component whose view has thrown", function() {
|
||||
var oninit = o.spy()
|
||||
var onbeforeupdate = o.spy()
|
||||
function A() {
|
||||
|
|
@ -141,7 +142,7 @@ o.spec("render", function() {
|
|||
o(oninit.callCount).equals(1)
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
})
|
||||
o("does not try to re-initialize a factory component whose oninit has thrown", function() {
|
||||
o("does not try to re-initialize a closure component whose oninit has thrown", function() {
|
||||
var oninit = o.spy(function(vnode) {throw new Error("error")})
|
||||
var onbeforeupdate = o.spy()
|
||||
function A() {
|
||||
|
|
@ -164,7 +165,7 @@ o.spec("render", function() {
|
|||
o(oninit.callCount).equals(1)
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
})
|
||||
o("does not try to re-initialize a factory component whose factory has thrown", function() {
|
||||
o("does not try to re-initialize a closure component whose closure has thrown", function() {
|
||||
function A() {
|
||||
throw new Error("error")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var components = require("../../test-utils/components")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
|
|
@ -838,38 +839,6 @@ o.spec("updateNodes", function() {
|
|||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("fragment child toggles from null when followed by null component then tag", function() {
|
||||
var component = {view: function() {return null}}
|
||||
var vnodes = [{tag: "[", children: [{tag: "a"}, {tag: component}, {tag: "b"}]}]
|
||||
var temp = [{tag: "[", children: [null, {tag: component}, {tag: "b"}]}]
|
||||
var updated = [{tag: "[", children: [{tag: "a"}, {tag: component}, {tag: "b"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("fragment child toggles from null in component when followed by null component then tag", function() {
|
||||
var flag = true
|
||||
var a = {view: function() {return flag ? {tag: "a"} : null}}
|
||||
var b = {view: function() {return null}}
|
||||
var vnodes = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}]
|
||||
var temp = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}]
|
||||
var updated = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
flag = false
|
||||
render(root, temp)
|
||||
flag = true
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeName).equals("S")
|
||||
})
|
||||
o("cached, non-keyed nodes skip diff", function () {
|
||||
var onupdate = o.spy();
|
||||
var cached = {tag:"a", attrs:{onupdate: onupdate}}
|
||||
|
|
@ -926,7 +895,7 @@ o.spec("updateNodes", function() {
|
|||
o(update.callCount).equals(2)
|
||||
o(remove.callCount).equals(0)
|
||||
})
|
||||
o("component is recreated if key changes to undefined", function () {
|
||||
o("node is recreated if key changes to undefined", function () {
|
||||
var vnode = {tag: "b", key: 1}
|
||||
var updated = {tag: "b"}
|
||||
|
||||
|
|
@ -936,4 +905,42 @@ o.spec("updateNodes", function() {
|
|||
|
||||
o(vnode.dom).notEquals(updated.dom)
|
||||
})
|
||||
})
|
||||
components.forEach(function(cmp){
|
||||
o.spec(cmp.kind, function(){
|
||||
var createComponent = cmp.create
|
||||
|
||||
o("fragment child toggles from null when followed by null component then tag", function() {
|
||||
var component = createComponent({view: function() {return null}})
|
||||
var vnodes = [{tag: "[", children: [{tag: "a"}, {tag: component}, {tag: "b"}]}]
|
||||
var temp = [{tag: "[", children: [null, {tag: component}, {tag: "b"}]}]
|
||||
var updated = [{tag: "[", children: [{tag: "a"}, {tag: component}, {tag: "b"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("fragment child toggles from null in component when followed by null component then tag", function() {
|
||||
var flag = true
|
||||
var a = createComponent({view: function() {return flag ? {tag: "a"} : null}})
|
||||
var b = createComponent({view: function() {return null}})
|
||||
var vnodes = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}]
|
||||
var temp = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}]
|
||||
var updated = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
flag = false
|
||||
render(root, temp)
|
||||
flag = true
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeName).equals("S")
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
27
test-utils/components.js
Normal file
27
test-utils/components.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
module.exports = [
|
||||
{
|
||||
kind: 'POJO',
|
||||
create: function(methods) {
|
||||
var res = {view: function() {return {tag:'div'}}}
|
||||
Object.keys(methods || {}).forEach(function(m){res[m] = methods[m]})
|
||||
return res
|
||||
}
|
||||
}, {
|
||||
kind: 'constructible',
|
||||
create: function(methods) {
|
||||
function res(){}
|
||||
res.prototype.view = function() {return {tag:'div'}}
|
||||
Object.keys(methods || {}).forEach(function(m){res.prototype[m] = methods[m]})
|
||||
return res
|
||||
}
|
||||
}, {
|
||||
kind: 'closure',
|
||||
create: function(methods) {
|
||||
return function() {
|
||||
var res = {view: function() {return {tag:'div'}}}
|
||||
Object.keys(methods || {}).forEach(function(m){res[m] = methods[m]})
|
||||
return res
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -14,12 +14,14 @@
|
|||
<script src="../../test-utils/xhrMock.js"></script>
|
||||
<script src="../../test-utils/domMock.js"></script>
|
||||
<script src="../../test-utils/browserMock.js"></script>
|
||||
<script src="../../test-utils/component.js"></script>
|
||||
<script src="test-callAsync.js"></script>
|
||||
<script src="test-parseURL.js"></script>
|
||||
<script src="test-pushStateMock.js"></script>
|
||||
<script src="test-xhrMock.js"></script>
|
||||
<script src="test-domMock.js"></script>
|
||||
<script src="test-browserMock.js"></script>
|
||||
<script src="test-component.js"></script>
|
||||
|
||||
<script>require("../../ospec/ospec").run()</script>
|
||||
</body>
|
||||
|
|
|
|||
54
test-utils/tests/test-components.js
Normal file
54
test-utils/tests/test-components.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var components = require("../../test-utils/components")
|
||||
|
||||
o.spec("test-utils/components", function() {
|
||||
var test = o.spy(function(component) {
|
||||
return function() {
|
||||
o('works', function() {
|
||||
o(typeof component.kind).equals('string')
|
||||
|
||||
var methods = {oninit: function(){}, view: function(){}}
|
||||
|
||||
var cmp1, cmp2
|
||||
|
||||
if (component.kind === "POJO") {
|
||||
cmp1 = component.create()
|
||||
cmp2 = component.create(methods)
|
||||
} else if (component.kind === "constructible") {
|
||||
cmp1 = new (component.create())
|
||||
cmp2 = new (component.create(methods))
|
||||
} else if (component.kind === "closure") {
|
||||
cmp1 = component.create()()
|
||||
cmp2 = component.create(methods)()
|
||||
} else {
|
||||
throw new Error("unexpected component kind")
|
||||
}
|
||||
|
||||
o(cmp1 != null).equals(true)
|
||||
o(typeof cmp1.view).equals("function")
|
||||
|
||||
var vnode = cmp1.view()
|
||||
|
||||
o(vnode != null).equals(true)
|
||||
o(vnode).deepEquals({tag: "div"})
|
||||
|
||||
if (component.kind !== 'constructible') {
|
||||
o(cmp2).deepEquals(methods)
|
||||
} else {
|
||||
// deepEquals doesn't search the prototype, do it manually
|
||||
o(cmp2 != null).equals(true)
|
||||
o(cmp2.view).equals(methods.view)
|
||||
o(cmp2.oninit).equals(methods.oninit)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
o.after(function(){
|
||||
o(test.callCount).equals(3)
|
||||
})
|
||||
components.forEach(function(component) {
|
||||
o.spec(component.kind, test(component))
|
||||
})
|
||||
})
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
var o = require("../ospec/ospec")
|
||||
var browserMock = require("../test-utils/browserMock")
|
||||
var components = require("../test-utils/components")
|
||||
|
||||
o.spec("api", function() {
|
||||
var m
|
||||
|
|
@ -68,95 +69,6 @@ o.spec("api", function() {
|
|||
o(query).equals("a=1&b=2")
|
||||
})
|
||||
})
|
||||
o.spec("m.render", function() {
|
||||
o("works", function() {
|
||||
var root = window.document.createElement("div")
|
||||
m.render(root, m("div"))
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
})
|
||||
o.spec("m.mount", function() {
|
||||
o("works", function() {
|
||||
var root = window.document.createElement("div")
|
||||
m.mount(root, {view: function() {return m("div")}})
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
})
|
||||
o.spec("m.route", function() {
|
||||
o("works", function(done) {
|
||||
var root = window.document.createElement("div")
|
||||
m.route(root, "/a", {
|
||||
"/a": {view: function() {return m("div")}}
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
o("m.route.prefix", function(done) {
|
||||
var root = window.document.createElement("div")
|
||||
m.route.prefix("#")
|
||||
m.route(root, "/a", {
|
||||
"/a": {view: function() {return m("div")}}
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
o("m.route.get", function(done) {
|
||||
var root = window.document.createElement("div")
|
||||
m.route(root, "/a", {
|
||||
"/a": {view: function() {return m("div")}}
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
o(m.route.get()).equals("/a")
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
o("m.route.set", function(done, timeout) {
|
||||
timeout(100)
|
||||
var root = window.document.createElement("div")
|
||||
m.route(root, "/a", {
|
||||
"/:id": {view: function() {return m("div")}}
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
m.route.set("/b")
|
||||
setTimeout(function() {
|
||||
o(m.route.get()).equals("/b")
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
o.spec("m.redraw", function() {
|
||||
o("works", function(done) {
|
||||
var count = 0
|
||||
var root = window.document.createElement("div")
|
||||
m.mount(root, {view: function() {count++}})
|
||||
setTimeout(function() {
|
||||
m.redraw()
|
||||
|
||||
o(count).equals(2)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
o.spec("m.request", function() {
|
||||
o("works", function() {
|
||||
o(typeof m.request).equals("function") // TODO improve
|
||||
|
|
@ -167,4 +79,99 @@ o.spec("api", function() {
|
|||
o(typeof m.jsonp).equals("function") // TODO improve
|
||||
})
|
||||
})
|
||||
})
|
||||
o.spec("m.render", function() {
|
||||
o("works", function() {
|
||||
var root = window.document.createElement("div")
|
||||
m.render(root, m("div"))
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
})
|
||||
components.forEach(function(cmp){
|
||||
o.spec(cmp.kind, function(){
|
||||
var createComponent = cmp.create
|
||||
|
||||
o.spec("m.mount", function() {
|
||||
o("works", function() {
|
||||
var root = window.document.createElement("div")
|
||||
m.mount(root, createComponent({view: function() {return m("div")}}))
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
})
|
||||
o.spec("m.route", function() {
|
||||
o("works", function(done) {
|
||||
var root = window.document.createElement("div")
|
||||
m.route(root, "/a", {
|
||||
"/a": createComponent({view: function() {return m("div")}})
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
o("m.route.prefix", function(done) {
|
||||
var root = window.document.createElement("div")
|
||||
m.route.prefix("#")
|
||||
m.route(root, "/a", {
|
||||
"/a": createComponent({view: function() {return m("div")}})
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
o("m.route.get", function(done) {
|
||||
var root = window.document.createElement("div")
|
||||
m.route(root, "/a", {
|
||||
"/a": createComponent({view: function() {return m("div")}})
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
o(m.route.get()).equals("/a")
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
o("m.route.set", function(done, timeout) {
|
||||
timeout(100)
|
||||
var root = window.document.createElement("div")
|
||||
m.route(root, "/a", {
|
||||
"/:id": createComponent({view: function() {return m("div")}})
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
m.route.set("/b")
|
||||
setTimeout(function() {
|
||||
o(m.route.get()).equals("/b")
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
o.spec("m.redraw", function() {
|
||||
o("works", function(done) {
|
||||
var count = 0
|
||||
var root = window.document.createElement("div")
|
||||
m.mount(root, createComponent({view: function() {count++}}))
|
||||
setTimeout(function() {
|
||||
m.redraw()
|
||||
|
||||
o(count).equals(2)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue