refactor redraw into pubsub and autoredraw
- pubsub is a basic pubsub impl - autoredraw is glue code to register callback to pubsub and onevent moved e.redraw to autoredraw
This commit is contained in:
Leo Horie
parent
db46bb4414
commit
0005cf26ee
13 changed files with 149 additions and 105 deletions
|
|
@ -19,13 +19,15 @@
|
|||
<script src="../../querystring/parse.js"></script>
|
||||
<script src="../../request/request.js"></script>
|
||||
<script src="../../router/router.js"></script>
|
||||
<script src="../redraw.js"></script>
|
||||
<script src="../throttle.js"></script>
|
||||
<script src="../mount.js"></script>
|
||||
<script src="../router.js"></script>
|
||||
<script src="../../api/throttle.js"></script>
|
||||
<script src="../../api/pubsub.js"></script>
|
||||
<script src="../../api/autoredraw.js"></script>
|
||||
<script src="../../api/mount.js"></script>
|
||||
<script src="../../api/router.js"></script>
|
||||
|
||||
<script src="./test-redraw.js"></script>
|
||||
<script src="./test-throttle.js"></script>
|
||||
<script src="./test-pubsub.js"></script>
|
||||
<script src="./test-autoredraw.js"></script>
|
||||
<script src="./test-mount.js"></script>
|
||||
<script src="./test-router.js"></script>
|
||||
|
||||
|
|
|
|||
63
api/tests/test-autoredraw.js
Normal file
63
api/tests/test-autoredraw.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
|
||||
var coreRenderer = require("../../render/render")
|
||||
var apiPubSub = require("../../api/pubsub")
|
||||
var autoredraw = require("../../api/autoredraw")
|
||||
|
||||
o.spec("autoredraw", function() {
|
||||
var FRAME_BUDGET = Math.floor(1000 / 60)
|
||||
var $window, root, renderer, pubsub, spy
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.body
|
||||
renderer = coreRenderer($window)
|
||||
pubsub = apiPubSub()
|
||||
spy = o.spy()
|
||||
})
|
||||
|
||||
o("returns self-trigger", function() {
|
||||
var run = autoredraw(root, renderer, pubsub, spy)
|
||||
|
||||
run()
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
})
|
||||
|
||||
o("registers onevent", function() {
|
||||
autoredraw(root, renderer, pubsub, spy)
|
||||
|
||||
renderer.render(root, {tag: "div", attrs: {onclick: function() {}}})
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
root.firstChild.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
})
|
||||
|
||||
o("registers pubsub", function() {
|
||||
autoredraw(root, renderer, pubsub, spy)
|
||||
|
||||
pubsub.publish()
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
})
|
||||
o("throttles", function(done) {
|
||||
var run = autoredraw(root, renderer, pubsub, spy)
|
||||
|
||||
run()
|
||||
run()
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
|
||||
setTimeout(function() {
|
||||
o(spy.callCount).equals(2)
|
||||
|
||||
done()
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
})
|
||||
|
|
@ -4,35 +4,23 @@ var o = require("../../ospec/ospec")
|
|||
var domMock = require("../../test-utils/domMock")
|
||||
|
||||
var m = require("../../render/hyperscript")
|
||||
var apiPubSub = require("../../api/pubsub")
|
||||
var apiMounter = require("../../api/mount")
|
||||
|
||||
o.spec("m.mount", function() {
|
||||
o.spec("mount", function() {
|
||||
var FRAME_BUDGET = Math.floor(1000 / 60)
|
||||
var $window, root, mount, renderers
|
||||
var $window, root, redraw, mount
|
||||
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
|
||||
root = $window.document.body
|
||||
|
||||
renderers = []
|
||||
mount = apiMounter($window, renderers)
|
||||
})
|
||||
|
||||
o("pushes a render function", function() {
|
||||
mount(root, {
|
||||
view : function() {
|
||||
return m("div")
|
||||
}
|
||||
})
|
||||
|
||||
o(renderers.length).equals(1)
|
||||
o(typeof renderers[0]).equals("function")
|
||||
redraw = apiPubSub()
|
||||
mount = apiMounter($window, redraw)
|
||||
})
|
||||
|
||||
o("renders into `root`", function() {
|
||||
var mount = apiMounter($window, [])
|
||||
|
||||
mount(root, {
|
||||
view : function() {
|
||||
return m("div")
|
||||
|
|
@ -106,7 +94,7 @@ o.spec("m.mount", function() {
|
|||
o(onupdate.callCount).equals(0)
|
||||
|
||||
done()
|
||||
}, 20)
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
o("redraws when the render function is run", function(done) {
|
||||
|
|
@ -125,7 +113,7 @@ o.spec("m.mount", function() {
|
|||
o(oninit.callCount).equals(1)
|
||||
o(onupdate.callCount).equals(0)
|
||||
|
||||
renderers[0]()
|
||||
redraw.publish()
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
|
|
@ -1,32 +1,30 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var createRedraw = require("../../api/redraw")
|
||||
var apiPubSub = require("../../api/pubsub")
|
||||
|
||||
o.spec("m.redraw", function() {
|
||||
var redraw, renderers
|
||||
|
||||
o.spec("pubsub", function() {
|
||||
var pubsub
|
||||
o.beforeEach(function() {
|
||||
renderers = []
|
||||
redraw = createRedraw(renderers)
|
||||
pubsub = apiPubSub()
|
||||
})
|
||||
|
||||
o("it shouldn't error if there are no renderers", function() {
|
||||
redraw()
|
||||
pubsub.publish()
|
||||
})
|
||||
|
||||
o("it should run a single renderer entry", function() {
|
||||
var spy = o.spy()
|
||||
|
||||
renderers.push(spy)
|
||||
pubsub.subscribe(spy)
|
||||
|
||||
redraw()
|
||||
pubsub.publish()
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
|
||||
redraw()
|
||||
redraw()
|
||||
redraw()
|
||||
pubsub.publish()
|
||||
pubsub.publish()
|
||||
pubsub.publish()
|
||||
|
||||
o(spy.callCount).equals(4)
|
||||
})
|
||||
|
|
@ -36,20 +34,20 @@ o.spec("m.redraw", function() {
|
|||
var spy2 = o.spy()
|
||||
var spy3 = o.spy()
|
||||
|
||||
renderers.push(spy1, spy2, spy3)
|
||||
pubsub.subscribe(spy1)
|
||||
pubsub.subscribe(spy2)
|
||||
pubsub.subscribe(spy3)
|
||||
|
||||
redraw()
|
||||
pubsub.publish()
|
||||
|
||||
o(spy1.callCount).equals(1)
|
||||
o(spy2.callCount).equals(1)
|
||||
o(spy3.callCount).equals(1)
|
||||
|
||||
redraw()
|
||||
redraw()
|
||||
redraw()
|
||||
pubsub.publish()
|
||||
|
||||
o(spy1.callCount).equals(4)
|
||||
o(spy2.callCount).equals(4)
|
||||
o(spy3.callCount).equals(4)
|
||||
o(spy1.callCount).equals(2)
|
||||
o(spy2.callCount).equals(2)
|
||||
o(spy3.callCount).equals(2)
|
||||
})
|
||||
})
|
||||
|
|
@ -5,11 +5,12 @@ var pushStateMock = require("../../test-utils/pushStateMock")
|
|||
var domMock = require("../../test-utils/domMock")
|
||||
|
||||
var m = require("../../render/hyperscript")
|
||||
var apiPubSub = require("../../api/pubsub")
|
||||
var apiRouter = require("../../api/router")
|
||||
|
||||
o.spec("m.route", function() {
|
||||
o.spec("route", function() {
|
||||
var FRAME_BUDGET = Math.floor(1000 / 60)
|
||||
var $window, root, route, renderers
|
||||
var $window, root, redraw, route
|
||||
|
||||
o.beforeEach(function() {
|
||||
$window = {}
|
||||
|
|
@ -22,21 +23,8 @@ o.spec("m.route", function() {
|
|||
|
||||
root = $window.document.body
|
||||
|
||||
renderers = []
|
||||
route = apiRouter($window, renderers)
|
||||
})
|
||||
|
||||
o("pushes a render function", function() {
|
||||
route(root, "/", {
|
||||
"/" : {
|
||||
view: function() {
|
||||
return m("div")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
o(renderers.length).equals(1)
|
||||
o(typeof renderers[0]).equals("function")
|
||||
redraw = apiPubSub()
|
||||
route = apiRouter($window, redraw)
|
||||
})
|
||||
|
||||
o("renders into `root`", function() {
|
||||
|
|
@ -68,7 +56,7 @@ o.spec("m.route", function() {
|
|||
|
||||
o(oninit.callCount).equals(1)
|
||||
|
||||
renderers[0]()
|
||||
redraw.publish()
|
||||
|
||||
// Wrapped to give time for the rate-limited redraw to fire
|
||||
setTimeout(function() {
|
||||
|
|
@ -146,7 +134,7 @@ o.spec("m.route", function() {
|
|||
o(onupdate.callCount).equals(0)
|
||||
|
||||
done()
|
||||
}, 20)
|
||||
}, FRAME_BUDGET)
|
||||
})
|
||||
|
||||
o("changes location on route.link", function() {
|
||||
|
|
|
|||
|
|
@ -81,12 +81,4 @@ o.spec("throttle", function() {
|
|||
|
||||
o(spy.callCount).equals(2)
|
||||
})
|
||||
|
||||
o("it supports aborting when redraw is falsey", function() {
|
||||
throttled({ redraw : false })
|
||||
throttled({ redraw : 0 })
|
||||
throttled({ redraw : "" })
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue