Tests use hyperscript instead of manually constructing nodes
This commit is contained in:
Barney Carroll
Stephan Hoyer
parent
5502570b16
commit
31d2ed4be8
27 changed files with 1515 additions and 1841 deletions
|
|
@ -3,6 +3,8 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.trust = require("../../render/trust")
|
||||
|
||||
o.spec("attributes", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -14,38 +16,38 @@ o.spec("attributes", function() {
|
|||
o.spec("basics", function() {
|
||||
o("works (create/update/remove)", function() {
|
||||
|
||||
var a = {tag: "div", attrs: {}}
|
||||
var b = {tag: "div", attrs: {id: "test"}}
|
||||
var c = {tag: "div", attrs: {}}
|
||||
var a = m("div")
|
||||
var b = m("div", {id: "test"})
|
||||
var c = m("div")
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.hasAttribute("id")).equals(false)
|
||||
|
||||
render(root, [b]);
|
||||
render(root, b);
|
||||
|
||||
o(b.dom.getAttribute("id")).equals("test")
|
||||
|
||||
render(root, [c]);
|
||||
render(root, c);
|
||||
|
||||
o(c.dom.hasAttribute("id")).equals(false)
|
||||
})
|
||||
o("undefined attr is equivalent to a lack of attr", function() {
|
||||
var a = {tag: "div", attrs: {id: undefined}}
|
||||
var b = {tag: "div", attrs: {id: "test"}}
|
||||
var c = {tag: "div", attrs: {id: undefined}}
|
||||
var a = m("div", {id: undefined})
|
||||
var b = m("div", {id: "test"})
|
||||
var c = m("div", {id: undefined})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.hasAttribute("id")).equals(false)
|
||||
|
||||
render(root, [b]);
|
||||
render(root, b);
|
||||
|
||||
o(b.dom.hasAttribute("id")).equals(true)
|
||||
o(b.dom.getAttribute("id")).equals("test")
|
||||
|
||||
// #1804
|
||||
render(root, [c]);
|
||||
render(root, c);
|
||||
|
||||
o(c.dom.hasAttribute("id")).equals(false)
|
||||
})
|
||||
|
|
@ -66,16 +68,16 @@ o.spec("attributes", function() {
|
|||
}
|
||||
|
||||
render(root, [
|
||||
{tag: "input", attrs: {value: "hello"}},
|
||||
{tag: "input", attrs: {value: "hello"}},
|
||||
{tag: "input", attrs: {value: "hello"}},
|
||||
{tag: "custom-element", attrs: {custom: "x"}},
|
||||
{tag: "input", attrs: {is: "something-special", custom: "x"}},
|
||||
{tag: "custom-element", attrs: {is: "something-special", custom: "x"}}
|
||||
m("input", {value: "hello"}),
|
||||
m("input", {value: "hello"}),
|
||||
m("input", {value: "hello"}),
|
||||
m("custom-element", {custom: "x"}),
|
||||
m("input", {is: "something-special", custom: "x"}),
|
||||
m("custom-element", {is: "something-special", custom: "x"})
|
||||
])
|
||||
|
||||
o(spies[0].callCount).equals(0)
|
||||
o(spies[1].callCount).equals(0)
|
||||
o(spies[0].callCount).equals(0)
|
||||
o(spies[2].callCount).equals(0)
|
||||
o(spies[3].calls).deepEquals([{this: spies[3].elem, args: ["custom", "x"]}])
|
||||
o(spies[4].calls).deepEquals([{this: spies[4].elem, args: ["custom", "x"]}])
|
||||
|
|
@ -110,12 +112,12 @@ o.spec("attributes", function() {
|
|||
}
|
||||
|
||||
render(root, [
|
||||
{tag: "input", attrs: {value: "hello"}},
|
||||
{tag: "input", attrs: {value: "hello"}},
|
||||
{tag: "input", attrs: {value: "hello"}},
|
||||
{tag: "custom-element", attrs: {custom: "x"}},
|
||||
{tag: "input", attrs: {is: "something-special", custom: "x"}},
|
||||
{tag: "custom-element", attrs: {is: "something-special", custom: "x"}}
|
||||
m("input", {value: "hello"}),
|
||||
m("input", {value: "hello"}),
|
||||
m("input", {value: "hello"}),
|
||||
m("custom-element", {custom: "x"}),
|
||||
m("input", {is: "something-special", custom: "x"}),
|
||||
m("custom-element", {is: "something-special", custom: "x"})
|
||||
])
|
||||
|
||||
o(spies[0].callCount).equals(0)
|
||||
|
|
@ -135,47 +137,47 @@ o.spec("attributes", function() {
|
|||
})
|
||||
o.spec("input readonly", function() {
|
||||
o("when input readonly is true, attribute is present", function() {
|
||||
var a = {tag: "input", attrs: {readonly: true}}
|
||||
var a = m("input", {readonly: true})
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
|
||||
o(a.dom.attributes["readonly"].value).equals("")
|
||||
})
|
||||
o("when input readonly is false, attribute is not present", function() {
|
||||
var a = {tag: "input", attrs: {readonly: false}}
|
||||
var a = m("input", {readonly: false})
|
||||
|
||||
render(root, [a])
|
||||
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}}
|
||||
var a = m("input", {checked: true})
|
||||
|
||||
render(root, [a])
|
||||
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}}
|
||||
var a = m("input", {checked: false})
|
||||
|
||||
render(root, [a])
|
||||
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}}
|
||||
var a = m("input", {checked: false})
|
||||
var b = m("input", {checked: true})
|
||||
|
||||
render(root, [a])
|
||||
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])
|
||||
render(root, b)
|
||||
|
||||
o(a.dom.checked).equals(true)
|
||||
o(a.dom.attributes["checked"]).equals(undefined)
|
||||
|
|
@ -183,72 +185,72 @@ o.spec("attributes", function() {
|
|||
})
|
||||
o.spec("input.value", function() {
|
||||
o("can be set as text", function() {
|
||||
var a = {tag: "input", attrs: {value: "test"}}
|
||||
var a = m("input", {value: "test"})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.value).equals("test")
|
||||
})
|
||||
o("a lack of attribute removes `value`", function() {
|
||||
var a = {tag: "input", attrs: {}}
|
||||
var b = {tag: "input", attrs: {value: "test"}}
|
||||
var c = {tag: "input", attrs: {}}
|
||||
var a = m("input")
|
||||
var b = m("input", {value: "test"})
|
||||
var c = m("input")
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
|
||||
o(a.dom.value).equals("")
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(a.dom.value).equals("test")
|
||||
|
||||
// https://github.com/MithrilJS/mithril.js/issues/1804#issuecomment-304521235
|
||||
render(root, [c])
|
||||
render(root, c)
|
||||
|
||||
o(a.dom.value).equals("")
|
||||
})
|
||||
o("can be set as number", function() {
|
||||
var a = {tag: "input", attrs: {value: 1}}
|
||||
var a = m("input", {value: 1})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.value).equals("1")
|
||||
})
|
||||
o("null becomes the empty string", function() {
|
||||
var a = {tag: "input", attrs: {value: null}}
|
||||
var b = {tag: "input", attrs: {value: "test"}}
|
||||
var c = {tag: "input", attrs: {value: null}}
|
||||
var a = m("input", {value: null})
|
||||
var b = m("input", {value: "test"})
|
||||
var c = m("input", {value: null})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.value).equals("")
|
||||
o(a.dom.getAttribute("value")).equals(null)
|
||||
|
||||
render(root, [b]);
|
||||
render(root, b);
|
||||
|
||||
o(b.dom.value).equals("test")
|
||||
o(b.dom.getAttribute("value")).equals(null)
|
||||
|
||||
render(root, [c]);
|
||||
render(root, c);
|
||||
|
||||
o(c.dom.value).equals("")
|
||||
o(c.dom.getAttribute("value")).equals(null)
|
||||
})
|
||||
o("'' and 0 are different values", function() {
|
||||
var a = {tag: "input", attrs: {value: 0}, children:[{tag:"#", children:""}]}
|
||||
var b = {tag: "input", attrs: {value: ""}, children:[{tag:"#", children:""}]}
|
||||
var c = {tag: "input", attrs: {value: 0}, children:[{tag:"#", children:""}]}
|
||||
var a = m("input", {value: 0})
|
||||
var b = m("input", {value: ""})
|
||||
var c = m("input", {value: 0})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.value).equals("0")
|
||||
|
||||
render(root, [b]);
|
||||
render(root, b);
|
||||
|
||||
o(b.dom.value).equals("")
|
||||
|
||||
// #1595 redux
|
||||
render(root, [c]);
|
||||
render(root, c);
|
||||
|
||||
o(c.dom.value).equals("0")
|
||||
})
|
||||
|
|
@ -257,34 +259,34 @@ o.spec("attributes", function() {
|
|||
var root = $window.document.body
|
||||
var render = vdom($window)
|
||||
|
||||
var a = {tag: "input"}
|
||||
var b = {tag: "input", attrs: {value: "1"}}
|
||||
var c = {tag: "input", attrs: {value: "1"}}
|
||||
var d = {tag: "input", attrs: {value: 1}}
|
||||
var e = {tag: "input", attrs: {value: 2}}
|
||||
var a =m("input")
|
||||
var b = m("input", {value: "1"})
|
||||
var c = m("input", {value: "1"})
|
||||
var d = m("input", {value: 1})
|
||||
var e = m("input", {value: 2})
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
var spies = $window.__getSpies(a.dom)
|
||||
a.dom.focus()
|
||||
|
||||
o(spies.valueSetter.callCount).equals(0)
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(b.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [c])
|
||||
render(root, c)
|
||||
|
||||
o(c.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [d])
|
||||
render(root, d)
|
||||
|
||||
o(d.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [e])
|
||||
render(root, e)
|
||||
|
||||
o(d.dom.value).equals("2")
|
||||
o(spies.valueSetter.callCount).equals(2)
|
||||
|
|
@ -296,22 +298,22 @@ o.spec("attributes", function() {
|
|||
var root = $window.document.body
|
||||
var render = vdom($window)
|
||||
|
||||
var a = {tag: "input", attrs: {type: "radio"}}
|
||||
var b = {tag: "input", attrs: {type: "text"}}
|
||||
var c = {tag: "input", attrs: {}}
|
||||
var a = m("input", {type: "radio"})
|
||||
var b = m("input", {type: "text"})
|
||||
var c = m("input")
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
var spies = $window.__getSpies(a.dom)
|
||||
|
||||
o(spies.typeSetter.callCount).equals(0)
|
||||
o(a.dom.getAttribute("type")).equals("radio")
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(spies.typeSetter.callCount).equals(0)
|
||||
o(b.dom.getAttribute("type")).equals("text")
|
||||
|
||||
render(root, [c])
|
||||
render(root, c)
|
||||
|
||||
o(spies.typeSetter.callCount).equals(0)
|
||||
o(c.dom.hasAttribute("type")).equals(false)
|
||||
|
|
@ -319,15 +321,15 @@ o.spec("attributes", function() {
|
|||
})
|
||||
o.spec("textarea.value", function() {
|
||||
o("can be removed by not passing a value", function() {
|
||||
var a = {tag: "textarea", attrs: {value:"x"}}
|
||||
var b = {tag: "textarea", attrs: {}}
|
||||
var a = m("textarea", {value:"x"})
|
||||
var b = m("textarea")
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
|
||||
o(a.dom.value).equals("x")
|
||||
|
||||
// https://github.com/MithrilJS/mithril.js/issues/1804#issuecomment-304521235
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(b.dom.value).equals("")
|
||||
})
|
||||
|
|
@ -336,34 +338,34 @@ o.spec("attributes", function() {
|
|||
var root = $window.document.body
|
||||
var render = vdom($window)
|
||||
|
||||
var a = {tag: "textarea"}
|
||||
var b = {tag: "textarea", attrs: {value: "1"}}
|
||||
var c = {tag: "textarea", attrs: {value: "1"}}
|
||||
var d = {tag: "textarea", attrs: {value: 1}}
|
||||
var e = {tag: "textarea", attrs: {value: 2}}
|
||||
var a = m("textarea")
|
||||
var b = m("textarea", {value: "1"})
|
||||
var c = m("textarea", {value: "1"})
|
||||
var d = m("textarea", {value: 1})
|
||||
var e = m("textarea", {value: 2})
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
var spies = $window.__getSpies(a.dom)
|
||||
a.dom.focus()
|
||||
|
||||
o(spies.valueSetter.callCount).equals(0)
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(b.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [c])
|
||||
render(root, c)
|
||||
|
||||
o(c.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [d])
|
||||
render(root, d)
|
||||
|
||||
o(d.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [e])
|
||||
render(root, e)
|
||||
|
||||
o(d.dom.value).equals("2")
|
||||
o(spies.valueSetter.callCount).equals(2)
|
||||
|
|
@ -371,23 +373,23 @@ o.spec("attributes", function() {
|
|||
})
|
||||
o.spec("link href", function() {
|
||||
o("when link href is true, attribute is present", function() {
|
||||
var a = {tag: "a", attrs: {href: true}}
|
||||
var a = m("a", {href: true})
|
||||
|
||||
render(root, [a])
|
||||
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}}
|
||||
var a = m("a", {href: false})
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
|
||||
o(a.dom.attributes["href"]).equals(undefined)
|
||||
})
|
||||
})
|
||||
o.spec("canvas width and height", function() {
|
||||
o("uses attribute API", function() {
|
||||
var canvas = {tag: "canvas", attrs: {width: "100%"}}
|
||||
var canvas = m("canvas", {width: "100%"})
|
||||
|
||||
render(root, canvas)
|
||||
|
||||
|
|
@ -397,27 +399,27 @@ o.spec("attributes", function() {
|
|||
})
|
||||
o.spec("svg", function() {
|
||||
o("when className is specified then it should be added as a class", function() {
|
||||
var a = {tag: "svg", attrs: {className: "test"}}
|
||||
var a = m("svg", {className: "test"})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.attributes["class"].value).equals("test")
|
||||
})
|
||||
/* eslint-disable no-script-url */
|
||||
o("handles xlink:href", 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])
|
||||
var vnode = m("svg", {ns: "http://www.w3.org/2000/svg"},
|
||||
m("a", {ns: "http://www.w3.org/2000/svg", "xlink:href": "javascript:;"})
|
||||
)
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("svg")
|
||||
o(vnode.dom.firstChild.attributes["href"].value).equals("javascript:;")
|
||||
o(vnode.dom.firstChild.attributes["href"].namespaceURI).equals("http://www.w3.org/1999/xlink")
|
||||
|
||||
vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [
|
||||
{tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {}}
|
||||
]}
|
||||
render(root, [vnode])
|
||||
vnode = m("svg", {ns: "http://www.w3.org/2000/svg"},
|
||||
m("a", {ns: "http://www.w3.org/2000/svg"})
|
||||
)
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("svg")
|
||||
o("href" in vnode.dom.firstChild.attributes).equals(false)
|
||||
|
|
@ -426,54 +428,54 @@ o.spec("attributes", function() {
|
|||
})
|
||||
o.spec("option.value", function() {
|
||||
o("can be set as text", function() {
|
||||
var a = {tag: "option", attrs: {value: "test"}}
|
||||
var a = m("option", {value: "test"})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.value).equals("test")
|
||||
})
|
||||
o("can be set as number", function() {
|
||||
var a = {tag: "option", attrs: {value: 1}}
|
||||
var a = m("option", {value: 1})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.value).equals("1")
|
||||
})
|
||||
o("null removes the attribute", function() {
|
||||
var a = {tag: "option", attrs: {value: null}}
|
||||
var b = {tag: "option", attrs: {value: "test"}}
|
||||
var c = {tag: "option", attrs: {value: null}}
|
||||
var a = m("option", {value: null})
|
||||
var b = m("option", {value: "test"})
|
||||
var c = m("option", {value: null})
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.value).equals("")
|
||||
o(a.dom.hasAttribute("value")).equals(false)
|
||||
|
||||
render(root, [b]);
|
||||
render(root, b);
|
||||
|
||||
o(b.dom.value).equals("test")
|
||||
o(b.dom.getAttribute("value")).equals("test")
|
||||
|
||||
render(root, [c]);
|
||||
render(root, c);
|
||||
|
||||
o(c.dom.value).equals("")
|
||||
o(c.dom.hasAttribute("value")).equals(false)
|
||||
})
|
||||
o("'' and 0 are different values", function() {
|
||||
var a = {tag: "option", attrs: {value: 0}, children:[{tag:"#", children:""}]}
|
||||
var b = {tag: "option", attrs: {value: ""}, children:[{tag:"#", children:""}]}
|
||||
var c = {tag: "option", attrs: {value: 0}, children:[{tag:"#", children:""}]}
|
||||
var a = m("option", {value: 0}, "")
|
||||
var b = m("option", {value: ""}, "")
|
||||
var c = m("option", {value: 0}, "")
|
||||
|
||||
render(root, [a]);
|
||||
render(root, a);
|
||||
|
||||
o(a.dom.value).equals("0")
|
||||
|
||||
render(root, [b]);
|
||||
render(root, b);
|
||||
|
||||
o(a.dom.value).equals("")
|
||||
|
||||
// #1595 redux
|
||||
render(root, [c]);
|
||||
render(root, c);
|
||||
|
||||
o(c.dom.value).equals("0")
|
||||
})
|
||||
|
|
@ -482,33 +484,33 @@ o.spec("attributes", function() {
|
|||
var root = $window.document.body
|
||||
var render = vdom($window)
|
||||
|
||||
var a = {tag: "option"}
|
||||
var b = {tag: "option", attrs: {value: "1"}}
|
||||
var c = {tag: "option", attrs: {value: "1"}}
|
||||
var d = {tag: "option", attrs: {value: 1}}
|
||||
var e = {tag: "option", attrs: {value: 2}}
|
||||
var a = m("option")
|
||||
var b = m("option", {value: "1"})
|
||||
var c = m("option", {value: "1"})
|
||||
var d = m("option", {value: 1})
|
||||
var e = m("option", {value: 2})
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
var spies = $window.__getSpies(a.dom)
|
||||
|
||||
o(spies.valueSetter.callCount).equals(0)
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(b.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [c])
|
||||
render(root, c)
|
||||
|
||||
o(c.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [d])
|
||||
render(root, d)
|
||||
|
||||
o(d.dom.value).equals("1")
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
|
||||
render(root, [e])
|
||||
render(root, e)
|
||||
|
||||
o(d.dom.value).equals("2")
|
||||
o(spies.valueSetter.callCount).equals(2)
|
||||
|
|
@ -517,13 +519,13 @@ o.spec("attributes", function() {
|
|||
o.spec("select.value", function() {
|
||||
function makeSelect(value) {
|
||||
var attrs = (arguments.length === 0) ? {} : {value: value}
|
||||
return {tag: "select", attrs: attrs, children: [
|
||||
{tag:"option", attrs: {value: "1"}},
|
||||
{tag:"option", attrs: {value: "2"}},
|
||||
{tag:"option", attrs: {value: "a"}},
|
||||
{tag:"option", attrs: {value: "0"}},
|
||||
{tag:"option", attrs: {value: ""}}
|
||||
]}
|
||||
return m("select", attrs,
|
||||
m("option", {value: "1"}),
|
||||
m("option", {value: "2"}),
|
||||
m("option", {value: "a"}),
|
||||
m("option", {value: "0"}),
|
||||
m("option", {value: ""})
|
||||
)
|
||||
}
|
||||
/* FIXME
|
||||
This incomplete test is meant for testing #1916.
|
||||
|
|
@ -532,9 +534,9 @@ o.spec("attributes", function() {
|
|||
attribute. Ask isiahmeadows.
|
||||
|
||||
o("render select options", function() {
|
||||
var select = {tag: "select", selectedIndex: 0, children: [
|
||||
{tag:"option", attrs: {value: "1", selected: ""}}
|
||||
]}
|
||||
var select = m("select", {selectedIndex: 0},
|
||||
m("option", {value: "1", selected: ""})
|
||||
)
|
||||
render(root, select)
|
||||
})
|
||||
*/
|
||||
|
|
@ -543,17 +545,17 @@ o.spec("attributes", function() {
|
|||
var b = makeSelect("2")
|
||||
var c = makeSelect("a")
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
|
||||
o(a.dom.value).equals("1")
|
||||
o(a.dom.selectedIndex).equals(0)
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(b.dom.value).equals("2")
|
||||
o(b.dom.selectedIndex).equals(1)
|
||||
|
||||
render(root, [c])
|
||||
render(root, c)
|
||||
|
||||
o(c.dom.value).equals("a")
|
||||
o(c.dom.selectedIndex).equals(2)
|
||||
|
|
@ -561,7 +563,7 @@ o.spec("attributes", function() {
|
|||
o("setting null unsets the value", function() {
|
||||
var a = makeSelect(null)
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
|
||||
o(a.dom.value).equals("")
|
||||
o(a.dom.selectedIndex).equals(-1)
|
||||
|
|
@ -570,12 +572,12 @@ o.spec("attributes", function() {
|
|||
var a = makeSelect(1)
|
||||
var b = makeSelect(2)
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
|
||||
o(a.dom.value).equals("1")
|
||||
o(a.dom.selectedIndex).equals(0)
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(b.dom.value).equals("2")
|
||||
o(b.dom.selectedIndex).equals(1)
|
||||
|
|
@ -584,13 +586,13 @@ o.spec("attributes", function() {
|
|||
var a = makeSelect("")
|
||||
var b = makeSelect(0)
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
a.dom.focus()
|
||||
|
||||
o(a.dom.value).equals("")
|
||||
|
||||
// #1595 redux
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(b.dom.value).equals("0")
|
||||
})
|
||||
|
|
@ -599,18 +601,18 @@ o.spec("attributes", function() {
|
|||
var b = makeSelect(null)
|
||||
var c = makeSelect("")
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
a.dom.focus()
|
||||
|
||||
o(a.dom.value).equals("")
|
||||
o(a.dom.selectedIndex).equals(4)
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(b.dom.value).equals("")
|
||||
o(b.dom.selectedIndex).equals(-1)
|
||||
|
||||
render(root, [c])
|
||||
render(root, c)
|
||||
|
||||
o(c.dom.value).equals("")
|
||||
o(c.dom.selectedIndex).equals(4)
|
||||
|
|
@ -625,45 +627,32 @@ o.spec("attributes", function() {
|
|||
var c = makeSelect(1)
|
||||
var d = makeSelect("2")
|
||||
|
||||
render(root, [a])
|
||||
render(root, a)
|
||||
var spies = $window.__getSpies(a.dom)
|
||||
a.dom.focus()
|
||||
|
||||
o(spies.valueSetter.callCount).equals(0)
|
||||
o(a.dom.value).equals("1")
|
||||
|
||||
render(root, [b])
|
||||
render(root, b)
|
||||
|
||||
o(spies.valueSetter.callCount).equals(0)
|
||||
o(b.dom.value).equals("1")
|
||||
|
||||
render(root, [c])
|
||||
render(root, c)
|
||||
|
||||
o(spies.valueSetter.callCount).equals(0)
|
||||
o(c.dom.value).equals("1")
|
||||
|
||||
render(root, [d])
|
||||
render(root, d)
|
||||
|
||||
o(spies.valueSetter.callCount).equals(1)
|
||||
o(d.dom.value).equals("2")
|
||||
})
|
||||
})
|
||||
o.spec("contenteditable attr throws on untrusted children", function() {
|
||||
o("including text nodes", function() {
|
||||
var div = {tag: "div", attrs: {contenteditable: true}, text: ""}
|
||||
var succeeded = false
|
||||
|
||||
try {
|
||||
render(root, div)
|
||||
|
||||
succeeded = true
|
||||
}
|
||||
catch(e){/* ignore */}
|
||||
|
||||
o(succeeded).equals(false)
|
||||
})
|
||||
o.spec("contenteditable throws on untrusted children", function() {
|
||||
o("including elements", function() {
|
||||
var div = {tag: "div", attrs: {contenteditable: true}, children: [{tag: "script", attrs: {src: "http://evil.com"}}]}
|
||||
var div = m("div", {contenteditable: true}, m("script", {src: "http://evil.com"}))
|
||||
var succeeded = false
|
||||
|
||||
try {
|
||||
|
|
@ -676,7 +665,7 @@ o.spec("attributes", function() {
|
|||
o(succeeded).equals(false)
|
||||
})
|
||||
o("tolerating empty children", function() {
|
||||
var div = {tag: "div", attrs: {contenteditable: true}, children: []}
|
||||
var div = m("div", {contenteditable: true})
|
||||
var succeeded = false
|
||||
|
||||
try {
|
||||
|
|
@ -689,61 +678,7 @@ o.spec("attributes", function() {
|
|||
o(succeeded).equals(true)
|
||||
})
|
||||
o("tolerating trusted content", function() {
|
||||
var div = {tag: "div", attrs: {contenteditable: true}, children: [{tag: "<", children: "<a></a>"}]}
|
||||
var succeeded = false
|
||||
|
||||
try {
|
||||
render(root, div)
|
||||
|
||||
succeeded = true
|
||||
}
|
||||
catch(e){/* ignore */}
|
||||
|
||||
o(succeeded).equals(true)
|
||||
})
|
||||
})
|
||||
o.spec("contentEditable prop throws on untrusted children", function() {
|
||||
o("including text nodes", function() {
|
||||
var div = {tag: "div", attrs: {contentEditable: true}, text: ""}
|
||||
var succeeded = false
|
||||
|
||||
try {
|
||||
render(root, div)
|
||||
|
||||
succeeded = true
|
||||
}
|
||||
catch(e){/* ignore */}
|
||||
|
||||
o(succeeded).equals(false)
|
||||
})
|
||||
o("including elements", function() {
|
||||
var div = {tag: "div", attrs: {contentEditable: true}, children: [{tag: "script", attrs: {src: "http://evil.com"}}]}
|
||||
var succeeded = false
|
||||
|
||||
try {
|
||||
render(root, div)
|
||||
|
||||
succeeded = true
|
||||
}
|
||||
catch(e){/* ignore */}
|
||||
|
||||
o(succeeded).equals(false)
|
||||
})
|
||||
o("tolerating empty children", function() {
|
||||
var div = {tag: "div", attrs: {contentEditable: true}, children: []}
|
||||
var succeeded = false
|
||||
|
||||
try {
|
||||
render(root, div)
|
||||
|
||||
succeeded = true
|
||||
}
|
||||
catch(e){/* ignore */}
|
||||
|
||||
o(succeeded).equals(true)
|
||||
})
|
||||
o("tolerating trusted content", function() {
|
||||
var div = {tag: "div", attrs: {contentEditable: true}, children: [{tag: "<", children: "<a></a>"}]}
|
||||
var div = m("div", {contenteditable: true}, m.trust("<a></a>"))
|
||||
var succeeded = false
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ var o = require("ospec")
|
|||
var components = require("../../test-utils/components")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("component", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -22,12 +23,12 @@ o.spec("component", function() {
|
|||
o("works", function() {
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return {tag: "div", attrs: {id: "a"}, text: "b"}
|
||||
return m("div", {id: "a"}, "b")
|
||||
}
|
||||
})
|
||||
var node = {tag: component}
|
||||
var node = m(component)
|
||||
|
||||
render(root, [node])
|
||||
render(root, node)
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
o(root.firstChild.attributes["id"].value).equals("a")
|
||||
|
|
@ -36,12 +37,12 @@ o.spec("component", function() {
|
|||
o("receives arguments", function() {
|
||||
var component = createComponent({
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs, text: vnode.text}
|
||||
return m("div", vnode.attrs, vnode.children)
|
||||
}
|
||||
})
|
||||
var node = {tag: component, attrs: {id: "a"}, text: "b"}
|
||||
var node = m(component, {id: "a"}, "b")
|
||||
|
||||
render(root, [node])
|
||||
render(root, node)
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
o(root.firstChild.attributes["id"].value).equals("a")
|
||||
|
|
@ -50,11 +51,11 @@ o.spec("component", function() {
|
|||
o("updates", function() {
|
||||
var component = createComponent({
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs, text: vnode.text}
|
||||
return m("div", vnode.attrs, vnode.children)
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component, attrs: {id: "a"}, text: "b"}])
|
||||
render(root, [{tag: component, attrs: {id: "c"}, text: "d"}])
|
||||
render(root, [m(component, {id: "a"}, "b")])
|
||||
render(root, [m(component, {id: "c"}, "d")])
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
o(root.firstChild.attributes["id"].value).equals("c")
|
||||
|
|
@ -64,12 +65,12 @@ o.spec("component", function() {
|
|||
var visible = false
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return visible ? {tag: "div"} : null
|
||||
return visible ? m("div") : null
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
visible = true
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
|
|
@ -77,12 +78,12 @@ o.spec("component", function() {
|
|||
var visible = false
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return visible ? {tag: "div"} : false
|
||||
return visible ? m("div") : false
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
visible = true
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
})
|
||||
|
|
@ -90,12 +91,12 @@ o.spec("component", function() {
|
|||
var visible = true
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return visible ? {tag: "div"} : null
|
||||
return visible ? m("div") : null
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
visible = false
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
|
@ -103,12 +104,12 @@ o.spec("component", function() {
|
|||
var visible = true
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return visible ? {tag: "div"} : false
|
||||
return visible ? m("div") : false
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
visible = false
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
|
@ -118,20 +119,20 @@ o.spec("component", function() {
|
|||
return null
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
o("removes", function() {
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return {tag: "div"}
|
||||
return m("div")
|
||||
}
|
||||
})
|
||||
var div = {tag: "div", key: 2}
|
||||
render(root, [{tag: component, key: 1}, div])
|
||||
render(root, [{tag: "div", key: 2}])
|
||||
var div = m("div", {key: 2})
|
||||
render(root, [m(component, {key: 1}), div])
|
||||
render(root, div)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(div.dom)
|
||||
|
|
@ -139,21 +140,21 @@ o.spec("component", function() {
|
|||
o("svg works when creating across component boundary", function() {
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return {tag: "g"}
|
||||
return m("g")
|
||||
}
|
||||
})
|
||||
render(root, [{tag: "svg", children: [{tag: component}]}])
|
||||
render(root, m("svg", m(component)))
|
||||
|
||||
o(root.firstChild.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
})
|
||||
o("svg works when updating across component boundary", function() {
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return {tag: "g"}
|
||||
return m("g")
|
||||
}
|
||||
})
|
||||
render(root, [{tag: "svg", children: [{tag: component}]}])
|
||||
render(root, [{tag: "svg", children: [{tag: component}]}])
|
||||
render(root, m("svg", m(component)))
|
||||
render(root, m("svg", m(component)))
|
||||
|
||||
o(root.firstChild.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
})
|
||||
|
|
@ -163,12 +164,12 @@ o.spec("component", function() {
|
|||
var component = createComponent({
|
||||
view: function() {
|
||||
return [
|
||||
{tag: "label"},
|
||||
{tag: "input"},
|
||||
m("label"),
|
||||
m("input"),
|
||||
]
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].nodeName).equals("LABEL")
|
||||
|
|
@ -180,7 +181,7 @@ o.spec("component", function() {
|
|||
return "a"
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.firstChild.nodeType).equals(3)
|
||||
o(root.firstChild.nodeValue).equals("a")
|
||||
|
|
@ -191,7 +192,7 @@ o.spec("component", function() {
|
|||
return ""
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.firstChild.nodeType).equals(3)
|
||||
o(root.firstChild.nodeValue).equals("")
|
||||
|
|
@ -202,7 +203,7 @@ o.spec("component", function() {
|
|||
return 1
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.firstChild.nodeType).equals(3)
|
||||
o(root.firstChild.nodeValue).equals("1")
|
||||
|
|
@ -213,7 +214,7 @@ o.spec("component", function() {
|
|||
return 0
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.firstChild.nodeType).equals(3)
|
||||
o(root.firstChild.nodeValue).equals("0")
|
||||
|
|
@ -224,7 +225,7 @@ o.spec("component", function() {
|
|||
return true
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
|
@ -234,7 +235,7 @@ o.spec("component", function() {
|
|||
return false
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
|
@ -244,7 +245,7 @@ o.spec("component", function() {
|
|||
return null
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
|
@ -254,7 +255,7 @@ o.spec("component", function() {
|
|||
return undefined
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
|
@ -267,7 +268,7 @@ o.spec("component", function() {
|
|||
}
|
||||
})
|
||||
try {
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
}
|
||||
catch (e) {
|
||||
threw = true
|
||||
|
|
@ -289,12 +290,12 @@ o.spec("component", function() {
|
|||
else return vnode
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
|
||||
try {
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
}
|
||||
catch (e) {
|
||||
threw = true
|
||||
|
|
@ -309,13 +310,13 @@ o.spec("component", function() {
|
|||
var component = createComponent({
|
||||
view: function() {
|
||||
return [
|
||||
{tag: "label"},
|
||||
{tag: "input"},
|
||||
m("label"),
|
||||
m("input"),
|
||||
]
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(2)
|
||||
o(root.childNodes[0].nodeName).equals("LABEL")
|
||||
|
|
@ -327,8 +328,8 @@ o.spec("component", function() {
|
|||
return "a"
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
render(root, m(component))
|
||||
|
||||
o(root.firstChild.nodeType).equals(3)
|
||||
o(root.firstChild.nodeValue).equals("a")
|
||||
|
|
@ -339,8 +340,8 @@ o.spec("component", function() {
|
|||
return null
|
||||
}
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
render(root, m(component))
|
||||
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
|
|
@ -348,15 +349,15 @@ o.spec("component", function() {
|
|||
var component = createComponent({
|
||||
view: function() {
|
||||
return [
|
||||
{tag: "label"},
|
||||
{tag: "input"},
|
||||
m("label"),
|
||||
m("input"),
|
||||
]
|
||||
}
|
||||
})
|
||||
var div = {tag: "div", key: 2}
|
||||
render(root, [{tag: component, key: 1}, div])
|
||||
var div = m("div", {key: 2})
|
||||
render(root, [m(component, {key: 1}), div])
|
||||
|
||||
render(root, [{tag: "div", key: 2}])
|
||||
render(root, [m("div", {key: 2})])
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(div.dom)
|
||||
|
|
@ -367,10 +368,10 @@ o.spec("component", function() {
|
|||
return "a"
|
||||
}
|
||||
})
|
||||
var div = {tag: "div", key: 2}
|
||||
render(root, [{tag: component, key: 1}, div])
|
||||
var div = m("div", {key: 2})
|
||||
render(root, [m(component, {key: 1}), div])
|
||||
|
||||
render(root, [{tag: "div", key: 2}])
|
||||
render(root, [m("div", {key: 2})])
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(div.dom)
|
||||
|
|
@ -388,12 +389,11 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(0)
|
||||
},
|
||||
view: function() {
|
||||
return {tag: "div", attrs: {id: "a"}, text: "b"}
|
||||
return m("div", {id: "a"}, "b")
|
||||
}
|
||||
})
|
||||
var node = {tag: component}
|
||||
|
||||
render(root, [node])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
|
@ -411,12 +411,11 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(0)
|
||||
},
|
||||
view: function() {
|
||||
return [{tag: "div", attrs: {id: "a"}, text: "b"}]
|
||||
return [m("div", {id: "a"}, "b")]
|
||||
}
|
||||
})
|
||||
var node = {tag: component}
|
||||
|
||||
render(root, [node])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
|
@ -425,30 +424,29 @@ o.spec("component", function() {
|
|||
})
|
||||
o("calls oninit before view", function() {
|
||||
var viewCalled = false
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
viewCalled = true
|
||||
return m("div", {id: "a"}, "b")
|
||||
},
|
||||
oninit: function() {
|
||||
o(viewCalled).equals(false)
|
||||
},
|
||||
})
|
||||
|
||||
render(root, createComponent({
|
||||
tag: {
|
||||
view: function() {
|
||||
viewCalled = true
|
||||
return [{tag: "div", attrs: {id: "a"}, text: "b"}]
|
||||
},
|
||||
oninit: function() {
|
||||
o(viewCalled).equals(false)
|
||||
},
|
||||
}
|
||||
}))
|
||||
render(root, m(component))
|
||||
})
|
||||
o("does not calls oninit on redraw", function() {
|
||||
var init = o.spy()
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return {tag: "div", attrs: {id: "a"}, text: "b"}
|
||||
return m("div", {id: "a"}, "b")
|
||||
},
|
||||
oninit: init,
|
||||
})
|
||||
|
||||
function view() {
|
||||
return {tag: component}
|
||||
return m(component)
|
||||
}
|
||||
|
||||
render(root, view())
|
||||
|
|
@ -467,12 +465,11 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(1)
|
||||
},
|
||||
view: function() {
|
||||
return {tag: "div", attrs: {id: "a"}, text: "b"}
|
||||
return m("div", {id: "a"}, "b")
|
||||
}
|
||||
})
|
||||
var node = {tag: component}
|
||||
|
||||
render(root, [node])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
|
@ -483,13 +480,13 @@ o.spec("component", function() {
|
|||
var create = o.spy()
|
||||
var component = createComponent({
|
||||
view: function() {
|
||||
return {tag: "div", attrs: {id: "a"}, text: "b"}
|
||||
return m("div", {id: "a"}, "b")
|
||||
},
|
||||
oncreate: create,
|
||||
})
|
||||
|
||||
function view() {
|
||||
return {tag: component}
|
||||
return m(component)
|
||||
}
|
||||
|
||||
render(root, view())
|
||||
|
|
@ -508,12 +505,11 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(1)
|
||||
},
|
||||
view: function() {
|
||||
return [{tag: "div", attrs: {id: "a"}, text: "b"}]
|
||||
return m("div", {id: "a"}, "b")
|
||||
}
|
||||
})
|
||||
var node = {tag: component}
|
||||
|
||||
render(root, [node])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
|
@ -531,15 +527,15 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(1)
|
||||
},
|
||||
view: function() {
|
||||
return {tag: "div", attrs: {id: "a"}, text: "b"}
|
||||
return m("div", {id: "a"}, "b")
|
||||
}
|
||||
})
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(0)
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
|
@ -557,15 +553,15 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(1)
|
||||
},
|
||||
view: function() {
|
||||
return [{tag: "div", attrs: {id: "a"}, text: "b"}]
|
||||
return [m("div", {id: "a"}, "b")]
|
||||
}
|
||||
})
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(0)
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(1)
|
||||
o(root.firstChild.nodeName).equals("DIV")
|
||||
|
|
@ -583,11 +579,11 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(1)
|
||||
},
|
||||
view: function() {
|
||||
return {tag: "div", attrs: {id: "a"}, text: "b"}
|
||||
return m("div", {id: "a"}, "b")
|
||||
}
|
||||
})
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(0)
|
||||
|
||||
|
|
@ -607,11 +603,11 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(1)
|
||||
},
|
||||
view: function() {
|
||||
return [{tag: "div", attrs: {id: "a"}, text: "b"}]
|
||||
return [m("div", {id: "a"}, "b")]
|
||||
}
|
||||
})
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(0)
|
||||
|
||||
|
|
@ -631,11 +627,11 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(1)
|
||||
},
|
||||
view: function() {
|
||||
return {tag: "div", attrs: {id: "a"}, text: "b"}
|
||||
return m("div", {id: "a"}, "b")
|
||||
}
|
||||
})
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(0)
|
||||
|
||||
|
|
@ -655,11 +651,11 @@ o.spec("component", function() {
|
|||
o(root.childNodes.length).equals(1)
|
||||
},
|
||||
view: function() {
|
||||
return [{tag: "div", attrs: {id: "a"}, text: "b"}]
|
||||
return [m("div", {id: "a"}, "b")]
|
||||
}
|
||||
})
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
o(called).equals(0)
|
||||
|
||||
|
|
@ -672,15 +668,15 @@ o.spec("component", function() {
|
|||
var component = createComponent({
|
||||
onupdate: function() {},
|
||||
view: function() {
|
||||
return {tag: "div"}
|
||||
return m("div")
|
||||
}
|
||||
})
|
||||
var vnode = {tag: component, key: 1}
|
||||
var updated = {tag: component, key: 1}
|
||||
var vnode = m(component, {key: 1})
|
||||
var updated = m(component, {key: 1})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
o(vnode.dom).notEquals(updated.dom)
|
||||
})
|
||||
|
|
@ -729,7 +725,7 @@ o.spec("component", function() {
|
|||
o(attrs[hook].callCount).equals(methods[hook].callCount)(hook)
|
||||
})
|
||||
|
||||
render(root, [{tag: component, attrs: attrs}])
|
||||
render(root, [m(component, attrs)])
|
||||
|
||||
o(methods.view.callCount).equals(1)
|
||||
o(methods.oninit.callCount).equals(1)
|
||||
|
|
@ -743,7 +739,7 @@ o.spec("component", function() {
|
|||
o(attrs[hook].callCount).equals(methods[hook].callCount)(hook)
|
||||
})
|
||||
|
||||
render(root, [{tag: component, attrs: attrs}])
|
||||
render(root, [m(component, attrs)])
|
||||
|
||||
o(methods.view.callCount).equals(2)
|
||||
o(methods.oninit.callCount).equals(1)
|
||||
|
|
@ -794,8 +790,8 @@ o.spec("component", function() {
|
|||
|
||||
var component = createComponent(methods)
|
||||
|
||||
render(root, [{tag: component, attrs: attrs}])
|
||||
render(root, [{tag: component, attrs: attrs}])
|
||||
render(root, [m(component, attrs)])
|
||||
render(root, [m(component, attrs)])
|
||||
render(root, [])
|
||||
|
||||
hooks.forEach(function(hook) {
|
||||
|
|
@ -824,15 +820,15 @@ o.spec("component", function() {
|
|||
} else {
|
||||
o(vnode.state).notEquals(firstState)
|
||||
}
|
||||
return {tag: "div"}
|
||||
return m("div")
|
||||
})
|
||||
var component = createComponent({view: view})
|
||||
|
||||
render(root, [{tag: "div", children: [{tag: component, key: 1}]}])
|
||||
render(root, [m("div", m(component, {key: 1}))])
|
||||
var child = root.firstChild.firstChild
|
||||
render(root, [])
|
||||
step = 1
|
||||
render(root, [{tag: "div", children: [{tag: component, key: 1}]}])
|
||||
render(root, [m("div", m(component, {key: 1}))])
|
||||
|
||||
o(child).notEquals(root.firstChild.firstChild) // this used to be a recycling pool test
|
||||
o(view.callCount).equals(2)
|
||||
|
|
@ -849,7 +845,7 @@ o.spec("component", function() {
|
|||
}
|
||||
}))
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
function init(vnode) {
|
||||
o(vnode.state.data).equals(data)
|
||||
|
|
@ -866,7 +862,7 @@ o.spec("component", function() {
|
|||
}
|
||||
}))
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
function init(vnode) {
|
||||
o(vnode.state.data).equals(data)
|
||||
|
|
@ -888,7 +884,7 @@ o.spec("component", function() {
|
|||
}
|
||||
}
|
||||
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
|
||||
function init(vnode) {
|
||||
o(vnode.state.data).equals(data)
|
||||
|
|
@ -911,8 +907,8 @@ o.spec("component", function() {
|
|||
component.prototype.view = view
|
||||
component.prototype.oninit = oninit
|
||||
|
||||
render(root, [{tag: component, attrs: {oninit: oninit}}])
|
||||
render(root, [{tag: component, attrs: {oninit: oninit}}])
|
||||
render(root, [m(component, {oninit: oninit})])
|
||||
render(root, [m(component, {oninit: oninit})])
|
||||
render(root, [])
|
||||
|
||||
o(component.callCount).equals(1)
|
||||
|
|
@ -934,8 +930,8 @@ o.spec("component", function() {
|
|||
}
|
||||
})
|
||||
|
||||
render(root, [{tag: component, attrs: {oninit: oninit}}])
|
||||
render(root, [{tag: component, attrs: {oninit: oninit}}])
|
||||
render(root, [m(component, {oninit: oninit})])
|
||||
render(root, [m(component, {oninit: oninit})])
|
||||
render(root, [])
|
||||
|
||||
o(component.callCount).equals(1)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("createElement", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -13,48 +14,48 @@ o.spec("createElement", function() {
|
|||
})
|
||||
|
||||
o("creates element", function() {
|
||||
var vnode = {tag: "div"}
|
||||
render(root, [vnode])
|
||||
var vnode = m("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])
|
||||
var vnode = m("div", {id: "a", title: "b"})
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
o(vnode.dom.attributes["id"].value).equals("a")
|
||||
o(vnode.dom.attributes["title"].value).equals("b")
|
||||
})
|
||||
o("creates style", function() {
|
||||
var vnode = {tag: "div", attrs: {style: {backgroundColor: "red"}}}
|
||||
render(root, [vnode])
|
||||
var vnode = m("div", {style: {backgroundColor: "red"}})
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
o(vnode.dom.style.backgroundColor).equals("red")
|
||||
})
|
||||
o("allows css vars in style", function() {
|
||||
var vnode = {tag: "div", attrs: {style: {"--css-var": "red"}}}
|
||||
render(root, [vnode])
|
||||
var vnode = m("div", {style: {"--css-var": "red"}})
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.style["--css-var"]).equals("red")
|
||||
})
|
||||
o("allows css vars in style with uppercase letters", function() {
|
||||
var vnode = {tag: "div", attrs: {style: {"--cssVar": "red"}}}
|
||||
render(root, [vnode])
|
||||
var vnode = m("div", {style: {"--cssVar": "red"}})
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.style["--cssVar"]).equals("red")
|
||||
})
|
||||
o("censors cssFloat to float", function() {
|
||||
var vnode = {tag: "a", attrs: {style: {cssFloat: "left"}}}
|
||||
var vnode = m("a", {style: {cssFloat: "left"}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.style.float).equals("left")
|
||||
})
|
||||
o("creates children", function() {
|
||||
var vnode = {tag: "div", children: [{tag: "a"}, {tag: "b"}]}
|
||||
render(root, [vnode])
|
||||
var vnode = m("div", m("a"), m("b"))
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
o(vnode.dom.childNodes.length).equals(2)
|
||||
|
|
@ -62,8 +63,8 @@ o.spec("createElement", function() {
|
|||
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])
|
||||
var vnode = m("div", {id: "a", title: "b"}, m("a"), m("b"))
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("DIV")
|
||||
o(vnode.dom.attributes["id"].value).equals("a")
|
||||
|
|
@ -74,11 +75,11 @@ o.spec("createElement", function() {
|
|||
})
|
||||
/* eslint-disable no-script-url */
|
||||
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:;"}},
|
||||
{tag: "foreignObject", children: [{tag: "body", attrs: {xmlns: "http://www.w3.org/1999/xhtml"}}]}
|
||||
]}
|
||||
render(root, [vnode])
|
||||
var vnode = m("svg",
|
||||
m("a", {"xlink:href": "javascript:;"}),
|
||||
m("foreignObject", m("body", {xmlns: "http://www.w3.org/1999/xhtml"}))
|
||||
)
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("svg")
|
||||
o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
|
|
@ -92,14 +93,14 @@ o.spec("createElement", function() {
|
|||
})
|
||||
/* eslint-enable no-script-url */
|
||||
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])
|
||||
var vnode = m("svg", {viewBox: "0 0 100 100"})
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.attributes["viewBox"].value).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])
|
||||
var vnode = m("math", m("mrow"))
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("math")
|
||||
o(vnode.dom.namespaceURI).equals("http://www.w3.org/1998/Math/MathML")
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/fragment")
|
||||
|
||||
o.spec("createFragment", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -13,36 +15,36 @@ o.spec("createFragment", function() {
|
|||
})
|
||||
|
||||
o("creates fragment", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "a"}]}
|
||||
render(root, [vnode])
|
||||
var vnode = m.fragment(m("a"))
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("A")
|
||||
})
|
||||
o("handles empty fragment", function() {
|
||||
var vnode = {tag: "[", children: []}
|
||||
render(root, [vnode])
|
||||
var vnode = m.fragment()
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom).equals(null)
|
||||
o(vnode.domSize).equals(0)
|
||||
})
|
||||
o("handles childless fragment", function() {
|
||||
var vnode = {tag: "["}
|
||||
render(root, [vnode])
|
||||
var vnode = m.fragment()
|
||||
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])
|
||||
var vnode = m.fragment(m("a"), m("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])
|
||||
var vnode = m.fragment(m("td"))
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom).notEquals(null)
|
||||
o(vnode.dom.nodeName).equals("TD")
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.trust = require("../../render/trust")
|
||||
|
||||
o.spec("createHTML", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -13,27 +15,27 @@ o.spec("createHTML", function() {
|
|||
})
|
||||
|
||||
o("creates HTML", function() {
|
||||
var vnode = {tag: "<", children: "<a></a>"}
|
||||
render(root, [vnode])
|
||||
var vnode = m.trust("<a></a>")
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("A")
|
||||
})
|
||||
o("creates text HTML", function() {
|
||||
var vnode = {tag: "<", children: "a"}
|
||||
render(root, [vnode])
|
||||
var vnode = m.trust("a")
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeValue).equals("a")
|
||||
})
|
||||
o("handles empty HTML", function() {
|
||||
var vnode = {tag: "<", children: ""}
|
||||
render(root, [vnode])
|
||||
var vnode = m.trust("")
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom).equals(null)
|
||||
o(vnode.domSize).equals(0)
|
||||
})
|
||||
o("handles multiple children in HTML", function() {
|
||||
var vnode = {tag: "<", children: "<a></a><b></b>"}
|
||||
render(root, [vnode])
|
||||
var vnode = m.trust("<a></a><b></b>")
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.domSize).equals(2)
|
||||
o(vnode.dom.nodeName).equals("A")
|
||||
|
|
@ -45,35 +47,35 @@ o.spec("createHTML", function() {
|
|||
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])
|
||||
var vnode = m.trust("<" + tag + " />")
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals(tag.toUpperCase())
|
||||
})
|
||||
})
|
||||
o("creates SVG", function() {
|
||||
var vnode = {tag: "<", children: "<g></g>"}
|
||||
render(root, [{tag:"svg", children: [vnode]}])
|
||||
var vnode = m.trust("<g></g>")
|
||||
render(root, m("svg", vnode))
|
||||
|
||||
o(vnode.dom.nodeName).equals("g")
|
||||
o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
})
|
||||
o("creates text SVG", function() {
|
||||
var vnode = {tag: "<", children: "a"}
|
||||
render(root, [{tag:"svg", children: [vnode]}])
|
||||
var vnode = m.trust("a")
|
||||
render(root, m("svg", vnode))
|
||||
|
||||
o(vnode.dom.nodeValue).equals("a")
|
||||
})
|
||||
o("handles empty SVG", function() {
|
||||
var vnode = {tag: "<", children: ""}
|
||||
render(root, [{tag:"svg", children: [vnode]}])
|
||||
var vnode = m.trust("")
|
||||
render(root, m("svg", vnode))
|
||||
|
||||
o(vnode.dom).equals(null)
|
||||
o(vnode.domSize).equals(0)
|
||||
})
|
||||
o("handles multiple children in SVG", function() {
|
||||
var vnode = {tag: "<", children: "<g></g><text></text>"}
|
||||
render(root, [{tag:"svg", children: [vnode]}])
|
||||
var vnode = m.trust("<g></g><text></text>")
|
||||
render(root, m("svg", vnode))
|
||||
|
||||
o(vnode.domSize).equals(2)
|
||||
o(vnode.dom.nodeName).equals("g")
|
||||
|
|
@ -82,7 +84,7 @@ o.spec("createHTML", function() {
|
|||
o(vnode.dom.nextSibling.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
})
|
||||
o("creates the dom correctly with a contenteditable parent", function() {
|
||||
var div = {tag: "div", attrs: {contenteditable: true}, children: [{tag: "<", children: "<a></a>"}]}
|
||||
var div = m("div", {contenteditable: true}, m.trust("<a></a>"))
|
||||
|
||||
render(root, div)
|
||||
var tags = []
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/fragment")
|
||||
m.trust = require("../../render/trust")
|
||||
|
||||
o.spec("createNodes", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -14,10 +17,10 @@ o.spec("createNodes", function() {
|
|||
|
||||
o("creates nodes", function() {
|
||||
var vnodes = [
|
||||
{tag: "a"},
|
||||
{tag: "#", children: "b"},
|
||||
{tag: "<", children: "c"},
|
||||
{tag: "[", children: [{tag: "#", children: "d"}]},
|
||||
m("a"),
|
||||
"b",
|
||||
m.trust("c"),
|
||||
m.fragment("d"),
|
||||
]
|
||||
render(root, vnodes)
|
||||
|
||||
|
|
@ -29,11 +32,11 @@ o.spec("createNodes", function() {
|
|||
})
|
||||
o("ignores null", function() {
|
||||
var vnodes = [
|
||||
{tag: "a"},
|
||||
{tag: "#", children: "b"},
|
||||
m("a"),
|
||||
"b",
|
||||
null,
|
||||
{tag: "<", children: "c"},
|
||||
{tag: "[", children: [{tag: "#", children: "d"}]},
|
||||
m.trust("c"),
|
||||
m.fragment("d"),
|
||||
]
|
||||
render(root, vnodes)
|
||||
|
||||
|
|
@ -45,11 +48,11 @@ o.spec("createNodes", function() {
|
|||
})
|
||||
o("ignores undefined", function() {
|
||||
var vnodes = [
|
||||
{tag: "a"},
|
||||
{tag: "#", children: "b"},
|
||||
m("a"),
|
||||
"b",
|
||||
undefined,
|
||||
{tag: "<", children: "c"},
|
||||
{tag: "[", children: [{tag: "#", children: "d"}]},
|
||||
m.trust("c"),
|
||||
m.fragment("d"),
|
||||
]
|
||||
render(root, vnodes)
|
||||
|
||||
|
|
|
|||
|
|
@ -13,59 +13,57 @@ o.spec("createText", function() {
|
|||
})
|
||||
|
||||
o("creates string", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
render(root, [vnode])
|
||||
var vnode = "a"
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("a")
|
||||
o(root.firstChild.nodeName).equals("#text")
|
||||
o(root.firstChild.nodeValue).equals("a")
|
||||
})
|
||||
o("creates falsy string", function() {
|
||||
var vnode = {tag: "#", children: ""}
|
||||
render(root, [vnode])
|
||||
var vnode = ""
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("")
|
||||
o(root.firstChild.nodeName).equals("#text")
|
||||
o(root.firstChild.nodeValue).equals("")
|
||||
})
|
||||
o("creates number", function() {
|
||||
var vnode = {tag: "#", children: 1}
|
||||
render(root, [vnode])
|
||||
var vnode = 1
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("1")
|
||||
o(root.firstChild.nodeName).equals("#text")
|
||||
o(root.firstChild.nodeValue).equals("1")
|
||||
})
|
||||
o("creates falsy number", function() {
|
||||
var vnode = {tag: "#", children: 0}
|
||||
render(root, [vnode])
|
||||
var vnode = 0
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("0")
|
||||
o(root.firstChild.nodeName).equals("#text")
|
||||
o(root.firstChild.nodeValue).equals("0")
|
||||
})
|
||||
o("creates boolean", function() {
|
||||
var vnode = {tag: "#", children: true}
|
||||
render(root, [vnode])
|
||||
o("ignores true boolean", function() {
|
||||
var vnode = true
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("true")
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
o("creates falsy boolean", function() {
|
||||
var vnode = {tag: "#", children: false}
|
||||
render(root, [vnode])
|
||||
o("creates false boolean", function() {
|
||||
var vnode = false
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("false")
|
||||
o(root.childNodes.length).equals(0)
|
||||
})
|
||||
o("creates spaces", function() {
|
||||
var vnode = {tag: "#", children: " "}
|
||||
render(root, [vnode])
|
||||
var vnode = " "
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals(" ")
|
||||
o(root.firstChild.nodeName).equals("#text")
|
||||
o(root.firstChild.nodeValue).equals(" ")
|
||||
})
|
||||
o("ignores html", function() {
|
||||
var vnode = {tag: "#", children: "<a></a>™"}
|
||||
render(root, [vnode])
|
||||
var vnode = "<a></a>™"
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.nodeName).equals("#text")
|
||||
o(vnode.dom.nodeValue).equals("<a></a>™")
|
||||
o(root.firstChild.nodeName).equals("#text")
|
||||
o(root.firstChild.nodeValue).equals("<a></a>™")
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("event", function() {
|
||||
var $window, root, redraw, render, reallyRender
|
||||
|
|
@ -31,12 +32,12 @@ o.spec("event", function() {
|
|||
o("handles onclick", function() {
|
||||
var spyDiv = eventSpy()
|
||||
var spyParent = eventSpy()
|
||||
var div = {tag: "div", attrs: {onclick: spyDiv}}
|
||||
var parent = {tag: "div", attrs: {onclick: spyParent}, children: [div]}
|
||||
var div = m("div", {onclick: spyDiv})
|
||||
var parent = m("div", {onclick: spyParent}, div)
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [parent])
|
||||
render(root, parent)
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spyDiv.calls.length).equals(1)
|
||||
|
|
@ -58,12 +59,12 @@ o.spec("event", function() {
|
|||
o("handles onclick returning false", function() {
|
||||
var spyDiv = eventSpy(function() { return false })
|
||||
var spyParent = eventSpy()
|
||||
var div = {tag: "div", attrs: {onclick: spyDiv}}
|
||||
var parent = {tag: "div", attrs: {onclick: spyParent}, children: [div]}
|
||||
var div = m("div", {onclick: spyDiv})
|
||||
var parent = m("div", {onclick: spyParent}, div)
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [parent])
|
||||
render(root, parent)
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spyDiv.calls.length).equals(1)
|
||||
|
|
@ -83,12 +84,12 @@ o.spec("event", function() {
|
|||
var spyParent = eventSpy()
|
||||
var listenerDiv = {handleEvent: spyDiv}
|
||||
var listenerParent = {handleEvent: spyParent}
|
||||
var div = {tag: "div", attrs: {onclick: listenerDiv}}
|
||||
var parent = {tag: "div", attrs: {onclick: listenerParent}, children: [div]}
|
||||
var div = m("div", {onclick: listenerDiv})
|
||||
var parent = m("div", {onclick: listenerParent}, div)
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [parent])
|
||||
render(root, parent)
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spyDiv.calls.length).equals(1)
|
||||
|
|
@ -112,12 +113,12 @@ o.spec("event", function() {
|
|||
var spyParent = eventSpy()
|
||||
var listenerDiv = {handleEvent: spyDiv}
|
||||
var listenerParent = {handleEvent: spyParent}
|
||||
var div = {tag: "div", attrs: {onclick: listenerDiv}}
|
||||
var parent = {tag: "div", attrs: {onclick: listenerParent}, children: [div]}
|
||||
var div = m("div", {onclick: listenerDiv})
|
||||
var parent = m("div", {onclick: listenerParent}, div)
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [parent])
|
||||
render(root, parent)
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spyDiv.calls.length).equals(1)
|
||||
|
|
@ -138,11 +139,11 @@ o.spec("event", function() {
|
|||
|
||||
o("removes event", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {onclick: spy}}
|
||||
var updated = {tag: "a", attrs: {}}
|
||||
var vnode = m("a", {onclick: spy})
|
||||
var updated = m("a")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
|
@ -153,11 +154,11 @@ o.spec("event", function() {
|
|||
|
||||
o("removes event when null", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {onclick: spy}}
|
||||
var updated = {tag: "a", attrs: {onclick: null}}
|
||||
var vnode = m("a", {onclick: spy})
|
||||
var updated = m("a", {onclick: null})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
|
@ -168,11 +169,11 @@ o.spec("event", function() {
|
|||
|
||||
o("removes event when undefined", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {onclick: spy}}
|
||||
var updated = {tag: "a", attrs: {onclick: undefined}}
|
||||
var vnode = m("a", {onclick: spy})
|
||||
var updated = m("a", {onclick: undefined})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
|
@ -183,11 +184,11 @@ o.spec("event", function() {
|
|||
|
||||
o("removes event added via addEventListener when null", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {ontouchstart: spy}}
|
||||
var updated = {tag: "a", attrs: {ontouchstart: null}}
|
||||
var vnode = m("a", {ontouchstart: spy})
|
||||
var updated = m("a", {ontouchstart: null})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("TouchEvents")
|
||||
e.initEvent("touchstart", true, true)
|
||||
|
|
@ -198,11 +199,11 @@ o.spec("event", function() {
|
|||
|
||||
o("removes event added via addEventListener", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {ontouchstart: spy}}
|
||||
var updated = {tag: "a", attrs: {}}
|
||||
var vnode = m("a", {ontouchstart: spy})
|
||||
var updated = m("a")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("TouchEvents")
|
||||
e.initEvent("touchstart", true, true)
|
||||
|
|
@ -213,11 +214,11 @@ o.spec("event", function() {
|
|||
|
||||
o("removes event added via addEventListener when undefined", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {ontouchstart: spy}}
|
||||
var updated = {tag: "a", attrs: {ontouchstart: undefined}}
|
||||
var vnode = m("a", {ontouchstart: spy})
|
||||
var updated = m("a", {ontouchstart: undefined})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("TouchEvents")
|
||||
e.initEvent("touchstart", true, true)
|
||||
|
|
@ -229,11 +230,11 @@ o.spec("event", function() {
|
|||
o("removes EventListener object", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var vnode = {tag: "a", attrs: {onclick: listener}}
|
||||
var updated = {tag: "a", attrs: {}}
|
||||
var vnode = m("a", {onclick: listener})
|
||||
var updated = m("a")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
|
@ -245,11 +246,11 @@ o.spec("event", function() {
|
|||
o("removes EventListener object when null", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var vnode = {tag: "a", attrs: {onclick: listener}}
|
||||
var updated = {tag: "a", attrs: {onclick: null}}
|
||||
var vnode = m("a", {onclick: listener})
|
||||
var updated = m("a", {onclick: null})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
|
@ -261,11 +262,11 @@ o.spec("event", function() {
|
|||
o("removes EventListener object when undefined", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var vnode = {tag: "a", attrs: {onclick: listener}}
|
||||
var updated = {tag: "a", attrs: {onclick: undefined}}
|
||||
var vnode = m("a", {onclick: listener})
|
||||
var updated = m("a", {onclick: undefined})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
|
@ -276,13 +277,13 @@ o.spec("event", function() {
|
|||
|
||||
o("fires onclick only once after redraw", function() {
|
||||
var spy = o.spy()
|
||||
var div = {tag: "div", attrs: {id: "a", onclick: spy}}
|
||||
var updated = {tag: "div", attrs: {id: "b", onclick: spy}}
|
||||
var div = m("div", {id: "a", onclick: spy})
|
||||
var updated = m("div", {id: "b", onclick: spy})
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [div])
|
||||
render(root, [updated])
|
||||
render(root, div)
|
||||
render(root, updated)
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
|
|
@ -299,13 +300,13 @@ o.spec("event", function() {
|
|||
o("fires click EventListener object only once after redraw", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var div = {tag: "div", attrs: {id: "a", onclick: listener}}
|
||||
var updated = {tag: "div", attrs: {id: "b", onclick: listener}}
|
||||
var div = m("div", {id: "a", onclick: listener})
|
||||
var updated = m("div", {id: "b", onclick: listener})
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [div])
|
||||
render(root, [updated])
|
||||
render(root, div)
|
||||
render(root, updated)
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
|
|
@ -321,11 +322,11 @@ o.spec("event", function() {
|
|||
|
||||
o("handles ontransitionend", function() {
|
||||
var spy = o.spy()
|
||||
var div = {tag: "div", attrs: {ontransitionend: spy}}
|
||||
var div = m("div", {ontransitionend: spy})
|
||||
var e = $window.document.createEvent("HTMLEvents")
|
||||
e.initEvent("transitionend", true, true)
|
||||
|
||||
render(root, [div])
|
||||
render(root, div)
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
|
|
@ -340,11 +341,11 @@ o.spec("event", function() {
|
|||
o("handles transitionend EventListener object", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var div = {tag: "div", attrs: {ontransitionend: listener}}
|
||||
var div = m("div", {ontransitionend: listener})
|
||||
var e = $window.document.createEvent("HTMLEvents")
|
||||
e.initEvent("transitionend", true, true)
|
||||
|
||||
render(root, [div])
|
||||
render(root, div)
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
|
|
@ -357,7 +358,7 @@ o.spec("event", function() {
|
|||
})
|
||||
|
||||
o("handles changed spy", function() {
|
||||
var div1 = {tag: "div", attrs: {ontransitionend: function() {}}}
|
||||
var div1 = m("div", {ontransitionend: function() {}})
|
||||
|
||||
reallyRender(root, [div1], redraw)
|
||||
var e = $window.document.createEvent("HTMLEvents")
|
||||
|
|
@ -369,7 +370,7 @@ o.spec("event", function() {
|
|||
o(redraw.args.length).equals(0)
|
||||
|
||||
var replacementRedraw = o.spy()
|
||||
var div2 = {tag: "div", attrs: {ontransitionend: function() {}}}
|
||||
var div2 = m("div", {ontransitionend: function() {}})
|
||||
|
||||
reallyRender(root, [div2], replacementRedraw)
|
||||
var e = $window.document.createEvent("HTMLEvents")
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ function runTest(name, fragment) {
|
|||
o.spec(name, function() {
|
||||
o("works", function() {
|
||||
var attrs = {foo: 5}
|
||||
var child = {tag: "p"}
|
||||
var frag = fragment(attrs, [child])
|
||||
var child = m("p")
|
||||
var frag = fragment(attrs, child)
|
||||
|
||||
o(frag.tag).equals("[")
|
||||
|
||||
|
|
|
|||
|
|
@ -372,22 +372,22 @@ o.spec("hyperscript", function() {
|
|||
o("handles string single child", function() {
|
||||
var vnode = m("div", {}, ["a"])
|
||||
|
||||
o(vnode.text).equals("a")
|
||||
o(vnode.children[0].children).equals("a")
|
||||
})
|
||||
o("handles falsy string single child", function() {
|
||||
var vnode = m("div", {}, [""])
|
||||
|
||||
o(vnode.text).equals("")
|
||||
o(vnode.children[0].children).equals("")
|
||||
})
|
||||
o("handles number single child", function() {
|
||||
var vnode = m("div", {}, [1])
|
||||
|
||||
o(vnode.text).equals("1")
|
||||
o(vnode.children[0].children).equals("1")
|
||||
})
|
||||
o("handles falsy number single child", function() {
|
||||
var vnode = m("div", {}, [0])
|
||||
|
||||
o(vnode.text).equals("0")
|
||||
o(vnode.children[0].children).equals("0")
|
||||
})
|
||||
o("handles boolean single child", function() {
|
||||
var vnode = m("div", {}, [true])
|
||||
|
|
@ -438,7 +438,7 @@ o.spec("hyperscript", function() {
|
|||
o("handles falsy number single child without attrs", function() {
|
||||
var vnode = m("div", 0)
|
||||
|
||||
o(vnode.text).equals("0")
|
||||
o(vnode.children[0].children).equals("0")
|
||||
})
|
||||
})
|
||||
o.spec("permutations", function() {
|
||||
|
|
@ -495,25 +495,25 @@ o.spec("hyperscript", function() {
|
|||
var vnode = m("div", {a: "b"}, ["c"])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals("c")
|
||||
o(vnode.children[0].children).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(vnode.children[0].children).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(vnode.children[0].children).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(vnode.children[0].children).equals("0")
|
||||
})
|
||||
o("handles attr and single boolean text child", function() {
|
||||
var vnode = m("div", {a: "b"}, [true])
|
||||
|
|
@ -525,7 +525,7 @@ o.spec("hyperscript", function() {
|
|||
var vnode = m("div", {a: "b"}, [0])
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals("0")
|
||||
o(vnode.children[0].children).equals("0")
|
||||
})
|
||||
o("handles attr and single false boolean text child", function() {
|
||||
var vnode = m("div", {a: "b"}, [false])
|
||||
|
|
@ -537,7 +537,7 @@ o.spec("hyperscript", function() {
|
|||
var vnode = m("div", {a: "b"}, "c")
|
||||
|
||||
o(vnode.attrs.a).equals("b")
|
||||
o(vnode.text).equals("c")
|
||||
o(vnode.children[0].children).equals("c")
|
||||
})
|
||||
o("handles attr and text children unwrapped", function() {
|
||||
var vnode = m("div", {a: "b"}, "c", "d")
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("form inputs", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -19,9 +20,9 @@ o.spec("form inputs", function() {
|
|||
|
||||
o.spec("input", function() {
|
||||
o("maintains focus after move", function() {
|
||||
var input = {tag: "input", key: 1}
|
||||
var a = {tag: "a", key: 2}
|
||||
var b = {tag: "b", key: 3}
|
||||
var input = m("input", {key: 1})
|
||||
var a = m("a", {key: 2})
|
||||
var b = m("b", {key: 3})
|
||||
|
||||
render(root, [input, a, b])
|
||||
input.dom.focus()
|
||||
|
|
@ -31,20 +32,20 @@ o.spec("form inputs", function() {
|
|||
})
|
||||
|
||||
o("maintains focus when changed manually in hook", function() {
|
||||
var input = {tag: "input", attrs: {oncreate: function() {
|
||||
var input = m("input", {oncreate: function() {
|
||||
input.dom.focus();
|
||||
}}};
|
||||
}});
|
||||
|
||||
render(root, [input])
|
||||
render(root, input)
|
||||
|
||||
o($window.document.activeElement).equals(input.dom)
|
||||
})
|
||||
|
||||
o("syncs input value if DOM value differs from vdom value", function() {
|
||||
var input = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}
|
||||
var updated = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}
|
||||
var input = m("input", {value: "aaa", oninput: function() {}})
|
||||
var updated = m("input", {value: "aaa", oninput: function() {}})
|
||||
|
||||
render(root, [input])
|
||||
render(root, input)
|
||||
|
||||
//simulate user typing
|
||||
var e = $window.document.createEvent("KeyboardEvent")
|
||||
|
|
@ -54,26 +55,26 @@ o.spec("form inputs", function() {
|
|||
input.dom.dispatchEvent(e)
|
||||
|
||||
//re-render may use same vdom value as previous render call
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.value).equals("aaa")
|
||||
})
|
||||
|
||||
o("clear element value if vdom value is set to undefined (aka removed)", function() {
|
||||
var input = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}
|
||||
var updated = {tag: "input", attrs: {value: undefined, oninput: function() {}}}
|
||||
var input = m("input", {value: "aaa", oninput: function() {}})
|
||||
var updated = m("input", {value: undefined, oninput: function() {}})
|
||||
|
||||
render(root, [input])
|
||||
render(root, [updated])
|
||||
render(root, input)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.value).equals("")
|
||||
})
|
||||
|
||||
o("syncs input checked attribute if DOM value differs from vdom value", function() {
|
||||
var input = {tag: "input", attrs: {type: "checkbox", checked: true, onclick: function() {}}}
|
||||
var updated = {tag: "input", attrs: {type: "checkbox", checked: true, onclick: function() {}}}
|
||||
var input = m("input", {type: "checkbox", checked: true, onclick: function() {}})
|
||||
var updated = m("input", {type: "checkbox", checked: true, onclick: function() {}})
|
||||
|
||||
render(root, [input])
|
||||
render(root, input)
|
||||
|
||||
//simulate user clicking checkbox
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
|
|
@ -82,24 +83,24 @@ o.spec("form inputs", function() {
|
|||
input.dom.dispatchEvent(e)
|
||||
|
||||
//re-render may use same vdom value as previous render call
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.checked).equals(true)
|
||||
})
|
||||
|
||||
o("syncs file input value attribute if DOM value differs from vdom value and is empty", function() {
|
||||
var input = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
|
||||
var updated = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
|
||||
var input = m("input", {type: "file", value: "", onclick: function() {}})
|
||||
var updated = m("input", {type: "file", value: "", onclick: function() {}})
|
||||
var spy = o.spy()
|
||||
var error = console.error
|
||||
|
||||
render(root, [input])
|
||||
render(root, input)
|
||||
|
||||
input.dom.value = "test.png"
|
||||
|
||||
try {
|
||||
console.error = spy
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
} finally {
|
||||
console.error = error
|
||||
}
|
||||
|
|
@ -109,18 +110,18 @@ o.spec("form inputs", function() {
|
|||
})
|
||||
|
||||
o("warns and ignores file input value attribute if DOM value differs from vdom value and is non-empty", function() {
|
||||
var input = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
|
||||
var updated = {tag: "input", attrs: {type: "file", value: "other.png", onclick: function() {}}}
|
||||
var input = m("input", {type: "file", value: "", onclick: function() {}})
|
||||
var updated = m("input", {type: "file", value: "other.png", onclick: function() {}})
|
||||
var spy = o.spy()
|
||||
var error = console.error
|
||||
|
||||
render(root, [input])
|
||||
render(root, input)
|
||||
|
||||
input.dom.value = "test.png"
|
||||
|
||||
try {
|
||||
console.error = spy
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
} finally {
|
||||
console.error = error
|
||||
}
|
||||
|
|
@ -134,13 +135,13 @@ o.spec("form inputs", function() {
|
|||
var render = vdom($window)
|
||||
var root = $window.document.createElement("div")
|
||||
$window.document.body.appendChild(root)
|
||||
var input = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
|
||||
var updated1 = {tag: "input", attrs: {type: "file", value: "test.png", onclick: function() {}}}
|
||||
var updated2 = {tag: "input", attrs: {type: "file", value: "test.png", onclick: function() {}}}
|
||||
var input = m("input", {type: "file", value: "", onclick: function() {}})
|
||||
var updated1 = m("input", {type: "file", value: "test.png", onclick: function() {}})
|
||||
var updated2 = m("input", {type: "file", value: "test.png", onclick: function() {}})
|
||||
var spy = o.spy()
|
||||
var error = console.error
|
||||
|
||||
render(root, [input])
|
||||
render(root, input)
|
||||
|
||||
// Verify our assumptions about the outer element state
|
||||
o($window.__getSpies(input.dom).valueSetter.callCount).equals(0)
|
||||
|
|
@ -149,7 +150,7 @@ o.spec("form inputs", function() {
|
|||
|
||||
try {
|
||||
console.error = spy
|
||||
render(root, [updated1])
|
||||
render(root, updated1)
|
||||
} finally {
|
||||
console.error = error
|
||||
}
|
||||
|
|
@ -160,7 +161,7 @@ o.spec("form inputs", function() {
|
|||
|
||||
try {
|
||||
console.error = spy
|
||||
render(root, [updated2])
|
||||
render(root, updated2)
|
||||
} finally {
|
||||
console.error = error
|
||||
}
|
||||
|
|
@ -173,84 +174,84 @@ o.spec("form inputs", function() {
|
|||
|
||||
o.spec("select", function() {
|
||||
o("select works without attributes", function() {
|
||||
var select = {tag: "select", children: [
|
||||
{tag: "option", attrs: {value: "a"}, text: "aaa"},
|
||||
]}
|
||||
var select = m("select",
|
||||
m("option", {value: "a"}, "aaa"),
|
||||
)
|
||||
|
||||
render(root, [select])
|
||||
render(root, select)
|
||||
|
||||
o(select.dom.value).equals("a")
|
||||
o(select.dom.selectedIndex).equals(0)
|
||||
})
|
||||
|
||||
o("select option can have empty string value", function() {
|
||||
var select = {tag: "select", children :[
|
||||
{tag: "option", attrs: {value: ""}, text: "aaa"}
|
||||
]}
|
||||
var select = m("select",
|
||||
m("option", {value: ""}, "aaa")
|
||||
)
|
||||
|
||||
render(root, [select])
|
||||
render(root, select)
|
||||
|
||||
o(select.dom.firstChild.value).equals("")
|
||||
})
|
||||
|
||||
o("option value defaults to textContent unless explicitly set", function() {
|
||||
var select = {tag: "select", children :[
|
||||
{tag: "option", text: "aaa"}
|
||||
]}
|
||||
var select = m("select",
|
||||
m("option", "aaa")
|
||||
)
|
||||
|
||||
render(root, [select])
|
||||
render(root, select)
|
||||
|
||||
o(select.dom.firstChild.value).equals("aaa")
|
||||
o(select.dom.value).equals("aaa")
|
||||
|
||||
//test that value changes when content changes
|
||||
select = {tag: "select", children :[
|
||||
{tag: "option", text: "bbb"}
|
||||
]}
|
||||
select = m("select",
|
||||
m("option", "bbb")
|
||||
)
|
||||
|
||||
render(root, [select])
|
||||
render(root, select)
|
||||
|
||||
o(select.dom.firstChild.value).equals("bbb")
|
||||
o(select.dom.value).equals("bbb")
|
||||
|
||||
//test that value can be set to "" in subsequent render
|
||||
select = {tag: "select", children :[
|
||||
{tag: "option", attrs: {value: ""}, text: "aaa"}
|
||||
]}
|
||||
select = m("select",
|
||||
m("option", {value: ""}, "aaa")
|
||||
)
|
||||
|
||||
render(root, [select])
|
||||
render(root, select)
|
||||
|
||||
o(select.dom.firstChild.value).equals("")
|
||||
o(select.dom.value).equals("")
|
||||
|
||||
//test that value reverts to textContent when value omitted
|
||||
select = {tag: "select", children :[
|
||||
{tag: "option", text: "aaa"}
|
||||
]}
|
||||
select = m("select",
|
||||
m("option", "aaa")
|
||||
)
|
||||
|
||||
render(root, [select])
|
||||
render(root, select)
|
||||
|
||||
o(select.dom.firstChild.value).equals("aaa")
|
||||
o(select.dom.value).equals("aaa")
|
||||
})
|
||||
|
||||
o("select yields invalid value without children", function() {
|
||||
var select = {tag: "select", attrs: {value: "a"}}
|
||||
var select = m("select", {value: "a"})
|
||||
|
||||
render(root, [select])
|
||||
render(root, select)
|
||||
|
||||
o(select.dom.value).equals("")
|
||||
o(select.dom.selectedIndex).equals(-1)
|
||||
})
|
||||
|
||||
o("select value is set correctly on first render", function() {
|
||||
var select = {tag: "select", attrs: {value: "b"}, children: [
|
||||
{tag: "option", attrs: {value: "a"}, text: "aaa"},
|
||||
{tag: "option", attrs: {value: "b"}, text: "bbb"},
|
||||
{tag: "option", attrs: {value: "c"}, text: "ccc"},
|
||||
]}
|
||||
var select = m("select", {value: "b"},
|
||||
m("option", {value: "a"}, "aaa"),
|
||||
m("option", {value: "b"}, "bbb"),
|
||||
m("option", {value: "c"}, "ccc"),
|
||||
)
|
||||
|
||||
render(root, [select])
|
||||
render(root, select)
|
||||
|
||||
o(select.dom.value).equals("b")
|
||||
o(select.dom.selectedIndex).equals(1)
|
||||
|
|
@ -258,21 +259,21 @@ o.spec("form inputs", function() {
|
|||
|
||||
o("syncs select value if DOM value differs from vdom value", function() {
|
||||
function makeSelect() {
|
||||
return {tag: "select", attrs: {value: "b"}, children: [
|
||||
{tag: "option", attrs: {value: "a"}, text: "aaa"},
|
||||
{tag: "option", attrs: {value: "b"}, text: "bbb"},
|
||||
{tag: "option", attrs: {value: "c"}, text: "ccc"},
|
||||
]}
|
||||
return m("select", {value: "b"},
|
||||
m("option", {value: "a"}, "aaa"),
|
||||
m("option", {value: "b"}, "bbb"),
|
||||
m("option", {value: "c"}, "ccc"),
|
||||
)
|
||||
}
|
||||
|
||||
render(root, [makeSelect()])
|
||||
render(root, makeSelect())
|
||||
|
||||
//simulate user selecting option
|
||||
root.firstChild.value = "c"
|
||||
root.firstChild.focus()
|
||||
|
||||
//re-render may use same vdom value as previous render call
|
||||
render(root, [makeSelect()])
|
||||
render(root, makeSelect())
|
||||
|
||||
o(root.firstChild.value).equals("b")
|
||||
o(root.firstChild.selectedIndex).equals(1)
|
||||
|
|
@ -281,13 +282,13 @@ o.spec("form inputs", function() {
|
|||
|
||||
o.spec("textarea", function() {
|
||||
o("updates after user input", function() {
|
||||
render(root, [{tag: "textarea", text: "aaa"}])
|
||||
render(root, m("textarea", "aaa"))
|
||||
|
||||
//simulate typing
|
||||
root.firstChild.value = "bbb"
|
||||
|
||||
//re-render may occur after value attribute is touched
|
||||
render(root, [{tag: "textarea", text: "ccc"}])
|
||||
render(root, m("textarea", "ccc"))
|
||||
|
||||
o(root.firstChild.value).equals("ccc")
|
||||
//FIXME should fail if fix is commented out
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ var components = require("../../test-utils/components")
|
|||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var Promise = require("../../promise/promise")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/fragment")
|
||||
|
||||
o.spec("onbeforeremove", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -17,28 +19,28 @@ o.spec("onbeforeremove", function() {
|
|||
|
||||
o("does not call onbeforeremove when creating", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onbeforeremove: create}}
|
||||
var vnode = m("div", {onbeforeremove: create})
|
||||
|
||||
render(root, [vnode])
|
||||
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}}
|
||||
var vnode = m("div", {onbeforeremove: create})
|
||||
var updated = m("div", {onbeforeremove: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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}}
|
||||
var vnode = m("div", {onbeforeremove: remove})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
|
||||
function remove(node) {
|
||||
|
|
@ -55,46 +57,10 @@ o.spec("onbeforeremove", function() {
|
|||
})
|
||||
}
|
||||
})
|
||||
o("calls onbeforeremove when removing text", function(done) {
|
||||
var vnode = {tag: "#", attrs: {onbeforeremove: remove}, children: "a"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
function remove(node) {
|
||||
o(node).equals(vnode)
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(vnode.dom)
|
||||
|
||||
callAsync(function() {
|
||||
o(root.childNodes.length).equals(0)
|
||||
|
||||
done()
|
||||
})
|
||||
}
|
||||
})
|
||||
o("calls onbeforeremove when removing fragment", function(done) {
|
||||
var vnode = {tag: "[", attrs: {onbeforeremove: remove}, children: [{tag: "div"}]}
|
||||
var vnode = m.fragment({onbeforeremove: remove}, m("div"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
function remove(node) {
|
||||
o(node).equals(vnode)
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(root.firstChild).equals(vnode.dom)
|
||||
|
||||
callAsync(function() {
|
||||
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, vnode)
|
||||
render(root, [])
|
||||
|
||||
function remove(node) {
|
||||
|
|
@ -111,9 +77,9 @@ o.spec("onbeforeremove", function() {
|
|||
})
|
||||
o("calls remove after onbeforeremove resolves", function(done) {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "<", attrs: {onbeforeremove: remove, onremove: spy}, children: "a"}
|
||||
var vnode = m.fragment({onbeforeremove: remove, onremove: spy}, "a")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
|
||||
function remove(node) {
|
||||
|
|
@ -131,28 +97,28 @@ o.spec("onbeforeremove", function() {
|
|||
})
|
||||
o("does not set onbeforeremove as an event handler", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onbeforeremove: remove}, children: []}
|
||||
var vnode = m("div", {onbeforeremove: remove})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.onbeforeremove).equals(undefined)
|
||||
o(vnode.dom.attributes["onbeforeremove"]).equals(undefined)
|
||||
})
|
||||
o("does not recycle when there's an onbeforeremove", function() {
|
||||
var remove = function() {}
|
||||
var vnode = {tag: "div", key: 1, attrs: {onbeforeremove: remove}}
|
||||
var updated = {tag: "div", key: 1, attrs: {onbeforeremove: remove}}
|
||||
var vnode = m("div", {key: 1, onbeforeremove: remove})
|
||||
var updated = m("div", {key: 1, onbeforeremove: remove})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
o(vnode.dom).notEquals(updated.dom)
|
||||
})
|
||||
o("does not leave elements out of order during removal", function(done) {
|
||||
var remove = function() {return Promise.resolve()}
|
||||
var vnodes = [{tag: "div", key: 1, attrs: {onbeforeremove: remove}, text: "1"}, {tag: "div", key: 2, attrs: {onbeforeremove: remove}, text: "2"}]
|
||||
var updated = {tag: "div", key: 2, attrs: {onbeforeremove: remove}, text: "2"}
|
||||
var vnodes = [m("div", {key: 1, onbeforeremove: remove}, "1"), m("div", {key: 2, onbeforeremove: remove}, "2")]
|
||||
var updated = m("div", {key: 2, onbeforeremove: remove}, "2")
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, updated)
|
||||
|
|
@ -178,7 +144,7 @@ o.spec("onbeforeremove", function() {
|
|||
onremove: onremove,
|
||||
view: function() {},
|
||||
})
|
||||
render(root, [{tag: component, attrs: {onbeforeremove: onbeforeremove, onremove: onremove}}])
|
||||
render(root, m(component, {onbeforeremove: onbeforeremove, onremove: onremove}))
|
||||
render(root, [])
|
||||
callAsync(function() {
|
||||
o(onremove.callCount).equals(2) // once for `tag`, once for `attrs`
|
||||
|
|
@ -194,7 +160,7 @@ o.spec("onbeforeremove", function() {
|
|||
onremove: onremove,
|
||||
view: view,
|
||||
})
|
||||
render(root, [{tag: component}])
|
||||
render(root, m(component))
|
||||
render(root, [])
|
||||
|
||||
o(onremove.callCount).equals(0)
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ var o = require("ospec")
|
|||
var components = require("../../test-utils/components")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/hyperscript")
|
||||
|
||||
o.spec("onbeforeupdate", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -15,66 +17,44 @@ o.spec("onbeforeupdate", function() {
|
|||
|
||||
o("prevents update in element", function() {
|
||||
var onbeforeupdate = function() {return false}
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}}
|
||||
var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
|
||||
var updated = m("div", {id: "b", onbeforeupdate: onbeforeupdate})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.attributes["id"].value).equals("a")
|
||||
})
|
||||
|
||||
o("prevents update in text", function() {
|
||||
var onbeforeupdate = function() {return false}
|
||||
var vnode = {tag: "#", attrs: {onbeforeupdate: onbeforeupdate}, children: "a"}
|
||||
var updated = {tag: "#", attrs: {onbeforeupdate: onbeforeupdate}, children: "b"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.nodeValue).equals("a")
|
||||
})
|
||||
|
||||
o("prevents update in html", function() {
|
||||
var onbeforeupdate = function() {return false}
|
||||
var vnode = {tag: "<", attrs: {onbeforeupdate: onbeforeupdate}, children: "a"}
|
||||
var updated = {tag: "<", attrs: {onbeforeupdate: onbeforeupdate}, children: "b"}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(root.firstChild.nodeValue).equals("a")
|
||||
})
|
||||
|
||||
o("prevents update in fragment", function() {
|
||||
var onbeforeupdate = function() {return false}
|
||||
var vnode = {tag: "[", attrs: {onbeforeupdate: onbeforeupdate}, children: [{tag: "#", children: "a"}]}
|
||||
var updated = {tag: "[", attrs: {onbeforeupdate: onbeforeupdate}, children: [{tag: "#", children: "b"}]}
|
||||
var vnode = m.fragment({onbeforeupdate: onbeforeupdate}, "a")
|
||||
var updated = m.fragment({onbeforeupdate: onbeforeupdate}, "b")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.nodeValue).equals("a")
|
||||
})
|
||||
|
||||
o("does not prevent update if returning true", function() {
|
||||
var onbeforeupdate = function() {return true}
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}}
|
||||
var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
|
||||
var updated = m("div", {id: "b", onbeforeupdate: onbeforeupdate})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.attributes["id"].value).equals("b")
|
||||
})
|
||||
|
||||
o("accepts arguments for comparison", function() {
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}}
|
||||
var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
|
||||
var updated = m("div", {id: "b", onbeforeupdate: onbeforeupdate})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
function onbeforeupdate(vnode, old) {
|
||||
count++
|
||||
|
|
@ -91,9 +71,9 @@ o.spec("onbeforeupdate", function() {
|
|||
|
||||
o("is not called on creation", function() {
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
function onbeforeupdate() {
|
||||
count++
|
||||
|
|
@ -105,11 +85,11 @@ o.spec("onbeforeupdate", function() {
|
|||
|
||||
o("is called only once on update", function() {
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
|
||||
var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}}
|
||||
var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
|
||||
var updated = m("div", {id: "b", onbeforeupdate: onbeforeupdate})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
function onbeforeupdate() {
|
||||
count++
|
||||
|
|
@ -121,9 +101,9 @@ o.spec("onbeforeupdate", function() {
|
|||
|
||||
o("doesn't fire on recycled nodes", function() {
|
||||
var onbeforeupdate = o.spy()
|
||||
var vnodes = [{tag: "div", key: 1}]
|
||||
var vnodes = [m("div", {key: 1})]
|
||||
var temp = []
|
||||
var updated = [{tag: "div", key: 1, attrs: {onbeforeupdate: onbeforeupdate}}]
|
||||
var updated = [m("div", {key: 1, onbeforeupdate: onbeforeupdate})]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
|
|
@ -142,14 +122,14 @@ o.spec("onbeforeupdate", function() {
|
|||
var component = createComponent({
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", children: vnode.children}
|
||||
return m("div", vnode.children)
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, children: [{tag: "#", children: "a"}]}
|
||||
var updated = {tag: component, children: [{tag: "#", children: "b"}]}
|
||||
var vnode = m(component, "a")
|
||||
var updated = m(component, "b")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.firstChild.nodeValue).equals("a")
|
||||
})
|
||||
|
|
@ -158,14 +138,14 @@ o.spec("onbeforeupdate", function() {
|
|||
var component = createComponent({
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
return m("div", {id: vnode.attrs.id})
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}}
|
||||
var vnode = m(component, {id: "a", onbeforeupdate: function() {return false}})
|
||||
var updated = m(component, {id: "b", onbeforeupdate: function() {return false}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.attributes["id"].value).equals("a")
|
||||
})
|
||||
|
|
@ -174,14 +154,14 @@ o.spec("onbeforeupdate", function() {
|
|||
var component = createComponent({
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
return m("div", {id: vnode.attrs.id})
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}}
|
||||
var vnode = m(component, {id: "a", onbeforeupdate: function() {return true}})
|
||||
var updated = m(component, {id: "b", onbeforeupdate: function() {return true}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.attributes["id"].value).equals("b")
|
||||
})
|
||||
|
|
@ -190,14 +170,14 @@ o.spec("onbeforeupdate", function() {
|
|||
var component = createComponent({
|
||||
onbeforeupdate: function() {return false},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
return m("div", {id: vnode.attrs.id})
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}}
|
||||
var vnode = m(component, {id: "a", onbeforeupdate: function() {return true}})
|
||||
var updated = m(component, {id: "b", onbeforeupdate: function() {return true}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.attributes["id"].value).equals("a")
|
||||
})
|
||||
|
|
@ -206,14 +186,14 @@ o.spec("onbeforeupdate", function() {
|
|||
var component = createComponent({
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: {id: vnode.attrs.id}}
|
||||
return m("div", {id: vnode.attrs.id})
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}}
|
||||
var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}}
|
||||
var vnode = m(component, {id: "a", onbeforeupdate: function() {return false}})
|
||||
var updated = m(component, {id: "b", onbeforeupdate: function() {return false}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.attributes["id"].value).equals("a")
|
||||
})
|
||||
|
|
@ -222,14 +202,14 @@ o.spec("onbeforeupdate", function() {
|
|||
var component = createComponent({
|
||||
onbeforeupdate: function() {return true},
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
return m("div", vnode.attrs)
|
||||
},
|
||||
})
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
var vnode = m(component, {id: "a"})
|
||||
var updated = m(component, {id: "b"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(root.firstChild.attributes["id"].value).equals("b")
|
||||
})
|
||||
|
|
@ -238,15 +218,15 @@ o.spec("onbeforeupdate", function() {
|
|||
var component = createComponent({
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
return m("div", vnode.attrs)
|
||||
},
|
||||
})
|
||||
var count = 0
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
var vnode = m(component, {id: "a"})
|
||||
var updated = m(component, {id: "b"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
function onbeforeupdate(vnode, old) {
|
||||
count++
|
||||
|
|
@ -265,14 +245,14 @@ o.spec("onbeforeupdate", function() {
|
|||
createComponent({
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
return m("div", vnode.attrs)
|
||||
},
|
||||
})
|
||||
|
||||
var count = 0
|
||||
var vnode = {tag: "div", attrs: {id: "a"}}
|
||||
var vnode = m("div", {id: "a"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
function onbeforeupdate() {
|
||||
count++
|
||||
|
|
@ -286,16 +266,16 @@ o.spec("onbeforeupdate", function() {
|
|||
var component = createComponent({
|
||||
onbeforeupdate: onbeforeupdate,
|
||||
view: function(vnode) {
|
||||
return {tag: "div", attrs: vnode.attrs}
|
||||
return m("div", vnode.attrs)
|
||||
},
|
||||
})
|
||||
|
||||
var count = 0
|
||||
var vnode = {tag: component, attrs: {id: "a"}}
|
||||
var updated = {tag: component, attrs: {id: "b"}}
|
||||
var vnode = m(component, {id: "a"})
|
||||
var updated = m(component, {id: "b"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
function onbeforeupdate() {
|
||||
count++
|
||||
|
|
@ -311,94 +291,94 @@ o.spec("onbeforeupdate", function() {
|
|||
o.spec("after prevented update", function() {
|
||||
o("old attributes are retained", function() {
|
||||
render(root, [
|
||||
{tag: "div", attrs: {"id": "foo", onbeforeupdate: function() { return true }}, children: []},
|
||||
m("div", {"id": "foo", onbeforeupdate: function() { return true }})
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {"id": "bar", onbeforeupdate: function() { return false }}, children: []},
|
||||
m("div", {"id": "bar", onbeforeupdate: function() { return false }})
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {"id": "bar", onbeforeupdate: function() { return true }}, children: []},
|
||||
m("div", {"id": "bar", onbeforeupdate: function() { return true }})
|
||||
])
|
||||
o(root.firstChild.attributes["id"].value).equals("bar")
|
||||
})
|
||||
o("old children is retained", function() {
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
|
||||
{tag: "div", attrs: {}, children: []}
|
||||
]},
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return false }}, children: [
|
||||
{tag: "div", attrs: {}, children: [{tag: "div", attrs: {}, children: []}]}
|
||||
]},
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
|
||||
{tag: "div", attrs: {}, children: [{tag: "div", attrs: {}, children: []}]}
|
||||
]},
|
||||
])
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return true }},
|
||||
m("div")
|
||||
),
|
||||
)
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return false }},
|
||||
m("div", m("div"))
|
||||
),
|
||||
)
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return true }},
|
||||
m("div", m("div"))
|
||||
),
|
||||
)
|
||||
o(root.firstChild.firstChild.childNodes.length).equals(1)
|
||||
})
|
||||
o("old text is retained", function() {
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
|
||||
{tag: "div", attrs: {}, text: ""}
|
||||
]},
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return false }}, children: [
|
||||
{tag: "div", attrs: {}, text: "foo"}
|
||||
]},
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
|
||||
{tag: "div", attrs: {}, text: "foo"}
|
||||
]},
|
||||
])
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return true }},
|
||||
m("div")
|
||||
),
|
||||
)
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return false }},
|
||||
m("div", "foo")
|
||||
),
|
||||
)
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return true }},
|
||||
m("div", "foo")
|
||||
),
|
||||
)
|
||||
o(root.firstChild.firstChild.firstChild.nodeValue).equals("foo")
|
||||
})
|
||||
o("updating component children doesn't error", function() {
|
||||
var Child = {
|
||||
view(v) {
|
||||
return {tag: "div", attrs: {}, children: [
|
||||
v.attrs.foo ? {tag: "div", attrs: {}, children: []} : null
|
||||
]}
|
||||
return m("div",
|
||||
v.attrs.foo ? m("div") : null
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
|
||||
{tag: Child, attrs: {foo: false}, children: []},
|
||||
]},
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return false }}, children: [
|
||||
{tag: Child, attrs: {foo: false}, children: []},
|
||||
]},
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
|
||||
{tag: Child, attrs: {foo: true}, children: []},
|
||||
]},
|
||||
])
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return true }},
|
||||
m(Child, {foo: false})
|
||||
),
|
||||
)
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return false }},
|
||||
m(Child, {foo: false})
|
||||
),
|
||||
)
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return true }},
|
||||
m(Child, {foo: true})
|
||||
),
|
||||
)
|
||||
o(root.firstChild.firstChild.childNodes.length).equals(1)
|
||||
})
|
||||
o("adding dom children doesn't error", function() {
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
|
||||
{tag: "div", attrs: {}, children: []}
|
||||
]},
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return false }}, children: [
|
||||
{tag: "div", attrs: {}, children: []}
|
||||
]},
|
||||
])
|
||||
render(root, [
|
||||
{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
|
||||
{tag: "div", attrs: {}, children: [{tag: "div", attrs: {}, children: []}]}
|
||||
]},
|
||||
])
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return true }},
|
||||
m("div")
|
||||
),
|
||||
)
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return false }},
|
||||
m("div")
|
||||
),
|
||||
)
|
||||
render(root,
|
||||
m("div", {onbeforeupdate: function() { return true }},
|
||||
m("div", m("div"))
|
||||
),
|
||||
)
|
||||
o(root.firstChild.firstChild.childNodes.length).equals(1)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/fragment")
|
||||
|
||||
o.spec("oncreate", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -14,19 +16,9 @@ o.spec("oncreate", function() {
|
|||
|
||||
o("calls oncreate when creating element", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: callback}, state: {}}
|
||||
var vnode = m("div", {oncreate: callback})
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode.state)
|
||||
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", state: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode.state)
|
||||
|
|
@ -34,19 +26,9 @@ o.spec("oncreate", function() {
|
|||
})
|
||||
o("calls oncreate when creating fragment", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "[", attrs: {oncreate: callback}, children: [], state: {}}
|
||||
var vnode = m.fragment({oncreate: callback})
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode.state)
|
||||
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", state: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode.state)
|
||||
|
|
@ -55,11 +37,11 @@ o.spec("oncreate", function() {
|
|||
o("calls oncreate when replacing keyed", function() {
|
||||
var createDiv = o.spy()
|
||||
var createA = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {oncreate: createDiv}, state: {}}
|
||||
var updated = {tag: "a", key: 1, attrs: {oncreate: createA}, state: {}}
|
||||
var vnode = m("div", {key: 1, oncreate: createDiv})
|
||||
var updated = m("a", {key: 1, oncreate: createA})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(createDiv.callCount).equals(1)
|
||||
o(createDiv.this).equals(vnode.state)
|
||||
|
|
@ -71,11 +53,11 @@ o.spec("oncreate", function() {
|
|||
o("does not call oncreate when noop", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}, state: {}}
|
||||
var updated = {tag: "div", attrs: {oncreate: update}, state: {}}
|
||||
var vnode = m("div", {oncreate: create})
|
||||
var updated = m("div", {oncreate: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode.state)
|
||||
|
|
@ -85,11 +67,11 @@ o.spec("oncreate", function() {
|
|||
o("does not call oncreate when updating attr", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}, state: {}}
|
||||
var updated = {tag: "div", attrs: {oncreate: update, id: "a"}, state: {}}
|
||||
var vnode = m("div", {oncreate: create})
|
||||
var updated = m("div", {oncreate: update, id: "a"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode.state)
|
||||
|
|
@ -99,11 +81,11 @@ o.spec("oncreate", function() {
|
|||
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"}], state: {}}
|
||||
var updated = {tag: "div", attrs: {oncreate: update}, children: [{tag: "b"}], state: {}}
|
||||
var vnode = m("div", {oncreate: create}, m("a"))
|
||||
var updated = m("div", {oncreate: update}, m("b"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode.state)
|
||||
|
|
@ -113,10 +95,10 @@ o.spec("oncreate", function() {
|
|||
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}, state: {}}
|
||||
var otherVnode = {tag: "a", key: 2}
|
||||
var updated = {tag: "div", key: 1, attrs: {oncreate: update}, state: {}}
|
||||
var otherUpdated = {tag: "a", key: 2}
|
||||
var vnode = m("div", {key: 1, oncreate: create})
|
||||
var otherVnode = m("a", {key: 2})
|
||||
var updated = m("div", {key: 1, oncreate: update})
|
||||
var otherUpdated = m("a", {key: 2})
|
||||
|
||||
render(root, [vnode, otherVnode])
|
||||
render(root, [otherUpdated, updated])
|
||||
|
|
@ -128,9 +110,9 @@ o.spec("oncreate", function() {
|
|||
})
|
||||
o("does not call oncreate when removing", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}, state: {}}
|
||||
var vnode = m("div", {oncreate: create})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
|
|
@ -140,12 +122,12 @@ o.spec("oncreate", function() {
|
|||
o("does not recycle when there's an oncreate", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {oncreate: create}, state: {}}
|
||||
var updated = {tag: "div", key: 1, attrs: {oncreate: update}, state: {}}
|
||||
var vnode = m("div", {key: 1, oncreate: create})
|
||||
var updated = m("div", {key: 1, oncreate: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
o(vnode.dom).notEquals(updated.dom)
|
||||
o(create.callCount).equals(1)
|
||||
|
|
@ -159,11 +141,11 @@ o.spec("oncreate", function() {
|
|||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}, children: [], state: {}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}, children: [{tag: "a", attrs: {oncreate: callback}, state: {}}], state: {}}
|
||||
var vnode = m("div", {onupdate: create})
|
||||
var updated = m("div", {onupdate: update}, m("a", {oncreate: callback}))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
|
|
@ -175,27 +157,27 @@ o.spec("oncreate", function() {
|
|||
})
|
||||
o("calls oncreate on unkeyed that falls into reverse list diff code path", function() {
|
||||
var create = o.spy()
|
||||
render(root, [{tag: "p"}, {tag: "div"}])
|
||||
render(root, [{tag: "div", attrs: {oncreate: create}}, {tag: "div"}])
|
||||
render(root, m("p", m("div")))
|
||||
render(root, m("div", {oncreate: create}, m("div")))
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
})
|
||||
o("calls oncreate on unkeyed that falls into forward list diff code path", function() {
|
||||
var create = o.spy()
|
||||
render(root, [{tag: "div"}, {tag: "p"}])
|
||||
render(root, [{tag: "div"}, {tag: "div", attrs: {oncreate: create}}])
|
||||
render(root, [m("div"), m("p")])
|
||||
render(root, [m("div"), m("div", {oncreate: create})])
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
})
|
||||
o("calls oncreate after full DOM creation", function() {
|
||||
var created = false
|
||||
var vnode = {tag: "div", children: [
|
||||
{tag: "a", attrs: {oncreate: create}, children: [
|
||||
{tag: "b"}
|
||||
]}
|
||||
]}
|
||||
var vnode = m("div",
|
||||
m("a", {oncreate: create},
|
||||
m("b")
|
||||
)
|
||||
)
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
function create(vnode) {
|
||||
created = true
|
||||
|
|
@ -207,18 +189,18 @@ o.spec("oncreate", function() {
|
|||
})
|
||||
o("does not set oncreate as an event handler", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oncreate: create}, children: []}
|
||||
var vnode = m("div", {oncreate: create})
|
||||
|
||||
render(root, [vnode])
|
||||
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 vnodes = m("div", {key: 1, oncreate: create})
|
||||
var temp = []
|
||||
var updated = [{tag: "div", key: 1, attrs: {oncreate: create}}]
|
||||
var updated = m("div", {key: 1, oncreate: create})
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/hyperscript")
|
||||
|
||||
o.spec("oninit", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -14,19 +16,9 @@ o.spec("oninit", function() {
|
|||
|
||||
o("calls oninit when creating element", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oninit: callback}, state: {}}
|
||||
var vnode = m("div", {oninit: callback})
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode.state)
|
||||
o(callback.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls oninit when creating text", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "#", attrs: {oninit: callback}, children: "a", state: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode.state)
|
||||
|
|
@ -34,19 +26,9 @@ o.spec("oninit", function() {
|
|||
})
|
||||
o("calls oninit when creating fragment", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "[", attrs: {oninit: callback}, children: [], state: {}}
|
||||
var vnode = m.fragment({oninit: callback})
|
||||
|
||||
render(root, [vnode])
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode.state)
|
||||
o(callback.args[0]).equals(vnode)
|
||||
})
|
||||
o("calls oninit when creating html", function() {
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "<", attrs: {oninit: callback}, children: "a", state: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(callback.callCount).equals(1)
|
||||
o(callback.this).equals(vnode.state)
|
||||
|
|
@ -55,11 +37,11 @@ o.spec("oninit", function() {
|
|||
o("calls oninit when replacing keyed", function() {
|
||||
var createDiv = o.spy()
|
||||
var createA = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {oninit: createDiv}, state: {}}
|
||||
var updated = {tag: "a", key: 1, attrs: {oninit: createA}, state: {}}
|
||||
var vnode = m("div", {key: 1, oninit: createDiv})
|
||||
var updated = m("a", {key: 1, oninit: createA})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(createDiv.callCount).equals(1)
|
||||
o(createDiv.this).equals(vnode.state)
|
||||
|
|
@ -71,11 +53,11 @@ o.spec("oninit", function() {
|
|||
o("does not call oninit when noop", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oninit: create}, state: {}}
|
||||
var updated = {tag: "div", attrs: {oninit: update}, state: {}}
|
||||
var vnode = m("div", {oninit: create})
|
||||
var updated = m("div", {oninit: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode.state)
|
||||
|
|
@ -85,11 +67,11 @@ o.spec("oninit", function() {
|
|||
o("does not call oninit when updating attr", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oninit: create}, state: {}}
|
||||
var updated = {tag: "div", attrs: {oninit: update, id: "a"}, state: {}}
|
||||
var vnode = m("div", {oninit: create})
|
||||
var updated = m("div", {oninit: update, id: "a"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode.state)
|
||||
|
|
@ -99,11 +81,11 @@ o.spec("oninit", function() {
|
|||
o("does not call oninit when updating children", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oninit: create}, children: [{tag: "a"}], state: {}}
|
||||
var updated = {tag: "div", attrs: {oninit: update}, children: [{tag: "b"}], state: {}}
|
||||
var vnode = m("div", {oninit: create}, m("a"))
|
||||
var updated = m("div", {oninit: update}, m("b"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode.state)
|
||||
|
|
@ -113,10 +95,10 @@ o.spec("oninit", function() {
|
|||
o("does not call oninit when updating keyed", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {oninit: create}, state: {}}
|
||||
var otherVnode = {tag: "a", key: 2}
|
||||
var updated = {tag: "div", key: 1, attrs: {oninit: update}, state: {}}
|
||||
var otherUpdated = {tag: "a", key: 2}
|
||||
var vnode = m("div", {key: 1, oninit: create})
|
||||
var otherVnode = m("a", {key: 2})
|
||||
var updated = m("div", {key: 1, oninit: update})
|
||||
var otherUpdated = m("a", {key: 2})
|
||||
|
||||
render(root, [vnode, otherVnode])
|
||||
render(root, [otherUpdated, updated])
|
||||
|
|
@ -128,9 +110,9 @@ o.spec("oninit", function() {
|
|||
})
|
||||
o("does not call oninit when removing", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oninit: create}, state: {}}
|
||||
var vnode = m("div", {oninit: create})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
|
|
@ -140,12 +122,12 @@ o.spec("oninit", function() {
|
|||
o("calls oninit when recycling", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {oninit: create}, state: {}}
|
||||
var updated = {tag: "div", key: 1, attrs: {oninit: update}, state: {}}
|
||||
var vnode = m("div", {key: 1, oninit: create})
|
||||
var updated = m("div", {key: 1, oninit: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(1)
|
||||
o(create.this).equals(vnode.state)
|
||||
|
|
@ -158,11 +140,11 @@ o.spec("oninit", function() {
|
|||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var callback = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}, children: [], state: {}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}, children: [{tag: "a", attrs: {oninit: callback}, state: {}}], state: {}}
|
||||
var vnode = m("div", {onupdate: create})
|
||||
var updated = m("div", {onupdate: update}, m("a", {oninit: callback}))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
|
|
@ -174,13 +156,13 @@ o.spec("oninit", function() {
|
|||
})
|
||||
o("calls oninit before full DOM creation", function() {
|
||||
var called = false
|
||||
var vnode = {tag: "div", children: [
|
||||
{tag: "a", attrs: {oninit: create}, children: [
|
||||
{tag: "b"}
|
||||
]}
|
||||
]}
|
||||
var vnode = m("div",
|
||||
m("a", {oninit: create},
|
||||
m("b")
|
||||
)
|
||||
)
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
function create(vnode) {
|
||||
called = true
|
||||
|
|
@ -192,9 +174,9 @@ o.spec("oninit", function() {
|
|||
})
|
||||
o("does not set oninit as an event handler", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "div", attrs: {oninit: create}, children: []}
|
||||
var vnode = m("div", {oninit: create})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.oninit).equals(undefined)
|
||||
o(vnode.dom.attributes["oninit"]).equals(undefined)
|
||||
|
|
@ -206,16 +188,16 @@ o.spec("oninit", function() {
|
|||
var oninit3 = o.spy()
|
||||
|
||||
render(root, [
|
||||
{tag: "p", key: 1, attrs: {oninit: oninit1}},
|
||||
{tag: "p", key: 2, attrs: {oninit: oninit2}},
|
||||
{tag: "p", key: 3, attrs: {oninit: oninit3}},
|
||||
m("p", {key: 1, oninit: oninit1}),
|
||||
m("p", {key: 2, oninit: oninit2}),
|
||||
m("p", {key: 3, oninit: oninit3}),
|
||||
])
|
||||
render(root, [
|
||||
{tag: "p", key: 1, attrs: {oninit: oninit1}},
|
||||
{tag: "p", key: 3, attrs: {oninit: oninit3}},
|
||||
m("p", {key: 1, oninit: oninit1}),
|
||||
m("p", {key: 3, oninit: oninit3}),
|
||||
])
|
||||
render(root, [
|
||||
{tag: "p", key: 3, attrs: {oninit: oninit3}},
|
||||
m("p", {key: 3, oninit: oninit3}),
|
||||
])
|
||||
|
||||
o(oninit1.callCount).equals(1)
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ var components = require("../../test-utils/components")
|
|||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/fragment")
|
||||
|
||||
o.spec("onremove", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -17,42 +18,31 @@ o.spec("onremove", function() {
|
|||
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}}
|
||||
var vnode = m("div", {onremove: create})
|
||||
var updated = m("div", {onremove: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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}}
|
||||
var vnode = m("div", {onremove: create})
|
||||
var updated = m("div", {onremove: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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}, state: {}}
|
||||
var vnode = m("div", {onremove: remove})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
o(remove.this).equals(vnode.state)
|
||||
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", state: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
|
|
@ -61,20 +51,9 @@ o.spec("onremove", function() {
|
|||
})
|
||||
o("calls onremove when removing fragment", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "[", attrs: {onremove: remove}, children: [], state: {}}
|
||||
var vnode = m.fragment({onremove: remove})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [])
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
o(remove.this).equals(vnode.state)
|
||||
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", state: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
|
||||
o(remove.callCount).equals(1)
|
||||
|
|
@ -83,9 +62,9 @@ o.spec("onremove", function() {
|
|||
})
|
||||
o("does not set onremove as an event handler", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onremove: remove}, children: []}
|
||||
var vnode = m("div", {onremove: remove})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.onremove).equals(undefined)
|
||||
o(vnode.dom.attributes["onremove"]).equals(undefined)
|
||||
|
|
@ -93,9 +72,9 @@ o.spec("onremove", function() {
|
|||
})
|
||||
o("calls onremove on keyed nodes", 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}]
|
||||
var vnodes = [m("div", {key: 1})]
|
||||
var temp = [m("div", {key: 2, onremove: remove})]
|
||||
var updated = [m("div", {key: 1})]
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, temp)
|
||||
|
|
@ -106,12 +85,12 @@ o.spec("onremove", function() {
|
|||
})
|
||||
o("does not recycle when there's an onremove", function() {
|
||||
var remove = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {onremove: remove}}
|
||||
var updated = {tag: "div", key: 1, attrs: {onremove: remove}}
|
||||
var vnode = m("div", {key: 1, onremove: remove})
|
||||
var updated = m("div", {key: 1, onremove: remove})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
o(vnode.dom).notEquals(updated.dom)
|
||||
})
|
||||
|
|
@ -131,7 +110,7 @@ o.spec("onremove", function() {
|
|||
onremove: spy,
|
||||
view: function() {return m("div")}
|
||||
})
|
||||
render(root, {tag: comp})
|
||||
render(root, m(comp))
|
||||
render(root, null)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
|
|
@ -147,7 +126,7 @@ o.spec("onremove", function() {
|
|||
var inner = createComponent({
|
||||
view: function(vnode) {return m("div", vnode.children)}
|
||||
})
|
||||
render(root, {tag: comp})
|
||||
render(root, m(comp))
|
||||
render(root, null)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
|
|
@ -162,7 +141,7 @@ o.spec("onremove", function() {
|
|||
view: function() {},
|
||||
onremove: spy
|
||||
})
|
||||
render(root, {tag: parent, children: [child]})
|
||||
render(root, m(parent, m(child)))
|
||||
try {
|
||||
render(root, null)
|
||||
} catch (e) {
|
||||
|
|
@ -182,9 +161,9 @@ o.spec("onremove", function() {
|
|||
view: function() {},
|
||||
onremove: spy
|
||||
})
|
||||
render(root, {tag: parent, children: [child]})
|
||||
render(root, m(parent, m(child)))
|
||||
try {
|
||||
render(root, {tag: parent})
|
||||
render(root, m(parent))
|
||||
} catch (e) {
|
||||
threw = true
|
||||
}
|
||||
|
|
@ -203,13 +182,13 @@ o.spec("onremove", function() {
|
|||
})
|
||||
o("doesn't fire when removing the children of a node that's brought back from the pool (#1991 part 2)", function() {
|
||||
var onremove = o.spy()
|
||||
var vnode = {tag: "div", key: 1, children: [{tag: "div", attrs: {onremove: onremove}}]}
|
||||
var temp = {tag: "div", key: 2}
|
||||
var updated = {tag: "div", key: 1, children: [{tag: "p"}]}
|
||||
var vnode = m("div", {key: 1}, m("div", {onremove: onremove}))
|
||||
var temp = m("div", {key: 2})
|
||||
var updated = m("div", {key: 1}, m("p"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [temp])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, temp)
|
||||
render(root, updated)
|
||||
|
||||
o(vnode.dom).notEquals(updated.dom) // this used to be a recycling pool test
|
||||
o(onremove.callCount).equals(1)
|
||||
|
|
@ -250,20 +229,20 @@ o.spec("onremove", function() {
|
|||
var resolve
|
||||
|
||||
function update(id, showParent, showChild) {
|
||||
render(root, [
|
||||
{tag: "div", children: [
|
||||
showParent ? {tag: "[", children: [
|
||||
{tag: "#", children: ""}, // Required
|
||||
showChild ? {tag: "[", attrs: {
|
||||
render(root,
|
||||
m("div",
|
||||
showParent && m.fragment(
|
||||
"", // Required
|
||||
showChild && m.fragment({
|
||||
onbeforeremove: function () {
|
||||
return {then: function (r) { resolve = r }}
|
||||
},
|
||||
}, children: [
|
||||
{tag: "div", text: id},
|
||||
]} : undefined,
|
||||
]} : undefined,
|
||||
]}
|
||||
])
|
||||
},
|
||||
m("div", id),
|
||||
)
|
||||
),
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
update("1", true, true)
|
||||
|
|
@ -353,23 +332,23 @@ o.spec("onremove", function() {
|
|||
var resolve, reject
|
||||
|
||||
function update(id, showParent, showChild) {
|
||||
render(root, [
|
||||
{tag: "div", children: [
|
||||
showParent ? {tag: "[", children: [
|
||||
{tag: "#", children: ""}, // Required
|
||||
showChild ? {tag: "[", attrs: {
|
||||
render(root,
|
||||
m("div",
|
||||
showParent && m.fragment(
|
||||
"", // Required
|
||||
showChild && m.fragment({
|
||||
onbeforeremove: function () {
|
||||
return {then: function (res, rej) {
|
||||
resolve = res
|
||||
reject = rej
|
||||
}}
|
||||
},
|
||||
}, children: [
|
||||
{tag: "div", text: id},
|
||||
]} : undefined,
|
||||
]} : undefined,
|
||||
]}
|
||||
])
|
||||
},
|
||||
m("div", id),
|
||||
)
|
||||
),
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
update("1", true, true)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/fragment")
|
||||
|
||||
o.spec("onupdate", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -15,11 +17,11 @@ o.spec("onupdate", function() {
|
|||
o("does not call onupdate when creating element", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}, state: {}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}, state: {}}
|
||||
var vnode = m("div", {onupdate: create})
|
||||
var updated = m("div", {onupdate: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
|
|
@ -28,9 +30,9 @@ o.spec("onupdate", function() {
|
|||
})
|
||||
o("does not call onupdate when removing element", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}}
|
||||
var vnode = m("div", {onupdate: create})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
|
|
@ -38,43 +40,43 @@ o.spec("onupdate", function() {
|
|||
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])
|
||||
var vnode = m("div", {key: 1, onupdate: create})
|
||||
var updated = m("a", {key: 1, onupdate: update})
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(0)
|
||||
})
|
||||
o("does not recycle when there's an onupdate", function() {
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", key: 1, attrs: {onupdate: update}}
|
||||
var updated = {tag: "div", key: 1, attrs: {onupdate: update}}
|
||||
var vnode = m("div", {key: 1, onupdate: update})
|
||||
var updated = m("div", {key: 1, onupdate: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
render(root, [])
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
o(vnode.dom).notEquals(updated.dom)
|
||||
})
|
||||
o("does not call old onupdate when removing the onupdate property in new vnode", function() {
|
||||
var create = o.spy()
|
||||
var vnode = {tag: "a", attrs: {onupdate: create}}
|
||||
var updated = {tag: "a"}
|
||||
var vnode = m("a", {onupdate: create})
|
||||
var updated = m("a")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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}, state: {}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}, state: {}}
|
||||
var vnode = m("div", {onupdate: create})
|
||||
var updated = m("div", {onupdate: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
|
|
@ -84,11 +86,11 @@ o.spec("onupdate", function() {
|
|||
o("calls onupdate when updating attr", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: create}, state: {}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update, id: "a"}, state: {}}
|
||||
var vnode = m("div", {onupdate: create})
|
||||
var updated = m("div", {onupdate: update, id: "a"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
|
|
@ -98,25 +100,11 @@ o.spec("onupdate", function() {
|
|||
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"}], state: {}}
|
||||
var updated = {tag: "div", attrs: {onupdate: update}, children: [{tag: "b"}], state: {}}
|
||||
var vnode = m("div", {onupdate: create}, m("a"))
|
||||
var updated = m("div", {onupdate: update}, m("b"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(vnode.state)
|
||||
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", state: {}}
|
||||
var updated = {tag: "#", attrs: {onupdate: update}, children: "a", state: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
|
|
@ -126,25 +114,11 @@ o.spec("onupdate", function() {
|
|||
o("calls onupdate when updating fragment", function() {
|
||||
var create = o.spy()
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "[", attrs: {onupdate: create}, children: [], state: {}}
|
||||
var updated = {tag: "[", attrs: {onupdate: update}, children: [], state: {}}
|
||||
var vnode = m.fragment({onupdate: create})
|
||||
var updated = m.fragment({onupdate: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
o(update.this).equals(vnode.state)
|
||||
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", state: {}}
|
||||
var updated = {tag: "<", attrs: {onupdate: update}, children: "a", state: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(create.callCount).equals(0)
|
||||
o(update.callCount).equals(1)
|
||||
|
|
@ -153,19 +127,19 @@ o.spec("onupdate", function() {
|
|||
})
|
||||
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"}}
|
||||
]}
|
||||
]}
|
||||
var vnode = m("div", {id: "1"},
|
||||
m("a", {id: "2"},
|
||||
m("b", {id: "3"})
|
||||
)
|
||||
)
|
||||
var updated = m("div", {id: "11"},
|
||||
m("a", {id: "22", onupdate: update},
|
||||
m("b", {id: "33"})
|
||||
)
|
||||
)
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
function update(vnode) {
|
||||
called = true
|
||||
|
|
@ -178,9 +152,9 @@ o.spec("onupdate", function() {
|
|||
})
|
||||
o("does not set onupdate as an event handler", function() {
|
||||
var update = o.spy()
|
||||
var vnode = {tag: "div", attrs: {onupdate: update}, children: []}
|
||||
var vnode = m("div", {onupdate: update})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o(vnode.dom.onupdate).equals(undefined)
|
||||
o(vnode.dom.attributes["onupdate"]).equals(undefined)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("render", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -68,7 +69,7 @@ o.spec("render", function() {
|
|||
view: function() {throw new Error("error")}
|
||||
}
|
||||
function run() {
|
||||
render(root, {tag: A})
|
||||
render(root, m(A))
|
||||
}
|
||||
function init() {
|
||||
setTimeout(function() {
|
||||
|
|
@ -94,13 +95,13 @@ o.spec("render", function() {
|
|||
A.prototype.onbeforeupdate = onbeforeupdate
|
||||
var throwCount = 0
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(1)
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(1)
|
||||
|
|
@ -115,13 +116,13 @@ o.spec("render", function() {
|
|||
A.prototype.onbeforeupdate = onbeforeupdate
|
||||
var throwCount = 0
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(1)
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(1)
|
||||
|
|
@ -136,13 +137,13 @@ o.spec("render", function() {
|
|||
A.prototype.onbeforeupdate = onbeforeupdate
|
||||
var throwCount = 0
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(0)
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(0)
|
||||
|
|
@ -159,13 +160,13 @@ o.spec("render", function() {
|
|||
}
|
||||
}
|
||||
var throwCount = 0
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(1)
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(1)
|
||||
|
|
@ -182,13 +183,13 @@ o.spec("render", function() {
|
|||
}
|
||||
}
|
||||
var throwCount = 0
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(1)
|
||||
o(onbeforeupdate.callCount).equals(0)
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
o(oninit.callCount).equals(1)
|
||||
|
|
@ -199,11 +200,11 @@ o.spec("render", function() {
|
|||
throw new Error("error")
|
||||
}
|
||||
var throwCount = 0
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
|
||||
try {render(root, {tag: A})} catch (e) {throwCount++}
|
||||
try {render(root, m(A))} catch (e) {throwCount++}
|
||||
|
||||
o(throwCount).equals(1)
|
||||
})
|
||||
|
|
@ -215,16 +216,16 @@ o.spec("render", function() {
|
|||
var updateB = o.spy()
|
||||
var removeB = o.spy()
|
||||
var a = function() {
|
||||
return {tag: "div", key: 1, children: [
|
||||
{tag: "div", key: 11, attrs: {oncreate: createA, onupdate: updateA, onremove: removeA}},
|
||||
{tag: "div", key: 12}
|
||||
]}
|
||||
return m("div", {key: 1},
|
||||
m("div", {key: 11, oncreate: createA, onupdate: updateA, onremove: removeA}),
|
||||
m("div", {key: 12}),
|
||||
)
|
||||
}
|
||||
var b = function() {
|
||||
return {tag: "div", key: 2, children: [
|
||||
{tag: "div", key: 21, attrs: {oncreate: createB, onupdate: updateB, onremove: removeB}},
|
||||
{tag: "div", key: 22}
|
||||
]}
|
||||
return m("div", {key: 2},
|
||||
m("div", {key: 21, oncreate: createB, onupdate: updateB, onremove: removeB}),
|
||||
m("div", {key: 22}),
|
||||
)
|
||||
}
|
||||
render(root, a())
|
||||
render(root, b())
|
||||
|
|
@ -245,14 +246,14 @@ o.spec("render", function() {
|
|||
var updateB = o.spy()
|
||||
var removeB = o.spy()
|
||||
var a = function() {
|
||||
return {tag: "div", key: 1, children: [
|
||||
{tag: "div", attrs: {oncreate: createA, onupdate: updateA, onremove: removeA}},
|
||||
]}
|
||||
return m("div", {key: 1},
|
||||
m("div", {oncreate: createA, onupdate: updateA, onremove: removeA}),
|
||||
)
|
||||
}
|
||||
var b = function() {
|
||||
return {tag: "div", key: 2, children: [
|
||||
{tag: "div", attrs: {oncreate: createB, onupdate: updateB, onremove: removeB}},
|
||||
]}
|
||||
return m("div", {key: 2},
|
||||
m("div", {oncreate: createB, onupdate: updateB, onremove: removeB}),
|
||||
)
|
||||
}
|
||||
render(root, a())
|
||||
render(root, b())
|
||||
|
|
@ -274,14 +275,14 @@ o.spec("render", function() {
|
|||
var removeB = o.spy()
|
||||
|
||||
var a = function() {
|
||||
return {tag: "div", key: 1, children: [
|
||||
{tag: "div", attrs: {oncreate: createA, onupdate: updateA, onremove: removeA}},
|
||||
]}
|
||||
return m("div", {key: 1},
|
||||
m("div", {oncreate: createA, onupdate: updateA, onremove: removeA}),
|
||||
)
|
||||
}
|
||||
var b = function() {
|
||||
return {tag: "div", key: 2, children: [
|
||||
{tag: "div", attrs: {oncreate: createB, onupdate: updateB, onremove: removeB}},
|
||||
]}
|
||||
return m("div", {key: 2},
|
||||
m("div", {oncreate: createB, onupdate: updateB, onremove: removeB}),
|
||||
)
|
||||
}
|
||||
render(root, a())
|
||||
render(root, a())
|
||||
|
|
@ -303,71 +304,71 @@ o.spec("render", function() {
|
|||
})
|
||||
o("svg namespace is preserved in keyed diff (#1820)", function(){
|
||||
// note that this only exerciese one branch of the keyed diff algo
|
||||
var svg = {tag:"svg", children: [
|
||||
{tag:"g", key: 0},
|
||||
{tag:"g", key: 1}
|
||||
]}
|
||||
render(root, [svg])
|
||||
var svg = m("svg",
|
||||
m("g", {key: 0}),
|
||||
m("g", {key: 1}),
|
||||
)
|
||||
render(root, svg)
|
||||
|
||||
o(svg.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
o(svg.dom.childNodes[0].namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
o(svg.dom.childNodes[1].namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
|
||||
svg = {tag:"svg", children: [
|
||||
{tag:"g", key: 1, attrs: {x: 1}},
|
||||
{tag:"g", key: 2, attrs: {x: 2}}
|
||||
]}
|
||||
render(root, [svg])
|
||||
svg = m("svg",
|
||||
m("g", {key: 1, x: 1}),
|
||||
m("g", {key: 2, x: 2}),
|
||||
)
|
||||
render(root, svg)
|
||||
|
||||
o(svg.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
o(svg.dom.childNodes[0].namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
o(svg.dom.childNodes[1].namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
})
|
||||
o("the namespace of the root is passed to children", function() {
|
||||
render(root, [{tag: "svg"}])
|
||||
render(root, m("svg"))
|
||||
o(root.childNodes[0].namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
render(root.childNodes[0], [{tag: "g"}])
|
||||
render(root.childNodes[0], m("g"))
|
||||
o(root.childNodes[0].childNodes[0].namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
})
|
||||
o("does not allow reentrant invocations", function() {
|
||||
var thrown = []
|
||||
function A() {
|
||||
var updated = false
|
||||
try {render(root, {tag: A})} catch (e) {thrown.push("construct")}
|
||||
try {render(root, m(A))} catch (e) {thrown.push("construct")}
|
||||
return {
|
||||
oninit: function() {
|
||||
try {render(root, {tag: A})} catch (e) {thrown.push("oninit")}
|
||||
try {render(root, m(A))} catch (e) {thrown.push("oninit")}
|
||||
},
|
||||
oncreate: function() {
|
||||
try {render(root, {tag: A})} catch (e) {thrown.push("oncreate")}
|
||||
try {render(root, m(A))} catch (e) {thrown.push("oncreate")}
|
||||
},
|
||||
onbeforeupdate: function() {
|
||||
try {render(root, {tag: A})} catch (e) {thrown.push("onbeforeupdate")}
|
||||
try {render(root, m(A))} catch (e) {thrown.push("onbeforeupdate")}
|
||||
},
|
||||
onupdate: function() {
|
||||
if (updated) return
|
||||
updated = true
|
||||
try {render(root, {tag: A})} catch (e) {thrown.push("onupdate")}
|
||||
try {render(root, m(A))} catch (e) {thrown.push("onupdate")}
|
||||
},
|
||||
onbeforeremove: function() {
|
||||
try {render(root, {tag: A})} catch (e) {thrown.push("onbeforeremove")}
|
||||
try {render(root, m(A))} catch (e) {thrown.push("onbeforeremove")}
|
||||
},
|
||||
onremove: function() {
|
||||
try {render(root, {tag: A})} catch (e) {thrown.push("onremove")}
|
||||
try {render(root, m(A))} catch (e) {thrown.push("onremove")}
|
||||
},
|
||||
view: function() {
|
||||
try {render(root, {tag: A})} catch (e) {thrown.push("view")}
|
||||
try {render(root, m(A))} catch (e) {thrown.push("view")}
|
||||
},
|
||||
}
|
||||
}
|
||||
render(root, {tag: A})
|
||||
render(root, m(A))
|
||||
o(thrown).deepEquals([
|
||||
"construct",
|
||||
"oninit",
|
||||
"view",
|
||||
"oncreate",
|
||||
])
|
||||
render(root, {tag: A})
|
||||
render(root, m(A))
|
||||
o(thrown).deepEquals([
|
||||
"construct",
|
||||
"oninit",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("textContent", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -13,188 +14,184 @@ o.spec("textContent", function() {
|
|||
})
|
||||
|
||||
o("ignores null", function() {
|
||||
var vnodes = [{tag: "a", text: null}]
|
||||
var vnode = m("a", null)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(0)
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
o(vnode.dom.childNodes.length).equals(0)
|
||||
o(vnode.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("ignores undefined", function() {
|
||||
var vnodes = [{tag: "a", text: undefined}]
|
||||
var vnode = m("a", undefined)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(vnodes[0].dom.childNodes.length).equals(0)
|
||||
o(vnodes[0].dom).equals(root.childNodes[0])
|
||||
o(vnode.dom.childNodes.length).equals(0)
|
||||
o(vnode.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates string", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var vnode = m("a", "a")
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("a")
|
||||
o(vnode.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates falsy string", function() {
|
||||
var vnodes = [{tag: "a", text: ""}]
|
||||
var vnode = m("a", "")
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("")
|
||||
o(vnode.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates number", function() {
|
||||
var vnodes = [{tag: "a", text: 1}]
|
||||
var vnode = m("a", 1)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("1")
|
||||
o(vnode.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates falsy number", function() {
|
||||
var vnodes = [{tag: "a", text: 0}]
|
||||
var vnode = m("a", 0)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("0")
|
||||
o(vnode.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates boolean", function() {
|
||||
var vnodes = [{tag: "a", text: true}]
|
||||
var vnode = m("a", true)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
|
||||
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(vnode.dom.childNodes.length).equals(0)
|
||||
o(vnode.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("creates falsy boolean", function() {
|
||||
var vnodes = [{tag: "a", text: false}]
|
||||
var vnode = m("a", false)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
|
||||
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(vnode.dom.childNodes.length).equals(0)
|
||||
o(vnode.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to string", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: "b"}]
|
||||
var vnode = m("a", "a")
|
||||
var updated = m("a", "b")
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("b")
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to falsy string", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: ""}]
|
||||
var vnode = m("a", "a")
|
||||
var updated = m("a", "")
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("")
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to number", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: 1}]
|
||||
var vnode = m("a", "a")
|
||||
var updated = m("a", 1)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("1")
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to falsy number", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: 0}]
|
||||
var vnode = m("a", "a")
|
||||
var updated = m("a", 0)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("0")
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to boolean", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: true}]
|
||||
o("updates true to nothing", function() {
|
||||
var vnode = m("a", "a")
|
||||
var updated = m("a", true)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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(vnode.dom.childNodes.length).equals(0)
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates to falsy boolean", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a", text: false}]
|
||||
o("updates false to nothing", function() {
|
||||
var vnode = m("a", "a")
|
||||
var updated = m("a", false)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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(vnode.dom.childNodes.length).equals(0)
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates with typecasting", function() {
|
||||
var vnodes = [{tag: "a", text: "1"}]
|
||||
var updated = [{tag: "a", text: 1}]
|
||||
var vnode = m("a", "1")
|
||||
var updated = m("a", 1)
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("1")
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates from without text to with text", function() {
|
||||
var vnodes = [{tag: "a"}]
|
||||
var updated = [{tag: "a", text: "b"}]
|
||||
var vnode = m("a")
|
||||
var updated = m("a", "b")
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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(vnode.dom.childNodes.length).equals(1)
|
||||
o(vnode.dom.childNodes[0].nodeValue).equals("b")
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
o("updates from with text to without text", function() {
|
||||
var vnodes = [{tag: "a", text: "a"}]
|
||||
var updated = [{tag: "a"}]
|
||||
var vnode = m("a", "a")
|
||||
var updated = m("a")
|
||||
|
||||
render(root, vnodes)
|
||||
render(root, vnode)
|
||||
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])
|
||||
o(vnode.dom.childNodes.length).equals(0)
|
||||
o(updated.dom).equals(root.childNodes[0])
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("updateElement", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -13,217 +14,215 @@ o.spec("updateElement", function() {
|
|||
})
|
||||
|
||||
o("updates attr", function() {
|
||||
var vnode = {tag: "a", attrs: {id: "b"}}
|
||||
var updated = {tag: "a", attrs: {id: "c"}}
|
||||
var vnode = m("a", {id: "b"})
|
||||
var updated = m("a", {id: "c"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.attributes["id"].value).equals("c")
|
||||
})
|
||||
o("adds attr", function() {
|
||||
var vnode = {tag: "a", attrs: {id: "b"}}
|
||||
var updated = {tag: "a", attrs: {id: "c", title: "d"}}
|
||||
var vnode = m("a", {id: "b"})
|
||||
var updated = m("a", {id: "c", title: "d"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.attributes["title"].value).equals("d")
|
||||
})
|
||||
o("adds attr from empty attrs", function() {
|
||||
var vnode = {tag: "a"}
|
||||
var updated = {tag: "a", attrs: {title: "d"}}
|
||||
var vnode = m("a")
|
||||
var updated = m("a", {title: "d"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.attributes["title"].value).equals("d")
|
||||
})
|
||||
o("removes attr", function() {
|
||||
var vnode = {tag: "a", attrs: {id: "b", title: "d"}}
|
||||
var updated = {tag: "a", attrs: {id: "c"}}
|
||||
var vnode = m("a", {id: "b", title: "d"})
|
||||
var updated = m("a", {id: "c"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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("removes class", function() {
|
||||
var vnode = {tag: "a", attrs: {id: "b", className: "d"}}
|
||||
var updated = {tag: "a", attrs: {id: "c"}}
|
||||
var vnode = m("a", {id: "b", className: "d"})
|
||||
var updated = m("a", {id: "c"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o("class" in updated.dom.attributes).equals(false)
|
||||
})
|
||||
o("creates style object", function() {
|
||||
var vnode = {tag: "a", attrs: {}}
|
||||
var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
|
||||
var vnode = m("a")
|
||||
var updated = m("a", {style: {backgroundColor: "green"}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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"}}
|
||||
var vnode = m("a")
|
||||
var updated = m("a", {style: "background-color:green"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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"}}}
|
||||
var vnode = m("a", {style: {backgroundColor: "red"}})
|
||||
var updated = m("a", {style: {backgroundColor: "green"}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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;"}}
|
||||
var vnode = m("a", {style: {backgroundColor: "red"}})
|
||||
var updated = m("a", {style: "background-color:green;"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("green")
|
||||
})
|
||||
o("handles noop style change when style is string", function() {
|
||||
var vnode = {tag: "a", attrs: {style: "background-color:green;"}}
|
||||
var updated = {tag: "a", attrs: {style: "background-color:green;"}}
|
||||
var vnode = m("a", {style: "background-color:green;"})
|
||||
var updated = m("a", {style: "background-color:green;"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("green")
|
||||
})
|
||||
o("handles noop style change when style is object", function() {
|
||||
var vnode = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
|
||||
var updated = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
|
||||
var vnode = m("a", {style: {backgroundColor: "red"}})
|
||||
var updated = m("a", {style: {backgroundColor: "red"}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("red")
|
||||
})
|
||||
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"}}}
|
||||
var vnode = m("a", {style: "background-color:red;"})
|
||||
var updated = m("a", {style: {backgroundColor: "green"}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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;"}}
|
||||
var vnode = m("a", {style: "background-color:red;"})
|
||||
var updated = m("a", {style: "background-color:green;"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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"}}}
|
||||
var vnode = m("a", {style: {backgroundColor: "red", border: "1px solid red"}})
|
||||
var updated = m("a", {style: {backgroundColor: "red"}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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"}}}
|
||||
var vnode = m("a", {style: "background-color:red;border:1px solid red"})
|
||||
var updated = m("a", {style: {backgroundColor: "red"}})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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"}}
|
||||
var vnode = m("a", {style: {backgroundColor: "red", border: "1px solid red"}})
|
||||
var updated = m("a", {style: "background-color:red"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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"}}
|
||||
var vnode = m("a", {style: "background-color:red;border:1px solid red"})
|
||||
var updated = m("a", {style: "background-color:red"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.style.backgroundColor).equals("red")
|
||||
o(updated.dom.style.border).equals("")
|
||||
})
|
||||
o("does not re-render element styles for equivalent style objects", function() {
|
||||
var style = {color: "gold"}
|
||||
var vnode = {tag: "a", attrs: {style: style}}
|
||||
var vnode = m("a", {style: style})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
root.firstChild.style.color = "red"
|
||||
style = {color: "gold"}
|
||||
var updated = {tag: "a", attrs: {style: style}}
|
||||
render(root, [updated])
|
||||
var updated = m("a", {style: style})
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.style.color).equals("red")
|
||||
})
|
||||
o("setting style to `null` removes all styles", function() {
|
||||
var vnode = {"tag": "p", attrs: {style: "background-color: red"}}
|
||||
var updated = {"tag": "p", attrs: {style: null}}
|
||||
var vnode = m("p", {style: "background-color: red"})
|
||||
var updated = m("p", {style: null})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o("style" in vnode.dom.attributes).equals(true)
|
||||
o(vnode.dom.attributes.style.value).equals("background-color: red;")
|
||||
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
//browsers disagree here
|
||||
try {
|
||||
|
||||
o(updated.dom.attributes.style.value).equals("")
|
||||
|
||||
} catch (e) {
|
||||
|
||||
o("style" in updated.dom.attributes).equals(false)
|
||||
|
||||
}
|
||||
})
|
||||
o("setting style to `undefined` removes all styles", function() {
|
||||
var vnode = {"tag": "p", attrs: {style: "background-color: red"}}
|
||||
var updated = {"tag": "p", attrs: {style: undefined}}
|
||||
var vnode = m("p", {style: "background-color: red"})
|
||||
var updated = m("p", {style: undefined})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o("style" in vnode.dom.attributes).equals(true)
|
||||
o(vnode.dom.attributes.style.value).equals("background-color: red;")
|
||||
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
//browsers disagree here
|
||||
try {
|
||||
|
|
@ -237,15 +236,15 @@ o.spec("updateElement", function() {
|
|||
}
|
||||
})
|
||||
o("not setting style removes all styles", function() {
|
||||
var vnode = {"tag": "p", attrs: {style: "background-color: red"}}
|
||||
var updated = {"tag": "p", attrs: {}}
|
||||
var vnode = m("p", {style: "background-color: red"})
|
||||
var updated = m("p")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
|
||||
o("style" in vnode.dom.attributes).equals(true)
|
||||
o(vnode.dom.attributes.style.value).equals("background-color: red;")
|
||||
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
//browsers disagree here
|
||||
try {
|
||||
|
|
@ -259,64 +258,60 @@ o.spec("updateElement", function() {
|
|||
}
|
||||
})
|
||||
o("replaces el", function() {
|
||||
var vnode = {tag: "a"}
|
||||
var updated = {tag: "b"}
|
||||
var vnode = m("a")
|
||||
var updated = m("b")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeName).equals("B")
|
||||
})
|
||||
o("updates svg class", function() {
|
||||
var vnode = {tag: "svg", attrs: {className: "a"}}
|
||||
var updated = {tag: "svg", attrs: {className: "b"}}
|
||||
var vnode = m("svg", {className: "a"})
|
||||
var updated = m("svg", {className: "b"})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.attributes["class"].value).equals("b")
|
||||
})
|
||||
o("updates svg child", function() {
|
||||
var vnode = {tag: "svg", children: [{
|
||||
tag: "circle"
|
||||
}]}
|
||||
var updated = {tag: "svg", children: [{
|
||||
tag: "line"
|
||||
}]}
|
||||
var vnode = m("svg", m("circle"))
|
||||
var updated = m("svg", m("line"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
|
||||
})
|
||||
o("doesn't restore since we're not recycling", function() {
|
||||
var vnode = {tag: "div", key: 1}
|
||||
var updated = {tag: "div", key: 2}
|
||||
var vnode = m("div", {key: 1})
|
||||
var updated = m("div", {key: 2})
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
var a = vnode.dom
|
||||
|
||||
render(root, [updated])
|
||||
render(root, updated)
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, vnode)
|
||||
var c = vnode.dom
|
||||
|
||||
o(root.childNodes.length).equals(1)
|
||||
o(a).notEquals(c) // this used to be a recycling pool test
|
||||
})
|
||||
o("doesn't restore since we're not recycling (via map)", function() {
|
||||
var a = {tag: "div", key: 1}
|
||||
var b = {tag: "div", key: 2}
|
||||
var c = {tag: "div", key: 3}
|
||||
var d = {tag: "div", key: 4}
|
||||
var e = {tag: "div", key: 5}
|
||||
var f = {tag: "div", key: 6}
|
||||
var a = m("div", {key: 1})
|
||||
var b = m("div", {key: 2})
|
||||
var c = m("div", {key: 3})
|
||||
var d = m("div", {key: 4})
|
||||
var e = m("div", {key: 5})
|
||||
var f = m("div", {key: 6})
|
||||
|
||||
render(root, [a, b, c])
|
||||
var x = root.childNodes[1]
|
||||
|
||||
render(root, [d])
|
||||
render(root, d)
|
||||
|
||||
render(root, [e, b, f])
|
||||
var y = root.childNodes[1]
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.fragment = require("../../render/fragment")
|
||||
|
||||
o.spec("updateFragment", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -13,21 +15,21 @@ o.spec("updateFragment", function() {
|
|||
})
|
||||
|
||||
o("updates fragment", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "a"}]}
|
||||
var updated = {tag: "[", children: [{tag: "b"}]}
|
||||
var vnode = m.fragment(m("a"))
|
||||
var updated = m.fragment(m("b"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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"}]}
|
||||
var vnode = m.fragment()
|
||||
var updated = m.fragment(m("a"), m("b"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.domSize).equals(2)
|
||||
|
|
@ -36,32 +38,32 @@ o.spec("updateFragment", function() {
|
|||
o(root.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("removes els", function() {
|
||||
var vnode = {tag: "[", children: [{tag: "a"}, {tag: "b"}]}
|
||||
var updated = {tag: "[", children: []}
|
||||
var vnode = m.fragment(m("a"), m("b"))
|
||||
var updated = m.fragment()
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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"}]}
|
||||
var vnode = m.fragment()
|
||||
var updated = m.fragment(m("a"))
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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: "["}
|
||||
var vnode = m.fragment(m("a"))
|
||||
var updated = m.fragment()
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(null)
|
||||
o(root.childNodes.length).equals(0)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
m.trust = require("../../render/trust")
|
||||
|
||||
o.spec("updateHTML", function() {
|
||||
var $window, root, render
|
||||
|
|
@ -13,22 +15,22 @@ o.spec("updateHTML", function() {
|
|||
})
|
||||
|
||||
o("updates html", function() {
|
||||
var vnode = {tag: "<", children: "a"}
|
||||
var updated = {tag: "<", children: "b"}
|
||||
var vnode = m.trust("a")
|
||||
var updated = m.trust("b")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.domSize).equals(1)
|
||||
o(updated.dom.nodeValue).equals("b")
|
||||
})
|
||||
o("adds html", function() {
|
||||
var vnode = {tag: "<", children: ""}
|
||||
var updated = {tag: "<", children: "<a></a><b></b>"}
|
||||
var vnode = m.trust("")
|
||||
var updated = m.trust("<a></a><b></b>")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.domSize).equals(2)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
|
|
@ -37,11 +39,11 @@ o.spec("updateHTML", function() {
|
|||
o(root.childNodes[1].nodeName).equals("B")
|
||||
})
|
||||
o("removes html", function() {
|
||||
var vnode = {tag: "<", children: "<a></a><b></b>"}
|
||||
var updated = {tag: "<", children: ""}
|
||||
var vnode = m.trust("<a></a><b></b>")
|
||||
var updated = m.trust("")
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(null)
|
||||
o(updated.domSize).equals(0)
|
||||
|
|
@ -58,14 +60,14 @@ o.spec("updateHTML", function() {
|
|||
return result
|
||||
}
|
||||
o("updates the dom correctly with a contenteditable parent", function() {
|
||||
var div = {tag: "div", attrs: {contenteditable: true}, children: [{tag: "<", children: "<a></a>"}]}
|
||||
var div = m("div", {contenteditable: true}, m.trust("<a></a>"))
|
||||
|
||||
render(root, div)
|
||||
o(childKeysOf(div.dom, "nodeName")).deepEquals(["A"])
|
||||
})
|
||||
o("updates dom with multiple text children", function() {
|
||||
var vnode = [{tag: "#", children: "a"}, {tag: "<", children: "<a></a>"}, {tag: "<", children: "<b></b>"}]
|
||||
var replacement = [{tag: "#", children: "a"}, {tag: "<", children: "<c></c>"}, {tag: "<", children: "<d></d>"}]
|
||||
var vnode = ["a", m.trust("<a></a>"), m.trust("<b></b>")]
|
||||
var replacement = ["a", m.trust("<c></c>"), m.trust("<d></d>")]
|
||||
|
||||
render(root, vnode)
|
||||
render(root, replacement)
|
||||
|
|
@ -74,12 +76,12 @@ o.spec("updateHTML", function() {
|
|||
})
|
||||
o("updates dom with multiple text children in other parents", function() {
|
||||
var vnode = [
|
||||
{tag: "div", attrs: {}, children: [{tag: "#", children: "a"}, {tag: "<", children: "<a></a>"}]},
|
||||
{tag: "div", attrs: {}, children: [{tag: "#", children: "b"}, {tag: "<", children: "<b></b>"}]},
|
||||
m("div", "a", m.trust("<a></a>")),
|
||||
m("div", "b", m.trust("<b></b>")),
|
||||
]
|
||||
var replacement = [
|
||||
{tag: "div", attrs: {}, children: [{tag: "#", children: "c"}, {tag: "<", children: "<c></c>"}]},
|
||||
{tag: "div", attrs: {}, children: [{tag: "#", children: "d"}, {tag: "<", children: "<d></d>"}]},
|
||||
m("div", "c", m.trust("<c></c>")),
|
||||
m("div", "d", m.trust("<d></d>")),
|
||||
]
|
||||
|
||||
render(root, vnode)
|
||||
|
|
@ -93,20 +95,20 @@ o.spec("updateHTML", function() {
|
|||
})
|
||||
o("correctly diffs if followed by another trusted vnode", function() {
|
||||
render(root, [
|
||||
{tag: "<", children: "<span>A</span>"},
|
||||
{tag: "<", children: "<span>A</span>"},
|
||||
m.trust("<span>A</span>"),
|
||||
m.trust("<span>A</span>"),
|
||||
])
|
||||
o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"])
|
||||
o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["A", "A"])
|
||||
render(root, [
|
||||
{tag: "<", children: "<span>B</span>"},
|
||||
{tag: "<", children: "<span>A</span>"},
|
||||
m.trust("<span>B</span>"),
|
||||
m.trust("<span>A</span>"),
|
||||
])
|
||||
o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"])
|
||||
o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["B", "A"])
|
||||
render(root, [
|
||||
{tag: "<", children: "<span>B</span>"},
|
||||
{tag: "<", children: "<span>B</span>"},
|
||||
m.trust("<span>B</span>"),
|
||||
m.trust("<span>B</span>"),
|
||||
])
|
||||
o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"])
|
||||
o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["B", "B"])
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -3,6 +3,7 @@
|
|||
var o = require("ospec")
|
||||
var domMock = require("../../test-utils/domMock")
|
||||
var vdom = require("../../render/render")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
// pilfered and adapted from https://github.com/domvm/domvm/blob/7aaec609e4c625b9acf9a22d035d6252a5ca654f/test/src/flat-list-keyed-fuzz.js
|
||||
o.spec("updateNodes keyed list Fuzzer", function() {
|
||||
|
|
@ -26,9 +27,9 @@ o.spec("updateNodes keyed list Fuzzer", function() {
|
|||
while (tests--) {
|
||||
var test = fuzzTest(c.delMax, c.movMax, c.insMax)
|
||||
o(i++ + ": " + test.list.join() + " -> " + test.updated.join(), function() {
|
||||
render(root, test.list.map(function(x){return {tag: x, key: x}}))
|
||||
render(root, test.list.map(function(x){return m(x, {key: x})}))
|
||||
addSpies(root)
|
||||
render(root, test.updated.map(function(x){return {tag: x, key: x}}))
|
||||
render(root, test.updated.map(function(x){return m(x, {key: x})}))
|
||||
|
||||
if (root.appendChild.callCount + root.insertBefore.callCount !== test.expected.creations + test.expected.moves) console.log(test, {aC: root.appendChild.callCount, iB: root.insertBefore.callCount}, [].map.call(root.childNodes, function(n){return n.nodeName.toLowerCase()}))
|
||||
|
||||
|
|
|
|||
|
|
@ -13,102 +13,84 @@ o.spec("updateText", function() {
|
|||
})
|
||||
|
||||
o("updates to string", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: "b"}
|
||||
var vnode = "a"
|
||||
var updated = "b"
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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(root.firstChild.nodeValue).equals("b")
|
||||
})
|
||||
o("updates to falsy string", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: ""}
|
||||
var vnode = "a"
|
||||
var updated = ""
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
render(root, vnode)
|
||||
render(root, updated)
|
||||
|
||||
o(updated.dom).equals(vnode.dom)
|
||||
o(updated.dom).equals(root.firstChild)
|
||||
o(updated.dom.nodeValue).equals("")
|
||||
o(root.firstChild.nodeValue).equals("")
|
||||
})
|
||||
o("updates from falsy string", function() {
|
||||
var vnode = {tag: "#", children: ""}
|
||||
var updated = {tag: "#", children: "b"}
|
||||
var vnode = ""
|
||||
var updated = "b"
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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(root.firstChild.nodeValue).equals("b")
|
||||
})
|
||||
o("updates to number", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: 1}
|
||||
var vnode = "a"
|
||||
var updated = 1
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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(root.firstChild.nodeValue).equals("1")
|
||||
})
|
||||
o("updates to falsy number", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: 0}
|
||||
var vnode = "a"
|
||||
var updated = 0
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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(root.firstChild.nodeValue).equals("0")
|
||||
})
|
||||
o("updates from falsy number", function() {
|
||||
var vnode = {tag: "#", children: 0}
|
||||
var updated = {tag: "#", children: "b"}
|
||||
var vnode = 0
|
||||
var updated = "b"
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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(root.firstChild.nodeValue).equals("b")
|
||||
})
|
||||
o("updates to boolean", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: true}
|
||||
var vnode = "a"
|
||||
var updated = true
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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(root.childNodes.length).equals(0)
|
||||
})
|
||||
o("updates to falsy boolean", function() {
|
||||
var vnode = {tag: "#", children: "a"}
|
||||
var updated = {tag: "#", children: false}
|
||||
var vnode = "a"
|
||||
var updated = false
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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(root.childNodes.length).equals(0)
|
||||
})
|
||||
o("updates from falsy boolean", function() {
|
||||
var vnode = {tag: "#", children: false}
|
||||
var updated = {tag: "#", children: "b"}
|
||||
var vnode = false
|
||||
var updated = "b"
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
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(root.firstChild.nodeValue).equals("b")
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
"use strict"
|
||||
|
||||
var m = require("../render/hyperscript")
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
kind: "POJO",
|
||||
create: function(methods) {
|
||||
var res = {view: function() {return {tag:"div"}}}
|
||||
var res = {view: function() {return m("div")}}
|
||||
Object.keys(methods || {}).forEach(function(m){res[m] = methods[m]})
|
||||
return res
|
||||
}
|
||||
|
|
@ -12,7 +14,7 @@ module.exports = [
|
|||
kind: "constructible",
|
||||
create: function(methods) {
|
||||
function res(){}
|
||||
res.prototype.view = function() {return {tag:"div"}}
|
||||
res.prototype.view = function() {return m("div")}
|
||||
Object.keys(methods || {}).forEach(function(m){res.prototype[m] = methods[m]})
|
||||
return res
|
||||
}
|
||||
|
|
@ -20,7 +22,7 @@ module.exports = [
|
|||
kind: "closure",
|
||||
create: function(methods) {
|
||||
return function() {
|
||||
var res = {view: function() {return {tag:"div"}}}
|
||||
var res = {view: function() {return m("div")}}
|
||||
Object.keys(methods || {}).forEach(function(m){res[m] = methods[m]})
|
||||
return res
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
var o = require("ospec")
|
||||
var components = require("../../test-utils/components")
|
||||
var m = require("../../render/hyperscript")
|
||||
|
||||
o.spec("test-utils/components", function() {
|
||||
var test = o.spy(function(component) {
|
||||
|
|
@ -32,7 +33,7 @@ o.spec("test-utils/components", function() {
|
|||
var vnode = cmp1.view()
|
||||
|
||||
o(vnode != null).equals(true)
|
||||
o(vnode).deepEquals({tag: "div"})
|
||||
o(vnode).deepEquals(m("div"))
|
||||
|
||||
if (component.kind !== "constructible") {
|
||||
o(cmp2).deepEquals(methods)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue