vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'test-all-component-kinds' of https://github.com/pygy/mithril.js into next

Browse source
This commit is contained in:
Isiah Meadows 2017-02-25 23:00:20 -05:00
commit aefee3b88e
14 changed files with 1381 additions and 1247 deletions
Download patch file Download diff file Expand all files Collapse all files

1
api/tests/index.html
View file

@ -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>

443
api/tests/test-mount.js
View file

@ -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)
})
})
})

2
api/tests/test-router.js
View file

@ -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}}

1
render/tests/index.html
View file

@ -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>

1353
render/tests/test-component.js
View file

File diff suppressed because it is too large Load diff

68
render/tests/test-onbeforeremove.js
View file

@ -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()
})
})
})
})
})

333
render/tests/test-onbeforeupdate.js
View file

@ -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,177 @@ 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}
},
}
components.forEach(function(cmp){
o.spec(cmp.kind, function(){
var createComponent = cmp.create
var count = 0
var vnode = {tag: component, attrs: {id: "a"}}
var updated = {tag: component, attrs: {id: "b"}}
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])
render(root, [vnode])
render(root, [updated])
function onbeforeupdate(vnode, old) {
count++
return true
}
o(root.firstChild.firstChild.nodeValue).equals("a")
})
o(count).equals(1)
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)
})
})
})
})
})

75
render/tests/test-onremove.js
View file

@ -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)
})
})
})
})

7
render/tests/test-render.js
View file

@ -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")
}

75
render/tests/test-updateNodes.js
View file

@ -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
View 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
}
}
}
]

2
test-utils/tests/index.html
View file

@ -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
View 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))
})
})

187
tests/test-api.js
View file

@ -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)
})
})
})
})
})