initial commit (work in progress)
This commit is contained in:
Leo Horie
parent
13fdb60f66
commit
559369016d
83 changed files with 10461 additions and 0 deletions
37
render/tests/index.html
Normal file
37
render/tests/index.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../module/module.js"></script>
|
||||
<script src="../../ospec/ospec.js"></script>
|
||||
<script src="../../test-utils/callAsync.js"></script>
|
||||
<script src="../../test-utils/domMock.js"></script>
|
||||
|
||||
<script src="../../render/normalizeChildren.js"></script>
|
||||
<script src="../../render/hyperscript.js"></script>
|
||||
<script src="../../render/render.js"></script>
|
||||
<script src="test-hyperscript.js"></script>
|
||||
<script src="test-createText.js"></script>
|
||||
<script src="test-createHTML.js"></script>
|
||||
<script src="test-createFragment.js"></script>
|
||||
<script src="test-createElement.js"></script>
|
||||
<script src="test-createNodes.js"></script>
|
||||
<script src="test-updateText.js"></script>
|
||||
<script src="test-updateHTML.js"></script>
|
||||
<script src="test-updateFragment.js"></script>
|
||||
<script src="test-updateElement.js"></script>
|
||||
<script src="test-updateNodes.js"></script>
|
||||
<script src="test-oncreate.js"></script>
|
||||
<script src="test-onupdate.js"></script>
|
||||
<script src="test-onremove.js"></script>
|
||||
<script src="test-onbeforeremove.js"></script>
|
||||
<script src="test-attributes.js"></script>
|
||||
<script src="test-event.js"></script>
|
||||
<script src="test-input.js"></script>
|
||||
<script src="test-textContent.js"></script>
|
||||
|
||||
<script>require("../../ospec/ospec").run()</script>
|
||||
</body>
|
||||
</html>
|
||||
79
render/tests/test-attributes.js
Normal file
79
render/tests/test-attributes.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("attributes", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.body
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o.spec("input readonly", function() {
|
||||
o("when input readonly is true, attribute is present", function() {
|
||||
var a = {tag: "input", attrs: {readonly: true}}
|
||||
|
||||
render(root, [a])
|
||||
|
||||
o(a.dom.attributes["readonly"].nodeValue).equals("")
|
||||
})
|
||||
o("when input readonly is false, attribute is not present", function() {
|
||||
var a = {tag: "input", attrs: {readonly: false}}
|
||||
|
||||
render(root, [a])
|
||||
|
||||
o(a.dom.attributes["readonly"]).equals(undefined)
|
||||
})
|
||||
})
|
||||
o.spec("input checked", function() {
|
||||
o("when input checked is true, attribute is not present", function() {
|
||||
var a = {tag: "input", attrs: {checked: true}}
|
||||
|
||||
render(root, [a])
|
||||
|
||||
o(a.dom.checked).equals(true)
|
||||
o(a.dom.attributes["checked"]).equals(undefined)
|
||||
})
|
||||
o("when input checked is false, attribute is not present", function() {
|
||||
var a = {tag: "input", attrs: {checked: false}}
|
||||
|
||||
render(root, [a])
|
||||
|
||||
o(a.dom.checked).equals(false)
|
||||
o(a.dom.attributes["checked"]).equals(undefined)
|
||||
})
|
||||
o("after input checked is changed by 3rd party, it can still be changed by render", function() {
|
||||
var a = {tag: "input", attrs: {checked: false}}
|
||||
var b = {tag: "input", attrs: {checked: true}}
|
||||
|
||||
render(root, [a])
|
||||
|
||||
a.dom.checked = true //setting the javascript property makes the value no longer track the state of the attribute
|
||||
a.dom.checked = false
|
||||
|
||||
render(root, [b])
|
||||
|
||||
o(a.dom.checked).equals(true)
|
||||
o(a.dom.attributes["checked"]).equals(undefined)
|
||||
})
|
||||
})
|
||||
o.spec("link href", function() {
|
||||
o("when link href is true, attribute is present", function() {
|
||||
var a = {tag: "a", attrs: {href: true}}
|
||||
|
||||
render(root, [a])
|
||||
|
||||
o(a.dom.attributes["href"]).notEquals(undefined)
|
||||
})
|
||||
o("when link href is false, attribute is not present", function() {
|
||||
var a = {tag: "a", attrs: {href: false}}
|
||||
|
||||
render(root, [a])
|
||||
|
||||
o(a.dom.attributes["href"]).equals(undefined)
|
||||
})
|
||||
})
|
||||
})
|
||||
82
render/tests/test-createElement.js
Normal file
82
render/tests/test-createElement.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("createElement", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("creates element", function() {
|
||||
var vnode = {tag: "div"}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
})
|
||||
o("creates attr", function() {
|
||||
var vnode = {tag: "div", attrs: {id: "a", title: "b"}}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
o(vnode.dom.attributes["id"].nodeValue).equals("a")
|
||||
o(vnode.dom.attributes["title"].nodeValue).equals("b")
|
||||
})
|
||||
o("creates style", function() {
|
||||
var vnode = {tag: "div", attrs: {style: {backgroundColor: "red"}}}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
o(vnode.dom.style.backgroundColor).equals("red")
|
||||
})
|
||||
o("creates children", function() {
|
||||
var vnode = {tag: "div", children: [{tag: "a"}, {tag: "b"}]}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
o(vnode.dom.childNodes.length).equals(2)
|
||||
o(vnode.dom.childNodes[0].nodeName).equals("A")
|
||||
o(vnode.dom.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("creates attrs and children", function() {
|
||||
var vnode = {tag: "div", attrs: {id: "a", title: "b"}, children: [{tag: "a"}, {tag: "b"}]}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
o(vnode.dom.attributes["id"].nodeValue).equals("a")
|
||||
o(vnode.dom.attributes["title"].nodeValue).equals("b")
|
||||
o(vnode.dom.childNodes.length).equals(2)
|
||||
o(vnode.dom.childNodes[0].nodeName).equals("A")
|
||||
o(vnode.dom.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("creates svg", function() {
|
||||
var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [{tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {"xlink:href": "javascript:;"}}]}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("svg")
|
||||
o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
o(vnode.dom.firstChild.nodeName).equals("a")
|
||||
o(vnode.dom.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
o(vnode.dom.firstChild.attributes["href"].nodeValue).equals("javascript:;")
|
||||
o(vnode.dom.firstChild.attributes["href"].namespaceURI).equals("http://www.w3.org/1999/xlink")
|
||||
})
|
||||
o("sets attributes correctly for svg", function() {
|
||||
var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", attrs: {viewBox: "0 0 100 100"}}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.attributes["viewBox"].nodeValue).equals("0 0 100 100")
|
||||
})
|
||||
o("creates mathml", function() {
|
||||
var vnode = {tag: "math", ns: "http://www.w3.org/1998/Math/MathML", children: [{tag: "mrow", ns: "http://www.w3.org/1998/Math/MathML"}]}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("math")
|
||||
o(vnode.dom.namespaceURI).equals("http://www.w3.org/1998/Math/MathML")
|
||||
o(vnode.dom.firstChild.nodeName).equals("mrow")
|
||||
o(vnode.dom.firstChild.namespaceURI).equals("http://www.w3.org/1998/Math/MathML")
|
||||
})
|
||||
})
|
||||
50
render/tests/test-createFragment.js
Normal file
50
render/tests/test-createFragment.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("createFragment", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("creates fragment", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "a"}]}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("A")
|
||||
})
|
||||
o("handles empty fragment", function() {
|
||||
var vnode = {tag: "[", children: []}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom).equals(null)
|
||||
o(vnode.domSize).equals(0)
|
||||
})
|
||||
o("handles childless fragment", function() {
|
||||
var vnode = {tag: "["}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom).equals(null)
|
||||
o(vnode.domSize).equals(0)
|
||||
})
|
||||
o("handles multiple children", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "a"}, {tag: "b"}]}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.domSize).equals(2)
|
||||
o(vnode.dom.nodeName).equals("A")
|
||||
o(vnode.dom.nextSibling.nodeName).equals("B")
|
||||
})
|
||||
o("handles td", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "td"}]}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom).notEquals(null)
|
||||
o(vnode.dom.nodeName).equals("TD")
|
||||
})
|
||||
})
|
||||
54
render/tests/test-createHTML.js
Normal file
54
render/tests/test-createHTML.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("createHTML", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("creates HTML", function() {
|
||||
var vnode = {tag: "<", children: "<a></a>"}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("A")
|
||||
})
|
||||
o("creates text HTML", function() {
|
||||
var vnode = {tag: "<", children: "a"}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeValue).equals("a")
|
||||
})
|
||||
o("handles empty HTML", function() {
|
||||
var vnode = {tag: "<", children: ""}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom).equals(null)
|
||||
o(vnode.domSize).equals(0)
|
||||
})
|
||||
o("handles multiple children", function() {
|
||||
var vnode = {tag: "<", children: "<a></a><b></b>"}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.domSize).equals(2)
|
||||
o(vnode.dom.nodeName).equals("A")
|
||||
o(vnode.dom.nextSibling.nodeName).equals("B")
|
||||
})
|
||||
o("handles valid html tags", function() {
|
||||
//FIXME body,head,html,frame,frameset are not supported
|
||||
//FIXME keygen is broken in Firefox
|
||||
var tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "big", "blockquote", /*"body",*/ "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", /*"frame", "frameset",*/ "h1", "h2", "h3", "h4", "h5", "h6", /*"head",*/ "header", "hr", /*"html",*/ "i", "iframe", "img", "input", "ins", "kbd", /*"keygen", */"label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"]
|
||||
|
||||
tags.forEach(function(tag) {
|
||||
var vnode = {tag: "<", children: "<" + tag + " />"}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals(tag.toUpperCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
62
render/tests/test-createNodes.js
Normal file
62
render/tests/test-createNodes.js
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("createNodes", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("creates nodes", function() {
|
||||
var vnodes = [
|
||||
{tag: "a"},
|
||||
{tag: "#", children: "b"},
|
||||
{tag: "<", children: "c"},
|
||||
{tag: "[", children: [{tag: "#", children: "d"}]},
|
||||
]
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(4)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeValue).equals("b")
|
||||
o(root.childNodes[2].nodeValue).equals("c")
|
||||
o(root.childNodes[3].nodeValue).equals("d")
|
||||
})
|
||||
o("ignores null", function() {
|
||||
var vnodes = [
|
||||
{tag: "a"},
|
||||
{tag: "#", children: "b"},
|
||||
null,
|
||||
{tag: "<", children: "c"},
|
||||
{tag: "[", children: [{tag: "#", children: "d"}]},
|
||||
]
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(4)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeValue).equals("b")
|
||||
o(root.childNodes[2].nodeValue).equals("c")
|
||||
o(root.childNodes[3].nodeValue).equals("d")
|
||||
})
|
||||
o("ignores undefined", function() {
|
||||
var vnodes = [
|
||||
{tag: "a"},
|
||||
{tag: "#", children: "b"},
|
||||
undefined,
|
||||
{tag: "<", children: "c"},
|
||||
{tag: "[", children: [{tag: "#", children: "d"}]},
|
||||
]
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(4)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeValue).equals("b")
|
||||
o(root.childNodes[2].nodeValue).equals("c")
|
||||
o(root.childNodes[3].nodeValue).equals("d")
|
||||
})
|
||||
})
|
||||
71
render/tests/test-createText.js
Normal file
71
render/tests/test-createText.js
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("createText", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("creates string", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("a")
|
||||
})
|
||||
o("creates falsy string", function() {
|
||||
var vnode = {tag: "#", children: ""}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("")
|
||||
})
|
||||
o("creates number", function() {
|
||||
var vnode = {tag: "#", children: 1}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("1")
|
||||
})
|
||||
o("creates falsy number", function() {
|
||||
var vnode = {tag: "#", children: 0}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("0")
|
||||
})
|
||||
o("creates boolean", function() {
|
||||
var vnode = {tag: "#", children: true}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("true")
|
||||
})
|
||||
o("creates falsy boolean", function() {
|
||||
var vnode = {tag: "#", children: false}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("false")
|
||||
})
|
||||
o("creates spaces", function() {
|
||||
var vnode = {tag: "#", children: " "}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals(" ")
|
||||
})
|
||||
o("ignores html", function() {
|
||||
var vnode = {tag: "#", children: "<a></a>™"}
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("<a></a>™")
|
||||
})
|
||||
})
|
||||
34
render/tests/test-event.js
Normal file
34
render/tests/test-event.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("event", function() {
|
||||
var $window, root, onevent, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.body
|
||||
onevent = o.spy()
|
||||
render = vdom($window, onevent).render
|
||||
})
|
||||
|
||||
o("handles onclick", function() {
|
||||
var spy = o.spy()
|
||||
var div = {tag: "div", attrs: {onclick: spy}}
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [div])
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
o(spy.this).equals(div.dom)
|
||||
o(spy.args[0].type).equals("click")
|
||||
o(spy.args[0].target).equals(div.dom)
|
||||
o(onevent.callCount).equals(1)
|
||||
o(onevent.this).equals(div.dom)
|
||||
o(onevent.args[0].type).equals("click")
|
||||
o(onevent.args[0].target).equals(div.dom)
|
||||
})
|
||||
})
|
||||
379
render/tests/test-hyperscript.js
Normal file
379
render/tests/test-hyperscript.js
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
var o = require("../../ospec/ospec")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("hyperscript", function() {
|
||||
o.spec("selector", function() {
|
||||
o("handles tag in selector", function() {
|
||||
var vnode = m("a")
|
||||
|
||||
o(vnode.tag).equals("a")
|
||||
})
|
||||
o("handles class in selector", function() {
|
||||
var vnode = m(".a")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.className).equals("a")
|
||||
})
|
||||
o("handles many classes in selector", function() {
|
||||
var vnode = m(".a.b.c")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.className).equals("a b c")
|
||||
})
|
||||
o("handles id in selector", function() {
|
||||
var vnode = m("#a")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.id).equals("a")
|
||||
})
|
||||
o("handles attr in selector", function() {
|
||||
var vnode = m("[a=b]")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("b")
|
||||
})
|
||||
o("handles many attrs in selector", function() {
|
||||
var vnode = m("[a=b][c=d]")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.attrs.c).equals("d")
|
||||
})
|
||||
o("handles attr w/ spaces in selector", function() {
|
||||
var vnode = m("[a = b]")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("b")
|
||||
})
|
||||
o("handles attr w/ quotes in selector", function() {
|
||||
var vnode = m("[a='b']")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("b")
|
||||
})
|
||||
o("handles attr w/ quotes and spaces in selector", function() {
|
||||
var vnode = m("[a = 'b']")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("b")
|
||||
})
|
||||
o("handles many attr w/ quotes and spaces in selector", function() {
|
||||
var vnode = m("[a = 'b'][c = 'd']")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.attrs.c).equals("d")
|
||||
})
|
||||
o("handles tag, class, attrs in selector", function() {
|
||||
var vnode = m("a.b[c = 'd']")
|
||||
|
||||
o(vnode.tag).equals("a")
|
||||
o(vnode.attrs.className).equals("b")
|
||||
o(vnode.attrs.c).equals("d")
|
||||
})
|
||||
o("handles tag, mixed classes, attrs in selector", function() {
|
||||
var vnode = m("a.b[c = 'd'].e[f = 'g']")
|
||||
|
||||
o(vnode.tag).equals("a")
|
||||
o(vnode.attrs.className).equals("b e")
|
||||
o(vnode.attrs.c).equals("d")
|
||||
o(vnode.attrs.f).equals("g")
|
||||
})
|
||||
o("handles attr without value", function() {
|
||||
var vnode = m("[a]")
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals(true)
|
||||
})
|
||||
})
|
||||
o.spec("attrs", function() {
|
||||
o("handles string attr", function() {
|
||||
var vnode = m("div", {a: "b"})
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("b")
|
||||
})
|
||||
o("handles falsy string attr", function() {
|
||||
var vnode = m("div", {a: ""})
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("")
|
||||
})
|
||||
o("handles number attr", function() {
|
||||
var vnode = m("div", {a: 1})
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals(1)
|
||||
})
|
||||
o("handles falsy number attr", function() {
|
||||
var vnode = m("div", {a: 0})
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals(0)
|
||||
})
|
||||
o("handles boolean attr", function() {
|
||||
var vnode = m("div", {a: true})
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals(true)
|
||||
})
|
||||
o("handles falsy boolean attr", function() {
|
||||
var vnode = m("div", {a: false})
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals(false)
|
||||
})
|
||||
o("handles many attrs", function() {
|
||||
var vnode = m("div", {a: "b", c: "d"})
|
||||
|
||||
o(vnode.tag).equals("div")
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.attrs.c).equals("d")
|
||||
})
|
||||
o("handles merging classes w/ class property", function() {
|
||||
var vnode = m(".a", {class: "b"})
|
||||
|
||||
o(vnode.attrs.className).equals("a b")
|
||||
})
|
||||
o("handles merging classes w/ className property", function() {
|
||||
var vnode = m(".a", {className: "b"})
|
||||
|
||||
o(vnode.attrs.className).equals("a b")
|
||||
})
|
||||
})
|
||||
o.spec("children", function() {
|
||||
o("handles string single child", function() {
|
||||
var vnode = m("div", {}, ["a"])
|
||||
|
||||
o(vnode.text).equals("a")
|
||||
})
|
||||
o("handles falsy string single child", function() {
|
||||
var vnode = m("div", {}, [""])
|
||||
|
||||
o(vnode.text).equals("")
|
||||
})
|
||||
o("handles number single child", function() {
|
||||
var vnode = m("div", {}, [1])
|
||||
|
||||
o(vnode.text).equals(1)
|
||||
})
|
||||
o("handles falsy number single child", function() {
|
||||
var vnode = m("div", {}, [0])
|
||||
|
||||
o(vnode.text).equals(0)
|
||||
})
|
||||
o("handles boolean single child", function() {
|
||||
var vnode = m("div", {}, [true])
|
||||
|
||||
o(vnode.text).equals(true)
|
||||
})
|
||||
o("handles falsy boolean single child", function() {
|
||||
var vnode = m("div", {}, [false])
|
||||
|
||||
o(vnode.text).equals(false)
|
||||
})
|
||||
o("handles null single child", function() {
|
||||
var vnode = m("div", {}, [null])
|
||||
|
||||
o(vnode.children[0]).equals(null)
|
||||
})
|
||||
o("handles undefined single child", function() {
|
||||
var vnode = m("div", {}, [undefined])
|
||||
|
||||
o(vnode.children[0]).equals(undefined)
|
||||
})
|
||||
o("handles multiple string children", function() {
|
||||
var vnode = m("div", {}, ["", "a"])
|
||||
|
||||
o(vnode.children[0].tag).equals("#")
|
||||
o(vnode.children[0].children).equals("")
|
||||
o(vnode.children[1].tag).equals("#")
|
||||
o(vnode.children[1].children).equals("a")
|
||||
})
|
||||
o("handles multiple number children", function() {
|
||||
var vnode = m("div", {}, [0, 1])
|
||||
|
||||
o(vnode.children[0].tag).equals("#")
|
||||
o(vnode.children[0].children).equals(0)
|
||||
o(vnode.children[1].tag).equals("#")
|
||||
o(vnode.children[1].children).equals(1)
|
||||
})
|
||||
o("handles multiple boolean children", function() {
|
||||
var vnode = m("div", {}, [false, true])
|
||||
|
||||
o(vnode.children[0].tag).equals("#")
|
||||
o(vnode.children[0].children).equals(false)
|
||||
o(vnode.children[1].tag).equals("#")
|
||||
o(vnode.children[1].children).equals(true)
|
||||
})
|
||||
o("handles multiple null/undefined child", function() {
|
||||
var vnode = m("div", {}, [null, undefined])
|
||||
|
||||
o(vnode.children[0]).equals(null)
|
||||
o(vnode.children[1]).equals(undefined)
|
||||
})
|
||||
})
|
||||
o.spec("permutations", function() {
|
||||
o("handles null attr and children", function() {
|
||||
var vnode = m("div", null, [m("a"), m("b")])
|
||||
|
||||
o(vnode.children.length).equals(2)
|
||||
o(vnode.children[0].tag).equals("a")
|
||||
o(vnode.children[1].tag).equals("b")
|
||||
})
|
||||
o("handles null attr and child unwrapped", function() {
|
||||
var vnode = m("div", null, m("a"))
|
||||
|
||||
o(vnode.children.length).equals(1)
|
||||
o(vnode.children[0].tag).equals("a")
|
||||
})
|
||||
o("handles null attr and children unwrapped", function() {
|
||||
var vnode = m("div", null, m("a"), m("b"))
|
||||
|
||||
o(vnode.children.length).equals(2)
|
||||
o(vnode.children[0].tag).equals("a")
|
||||
o(vnode.children[1].tag).equals("b")
|
||||
})
|
||||
o("handles attr and children", function() {
|
||||
var vnode = m("div", {a: "b"}, [m("i"), m("s")])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.children[0].tag).equals("i")
|
||||
o(vnode.children[1].tag).equals("s")
|
||||
})
|
||||
o("handles attr and child unwrapped", function() {
|
||||
var vnode = m("div", {a: "b"}, m("i"))
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.children[0].tag).equals("i")
|
||||
})
|
||||
o("handles attr and children unwrapped", function() {
|
||||
var vnode = m("div", {a: "b"}, m("i"), m("s"))
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.children[0].tag).equals("i")
|
||||
o(vnode.children[1].tag).equals("s")
|
||||
})
|
||||
o("handles attr and text children", function() {
|
||||
var vnode = m("div", {a: "b"}, ["c", "d"])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.children[0].tag).equals("#")
|
||||
o(vnode.children[0].children).equals("c")
|
||||
o(vnode.children[1].tag).equals("#")
|
||||
o(vnode.children[1].children).equals("d")
|
||||
})
|
||||
o("handles attr and single string text child", function() {
|
||||
var vnode = m("div", {a: "b"}, ["c"])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals("c")
|
||||
})
|
||||
o("handles attr and single falsy string text child", function() {
|
||||
var vnode = m("div", {a: "b"}, [""])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals("")
|
||||
})
|
||||
o("handles attr and single number text child", function() {
|
||||
var vnode = m("div", {a: "b"}, [1])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals(1)
|
||||
})
|
||||
o("handles attr and single falsy number text child", function() {
|
||||
var vnode = m("div", {a: "b"}, [0])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals(0)
|
||||
})
|
||||
o("handles attr and single boolean text child", function() {
|
||||
var vnode = m("div", {a: "b"}, [true])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals(true)
|
||||
})
|
||||
o("handles attr and single falsy boolean text child", function() {
|
||||
var vnode = m("div", {a: "b"}, [false])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals(false)
|
||||
})
|
||||
o("handles attr and single text child unwrapped", function() {
|
||||
var vnode = m("div", {a: "b"}, "c")
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals("c")
|
||||
})
|
||||
o("handles attr and text children unwrapped", function() {
|
||||
var vnode = m("div", {a: "b"}, "c", "d")
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.children[0].tag).equals("#")
|
||||
o(vnode.children[0].children).equals("c")
|
||||
o(vnode.children[1].tag).equals("#")
|
||||
o(vnode.children[1].children).equals("d")
|
||||
})
|
||||
o("handles children without attr", function() {
|
||||
var vnode = m("div", [m("i"), m("s")])
|
||||
|
||||
o(vnode.attrs).equals(undefined)
|
||||
o(vnode.children[0].tag).equals("i")
|
||||
o(vnode.children[1].tag).equals("s")
|
||||
})
|
||||
o("handles child without attr unwrapped", function() {
|
||||
var vnode = m("div", m("i"))
|
||||
|
||||
o(vnode.attrs).equals(undefined)
|
||||
o(vnode.children[0].tag).equals("i")
|
||||
})
|
||||
o("handles children without attr unwrapped", function() {
|
||||
var vnode = m("div", m("i"), m("s"))
|
||||
|
||||
o(vnode.attrs).equals(undefined)
|
||||
o(vnode.children[0].tag).equals("i")
|
||||
o(vnode.children[1].tag).equals("s")
|
||||
})
|
||||
o("handles fragment children without attr unwrapped", function() {
|
||||
var vnode = m("div", [m("i")], [m("s")])
|
||||
|
||||
o(vnode.children[0].tag).equals("[")
|
||||
o(vnode.children[0].children[0].tag).equals("i")
|
||||
o(vnode.children[1].tag).equals("[")
|
||||
o(vnode.children[1].children[0].tag).equals("s")
|
||||
})
|
||||
o("handles children with nested array", function() {
|
||||
var vnode = m("div", [[m("i"), m("s")]])
|
||||
|
||||
o(vnode.children[0].tag).equals("[")
|
||||
o(vnode.children[0].children[0].tag).equals("i")
|
||||
o(vnode.children[0].children[1].tag).equals("s")
|
||||
})
|
||||
o("handles children with deeply nested array", function() {
|
||||
var vnode = m("div", [[[m("i"), m("s")]]])
|
||||
|
||||
o(vnode.children[0].tag).equals("[")
|
||||
o(vnode.children[0].children[0].tag).equals("[")
|
||||
o(vnode.children[0].children[0].children[0].tag).equals("i")
|
||||
o(vnode.children[0].children[0].children[1].tag).equals("s")
|
||||
})
|
||||
})
|
||||
o.spec("namespaced", function() {
|
||||
o("handles svg ns", function() {
|
||||
var vnode = m("svg", m("g"))
|
||||
|
||||
o(vnode.tag).equals("svg")
|
||||
o(vnode.ns).equals("http://www.w3.org/2000/svg")
|
||||
o(vnode.children[0].tag).equals("g")
|
||||
o(vnode.children[0].ns).equals("http://www.w3.org/2000/svg")
|
||||
})
|
||||
o("handles mathml ns", function() {
|
||||
var vnode = m("math", m("mrow"))
|
||||
|
||||
o(vnode.tag).equals("math")
|
||||
o(vnode.ns).equals("http://www.w3.org/1998/Math/MathML")
|
||||
o(vnode.children[0].tag).equals("mrow")
|
||||
o(vnode.children[0].ns).equals("http://www.w3.org/1998/Math/MathML")
|
||||
})
|
||||
})
|
||||
})
|
||||
26
render/tests/test-input.js
Normal file
26
render/tests/test-input.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("input", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.body
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("maintains focus after move", function() {
|
||||
var input = {tag: "input", key: 1}
|
||||
var a = {tag: "a", key: 2}
|
||||
var b = {tag: "b", key: 3}
|
||||
|
||||
render(root, [input, a, b])
|
||||
input.dom.focus()
|
||||
render(root, [a, input, b])
|
||||
|
||||
o($window.document.activeElement).equals(input.dom)
|
||||
})
|
||||
})
|
||||
159
render/tests/test-onbeforeremove.js
Normal file
159
render/tests/test-onbeforeremove.js
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var callAsync = require("../../test-utils/callAsync")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("onbeforeremove", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("does not call onbeforeremove when creating", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onbeforeremove: create}}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
})
|
||||
o("does not call onbeforeremove when updating", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onbeforeremove: create}}
|
||||
var updated = {tag: "div", attrs: {onbeforeremove: update}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("calls onbeforeremove when removing element", function(done) {
|
||||
var vnode = {tag: "div", attrs: {onbeforeremove: remove}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
function remove(node, complete) {
|
||||
o(node).equals(vnode)
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(vnode.dom)
|
||||
|
||||
callAsync(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
|
||||
complete()
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
|
||||
done()
|
||||
})
|
||||
}
|
||||
})
|
||||
o("calls onbeforeremove when removing text", function(done) {
|
||||
var vnode = {tag: "#", attrs: {onbeforeremove: remove}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
function remove(node, complete) {
|
||||
o(node).equals(vnode)
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(vnode.dom)
|
||||
|
||||
callAsync(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
|
||||
complete()
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
|
||||
done()
|
||||
})
|
||||
}
|
||||
})
|
||||
o("calls onbeforeremove when removing fragment", function(done) {
|
||||
var vnode = {tag: "[", attrs: {onbeforeremove: remove}, children: [{tag: "div"}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
function remove(node, complete) {
|
||||
o(node).equals(vnode)
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(vnode.dom)
|
||||
|
||||
callAsync(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
|
||||
complete()
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
|
||||
done()
|
||||
})
|
||||
}
|
||||
})
|
||||
o("calls onbeforeremove when removing html", function(done) {
|
||||
var vnode = {tag: "<", attrs: {onbeforeremove: remove}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
function remove(node, complete) {
|
||||
o(node).equals(vnode)
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(vnode.dom)
|
||||
|
||||
callAsync(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
|
||||
complete()
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
|
||||
done()
|
||||
})
|
||||
}
|
||||
})
|
||||
o("calls remove after onbeforeremove resolves", function(done) {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "<", attrs: {onbeforeremove: remove, onremove: spy}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
function remove(node, complete) {
|
||||
o(node).equals(vnode)
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(vnode.dom)
|
||||
|
||||
callAsync(function() {
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(spy.callCount).equals(0)
|
||||
|
||||
complete()
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
o(spy.callCount).equals(1)
|
||||
|
||||
done()
|
||||
})
|
||||
}
|
||||
})
|
||||
o("does not set onbeforeremove as an event handler", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onbeforeremove: remove}, children: []}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.onbeforeremove).equals(undefined)
|
||||
o(vnode.dom.attributes["onbeforeremove"]).equals(undefined)
|
||||
})
|
||||
})
|
||||
216
render/tests/test-oncreate.js
Normal file
216
render/tests/test-oncreate.js
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("oncreate", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("calls oncreate when creating element", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: callback}}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode)
|
||||
o(callback.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls oncreate when creating text", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "#", attrs: {oncreate: callback}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode)
|
||||
o(callback.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls oncreate when creating fragment", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "[", attrs: {oncreate: callback}, children: []}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode)
|
||||
o(callback.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls oncreate when creating html", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "<", attrs: {oncreate: callback}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode)
|
||||
o(callback.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls oncreate when replacing keyed", function() {
|
||||
var createDiv = o.spy()
|
||||
var createA = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {oncreate: createDiv}}
|
||||
var updated = {tag: "a", key: 1, attrs: {oncreate: createA}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(createDiv.callCount).equals(1)
|
||||
o(createDiv.this).equals(vnode)
|
||||
o(createDiv.args[0]).equals(vnode)
|
||||
o(createA.callCount).equals(1)
|
||||
o(createA.this).equals(updated)
|
||||
o(createA.args[0]).equals(updated)
|
||||
})
|
||||
o("does not call oncreate when noop", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}}
|
||||
var updated = {tag: "div", attrs: {oncreate: update}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode)
|
||||
o(create.args[0]).equals(vnode)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("does not call oncreate when updating attr", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}}
|
||||
var updated = {tag: "div", attrs: {oncreate: update, id: "a"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode)
|
||||
o(create.args[0]).equals(vnode)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("does not call oncreate when updating children", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}, children: [{tag: "a"}]}
|
||||
var updated = {tag: "div", attrs: {oncreate: update}, children: [{tag: "b"}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode)
|
||||
o(create.args[0]).equals(vnode)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("does not call oncreate when updating keyed", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {oncreate: create}}
|
||||
var otherVnode = {tag: "a", key: 2}
|
||||
var updated = {tag: "div", key: 1, attrs: {oncreate: update}}
|
||||
var otherUpdated = {tag: "a", key: 2}
|
||||
|
||||
render(root, [vnode, otherVnode])
|
||||
render(root, [otherUpdated, updated])
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode)
|
||||
o(create.args[0]).equals(vnode)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("does not call oncreate when removing", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode)
|
||||
o(create.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls oncreate when recycling", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {oncreate: create}}
|
||||
var updated = {tag: "div", key: 1, attrs: {oncreate: update}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
render(root, [updated])
|
||||
|
||||
o(vnode.dom).equals(updated.dom)
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode)
|
||||
o(create.args[0]).equals(vnode)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
})
|
||||
o("calls oncreate at the same step as onupdate", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}, children: []}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}, children: [{tag: "a", attrs: {oncreate: callback}}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(updated.children[0])
|
||||
o(callback.args[0]).equals(updated.children[0])
|
||||
})
|
||||
o("calls oncreate after full DOM creation", function() {
|
||||
var created = false
|
||||
var vnode = {tag: "div", children: [
|
||||
{tag: "a", attrs: {oncreate: create}, children: [
|
||||
{tag: "b"}
|
||||
]}
|
||||
]}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
function create(vnode) {
|
||||
created = true
|
||||
|
||||
o(vnode.dom.parentNode).notEquals(null)
|
||||
o(vnode.dom.childNodes.length).equals(1)
|
||||
}
|
||||
o(created).equals(true)
|
||||
})
|
||||
o("does not set oncreate as an event handler", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}, children: []}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.oncreate).equals(undefined)
|
||||
o(vnode.dom.attributes["oncreate"]).equals(undefined)
|
||||
})
|
||||
o("calls oncreate on recycle", function() {
|
||||
var create = o.spy()
|
||||
var vnodes = [{tag: "div", key: 1, attrs: {oncreate: create}}]
|
||||
var temp = []
|
||||
var updated = [{tag: "div", key: 1, attrs: {oncreate: create}}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(2)
|
||||
})
|
||||
})
|
||||
103
render/tests/test-onremove.js
Normal file
103
render/tests/test-onremove.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("onremove", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("does not call onremove when creating", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onremove: create}}
|
||||
var updated = {tag: "div", attrs: {onremove: update}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
})
|
||||
o("does not call onremove when updating", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onremove: create}}
|
||||
var updated = {tag: "div", attrs: {onremove: update}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("calls onremove when removing element", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onremove: remove}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
o(remove.this).equals(vnode)
|
||||
o(remove.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls onremove when removing text", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "#", attrs: {onremove: remove}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
o(remove.this).equals(vnode)
|
||||
o(remove.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls onremove when removing fragment", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "[", attrs: {onremove: remove}, children: []}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
o(remove.this).equals(vnode)
|
||||
o(remove.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls onremove when removing html", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "<", attrs: {onremove: remove}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
o(remove.this).equals(vnode)
|
||||
o(remove.args[0]).equals(vnode)
|
||||
})
|
||||
o("does not set onremove as an event handler", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onremove: remove}, children: []}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.onremove).equals(undefined)
|
||||
o(vnode.dom.attributes["onremove"]).equals(undefined)
|
||||
})
|
||||
o("calls onremove on recycle", function() {
|
||||
var remove = o.spy()
|
||||
var vnodes = [{tag: "div", key: 1}]
|
||||
var temp = [{tag: "div", key: 2, attrs: {onremove: remove}}]
|
||||
var updated = [{tag: "div", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
})
|
||||
})
|
||||
192
render/tests/test-onupdate.js
Normal file
192
render/tests/test-onupdate.js
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("onupdate", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("does not call onupdate when creating element", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
})
|
||||
o("does not call onupdate when removing element", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
})
|
||||
o("does not call onupdate when replacing keyed element", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {onupdate: create}}
|
||||
var updated = {tag: "a", key: 1, attrs: {onupdate: update}}
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("does not call onupdate when recycling", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {onupdate: create}}
|
||||
var updated = {tag: "div", key: 1, attrs: {onupdate: update}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
render(root, [updated])
|
||||
|
||||
o(vnode.dom).equals(updated.dom)
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("does not call old onupdate when removing the onupdate property in new vnode", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "a", attrs: {onupdate: create}}
|
||||
var updated = {tag: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
})
|
||||
o("calls onupdate when noop", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
})
|
||||
o("calls onupdate when updating attr", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update, id: "a"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
})
|
||||
o("calls onupdate when updating children", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}, children: [{tag: "a"}]}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}, children: [{tag: "b"}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
})
|
||||
o("calls onupdate when updating text", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "#", attrs: {onupdate: create}, children: "a"}
|
||||
var updated = {tag: "#", attrs: {onupdate: update}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
})
|
||||
o("calls onupdate when updating fragment", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "[", attrs: {onupdate: create}, children: []}
|
||||
var updated = {tag: "[", attrs: {onupdate: update}, children: []}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
})
|
||||
o("calls onupdate when updating html", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "<", attrs: {onupdate: create}, children: "a"}
|
||||
var updated = {tag: "<", attrs: {onupdate: update}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(updated)
|
||||
o(update.args[0]).equals(updated)
|
||||
})
|
||||
o("calls onupdate after full DOM update", function() {
|
||||
var called = false
|
||||
var vnode = {tag: "div", attrs: {id: "1"}, children: [
|
||||
{tag: "a", attrs: {id: "2"}, children: [
|
||||
{tag: "b", attrs: {id: "3"}}
|
||||
]}
|
||||
]}
|
||||
var updated = {tag: "div", attrs: {id: "11"}, children: [
|
||||
{tag: "a", attrs: {onupdate: update, id: "22"}, children: [
|
||||
{tag: "b", attrs: {id: "33"}}
|
||||
]}
|
||||
]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
function update(vnode) {
|
||||
called = true
|
||||
|
||||
o(vnode.dom.parentNode.attributes["id"].nodeValue).equals("11")
|
||||
o(vnode.dom.attributes["id"].nodeValue).equals("22")
|
||||
o(vnode.dom.childNodes[0].attributes["id"].nodeValue).equals("33")
|
||||
}
|
||||
o(called).equals(true)
|
||||
})
|
||||
o("does not set onupdate as an event handler", function() {
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: update}, children: []}
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(vnode.dom.onupdate).equals(undefined)
|
||||
o(vnode.dom.attributes["onupdate"]).equals(undefined)
|
||||
})
|
||||
})
|
||||
0
render/tests/test-style.js
Normal file
0
render/tests/test-style.js
Normal file
200
render/tests/test-textContent.js
Normal file
200
render/tests/test-textContent.js
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("textContent", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("ignores null", function() {
|
||||
var vnodes = [{tag: "a", text: null}]
|
||||
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(0)
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("ignores undefined", function() {
|
||||
var vnodes = [{tag: "a", text: undefined}]
|
||||
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(0)
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates string", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("a")
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates falsy string", function() {
|
||||
var vnodes = [{tag: "a", text: ""}]
|
||||
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("")
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates number", function() {
|
||||
var vnodes = [{tag: "a", text: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("1")
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates falsy number", function() {
|
||||
var vnodes = [{tag: "a", text: 0}]
|
||||
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("0")
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates boolean", function() {
|
||||
var vnodes = [{tag: "a", text: true}]
|
||||
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("true")
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates falsy boolean", function() {
|
||||
var vnodes = [{tag: "a", text: false}]
|
||||
|
||||
render(root, vnodes)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("false")
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to string", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: "b"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("b")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to falsy string", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: ""}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to number", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("1")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to falsy number", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: 0}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("0")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to boolean", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: true}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("true")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to falsy boolean", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: false}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("false")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates with typecasting", function() {
|
||||
var vnodes = [{tag: "a", text: "1"}]
|
||||
var updated = [{tag: "a", text: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("1")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates from without text to with text", function() {
|
||||
var vnodes = [{tag: "a"}]
|
||||
var updated = [{tag: "a", text: "b"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes[0].nodeValue).equals("b")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates from with text to without text", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(0)
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
})
|
||||
152
render/tests/test-updateElement.js
Normal file
152
render/tests/test-updateElement.js
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("updateElement", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("updates attr", function() {
|
||||
var vnode = {tag: "a", attrs: {id: "b"}}
|
||||
var updated = {tag: "a", attrs: {id: "c"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.attributes["id"].nodeValue).equals("c")
|
||||
})
|
||||
o("adds attr", function() {
|
||||
var vnode = {tag: "a", attrs: {id: "b"}}
|
||||
var updated = {tag: "a", attrs: {id: "c", title: "d"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.attributes["title"].nodeValue).equals("d")
|
||||
})
|
||||
o("removes attr", function() {
|
||||
var vnode = {tag: "a", attrs: {id: "b", title: "d"}}
|
||||
var updated = {tag: "a", attrs: {id: "c"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o("title" in updated.dom.attributes).equals(false)
|
||||
})
|
||||
o("creates style object", function() {
|
||||
var vnode = {tag: "a", attrs: {}}
|
||||
var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("green")
|
||||
})
|
||||
o("creates style string", function() {
|
||||
var vnode = {tag: "a", attrs: {}}
|
||||
var updated = {tag: "a", attrs: {style: "background-color:green"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("green")
|
||||
})
|
||||
o("updates style from object to object", function() {
|
||||
var vnode = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
|
||||
var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("green")
|
||||
})
|
||||
o("updates style from object to string", function() {
|
||||
var vnode = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
|
||||
var updated = {tag: "a", attrs: {style: "background-color:green;"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("green")
|
||||
})
|
||||
o("updates style from string to object", function() {
|
||||
var vnode = {tag: "a", attrs: {style: "background-color:red;"}}
|
||||
var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("green")
|
||||
})
|
||||
o("updates style from string to string", function() {
|
||||
var vnode = {tag: "a", attrs: {style: "background-color:red;"}}
|
||||
var updated = {tag: "a", attrs: {style: "background-color:green;"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("green")
|
||||
})
|
||||
o("removes style from object to object", function() {
|
||||
var vnode = {tag: "a", attrs: {style: {backgroundColor: "red", border: "1px solid red"}}}
|
||||
var updated = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("red")
|
||||
o(updated.dom.style.border).equals("")
|
||||
})
|
||||
o("removes style from string to object", function() {
|
||||
var vnode = {tag: "a", attrs: {style: "background-color:red;border:1px solid red"}}
|
||||
var updated = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("red")
|
||||
o(updated.dom.style.border).notEquals("1px solid red")
|
||||
})
|
||||
o("removes style from object to string", function() {
|
||||
var vnode = {tag: "a", attrs: {style: {backgroundColor: "red", border: "1px solid red"}}}
|
||||
var updated = {tag: "a", attrs: {style: "background-color:red"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("red")
|
||||
o(updated.dom.style.border).equals("")
|
||||
})
|
||||
o("removes style from string to string", function() {
|
||||
var vnode = {tag: "a", attrs: {style: "background-color:red;border:1px solid red"}}
|
||||
var updated = {tag: "a", attrs: {style: "background-color:red"}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("red")
|
||||
o(updated.dom.style.border).equals("")
|
||||
})
|
||||
o("replaces el", function() {
|
||||
var vnode = {tag: "a"}
|
||||
var updated = {tag: "b"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeName).equals("B")
|
||||
})
|
||||
})
|
||||
69
render/tests/test-updateFragment.js
Normal file
69
render/tests/test-updateFragment.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("updateFragment", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("updates fragment", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "a"}]}
|
||||
var updated = {tag: "[", children: [{tag: "b"}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeName).equals("B")
|
||||
})
|
||||
o("adds els", function() {
|
||||
var vnode = {tag: "[", children: []}
|
||||
var updated = {tag: "[", children: [{tag: "a"}, {tag: "b"}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.domSize).equals(2)
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("removes els", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "a"}, {tag: "b"}]}
|
||||
var updated = {tag: "[", children: []}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(null)
|
||||
o(updated.domSize).equals(0)
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
o("updates from childless fragment", function() {
|
||||
var vnode = {tag: "["}
|
||||
var updated = {tag: "[", children: [{tag: "a"}]}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeName).equals("A")
|
||||
})
|
||||
o("updates to childless fragment", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "a"}]}
|
||||
var updated = {tag: "["}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(null)
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
})
|
||||
49
render/tests/test-updateHTML.js
Normal file
49
render/tests/test-updateHTML.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("updateHTML", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("updates html", function() {
|
||||
var vnode = {tag: "<", children: "a"}
|
||||
var updated = {tag: "<", children: "b"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("b")
|
||||
})
|
||||
o("adds html", function() {
|
||||
var vnode = {tag: "<", children: ""}
|
||||
var updated = {tag: "<", children: "<a></a><b></b>"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.domSize).equals(2)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].nodeName).equals("A")
|
||||
o(root.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("removes html", function() {
|
||||
var vnode = {tag: "<", children: "<a></a><b></b>"}
|
||||
var updated = {tag: "<", children: ""}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(null)
|
||||
o(updated.domSize).equals(0)
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
})
|
||||
789
render/tests/test-updateNodes.js
Normal file
789
render/tests/test-updateNodes.js
Normal file
|
|
@ -0,0 +1,789 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("updateNodes", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("handles el noop", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("handles el noop without key", function() {
|
||||
var vnodes = [{tag: "a"}, {tag: "b"}]
|
||||
var updated = [{tag: "a"}, {tag: "b"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("handles text noop", function() {
|
||||
var vnodes = [{tag: "#", children: "a"}]
|
||||
var updated = [{tag: "#", children: "a"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeValue).equals("a")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("handles text noop w/ type casting", function() {
|
||||
var vnodes = [{tag: "#", children: 1}]
|
||||
var updated = [{tag: "#", children: "1"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeValue).equals("1")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("handles falsy text noop w/ type casting", function() {
|
||||
var vnodes = [{tag: "#", children: 0}]
|
||||
var updated = [{tag: "#", children: "0"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeValue).equals("0")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("handles html noop", function() {
|
||||
var vnodes = [{tag: "<", children: "a"}]
|
||||
var updated = [{tag: "<", children: "a"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeValue).equals("a")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("handles fragment noop", function() {
|
||||
var vnodes = [{tag: "[", children: [{tag: "a"}]}]
|
||||
var updated = [{tag: "[", children: [{tag: "a"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("handles fragment noop w/ text child", function() {
|
||||
var vnodes = [{tag: "[", children: [{tag: "#", children: "a"}]}]
|
||||
var updated = [{tag: "[", children: [{tag: "#", children: "a"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeValue).equals("a")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("reverses els w/ even count", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}]
|
||||
var updated = [{tag: "s", key: 4}, {tag: "i", key: 3}, {tag: "b", key: 2}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(4)
|
||||
o(updated[0].dom.nodeName).equals("S")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("B")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
o(updated[3].dom.nodeName).equals("A")
|
||||
o(updated[3].dom).equals(root.childNodes[3])
|
||||
})
|
||||
o("reverses els w/ odd count", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}]
|
||||
var updated = [{tag: "i", key: 3}, {tag: "b", key: 2}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("I")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("A")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("creates el at start", function() {
|
||||
var vnodes = [{tag: "a", key: 1}]
|
||||
var updated = [{tag: "b", key: 2}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("B")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("A")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("creates el at end", function() {
|
||||
var vnodes = [{tag: "a", key: 1}]
|
||||
var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("creates el in middle", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "b", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("B")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("creates el while reversing", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("B")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("A")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("deletes el at start", function() {
|
||||
var vnodes = [{tag: "b", key: 2}, {tag: "a", key: 1}]
|
||||
var updated = [{tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("deletes el at end", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("deletes el at middle", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("deletes el while reversing", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "b", key: 2}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("B")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("A")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("creates, deletes, reverses els at same time", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "b", key: 2}, {tag: "a", key: 1}, {tag: "s", key: 4}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("B")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("A")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("S")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("adds to empty array followed by el", function() {
|
||||
var vnodes = [{tag: "[", key: 1, children: []}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "[", key: 1, children: [{tag: "a"}]}, {tag: "b", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].children[0].dom.nodeName).equals("A")
|
||||
o(updated[0].children[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("reverses followed by el", function() {
|
||||
var vnodes = [{tag: "[", key: 1, children: [{tag: "a", key: 2}, {tag: "b", key: 3}]}, {tag: "i", key: 4}]
|
||||
var updated = [{tag: "[", key: 1, children: [{tag: "b", key: 3}, {tag: "a", key: 2}]}, {tag: "i", key: 4}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].children[0].dom.nodeName).equals("B")
|
||||
o(updated[0].children[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].children[1].dom.nodeName).equals("A")
|
||||
o(updated[0].children[1].dom).equals(root.childNodes[1])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("updates empty array to html with same key", function() {
|
||||
var vnodes = [{tag: "[", key: 1, children: []}]
|
||||
var updated = [{tag: "<", key: 1, children: "<a></a><b></b>"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
})
|
||||
o("updates empty html to array with same key", function() {
|
||||
var vnodes = [{tag: "<", key: 1, children: ""}]
|
||||
var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
})
|
||||
o("updates empty array to html without key", function() {
|
||||
var vnodes = [{tag: "[", children: []}]
|
||||
var updated = [{tag: "<", children: "<a></a><b></b>"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
})
|
||||
o("updates empty html to array without key", function() {
|
||||
var vnodes = [{tag: "<", children: ""}]
|
||||
var updated = [{tag: "[", children: [{tag: "a"}, {tag: "b"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
})
|
||||
o("updates array to html with same key", function() {
|
||||
var vnodes = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}]
|
||||
var updated = [{tag: "<", key: 1, children: "<i></i><s></s>"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("I")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("S")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
})
|
||||
o("updates html to array with same key", function() {
|
||||
var vnodes = [{tag: "<", key: 1, children: "<a></a><b></b>"}]
|
||||
var updated = [{tag: "[", key: 1, children: [{tag: "i"}, {tag: "s"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("I")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("S")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
})
|
||||
o("updates array to html without key", function() {
|
||||
var vnodes = [{tag: "[", children: [{tag: "a"}, {tag: "b"}]}]
|
||||
var updated = [{tag: "<", children: "<i></i><s></s>"}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("I")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("S")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
})
|
||||
o("updates html to array without key", function() {
|
||||
var vnodes = [{tag: "<", children: "<a></a><b></b>"}]
|
||||
var updated = [{tag: "[", children: [{tag: "i"}, {tag: "s"}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("I")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("S")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
})
|
||||
o("updates empty array to html with same key followed by el", function() {
|
||||
var vnodes = [{tag: "[", key: 1, children: []}, {tag: "i", key: 2}]
|
||||
var updated = [{tag: "<", key: 1, children: "<a></a><b></b>"}, {tag: "i", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("updates empty html to array with same key followed by el", function() {
|
||||
var vnodes = [{tag: "[", key: 1, children: []}, {tag: "i", key: 2}]
|
||||
var updated = [{tag: "<", key: 1, children: "<a></a><b></b>"}, {tag: "i", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("populates array followed by null then el", function() {
|
||||
var vnodes = [{tag: "[", key: 1, children: []}, null, {tag: "i", key: 2}]
|
||||
var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}, null, {tag: "i", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("I")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("populates childless array followed by el", function() {
|
||||
var vnodes = [{tag: "[", key: 1}, {tag: "i", key: 2}]
|
||||
var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}, {tag: "i", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("populates childless array followed by null then el", function() {
|
||||
var vnodes = [{tag: "[", key: 1}, null, {tag: "i", key: 2}]
|
||||
var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}, null, {tag: "i", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[0].domSize).equals(2)
|
||||
o(updated[0].dom.nextSibling.nodeName).equals("B")
|
||||
o(updated[0].dom.nextSibling).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("I")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("moves from end to start", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}]
|
||||
var updated = [{tag: "s", key: 4}, {tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(4)
|
||||
o(updated[0].dom.nodeName).equals("S")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("A")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("B")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
o(updated[3].dom.nodeName).equals("I")
|
||||
o(updated[3].dom).equals(root.childNodes[3])
|
||||
})
|
||||
o("moves from start to end", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}]
|
||||
var updated = [{tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(4)
|
||||
o(updated[0].dom.nodeName).equals("B")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("S")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
o(updated[3].dom.nodeName).equals("A")
|
||||
o(updated[3].dom).equals(root.childNodes[3])
|
||||
})
|
||||
o("removes then recreate", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}]
|
||||
var temp = []
|
||||
var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(4)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("I")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
o(updated[3].dom.nodeName).equals("S")
|
||||
o(updated[3].dom).equals(root.childNodes[3])
|
||||
})
|
||||
o("removes then recreate reversed", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}]
|
||||
var temp = []
|
||||
var updated = [{tag: "s", key: 4}, {tag: "i", key: 3}, {tag: "b", key: 2}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(4)
|
||||
o(updated[0].dom.nodeName).equals("S")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("B")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
o(updated[3].dom.nodeName).equals("A")
|
||||
o(updated[3].dom).equals(root.childNodes[3])
|
||||
})
|
||||
o("removes then recreate smaller", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("removes then recreate bigger", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("I")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("removes then create different", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "i", key: 3}, {tag: "s", key: 4}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("I")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("S")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("removes then create different smaller", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "i", key: 3}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(updated[0].dom.nodeName).equals("I")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("removes then create different bigger", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "i", key: 3}, {tag: "s", key: 4}, {tag: "div", key: 5}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("I")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("S")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("DIV")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("removes then create mixed", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "a", key: 1}, {tag: "s", key: 4}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("S")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("removes then create mixed reversed", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "s", key: 4}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("S")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("A")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("removes then create mixed smaller", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}]
|
||||
var temp = []
|
||||
var updated = [{tag: "a", key: 1}, {tag: "s", key: 4}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("S")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("removes then create mixed smaller reversed", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}]
|
||||
var temp = []
|
||||
var updated = [{tag: "s", key: 4}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("S")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("A")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
})
|
||||
o("removes then create mixed bigger", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "s", key: 4}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("S")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("removes then create mixed bigger reversed", function() {
|
||||
var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "s", key: 4}, {tag: "i", key: 3}, {tag: "a", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(3)
|
||||
o(updated[0].dom.nodeName).equals("S")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("I")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[2].dom.nodeName).equals("A")
|
||||
o(updated[2].dom).equals(root.childNodes[2])
|
||||
})
|
||||
o("removes then recreates then reverses children", function() {
|
||||
var vnodes = [{tag: "a", key: 1, children: [{tag: "i", key: 3}, {tag: "s", key: 4}]}, {tag: "b", key: 2}]
|
||||
var temp1 = []
|
||||
var temp2 = [{tag: "a", key: 1, children: [{tag: "i", key: 3}, {tag: "s", key: 4}]}, {tag: "b", key: 2}]
|
||||
var updated = [{tag: "a", key: 1, children: [{tag: "s", key: 4}, {tag: "i", key: 3}]}, {tag: "b", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp1)
|
||||
render(root, temp2)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(updated[0].dom.nodeName).equals("A")
|
||||
o(updated[0].dom).equals(root.childNodes[0])
|
||||
o(updated[1].dom.nodeName).equals("B")
|
||||
o(updated[1].dom).equals(root.childNodes[1])
|
||||
o(updated[0].dom.childNodes.length).equals(2)
|
||||
o(updated[0].dom.childNodes[0].nodeName).equals("S")
|
||||
o(updated[0].dom.childNodes[1].nodeName).equals("I")
|
||||
})
|
||||
o("removes then recreates nested", function() {
|
||||
var vnodes = [{tag: "a", key: 1, children: [{tag: "a", key: 3, children: [{tag: "a", key: 5}]}, {tag: "a", key: 4, children: [{tag: "a", key: 5}]}]}, {tag: "a", key: 2}]
|
||||
var temp = []
|
||||
var updated = [{tag: "a", key: 1, children: [{tag: "a", key: 3, children: [{tag: "a", key: 5}]}, {tag: "a", key: 4, children: [{tag: "a", key: 5}]}]}, {tag: "a", key: 2}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].childNodes.length).equals(2)
|
||||
o(root.childNodes[0].childNodes[0].childNodes.length).equals(1)
|
||||
o(root.childNodes[0].childNodes[1].childNodes.length).equals(1)
|
||||
o(root.childNodes[1].childNodes.length).equals(0)
|
||||
})
|
||||
o("recycles", function() {
|
||||
var vnodes = [{tag: "div", key: 1}]
|
||||
var temp = []
|
||||
var updated = [{tag: "div", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(vnodes[0].dom).equals(updated[0].dom)
|
||||
o(updated[0].dom.nodeName).equals("DIV")
|
||||
})
|
||||
o("recycles when toggling", function() {
|
||||
var vnodes = [{tag: "div", key: 1}]
|
||||
var temp = [{tag: "div"}]
|
||||
var updated = [{tag: "div", key: 1}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(vnodes[0].dom).equals(updated[0].dom)
|
||||
o(updated[0].dom.nodeName).equals("DIV")
|
||||
})
|
||||
o("recycles deep", function() {
|
||||
var vnodes = [{tag: "div", children: [{tag: "a", key: 1}]}]
|
||||
var temp = [{tag: "div"}]
|
||||
var updated = [{tag: "div", children: [{tag: "a", key: 1}]}]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(vnodes[0].dom.firstChild).equals(updated[0].dom.firstChild)
|
||||
o(updated[0].dom.firstChild.nodeName).equals("A")
|
||||
})
|
||||
})
|
||||
114
render/tests/test-updateText.js
Normal file
114
render/tests/test-updateText.js
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
"use strict"
|
||||
|
||||
var o = require("../../ospec/ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
|
||||
o.spec("updateText", function() {
|
||||
var $window, root, render
|
||||
o.beforeEach(function() {
|
||||
$window = domMock()
|
||||
root = $window.document.createElement("div")
|
||||
render = vdom($window).render
|
||||
})
|
||||
|
||||
o("updates to string", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: "b"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("b")
|
||||
})
|
||||
o("updates to falsy string", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: ""}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("")
|
||||
})
|
||||
o("updates from falsy string", function() {
|
||||
var vnode = {tag: "#", children: ""}
|
||||
var updated = {tag: "#", children: "b"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("b")
|
||||
})
|
||||
o("updates to number", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: 1}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("1")
|
||||
})
|
||||
o("updates to falsy number", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: 0}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("0")
|
||||
})
|
||||
o("updates from falsy number", function() {
|
||||
var vnode = {tag: "#", children: 0}
|
||||
var updated = {tag: "#", children: "b"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("b")
|
||||
})
|
||||
o("updates to boolean", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: true}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("true")
|
||||
})
|
||||
o("updates to falsy boolean", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: false}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("false")
|
||||
})
|
||||
o("updates from falsy boolean", function() {
|
||||
var vnode = {tag: "#", children: false}
|
||||
var updated = {tag: "#", children: "b"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("b")
|
||||
})
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue