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

api/tests/index.html

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

api/tests/test-mount.js

@@ -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() {
+	components.forEach(function(cmp){
-		mount(root, {
+		o.spec(cmp.kind, function(){
-			view : function() {
+			var createComponent = cmp.create
-				return m("div")
-			}
-		})
 
-		o(root.firstChild.nodeName).equals("DIV")
+			o("throws on invalid `root` DOM node", function() {
-	})
+				var threw = false
-
+				try {
-	o("renders into `root` (class component)", function() {
+					mount(null, createComponent({view: function() {}}))
-		function Cmp(){}
+				} catch (e) {
-		Cmp.prototype.view = function(){return m("div")}
+					threw = true
-		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(threw).equals(true)
-		})
+			})
 
-		o(root.firstChild.nodeName).equals("DIV")
+			o("renders into `root`", function() {
-	})
+				mount(root, createComponent({
-
+					view : function() {
-	o("mounting null unmounts", function() {
+						return m("div")
-		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(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)
 	})
 })

api/tests/test-router.js

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

render/tests/index.html

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

render/tests/test-onbeforeremove.js

@@ -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) {
+	components.forEach(function(cmp){
-		var onremove = o.spy()
+		o.spec(cmp.kind, function(){
-		var onbeforeremove = function(){return Promise.resolve()}
+			var createComponent = cmp.create
-		var component = {
+			o("finalizes the remove phase asynchronously when promise is returned synchronously from both attrs- and tag.onbeforeremove", function(done) {
-			onbeforeremove: onbeforeremove,
+				var onremove = o.spy()
-			onremove: onremove,
+				var onbeforeremove = function(){return Promise.resolve()}
-			view: function() {},
+				var component = createComponent({
-		}
+					onbeforeremove: onbeforeremove,
-		render(root, [{tag: component, attrs: {onbeforeremove: onbeforeremove, onremove: onremove}}])
+					onremove: onremove,
-		render(root, [])
+					view: function() {},
-		callAsync(function() {
+				})
-			o(onremove.callCount).equals(2) // once for `tag`, once for `attrs`
+				render(root, [{tag: component, attrs: {onbeforeremove: onbeforeremove, onremove: onremove}}])
-			done()
+				render(root, [])
-		})
+				callAsync(function() {
-	})
+					o(onremove.callCount).equals(2) // once for `tag`, once for `attrs`
-	o("awaits promise resolution before removing the node", function(done) {
+					done()
-		var view = o.spy()
+				})
-		var onremove = o.spy()
+			})
-		var onbeforeremove = function(){return new Promise(function(resolve){callAsync(resolve)})}
+			o("awaits promise resolution before removing the node", function(done) {
-		var component = {
+				var view = o.spy()
-			onbeforeremove: onbeforeremove,
+				var onremove = o.spy()
-			onremove: onremove,
+				var onbeforeremove = function(){return new Promise(function(resolve){callAsync(resolve)})}
-			view: view,
+				var component = createComponent({
-		}
+					onbeforeremove: onbeforeremove,
-		render(root, [{tag: component}])
+					onremove: onremove,
-		render(root, [])
+					view: view,
+				})
+				render(root, [{tag: component}])
+				render(root, [])
 
-		callAsync(function(){
+				callAsync(function(){
-			o(onremove.callCount).equals(0)
+					o(onremove.callCount).equals(0)
 
-			callAsync(function() {
+					callAsync(function() {
-				o(onremove.callCount).equals(1)
+						o(onremove.callCount).equals(1)
-				done()
+						done()
+					})
+				})
 			})
 		})
 	})

render/tests/test-onbeforeupdate.js

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

render/tests/test-onremove.js

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

render/tests/test-render.js

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

render/tests/test-updateNodes.js

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

test-utils/components.js

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

test-utils/tests/index.html

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

test-utils/tests/test-components.js

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

tests/test-api.js

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