diff --git a/render/tests/test-attributes.js b/render/tests/test-attributes.js index 7df14578..91c5a65b 100644 --- a/render/tests/test-attributes.js +++ b/render/tests/test-attributes.js @@ -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: ""}]} - 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: ""}]} + var div = m("div", {contenteditable: true}, m.trust("")) var succeeded = false try { diff --git a/render/tests/test-component.js b/render/tests/test-component.js index 20dc02be..74b1c87a 100644 --- a/render/tests/test-component.js +++ b/render/tests/test-component.js @@ -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) diff --git a/render/tests/test-createElement.js b/render/tests/test-createElement.js index 21e5e4d7..2eecc90f 100644 --- a/render/tests/test-createElement.js +++ b/render/tests/test-createElement.js @@ -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") diff --git a/render/tests/test-createFragment.js b/render/tests/test-createFragment.js index 37bdb8b0..ffc449ae 100644 --- a/render/tests/test-createFragment.js +++ b/render/tests/test-createFragment.js @@ -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") diff --git a/render/tests/test-createHTML.js b/render/tests/test-createHTML.js index 54de6a97..063b89b8 100644 --- a/render/tests/test-createHTML.js +++ b/render/tests/test-createHTML.js @@ -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: ""} - render(root, [vnode]) + var vnode = m.trust("") + 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: ""} - render(root, [vnode]) + var vnode = m.trust("") + 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: ""} - render(root, [{tag:"svg", children: [vnode]}]) + var vnode = m.trust("") + 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: ""} - render(root, [{tag:"svg", children: [vnode]}]) + var vnode = m.trust("") + 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: ""}]} + var div = m("div", {contenteditable: true}, m.trust("")) render(root, div) var tags = [] diff --git a/render/tests/test-createNodes.js b/render/tests/test-createNodes.js index 3ba84905..624f884f 100644 --- a/render/tests/test-createNodes.js +++ b/render/tests/test-createNodes.js @@ -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) diff --git a/render/tests/test-createText.js b/render/tests/test-createText.js index 76cb3e3d..e7fd74ec 100644 --- a/render/tests/test-createText.js +++ b/render/tests/test-createText.js @@ -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: "™"} - 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("™") }) }) diff --git a/render/tests/test-event.js b/render/tests/test-event.js index 239a8674..5acc29f4 100644 --- a/render/tests/test-event.js +++ b/render/tests/test-event.js @@ -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") diff --git a/render/tests/test-fragment.js b/render/tests/test-fragment.js index 02af0a9d..cea868c0 100644 --- a/render/tests/test-fragment.js +++ b/render/tests/test-fragment.js @@ -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("[") diff --git a/render/tests/test-hyperscript.js b/render/tests/test-hyperscript.js index cdb9071b..39266a80 100644 --- a/render/tests/test-hyperscript.js +++ b/render/tests/test-hyperscript.js @@ -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") diff --git a/render/tests/test-input.js b/render/tests/test-input.js index 1ea361ea..f49b9052 100644 --- a/render/tests/test-input.js +++ b/render/tests/test-input.js @@ -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 diff --git a/render/tests/test-onbeforeremove.js b/render/tests/test-onbeforeremove.js index 96f5025e..9605b3b9 100644 --- a/render/tests/test-onbeforeremove.js +++ b/render/tests/test-onbeforeremove.js @@ -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) diff --git a/render/tests/test-onbeforeupdate.js b/render/tests/test-onbeforeupdate.js index a4e50c48..a83593cf 100644 --- a/render/tests/test-onbeforeupdate.js +++ b/render/tests/test-onbeforeupdate.js @@ -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) }) }) diff --git a/render/tests/test-oncreate.js b/render/tests/test-oncreate.js index 0358046f..8f79fa53 100644 --- a/render/tests/test-oncreate.js +++ b/render/tests/test-oncreate.js @@ -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) diff --git a/render/tests/test-oninit.js b/render/tests/test-oninit.js index c2ce1248..5b414554 100644 --- a/render/tests/test-oninit.js +++ b/render/tests/test-oninit.js @@ -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) diff --git a/render/tests/test-onremove.js b/render/tests/test-onremove.js index 8643b105..9910881d 100644 --- a/render/tests/test-onremove.js +++ b/render/tests/test-onremove.js @@ -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) diff --git a/render/tests/test-onupdate.js b/render/tests/test-onupdate.js index e57612ab..9b8cbd8b 100644 --- a/render/tests/test-onupdate.js +++ b/render/tests/test-onupdate.js @@ -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) diff --git a/render/tests/test-render.js b/render/tests/test-render.js index 06b44186..33e38a37 100644 --- a/render/tests/test-render.js +++ b/render/tests/test-render.js @@ -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", diff --git a/render/tests/test-textContent.js b/render/tests/test-textContent.js index 50f79a46..31d91175 100644 --- a/render/tests/test-textContent.js +++ b/render/tests/test-textContent.js @@ -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]) }) }) diff --git a/render/tests/test-updateElement.js b/render/tests/test-updateElement.js index e60ac550..eb41e06f 100644 --- a/render/tests/test-updateElement.js +++ b/render/tests/test-updateElement.js @@ -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] diff --git a/render/tests/test-updateFragment.js b/render/tests/test-updateFragment.js index 1c127541..e0de53ba 100644 --- a/render/tests/test-updateFragment.js +++ b/render/tests/test-updateFragment.js @@ -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) diff --git a/render/tests/test-updateHTML.js b/render/tests/test-updateHTML.js index 5ed8d73a..55de4372 100644 --- a/render/tests/test-updateHTML.js +++ b/render/tests/test-updateHTML.js @@ -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: ""} + var vnode = m.trust("") + var updated = m.trust("") - 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: ""} - var updated = {tag: "<", children: ""} + var vnode = m.trust("") + 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: ""}]} + var div = m("div", {contenteditable: true}, m.trust("")) 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: ""}, {tag: "<", children: ""}] - var replacement = [{tag: "#", children: "a"}, {tag: "<", children: ""}, {tag: "<", children: ""}] + var vnode = ["a", m.trust(""), m.trust("")] + var replacement = ["a", m.trust(""), m.trust("")] 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: ""}]}, - {tag: "div", attrs: {}, children: [{tag: "#", children: "b"}, {tag: "<", children: ""}]}, + m("div", "a", m.trust("")), + m("div", "b", m.trust("")), ] var replacement = [ - {tag: "div", attrs: {}, children: [{tag: "#", children: "c"}, {tag: "<", children: ""}]}, - {tag: "div", attrs: {}, children: [{tag: "#", children: "d"}, {tag: "<", children: ""}]}, + m("div", "c", m.trust("")), + m("div", "d", m.trust("")), ] 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: "A"}, - {tag: "<", children: "A"}, + m.trust("A"), + m.trust("A"), ]) o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"]) o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["A", "A"]) render(root, [ - {tag: "<", children: "B"}, - {tag: "<", children: "A"}, + m.trust("B"), + m.trust("A"), ]) o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"]) o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["B", "A"]) render(root, [ - {tag: "<", children: "B"}, - {tag: "<", children: "B"}, + m.trust("B"), + m.trust("B"), ]) o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"]) o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["B", "B"]) diff --git a/render/tests/test-updateNodes.js b/render/tests/test-updateNodes.js index b5ff7efa..81e99a0f 100644 --- a/render/tests/test-updateNodes.js +++ b/render/tests/test-updateNodes.js @@ -4,6 +4,13 @@ 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/fragment") +m.trust = require("../../render/trust") + +function vnodify(str) { + return str.split(",").map(function(k) {return m(k, {key: k})}) +} o.spec("updateNodes", function() { var $window, root, render @@ -14,8 +21,8 @@ o.spec("updateNodes", function() { }) o("handles el noop", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] - var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] + var updated = [m("a", {key: 1}), m("b", {key: 2})] render(root, vnodes) render(root, updated) @@ -27,8 +34,8 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("handles el noop without key", function() { - var vnodes = [{tag: "a"}, {tag: "b"}] - var updated = [{tag: "a"}, {tag: "b"}] + var vnodes = [m("a"), m("b")] + var updated = [m("a"), m("b")] render(root, vnodes) render(root, updated) @@ -40,74 +47,71 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("handles text noop", function() { - var vnodes = [{tag: "#", children: "a"}] - var updated = [{tag: "#", children: "a"}] + var vnodes = "a" + var updated = "a" render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(1) - o(updated[0].dom.nodeValue).equals("a") - o(updated[0].dom).equals(root.childNodes[0]) + o(root.firstChild.nodeValue).equals("a") }) o("handles text noop w/ type casting", function() { - var vnodes = [{tag: "#", children: 1}] - var updated = [{tag: "#", children: "1"}] + var vnodes = 1 + var updated = "1" render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(1) - o(updated[0].dom.nodeValue).equals("1") - o(updated[0].dom).equals(root.childNodes[0]) + o(root.firstChild.nodeValue).equals("1") }) o("handles falsy text noop w/ type casting", function() { - var vnodes = [{tag: "#", children: 0}] - var updated = [{tag: "#", children: "0"}] + var vnodes = 0 + var updated = "0" render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(1) - o(updated[0].dom.nodeValue).equals("0") - o(updated[0].dom).equals(root.childNodes[0]) + o(root.childNodes[0].nodeValue).equals("0") }) o("handles html noop", function() { - var vnodes = [{tag: "<", children: "a"}] - var updated = [{tag: "<", children: "a"}] + var vnodes = m.trust("a") + var updated = m.trust("a") render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(1) - o(updated[0].dom.nodeValue).equals("a") - o(updated[0].dom).equals(root.childNodes[0]) + o(root.childNodes[0].nodeValue).equals("a") + o(updated.dom).equals(root.childNodes[0]) }) o("handles fragment noop", function() { - var vnodes = [{tag: "[", children: [{tag: "a"}]}] - var updated = [{tag: "[", children: [{tag: "a"}]}] + var vnodes = m.fragment(m("a")) + var updated = m.fragment(m("a")) render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(1) - o(updated[0].dom.nodeName).equals("A") - o(updated[0].dom).equals(root.childNodes[0]) + o(updated.dom.nodeName).equals("A") + o(updated.dom).equals(root.childNodes[0]) }) o("handles fragment noop w/ text child", function() { - var vnodes = [{tag: "[", children: [{tag: "#", children: "a"}]}] - var updated = [{tag: "[", children: [{tag: "#", children: "a"}]}] + var vnodes = m.fragment("a") + var updated = m.fragment("a") render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(1) - o(updated[0].dom.nodeValue).equals("a") - o(updated[0].dom).equals(root.childNodes[0]) + o(updated.dom.nodeValue).equals("a") + o(updated.dom).equals(root.childNodes[0]) }) o("handles undefined to null noop", function() { - var vnodes = [null, {tag: "div"}] - var updated = [undefined, {tag: "div"}] + var vnodes = [null, m("div")] + var updated = [undefined, m("div")] render(root, vnodes) render(root, updated) @@ -115,8 +119,8 @@ o.spec("updateNodes", function() { o(root.childNodes.length).equals(1) }) o("reverses els w/ even count", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}] - var updated = [{tag: "s", key: 4}, {tag: "i", key: 3}, {tag: "b", key: 2}, {tag: "a", key: 1}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3}), m("s", {key: 4})] + var updated = [m("s", {key: 4}), m("i", {key: 3}), m("b", {key: 2}), m("a", {key: 1})] render(root, vnodes) render(root, updated) @@ -132,8 +136,8 @@ o.spec("updateNodes", function() { o(updated[3].dom).equals(root.childNodes[3]) }) o("reverses els w/ odd count", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}] - var updated = [{tag: "i", key: 3}, {tag: "b", key: 2}, {tag: "a", key: 1}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3})] + var updated = [m("i", {key: 3}), m("b", {key: 2}), m("a", {key: 1})] var expectedTags = updated.map(function(vn) {return vn.tag}) render(root, vnodes) render(root, updated) @@ -147,8 +151,8 @@ o.spec("updateNodes", function() { o(tagNames).deepEquals(expectedTags) }) o("creates el at start", function() { - var vnodes = [{tag: "a", key: 1}] - var updated = [{tag: "b", key: 2}, {tag: "a", key: 1}] + var vnodes = [m("a", {key: 1})] + var updated = [m("b", {key: 2}), m("a", {key: 1})] render(root, vnodes) render(root, updated) @@ -160,8 +164,8 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("creates el at end", function() { - var vnodes = [{tag: "a", key: 1}] - var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1})] + var updated = [m("a", {key: 1}), m("b", {key: 2})] render(root, vnodes) render(root, updated) @@ -173,8 +177,8 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("creates el in middle", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] - var updated = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] + var updated = [m("a", {key: 1}), m("i", {key: 3}), m("b", {key: 2})] render(root, vnodes) render(root, updated) @@ -187,8 +191,8 @@ o.spec("updateNodes", function() { o(updated[2].dom).equals(root.childNodes[2]) }) o("creates el while reversing", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] - var updated = [{tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "a", key: 1}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] + var updated = [m("b", {key: 2}), m("i", {key: 3}), m("a", {key: 1})] render(root, vnodes) render(root, updated) @@ -202,8 +206,8 @@ o.spec("updateNodes", function() { o(updated[2].dom).equals(root.childNodes[2]) }) o("deletes el at start", function() { - var vnodes = [{tag: "b", key: 2}, {tag: "a", key: 1}] - var updated = [{tag: "a", key: 1}] + var vnodes = [m("b", {key: 2}), m("a", {key: 1})] + var updated = [m("a", {key: 1})] render(root, vnodes) render(root, updated) @@ -213,8 +217,8 @@ o.spec("updateNodes", function() { o(updated[0].dom).equals(root.childNodes[0]) }) o("deletes el at end", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] - var updated = [{tag: "a", key: 1}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] + var updated = [m("a", {key: 1})] render(root, vnodes) render(root, updated) @@ -224,8 +228,8 @@ o.spec("updateNodes", function() { o(updated[0].dom).equals(root.childNodes[0]) }) o("deletes el at middle", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "b", key: 2}] - var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("i", {key: 3}), m("b", {key: 2})] + var updated = [m("a", {key: 1}), m("b", {key: 2})] render(root, vnodes) render(root, updated) @@ -237,8 +241,8 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("deletes el while reversing", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "b", key: 2}] - var updated = [{tag: "b", key: 2}, {tag: "a", key: 1}] + var vnodes = [m("a", {key: 1}), m("i", {key: 3}), m("b", {key: 2})] + var updated = [m("b", {key: 2}), m("a", {key: 1})] render(root, vnodes) render(root, updated) @@ -250,8 +254,8 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("creates, deletes, reverses els at same time", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "b", key: 2}] - var updated = [{tag: "b", key: 2}, {tag: "a", key: 1}, {tag: "s", key: 4}] + var vnodes = [m("a", {key: 1}), m("i", {key: 3}), m("b", {key: 2})] + var updated = [m("b", {key: 2}), m("a", {key: 1}), m("s", {key: 4})] render(root, vnodes) render(root, updated) @@ -265,8 +269,8 @@ o.spec("updateNodes", function() { o(updated[2].dom).equals(root.childNodes[2]) }) o("creates, deletes, reverses els at same time with '__proto__' key", function() { - var vnodes = [{tag: "a", key: "__proto__"}, {tag: "i", key: 3}, {tag: "b", key: 2}] - var updated = [{tag: "b", key: 2}, {tag: "a", key: "__proto__"}, {tag: "s", key: 4}] + var vnodes = [m("a", {key: "__proto__"}), m("i", {key: 3}), m("b", {key: 2})] + var updated = [m("b", {key: 2}), m("a", {key: "__proto__"}), m("s", {key: 4})] render(root, vnodes) render(root, updated) @@ -279,9 +283,9 @@ o.spec("updateNodes", function() { o(updated[2].dom.nodeName).equals("S") o(updated[2].dom).equals(root.childNodes[2]) }) - o("adds to empty array followed by el", function() { - var vnodes = [{tag: "[", key: 1, children: []}, {tag: "b", key: 2}] - var updated = [{tag: "[", key: 1, children: [{tag: "a"}]}, {tag: "b", key: 2}] + o("adds to empty fragment followed by el", function() { + var vnodes = [m.fragment({key: 1}), m("b", {key: 2})] + var updated = [m.fragment({key: 1}, m("a")), m("b", {key: 2})] render(root, vnodes) render(root, updated) @@ -293,8 +297,8 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("reverses followed by el", function() { - var vnodes = [{tag: "[", key: 1, children: [{tag: "a", key: 2}, {tag: "b", key: 3}]}, {tag: "i", key: 4}] - var updated = [{tag: "[", key: 1, children: [{tag: "b", key: 3}, {tag: "a", key: 2}]}, {tag: "i", key: 4}] + var vnodes = [m.fragment({key: 1}, m("a", {key: 2}), m("b", {key: 3})), m("i", {key: 4})] + var updated = [m.fragment({key: 1}, m("b", {key: 3}), m("a", {key: 2})), m("i", {key: 4})] render(root, vnodes) render(root, updated) @@ -307,121 +311,65 @@ o.spec("updateNodes", function() { o(updated[1].dom.nodeName).equals("I") o(updated[1].dom).equals(root.childNodes[2]) }) - o("updates empty array to html with same key", function() { - var vnodes = [{tag: "[", key: 1, children: []}] - var updated = [{tag: "<", key: 1, children: ""}] + o("updates empty fragment to html without key", function() { + var vnodes = m.fragment() + var updated = m.trust("") render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(2) - o(updated[0].dom.nodeName).equals("A") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("B") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) + o(updated.dom.nodeName).equals("A") + o(updated.dom).equals(root.childNodes[0]) + o(updated.domSize).equals(2) + o(updated.dom.nextSibling.nodeName).equals("B") + o(updated.dom.nextSibling).equals(root.childNodes[1]) }) - o("updates empty html to array with same key", function() { - var vnodes = [{tag: "<", key: 1, children: ""}] - var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}] + o("updates empty html to fragment without key", function() { + var vnodes = m.trust() + var updated = m.fragment(m("a"), m("b")) render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(2) - o(updated[0].dom.nodeName).equals("A") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("B") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) + o(updated.dom.nodeName).equals("A") + o(updated.dom).equals(root.childNodes[0]) + o(updated.domSize).equals(2) + o(updated.dom.nextSibling.nodeName).equals("B") + o(updated.dom.nextSibling).equals(root.childNodes[1]) }) - o("updates empty array to html without key", function() { - var vnodes = [{tag: "[", children: []}] - var updated = [{tag: "<", children: ""}] + o("updates fragment to html without key", function() { + var vnodes = m.fragment(m("a"), m("b")) + var updated = m.trust("") render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(2) - o(updated[0].dom.nodeName).equals("A") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("B") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) + o(updated.dom.nodeName).equals("I") + o(updated.dom).equals(root.childNodes[0]) + o(updated.domSize).equals(2) + o(updated.dom.nextSibling.nodeName).equals("S") + o(updated.dom.nextSibling).equals(root.childNodes[1]) }) - o("updates empty html to array without key", function() { - var vnodes = [{tag: "<", children: ""}] - var updated = [{tag: "[", children: [{tag: "a"}, {tag: "b"}]}] + o("updates html to fragment without key", function() { + var vnodes = m.trust("") + var updated = m.fragment(m("i"), m("s")) render(root, vnodes) render(root, updated) o(root.childNodes.length).equals(2) - o(updated[0].dom.nodeName).equals("A") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("B") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) + o(updated.dom.nodeName).equals("I") + o(updated.dom).equals(root.childNodes[0]) + o(updated.domSize).equals(2) + o(updated.dom.nextSibling.nodeName).equals("S") + o(updated.dom.nextSibling).equals(root.childNodes[1]) }) - o("updates array to html with same key", function() { - var vnodes = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}] - var updated = [{tag: "<", key: 1, children: ""}] - - render(root, vnodes) - render(root, updated) - - o(root.childNodes.length).equals(2) - o(updated[0].dom.nodeName).equals("I") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("S") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) - }) - o("updates html to array with same key", function() { - var vnodes = [{tag: "<", key: 1, children: ""}] - var updated = [{tag: "[", key: 1, children: [{tag: "i"}, {tag: "s"}]}] - - render(root, vnodes) - render(root, updated) - - o(root.childNodes.length).equals(2) - o(updated[0].dom.nodeName).equals("I") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("S") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) - }) - o("updates array to html without key", function() { - var vnodes = [{tag: "[", children: [{tag: "a"}, {tag: "b"}]}] - var updated = [{tag: "<", children: ""}] - - render(root, vnodes) - render(root, updated) - - o(root.childNodes.length).equals(2) - o(updated[0].dom.nodeName).equals("I") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("S") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) - }) - o("updates html to array without key", function() { - var vnodes = [{tag: "<", children: ""}] - var updated = [{tag: "[", children: [{tag: "i"}, {tag: "s"}]}] - - render(root, vnodes) - render(root, updated) - - o(root.childNodes.length).equals(2) - o(updated[0].dom.nodeName).equals("I") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("S") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) - }) - o("updates empty array to html with same key followed by el", function() { - var vnodes = [{tag: "[", key: 1, children: []}, {tag: "i", key: 2}] - var updated = [{tag: "<", key: 1, children: ""}, {tag: "i", key: 2}] + o("populates fragment followed by el keyed", function() { + var vnodes = [m.fragment({key: 1}), m("i", {key: 2})] + var updated = [m.fragment({key: 1}, m("a"), m("b")), m("i", {key: 2})] render(root, vnodes) render(root, updated) @@ -435,69 +383,21 @@ o.spec("updateNodes", function() { o(updated[1].dom.nodeName).equals("I") o(updated[1].dom).equals(root.childNodes[2]) }) - o("updates empty html to array with same key followed by el", function() { - var vnodes = [{tag: "[", key: 1, children: []}, {tag: "i", key: 2}] - var updated = [{tag: "<", key: 1, children: ""}, {tag: "i", key: 2}] - - render(root, vnodes) - render(root, updated) - - o(root.childNodes.length).equals(3) - o(updated[0].dom.nodeName).equals("A") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("B") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) - o(updated[1].dom.nodeName).equals("I") - o(updated[1].dom).equals(root.childNodes[2]) - }) - o("populates array followed by el keyed", function() { - var vnodes = [{tag: "[", key: 1, children: []}, {tag: "i", key: 2}] - var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}, {tag: "i", key: 2}] - - render(root, vnodes) - render(root, updated) - - o(root.childNodes.length).equals(3) - o(updated[0].dom.nodeName).equals("A") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("B") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) - o(updated[1].dom.nodeName).equals("I") - o(updated[1].dom).equals(root.childNodes[2]) - }) - o("throws populates array followed by el keyed", function() { - var vnodes = [{tag: "[", key: 1, children: []}, {tag: "i", key: 2}] - var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}, {tag: "i", key: 2}] - - render(root, vnodes) - render(root, updated) - - o(root.childNodes.length).equals(3) - o(updated[0].dom.nodeName).equals("A") - o(updated[0].dom).equals(root.childNodes[0]) - o(updated[0].domSize).equals(2) - o(updated[0].dom.nextSibling.nodeName).equals("B") - o(updated[0].dom.nextSibling).equals(root.childNodes[1]) - o(updated[1].dom.nodeName).equals("I") - o(updated[1].dom).equals(root.childNodes[2]) - }) - o("throws if array followed by null then el on first render keyed", function() { - var vnodes = [{tag: "[", key: 1, children: []}, null, {tag: "i", key: 2}] + o("throws if fragment followed by null then el on first render keyed", function() { + var vnodes = [m.fragment({key: 1}), null, m("i", {key: 2})] o(function () { render(root, vnodes) }).throws(TypeError) }) - o("throws if array followed by null then el on next render keyed", function() { - var vnodes = [{tag: "[", key: 1, children: []}, {tag: "i", key: 2}] - var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}, null, {tag: "i", key: 2}] + o("throws if fragment followed by null then el on next render keyed", function() { + var vnodes = [m.fragment({key: 1}), m("i", {key: 2})] + var updated = [m.fragment({key: 1}, m("a"), m("b")), null, m("i", {key: 2})] render(root, vnodes) o(function () { render(root, updated) }).throws(TypeError) }) - o("populates childless array replaced followed by el keyed", function() { - var vnodes = [{tag: "[", key: 1}, {tag: "i", key: 2}] - var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}, {tag: "i", key: 2}] + o("populates childless fragment replaced followed by el keyed", function() { + var vnodes = [m.fragment({key: 1}), m("i", {key: 2})] + var updated = [m.fragment({key: 1}, m("a"), m("b")), m("i", {key: 2})] render(root, vnodes) render(root, updated) @@ -511,16 +411,16 @@ o.spec("updateNodes", function() { o(updated[1].dom.nodeName).equals("I") o(updated[1].dom).equals(root.childNodes[2]) }) - o("throws if childless array replaced followed by null then el keyed", function() { - var vnodes = [{tag: "[", key: 1}, {tag: "i", key: 2}] - var updated = [{tag: "[", key: 1, children: [{tag: "a"}, {tag: "b"}]}, null, {tag: "i", key: 2}] + o("throws if childless fragment replaced followed by null then el keyed", function() { + var vnodes = [m.fragment({key: 1}), m("i", {key: 2})] + var updated = [m.fragment({key: 1}, m("a"), m("b")), null, m("i", {key: 2})] render(root, vnodes) o(function () { render(root, updated) }).throws(TypeError) }) o("moves from end to start", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}] - var updated = [{tag: "s", key: 4}, {tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3}), m("s", {key: 4})] + var updated = [m("s", {key: 4}), m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3})] render(root, vnodes) render(root, updated) @@ -536,8 +436,8 @@ o.spec("updateNodes", function() { o(updated[3].dom).equals(root.childNodes[3]) }) o("moves from start to end", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}] - var updated = [{tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}, {tag: "a", key: 1}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3}), m("s", {key: 4})] + var updated = [m("b", {key: 2}), m("i", {key: 3}), m("s", {key: 4}), m("a", {key: 1})] render(root, vnodes) render(root, updated) @@ -553,9 +453,9 @@ o.spec("updateNodes", function() { o(updated[3].dom).equals(root.childNodes[3]) }) o("removes then recreate", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3}), m("s", {key: 4})] var temp = [] - var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}] + var updated = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3}), m("s", {key: 4})] render(root, vnodes) render(root, temp) @@ -572,9 +472,9 @@ o.spec("updateNodes", function() { o(updated[3].dom).equals(root.childNodes[3]) }) o("removes then recreate reversed", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}, {tag: "s", key: 4}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3}), m("s", {key: 4})] var temp = [] - var updated = [{tag: "s", key: 4}, {tag: "i", key: 3}, {tag: "b", key: 2}, {tag: "a", key: 1}] + var updated = [m("s", {key: 4}), m("i", {key: 3}), m("b", {key: 2}), m("a", {key: 1})] render(root, vnodes) render(root, temp) @@ -591,9 +491,9 @@ o.spec("updateNodes", function() { o(updated[3].dom).equals(root.childNodes[3]) }) o("removes then recreate smaller", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "a", key: 1}] + var updated = [m("a", {key: 1})] render(root, vnodes) render(root, temp) @@ -604,9 +504,9 @@ o.spec("updateNodes", function() { o(updated[0].dom).equals(root.childNodes[0]) }) o("removes then recreate bigger", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}] + var updated = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3})] render(root, vnodes) render(root, temp) @@ -621,9 +521,9 @@ o.spec("updateNodes", function() { o(updated[2].dom).equals(root.childNodes[2]) }) o("removes then create different", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "i", key: 3}, {tag: "s", key: 4}] + var updated = [m("i", {key: 3}), m("s", {key: 4})] render(root, vnodes) render(root, temp) @@ -636,9 +536,9 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("removes then create different smaller", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "i", key: 3}] + var updated = [m("i", {key: 3})] render(root, vnodes) render(root, temp) @@ -649,10 +549,10 @@ o.spec("updateNodes", function() { o(updated[0].dom).equals(root.childNodes[0]) }) o("cached keyed nodes move when the list is reversed", function(){ - var a = {tag: "a", key: "a"} - var b = {tag: "b", key: "b"} - var c = {tag: "c", key: "c"} - var d = {tag: "d", key: "d"} + var a = m("a", {key: "a"}) + var b = m("b", {key: "b"}) + var c = m("c", {key: "c"}) + var d = m("d", {key: "d"}) render(root, [a, b, c, d]) render(root, [d, c, b, a]) @@ -665,10 +565,10 @@ o.spec("updateNodes", function() { }) o("cached keyed nodes move when diffed via the map", function() { var onupdate = o.spy() - var a = {tag: "a", key: "a", attrs: {onupdate: onupdate}} - var b = {tag: "b", key: "b", attrs: {onupdate: onupdate}} - var c = {tag: "c", key: "c", attrs: {onupdate: onupdate}} - var d = {tag: "d", key: "d", attrs: {onupdate: onupdate}} + var a = m("a", {key: "a", onupdate: onupdate}) + var b = m("b", {key: "b", onupdate: onupdate}) + var c = m("c", {key: "c", onupdate: onupdate}) + var d = m("d", {key: "d", onupdate: onupdate}) render(root, [a, b, c, d]) render(root, [b, d, a, c]) @@ -681,9 +581,9 @@ o.spec("updateNodes", function() { o(onupdate.callCount).equals(0) }) o("removes then create different bigger", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "i", key: 3}, {tag: "s", key: 4}, {tag: "div", key: 5}] + var updated = [m("i", {key: 3}), m("s", {key: 4}), m("div", {key: 5})] render(root, vnodes) render(root, temp) @@ -698,9 +598,9 @@ o.spec("updateNodes", function() { o(updated[2].dom).equals(root.childNodes[2]) }) o("removes then create mixed", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "a", key: 1}, {tag: "s", key: 4}] + var updated = [m("a", {key: 1}), m("s", {key: 4})] render(root, vnodes) render(root, temp) @@ -713,9 +613,9 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("removes then create mixed reversed", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "s", key: 4}, {tag: "a", key: 1}] + var updated = [m("s", {key: 4}), m("a", {key: 1})] render(root, vnodes) render(root, temp) @@ -728,9 +628,9 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("removes then create mixed smaller", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3})] var temp = [] - var updated = [{tag: "a", key: 1}, {tag: "s", key: 4}] + var updated = [m("a", {key: 1}), m("s", {key: 4})] render(root, vnodes) render(root, temp) @@ -743,9 +643,9 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("removes then create mixed smaller reversed", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}, {tag: "i", key: 3}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2}), m("i", {key: 3})] var temp = [] - var updated = [{tag: "s", key: 4}, {tag: "a", key: 1}] + var updated = [m("s", {key: 4}), m("a", {key: 1})] render(root, vnodes) render(root, temp) @@ -758,9 +658,9 @@ o.spec("updateNodes", function() { o(updated[1].dom).equals(root.childNodes[1]) }) o("removes then create mixed bigger", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "a", key: 1}, {tag: "i", key: 3}, {tag: "s", key: 4}] + var updated = [m("a", {key: 1}), m("i", {key: 3}), m("s", {key: 4})] render(root, vnodes) render(root, temp) @@ -775,9 +675,9 @@ o.spec("updateNodes", function() { o(updated[2].dom).equals(root.childNodes[2]) }) o("removes then create mixed bigger reversed", function() { - var vnodes = [{tag: "a", key: 1}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}), m("b", {key: 2})] var temp = [] - var updated = [{tag: "s", key: 4}, {tag: "i", key: 3}, {tag: "a", key: 1}] + var updated = [m("s", {key: 4}), m("i", {key: 3}), m("a", {key: 1})] render(root, vnodes) render(root, temp) @@ -792,15 +692,15 @@ o.spec("updateNodes", function() { o(updated[2].dom).equals(root.childNodes[2]) }) o("change type, position and length", function() { - var vnodes = {tag: "div", children: [ + var vnodes = m("div", undefined, - {tag: "#", children: "a"} - ]} - var updated = {tag: "div", children: [ - {tag: "[", children: [{tag: "#", children: "b"}]}, + m("#", "a") + ) + var updated = m("div", + m.fragment(m("#", "b")), undefined, undefined - ]} + ) render(root, vnodes) render(root, updated) @@ -808,10 +708,10 @@ o.spec("updateNodes", function() { o(root.firstChild.childNodes.length).equals(1) }) o("removes then recreates then reverses children", function() { - var vnodes = [{tag: "a", key: 1, children: [{tag: "i", key: 3}, {tag: "s", key: 4}]}, {tag: "b", key: 2}] + var vnodes = [m("a", {key: 1}, m("i", {key: 3}), m("s", {key: 4})), m("b", {key: 2})] var temp1 = [] - var temp2 = [{tag: "a", key: 1, children: [{tag: "i", key: 3}, {tag: "s", key: 4}]}, {tag: "b", key: 2}] - var updated = [{tag: "a", key: 1, children: [{tag: "s", key: 4}, {tag: "i", key: 3}]}, {tag: "b", key: 2}] + var temp2 = [m("a", {key: 1}, m("i", {key: 3}), m("s", {key: 4})), m("b", {key: 2})] + var updated = [m("a", {key: 1}, m("s", {key: 4}), m("i", {key: 3})), m("b", {key: 2})] render(root, vnodes) render(root, temp1) @@ -828,9 +728,9 @@ o.spec("updateNodes", function() { o(updated[0].dom.childNodes[1].nodeName).equals("I") }) o("removes then recreates nested", function() { - var vnodes = [{tag: "a", key: 1, children: [{tag: "a", key: 3, children: [{tag: "a", key: 5}]}, {tag: "a", key: 4, children: [{tag: "a", key: 5}]}]}, {tag: "a", key: 2}] + var vnodes = [m("a", {key: 1}, m("a", {key: 3}, m("a", {key: 5})), m("a", {key: 4}, m("a", {key: 5}))), m("a", {key: 2})] var temp = [] - var updated = [{tag: "a", key: 1, children: [{tag: "a", key: 3, children: [{tag: "a", key: 5}]}, {tag: "a", key: 4, children: [{tag: "a", key: 5}]}]}, {tag: "a", key: 2}] + var updated = [m("a", {key: 1}, m("a", {key: 3}, m("a", {key: 5})), m("a", {key: 4}, m("a", {key: 5}))), m("a", {key: 2})] render(root, vnodes) render(root, temp) @@ -843,9 +743,9 @@ o.spec("updateNodes", function() { o(root.childNodes[1].childNodes.length).equals(0) }) o("doesn't recycle", function() { - var vnodes = [{tag: "div", key: 1}] + var vnodes = [m("div", {key: 1})] var temp = [] - var updated = [{tag: "div", key: 1}] + var updated = [m("div", {key: 1})] render(root, vnodes) render(root, temp) @@ -855,9 +755,9 @@ o.spec("updateNodes", function() { o(updated[0].dom.nodeName).equals("DIV") }) o("doesn't recycle when not keyed", function() { - var vnodes = [{tag: "div"}] + var vnodes = [m("div")] var temp = [] - var updated = [{tag: "div"}] + var updated = [m("div")] render(root, vnodes) render(root, temp) @@ -868,9 +768,9 @@ o.spec("updateNodes", function() { o(updated[0].dom.nodeName).equals("DIV") }) o("doesn't recycle deep", function() { - var vnodes = [{tag: "div", children: [{tag: "a", key: 1}]}] - var temp = [{tag: "div"}] - var updated = [{tag: "div", children: [{tag: "a", key: 1}]}] + var vnodes = [m("div", m("a", {key: 1}))] + var temp = [m("div")] + var updated = [m("div", m("a", {key: 1}))] render(root, vnodes) @@ -883,9 +783,9 @@ o.spec("updateNodes", function() { o(updated[0].dom.firstChild.nodeName).equals("A") }) o("mixed unkeyed tags are not broken by recycle", function() { - var vnodes = [{tag: "a"}, {tag: "b"}] - var temp = [{tag: "b"}] - var updated = [{tag: "a"}, {tag: "b"}] + var vnodes = [m("a"), m("b")] + var temp = [m("b")] + var updated = [m("a"), m("b")] render(root, vnodes) render(root, temp) @@ -896,9 +796,9 @@ o.spec("updateNodes", function() { o(root.childNodes[1].nodeName).equals("B") }) o("mixed unkeyed vnode types are not broken by recycle", function() { - var vnodes = [{tag: "[", children: [{tag: "a"}]}, {tag: "b"}] - var temp = [{tag: "b"}] - var updated = [{tag: "[", children: [{tag: "a"}]}, {tag: "b"}] + var vnodes = [m.fragment(m("a")), m("b")] + var temp = [m("b")] + var updated = [m.fragment(m("a")), m("b")] render(root, vnodes) render(root, temp) @@ -911,11 +811,11 @@ o.spec("updateNodes", function() { o("onremove doesn't fire from nodes in the pool (#1990)", function () { var onremove = o.spy() render(root, [ - {tag: "div", children: [{tag: "div", attrs: {onremove: onremove}}]}, - {tag: "div", children: [{tag: "div", attrs: {onremove: onremove}}]} + m("div", m("div", {onremove: onremove})), + m("div", m("div", {onremove: onremove})) ]) render(root, [ - {tag: "div", children: [{tag: "div", attrs: {onremove: onremove}}]} + m("div", m("div", {onremove: onremove})) ]) render(root,[]) @@ -923,7 +823,7 @@ o.spec("updateNodes", function() { }) o("cached, non-keyed nodes skip diff", function () { var onupdate = o.spy(); - var cached = {tag:"a", attrs:{onupdate: onupdate}} + var cached = m("a", {onupdate: onupdate}) render(root, cached) render(root, cached) @@ -932,7 +832,7 @@ o.spec("updateNodes", function() { }) o("cached, keyed nodes skip diff", function () { var onupdate = o.spy() - var cached = {tag:"a", key:"a", attrs:{onupdate: onupdate}} + var cached = m("a", {key: "a", onupdate: onupdate}) render(root, cached) render(root, cached) @@ -942,14 +842,12 @@ o.spec("updateNodes", function() { o("keyed cached elements are re-initialized when brought back from the pool (#2003)", function () { var onupdate = o.spy() var oncreate = o.spy() - var cached = { - tag: "B", key: 1, children: [ - {tag: "A", attrs: {oncreate: oncreate, onupdate: onupdate}, text: "A"} - ] - } - render(root, [{tag: "div", children: [cached]}]) + var cached = m("B", {key: 1}, + m("A", {oncreate: oncreate, onupdate: onupdate}, "A") + ) + render(root, m("div", cached)) render(root, []) - render(root, [{tag: "div", children: [cached]}]) + render(root, m("div", cached)) o(oncreate.callCount).equals(2) o(onupdate.callCount).equals(0) @@ -958,14 +856,12 @@ o.spec("updateNodes", function() { o("unkeyed cached elements are re-initialized when brought back from the pool (#2003)", function () { var onupdate = o.spy() var oncreate = o.spy() - var cached = { - tag: "B", children: [ - {tag: "A", attrs: {oncreate: oncreate, onupdate: onupdate}, text: "A"} - ] - } - render(root, [{tag: "div", children: [cached]}]) + var cached = m("B", + m("A", {oncreate: oncreate, onupdate: onupdate}, "A") + ) + render(root, m("div", cached)) render(root, []) - render(root, [{tag: "div", children: [cached]}]) + render(root, m("div", cached)) o(oncreate.callCount).equals(2) o(onupdate.callCount).equals(0) @@ -974,15 +870,13 @@ o.spec("updateNodes", function() { o("keyed cached elements are re-initialized when brought back from nested pools (#2003)", function () { var onupdate = o.spy() var oncreate = o.spy() - var cached = { - tag: "B", key: 1, children: [ - {tag: "A", attrs: {oncreate: oncreate, onupdate: onupdate}, text: "A"} - ] - } - render(root, [{tag: "div", children: [cached]}]) - render(root, [{tag: "div", children: []}]) + var cached = m("B", {key: 1}, + m("A", {oncreate: oncreate, onupdate: onupdate}, "A") + ) + render(root, m("div", cached)) + render(root, m("div")) render(root, []) - render(root, [{tag: "div", children: [cached]}]) + render(root, m("div", cached)) o(oncreate.callCount).equals(2) o(onupdate.callCount).equals(0) @@ -991,15 +885,13 @@ o.spec("updateNodes", function() { o("unkeyed cached elements are re-initialized when brought back from nested pools (#2003)", function () { var onupdate = o.spy() var oncreate = o.spy() - var cached = { - tag: "B", children: [ - {tag: "A", attrs: {oncreate: oncreate, onupdate: onupdate}, text: "A"} - ] - } - render(root, [{tag: "div", children: [cached]}]) - render(root, [{tag: "div", children: []}]) + var cached = m("B", + m("A", {oncreate: oncreate, onupdate: onupdate}, "A") + ) + render(root, m("div", cached)) + render(root, m("div")) render(root, []) - render(root, [{tag: "div", children: [cached]}]) + render(root, m("div", cached)) o(oncreate.callCount).equals(2) o(onupdate.callCount).equals(0) @@ -1009,9 +901,9 @@ o.spec("updateNodes", function() { var create = o.spy() var update = o.spy() var remove = o.spy() - var vnodes = [{tag: "div"}, {tag: "a", attrs: {oncreate: create, onupdate: update, onremove: remove}}] - var temp = [null, {tag: "a", attrs: {oncreate: create, onupdate: update, onremove: remove}}] - var updated = [{tag: "div"}, {tag: "a", attrs: {oncreate: create, onupdate: update, onremove: remove}}] + var vnodes = [m("div"), m("a", {oncreate: create, onupdate: update, onremove: remove})] + var temp = [null, m("a", {oncreate: create, onupdate: update, onremove: remove})] + var updated = [m("div"), m("a", {oncreate: create, onupdate: update, onremove: remove})] render(root, vnodes) var before = vnodes[1].dom @@ -1028,9 +920,9 @@ o.spec("updateNodes", function() { var create = o.spy() var update = o.spy() var remove = o.spy() - var vnodes = [{tag: "b"}, {tag: "div"}, {tag: "a", attrs: {oncreate: create, onupdate: update, onremove: remove}}] - var temp = [{tag: "b"}, null, {tag: "a", attrs: {oncreate: create, onupdate: update, onremove: remove}}] - var updated = [{tag: "b"}, {tag: "div"}, {tag: "a", attrs: {oncreate: create, onupdate: update, onremove: remove}}] + var vnodes = [m("b"), m("div"), m("a", {oncreate: create, onupdate: update, onremove: remove})] + var temp = [m("b"), null, m("a", {oncreate: create, onupdate: update, onremove: remove})] + var updated = [m("b"), m("div"), m("a", {oncreate: create, onupdate: update, onremove: remove})] render(root, vnodes) var before = vnodes[2].dom @@ -1044,8 +936,8 @@ o.spec("updateNodes", function() { o(remove.callCount).equals(0) }) o("node is recreated if key changes to undefined", function () { - var vnode = {tag: "b", key: 1} - var updated = {tag: "b"} + var vnode = m("b", {key: 1}) + var updated = m("b") render(root, vnode) render(root, updated) @@ -1054,48 +946,49 @@ o.spec("updateNodes", function() { }) o("don't add back elements from fragments that are restored from the pool #1991", function() { render(root, [ - {tag: "[", children: []}, - {tag: "[", children: []} + m.fragment(), + m.fragment() ]) render(root, [ - {tag: "[", children: []}, - {tag: "[", children: [{tag: "div"}]} + m.fragment(), + m.fragment( + m("div") + ) ]) render(root, [ - {tag: "[", children: [null]} + m.fragment(null) ]) render(root, [ - {tag: "[", children: []}, - {tag: "[", children: []} + m.fragment(), + m.fragment() ]) o(root.childNodes.length).equals(0) }) o("don't add back elements from fragments that are being removed #1991", function() { render(root, [ - {tag: "[", children: []}, - {tag: "p"}, + m.fragment(), + m("p"), ]) render(root, [ - {tag: "[", children: [{tag: "div", text: 5}]} + m.fragment( + m("div", 5) + ) ]) render(root, [ - {tag: "[", children: []}, - {tag: "[", children: []} + m.fragment(), + m.fragment() ]) o(root.childNodes.length).equals(0) }) o("handles null values in unkeyed lists of different length (#2003)", function() { - var oncreate = o.spy(); - var onremove = o.spy(); - var onupdate = o.spy(); - function attrs() { - return {oncreate: oncreate, onremove: onremove, onupdate: onupdate} - } + var oncreate = o.spy() + var onremove = o.spy() + var onupdate = o.spy() - render(root, [{tag: "div", attrs: attrs()}, null]); - render(root, [null, {tag: "div", attrs: attrs()}, null]); + render(root, [m("div", {oncreate: oncreate, onremove: onremove, onupdate: onupdate}), null]) + render(root, [null, m("div", {oncreate: oncreate, onremove: onremove, onupdate: onupdate}), null]) o(oncreate.callCount).equals(2) o(onremove.callCount).equals(1) @@ -1103,8 +996,8 @@ o.spec("updateNodes", function() { }) o("supports changing the element of a keyed element in a list when traversed bottom-up", function() { try { - render(root, [{tag: "a", key: 2}]) - render(root, [{tag: "b", key: 1}, {tag: "b", key: 2}]) + render(root, [m("a", {key: 2})]) + render(root, [m("b", {key: 1}), m("b", {key: 2})]) o(root.childNodes.length).equals(2) o(root.childNodes[0].nodeName).equals("B") @@ -1115,8 +1008,8 @@ o.spec("updateNodes", function() { }) o("supports changing the element of a keyed element in a list when looking up nodes using the map", function() { try { - render(root, [{tag: "x", key: 1}, {tag: "y", key: 2}, {tag: "z", key: 3}]) - render(root, [{tag: "b", key: 2}, {tag: "c", key: 1}, {tag: "d", key: 4}, {tag: "e", key: 3}]) + render(root, [m("x", {key: 1}), m("y", {key: 2}), m("z", {key: 3})]) + render(root, [m("b", {key: 2}), m("c", {key: 1}), m("d", {key: 4}), m("e", {key: 3})]) o(root.childNodes.length).equals(4) o(root.childNodes[0].nodeName).equals("B") @@ -1128,15 +1021,15 @@ o.spec("updateNodes", function() { } }) o("don't fetch the nextSibling from the pool", function() { - render(root, [{tag: "[", children: [{tag: "div", key: 1}, {tag: "div", key: 2}]}, {tag: "p"}]) - render(root, [{tag: "[", children: []}, {tag: "p"}]) - render(root, [{tag: "[", children: [{tag: "div", key: 2}, {tag: "div", key: 1}]}, {tag: "p"}]) + render(root, [m.fragment(m("div", {key: 1}), m("div", {key: 2})), m("p")]) + render(root, [m.fragment(), m("p")]) + render(root, [m.fragment(m("div", {key: 2}), m("div", {key: 1})), m("p")]) o([].map.call(root.childNodes, function(el) {return el.nodeName})).deepEquals(["DIV", "DIV", "P"]) }) o("minimizes DOM operations when scrambling a keyed lists", function() { - var vnodes = [{tag: "a", key: "a"}, {tag: "b", key: "b"}, {tag: "c", key: "c"}, {tag: "d", key: "d"}] - var updated = [{tag: "b", key: "b"}, {tag: "a", key: "a"}, {tag: "d", key: "d"}, {tag: "c", key: "c"}] + var vnodes = vnodify("a,b,c,d") + var updated = vnodify("b,a,d,c") var expectedTagNames = updated.map(function(vn) {return vn.tag}) render(root, vnodes) @@ -1152,8 +1045,8 @@ o.spec("updateNodes", function() { o(tagNames).deepEquals(expectedTagNames) }) o("minimizes DOM operations when reversing a keyed lists with an odd number of items", function() { - var vnodes = [{tag: "a", key: "a"}, {tag: "b", key: "b"}, {tag: "c", key: "c"}, {tag: "d", key: "d"}] - var updated = [{tag: "d", key: "d"}, {tag: "c", key: "c"}, {tag: "b", key: "b"}, {tag: "a", key: "a"}] + var vnodes = vnodify("a,b,c,d") + var updated = vnodify("d,c,b,a") var expectedTagNames = updated.map(function(vn) {return vn.tag}) render(root, vnodes) @@ -1169,8 +1062,10 @@ o.spec("updateNodes", function() { o(tagNames).deepEquals(expectedTagNames) }) o("minimizes DOM operations when reversing a keyed lists with an even number of items", function() { - var vnodes = [{tag: "a", key: "a"}, {tag: "b", key: "b"}, {tag: "c", key: "c"}] - var updated = [{tag: "c", key: "c"}, {tag: "b", key: "b"}, {tag: "a", key: "a"}] + var vnodes = vnodify("a,b,c") + var updated = vnodify("c,b,a") + var vnodes = [m("a", {key: "a"}), m("b", {key: "b"}), m("c", {key: "c"})] + var updated = [m("c", {key: "c"}), m("b", {key: "b"}), m("a", {key: "a"})] var expectedTagNames = updated.map(function(vn) {return vn.tag}) render(root, vnodes) @@ -1186,8 +1081,8 @@ o.spec("updateNodes", function() { o(tagNames).deepEquals(expectedTagNames) }) o("minimizes DOM operations when scrambling a keyed lists with prefixes and suffixes", function() { - var vnodes = [{tag: "i", key: "i"}, {tag: "a", key: "a"}, {tag: "b", key: "b"}, {tag: "c", key: "c"}, {tag: "d", key: "d"}, {tag: "j", key: "j"}] - var updated = [{tag: "i", key: "i"}, {tag: "b", key: "b"}, {tag: "a", key: "a"}, {tag: "d", key: "d"}, {tag: "c", key: "c"}, {tag: "j", key: "j"}] + var vnodes = vnodify("i,a,b,c,d,j") + var updated = vnodify("i,b,a,d,c,j") var expectedTagNames = updated.map(function(vn) {return vn.tag}) render(root, vnodes) @@ -1203,8 +1098,8 @@ o.spec("updateNodes", function() { o(tagNames).deepEquals(expectedTagNames) }) o("minimizes DOM operations when reversing a keyed lists with an odd number of items with prefixes and suffixes", function() { - var vnodes = [{tag: "i", key: "i"}, {tag: "a", key: "a"}, {tag: "b", key: "b"}, {tag: "c", key: "c"}, {tag: "d", key: "d"}, {tag: "j", key: "j"}] - var updated = [{tag: "i", key: "i"}, {tag: "d", key: "d"}, {tag: "c", key: "c"}, {tag: "b", key: "b"}, {tag: "a", key: "a"}, {tag: "j", key: "j"}] + var vnodes = vnodify("i,a,b,c,d,j") + var updated = vnodify("i,d,c,b,a,j") var expectedTagNames = updated.map(function(vn) {return vn.tag}) render(root, vnodes) @@ -1220,8 +1115,8 @@ o.spec("updateNodes", function() { o(tagNames).deepEquals(expectedTagNames) }) o("minimizes DOM operations when reversing a keyed lists with an even number of items with prefixes and suffixes", function() { - var vnodes = [{tag: "i", key: "i"}, {tag: "a", key: "a"}, {tag: "b", key: "b"}, {tag: "c", key: "c"}, {tag: "j", key: "j"}] - var updated = [{tag: "i", key: "i"}, {tag: "c", key: "c"}, {tag: "b", key: "b"}, {tag: "a", key: "a"}, {tag: "j", key: "j"}] + var vnodes = vnodify("i,a,b,c,j") + var updated = vnodify("i,c,b,a,j") var expectedTagNames = updated.map(function(vn) {return vn.tag}) render(root, vnodes) @@ -1237,9 +1132,6 @@ o.spec("updateNodes", function() { o(tagNames).deepEquals(expectedTagNames) }) o("scrambling sample 1", function() { - function vnodify(str) { - return str.split(",").map(function(k) {return {tag: k, key: k}}) - } var vnodes = vnodify("k0,k1,k2,k3,k4,k5,k6,k7,k8,k9") var updated = vnodify("k4,k1,k2,k9,k0,k3,k6,k5,k8,k7") var expectedTagNames = updated.map(function(vn) {return vn.tag}) @@ -1257,9 +1149,6 @@ o.spec("updateNodes", function() { o(tagNames).deepEquals(expectedTagNames) }) o("scrambling sample 2", function() { - function vnodify(str) { - return str.split(",").map(function(k) {return {tag: k, key: k}}) - } var vnodes = vnodify("k0,k1,k2,k3,k4,k5,k6,k7,k8,k9") var updated = vnodify("b,d,k1,k0,k2,k3,k4,a,c,k5,k6,k7,k8,k9") var expectedTagNames = updated.map(function(vn) {return vn.tag}) @@ -1283,9 +1172,9 @@ o.spec("updateNodes", function() { o("fragment child toggles from null when followed by null component then tag", function() { var component = createComponent({view: function() {return null}}) - var vnodes = [{tag: "[", children: [{tag: "a"}, {tag: component}, {tag: "b"}]}] - var temp = [{tag: "[", children: [null, {tag: component}, {tag: "b"}]}] - var updated = [{tag: "[", children: [{tag: "a"}, {tag: component}, {tag: "b"}]}] + var vnodes = [m.fragment(m("a"), m(component), m("b"))] + var temp = [m.fragment(null, m(component), m("b"))] + var updated = [m.fragment(m("a"), m(component), m("b"))] render(root, vnodes) render(root, temp) @@ -1297,11 +1186,11 @@ o.spec("updateNodes", function() { }) o("fragment child toggles from null in component when followed by null component then tag", function() { var flag = true - var a = createComponent({view: function() {return flag ? {tag: "a"} : null}}) + var a = createComponent({view: function() {return flag ? m("a") : null}}) var b = createComponent({view: function() {return null}}) - var vnodes = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}] - var temp = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}] - var updated = [{tag: "[", children: [{tag: a}, {tag: b}, {tag: "s"}]}] + var vnodes = [m.fragment(m(a), m(b), m("s"))] + var temp = [m.fragment(m(a), m(b), m("s"))] + var updated = [m.fragment(m(a), m(b), m("s"))] render(root, vnodes) flag = false @@ -1315,10 +1204,10 @@ o.spec("updateNodes", function() { }) o("removing a component that returns a fragment doesn't throw (regression test for incidental bug introduced while debugging some Flems)", function() { var component = createComponent({ - view: function() {return {tag: "[", children:[{tag: "a"}, {tag: "b"}]}} + view: function() {return m.fragment(m("a"), m("b"))} }) try { - render(root, [{tag: component}]) + render(root, [m(component)]) render(root, []) o(root.childNodes.length).equals(0) diff --git a/render/tests/test-updateNodesFuzzer.js b/render/tests/test-updateNodesFuzzer.js index e63a0d8a..0155258a 100644 --- a/render/tests/test-updateNodesFuzzer.js +++ b/render/tests/test-updateNodesFuzzer.js @@ -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()})) diff --git a/render/tests/test-updateText.js b/render/tests/test-updateText.js index 05b33a85..de6b55ef 100644 --- a/render/tests/test-updateText.js +++ b/render/tests/test-updateText.js @@ -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") }) }) diff --git a/test-utils/components.js b/test-utils/components.js index 109af9bb..5ba37044 100644 --- a/test-utils/components.js +++ b/test-utils/components.js @@ -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 } diff --git a/test-utils/tests/test-components.js b/test-utils/tests/test-components.js index 47ad5a7d..941fe7cf 100644 --- a/test-utils/tests/test-components.js +++ b/test-utils/tests/test-components.js @@ -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)