If you already have your HTML written and want to convert it into a Mithril template, paste the HTML below and press the "Convert" button.
+ ++ If you have HTML you want to convert into a Mithril template, paste it below + and press the "Convert" button. In case you're wondering, this itself is a + Mithril app. +
\ No newline at end of file +m.mount(document.getElementById("converter"), templateConverter) + diff --git a/docs/layout/tools/template-converter.js b/docs/layout/tools/template-converter.js index b8cd01cf..55217ba3 100644 --- a/docs/layout/tools/template-converter.js +++ b/docs/layout/tools/template-converter.js @@ -1,90 +1,145 @@ -var templateConverter = {}; +/* global m: false */ +// TODO: ensure this targets the current API. +window.templateConverter = (function () { + "use strict" -templateConverter.DOMFragment = function(markup) { - if (markup.indexOf(" -1) return [new DOMParser().parseFromString(markup, "text/html").childNodes[1]] - var container = document.createElement("div"); - container.insertAdjacentHTML("beforeend", markup); - return container.childNodes; -} -templateConverter.VirtualFragment = function recurse(domFragment) { - var virtualFragment = []; - for (var i = 0, el; el = domFragment[i]; i++) { - if (el.nodeType == 3) { - virtualFragment.push(el.nodeValue); - } - else if (el.nodeType == 1) { - var attrs = {}; - for (var j = 0, attr; attr = el.attributes[j]; j++) { - attrs[attr.name] = attr.value; - } - - virtualFragment.push({tag: el.nodeName.toLowerCase(), attrs: attrs, children: recurse(el.childNodes)}); + function each(list, f) { + for (var i = 0; i < list.length; i++) { + f(list[i], i) } } - return virtualFragment; -} -templateConverter.Template = function recurse() { - if (Object.prototype.toString.call(arguments[0]) == "[object String]") { - return new recurse(new templateConverter.VirtualFragment(new templateConverter.DOMFragment(arguments[0]))); - } - - var virtualFragment = arguments[0], level = arguments[1] - if (!level) level = 1; - - var tab = "\n" + new Array(level + 1).join("\t"); - var virtuals = []; - for (var i = 0, el; el = virtualFragment[i]; i++) { - if (typeof el == "string") { - if (el.match(/\t| {2,}/g) && el.trim().length == 0) virtuals.indented = true; - else virtuals.push('"' + el.replace(/"/g, '\\"').replace(/\r/g, "\\r").replace(/\n/g, "\\n") + '"'); + + function createFragment(markup) { + if (markup.indexOf("= 0) { + return [ + new DOMParser() + .parseFromString(markup, "text/html") + .childNodes[1] + ] } - else { - var virtual = ""; - if (el.tag != "div") virtual += el.tag; - if (el.attrs["class"]) { - virtual += "." + el.attrs["class"].replace(/\t+/g, " ").split(" ").join("."); - delete el.attrs["class"]; + + var container = document.createElement("div") + container.insertAdjacentHTML("beforeend", markup) + return container.childNodes + } + + function createVirtual(fragment) { + var list = [] + + each(fragment, function (el) { + if (el.nodeType === 3) { + list.push(el.nodeValue) + } else if (el.nodeType === 1) { + var attrs = {} + + each(el.attributes, function (attr) { + attrs[attr.name] = attr.value + }) + + list.push({ + tag: el.nodeName.toLowerCase(), + attrs: attrs, + children: createVirtual(el.childNodes) + }) } - var attrNames = Object.keys(el.attrs).sort() - for (var j = 0, attrName; attrName = attrNames[j]; j++) { - if (attrName != "style") virtual += "[" + attrName + "='" + el.attrs[attrName].replace(/'/g, "\\'") + "']"; + }) + + return list + } + + function TemplateBuilder(virtual, level) { + this.virtual = virtual + this.level = level + this.virtuals = [] + this.indented = false + } + + TemplateBuilder.prototype = { + addVirtualString: function (el) { + if (/\t| {2,}/.test(el) && /^\s*/.test(el)) { + this.indented = true + } else { + this.virtuals.push('"' + el.replace(/(["\r\n])/g, "\\$1") + '"') } - if (virtual == "") virtual = "div" - virtual = '"' + virtual + '"'; - - var style = "" + }, + + addVirtualAttrs: function (el) { + var virtual = el.tag === "div" ? "" : el.tag + + if (el.attrs.class) { + virtual += "." + el.attrs.class.replace(/\s+/g, ".") + el.attrs.class = undefined + } + + each(Object.keys(el.attrs).sort(), function (attrName) { + if (attrName === "style") return + virtual += "[" + attrName + "='" + virtual += el.attrs[attrName].replace(/'/g, "\\'") + "']" + }) + + if (virtual === "") virtual = "div" + virtual = '"' + virtual + '"' + if (el.attrs.style) { - virtual += ", {style: " + ("{\"" + el.attrs.style.replace(/:/g, "\": \"").replace(/;/g, "\", \"") + "}").replace(/, "}|"}/, "}") + "}" + var style = "{\"" + el.attrs.style + .replace(/:/g, "\": \"") + .replace(/;/g, "\", \"") + "}" + virtual += ", {style: " + style.replace(/(, )"}/, "}") + "}" } - - if (el.children.length > 0) { - virtual += ", " + recurse(el.children, level + 1); + + if (el.children.length !== 0) { + var builder = new TemplateBuilder(el.children, this.level + 1) + virtual += ", " + builder.complete() + } + + this.virtuals.push("m(" + virtual + ")") + }, + + complete: function () { + var tab = "\n" + for (var i = 0; i <= this.level; i++) tab += "\t" + + each(this.virtual, function (el) { + if (typeof el === "string") { + this.addVirtualString(el) + } else { + this.addVirtualAttrs(el) + } + }.bind(this)) + + if (!this.indented) tab = "" + + if (this.virtuals.length === 1 && this.virtuals[0][0] === "\"") { + return this.virtuals.join(", ") + } else { + var body = this.virtuals.join("," + tab) + return "[" + tab + body + tab.slice(0, -1) + "]" } - virtual = "m(" + virtual + ")"; - virtuals.push(virtual); } } - if (!virtuals.indented) tab = ""; - - var isInline = virtuals.length == 1 && virtuals[0].charAt(0) == '"'; - var template = isInline ? virtuals.join(", ") : "[" + tab + virtuals.join("," + tab) + tab.slice(0, -1) + "]"; - return new String(template); -} -templateConverter.controller = function() { - this.source = m.prop(""); - this.output = m.prop(""); - - this.convert = function() { - return this.output(new templateConverter.Template(this.source())); - }; - -}; + return { + controller: function () { + this.source = m.prop("") + this.output = m.prop("") -templateConverter.view = function(ctrl) { - return m("div", [ - m("textarea", {autofocus: true, style: {width:"100%", height: "40%"}, onchange: m.withAttr("value", ctrl.source)}, ctrl.source()), - m("button", {onclick: ctrl.convert.bind(ctrl)}, "Convert"), - m("textarea", {style: {width:"100%", height: "40%"}}, ctrl.output()) - ]); -}; \ No newline at end of file + this.convert = function () { + var source = createVirtual(createFragment(this.source())) + return this.output(new TemplateBuilder(source, 1).complete()) + }.bind(this) + }, + + view: function (ctrl) { + return m("div", [ + m("textarea", { + autofocus: true, + style: {width: "100%", height: "40%"}, + onchange: m.withAttr("value", ctrl.source) + }, ctrl.source()), + m("button", {onclick: ctrl.convert}, "Convert"), + m("textarea", {style: {width: "100%", height: "40%"}}, + ctrl.output()) + ]) + } + } +})() diff --git a/package.json b/package.json index ffd7ac2e..c84013ae 100644 --- a/package.json +++ b/package.json @@ -1,46 +1,48 @@ { - "name": "mithril", - "description": "Mithril.js beta build - use this to help us test the releases before they are released", - "version": "0.2.1", - "repository": { - "type": "git", - "url": "git@github.com:lhorie/mithril.js.git" - }, - "scripts": { - "test": "grunt test" - }, - "main": "mithril.js", - "devDependencies": { - "grunt": "*", - "grunt-cli": "*", - "grunt-contrib-copy": "*", - "grunt-contrib-uglify": "*", - "grunt-contrib-clean": "*", - "grunt-contrib-concat": "*", - "grunt-execute": "*", - "grunt-md2html": "*", - "grunt-replace": "*", - "grunt-contrib-qunit": "*", - "grunt-zip": "*", - "grunt-jsfmt": "git://github.com/ysimonson/grunt-jsfmt", - - "grunt-contrib-connect": "~0.7.1", - "grunt-contrib-jshint": "~0.10.0", - "grunt-contrib-watch": "~0.6.1", - "grunt-jscs": "^1.1.0", - "grunt-sauce-tunnel": "^0.2.1", - "load-grunt-config": "^0.9.2", - "merge": "^1.1.3", - "publish": "~0.3.2", - "grunt-saucelabs": "*", - "request": "~2.35.0", - "q": "~1.0.0", - "saucelabs": "~0.1.1", - "sauce-tunnel": "~2.0.6", - "colors": "~0.6.2", - "lodash": "~2.4.1" - }, - "main": "mithril.js", - "licenses": [{"type": "MIT", "url": "http://opensource.org/licenses/MIT"}], - "files": ["mithril.min.js", "mithril.min.js.map", "mithril.js", "README.*"] + "name": "mithril", + "description": "Mithril.js beta build - use this to help us test the releases before they are released", + "version": "0.2.1", + "repository": { + "type": "git", + "url": "git@github.com:lhorie/mithril.js.git" + }, + "scripts": { + "test": "grunt test" + }, + "main": "mithril.js", + "devDependencies": { + "chai": "^3.4.0", + "eslint": "^1.7.3", + "grunt": "*", + "grunt-cli": "*", + "grunt-contrib-clean": "*", + "grunt-contrib-connect": "~0.7.1", + "grunt-contrib-copy": "*", + "grunt-contrib-uglify": "*", + "grunt-eslint": "^17.3.1", + "grunt-md2html": "*", + "grunt-mocha-phantomjs": "^2.0.0", + "grunt-replace": "*", + "grunt-saucelabs": "*", + "grunt-saucelabs-browsers": "^0.2.0", + "grunt-zip": "*", + "load-grunt-config": "^0.9.2", + "mocha": "^2.3.3", + "request": "~2.35.0", + "saucelabs": "~0.1.1", + "sinon": "^1.17.2", + "sinon-chai": "^2.8.0" + }, + "licenses": [ + { + "type": "MIT", + "url": "http://opensource.org/licenses/MIT" + } + ], + "files": [ + "mithril.min.js", + "mithril.min.js.map", + "mithril.js", + "README.*" + ] } diff --git a/test-deps/dom.js b/test-deps/dom.js new file mode 100644 index 00000000..e90499dc --- /dev/null +++ b/test-deps/dom.js @@ -0,0 +1,16 @@ +/* eslint-env browser, mocha */ +/* global m, mock */ +this.dom = function (cb) { + "use strict" + context("(requires real DOM)", function () { + before(function () { + m.deps(window) + }) + + after(function () { + m.deps(mock) + }) + + cb() + }) +} diff --git a/test-deps/mock.js b/test-deps/mock.js new file mode 100644 index 00000000..5bf78e80 --- /dev/null +++ b/test-deps/mock.js @@ -0,0 +1,258 @@ +;(function () { // eslint-disable-line no-extra-semi + "use strict" + + /* eslint-disable no-extend-native */ + Array.prototype.forEach = Array.prototype.forEach || function (callback) { + for (var i = 0; i < this.length; i++) { + callback(this[i], i, this) + } + } + + Array.prototype.indexOf = Array.prototype.indexOf || function (item) { + for (var i = 0; i < this.length; i++) { + if (this[i] === item) return i + } + return -1 + } + + Array.prototype.map = Array.prototype.map || function (callback) { + var results = [] + this.forEach(function (value, i, array) { + results.push(callback(value, i, array)) + }) + return results + } + + Array.prototype.filter = Array.prototype.filter || function (callback) { + var results = [] + this.forEach(function (value, i, array) { + if (callback(value, i, array)) results.push(value) + }) + return results + } + + Object.keys = Object.keys || function (obj) { + var keys = [] + for (var i in obj) if ({}.hasOwnProperty.call(obj, i)) { + keys.push(i) + } + return keys + } + /* eslint-enable no-extend-native */ +})() + +window.mock = (function () { + "use strict" + + var window = {} + var document = window.document = { + // FIXME: add document.createRange().createContextualFragment() + + childNodes: [], + + createElement: function (tag) { + return { + style: {}, + childNodes: [], + nodeType: 1, + nodeName: tag.toUpperCase(), + appendChild: document.appendChild, + removeChild: document.removeChild, + replaceChild: document.replaceChild, + insertBefore: function (node, reference) { + node.parentNode = this + var referenceIndex = this.childNodes.indexOf(reference) + + var index = this.childNodes.indexOf(node) + if (index > -1) this.childNodes.splice(index, 1) + + if (referenceIndex < 0) this.childNodes.push(node) + else this.childNodes.splice(referenceIndex, 0, node) + }, + + insertAdjacentHTML: function (position, html) { + // TODO: accept markup + if (position === "beforebegin") { + this.parentNode.insertBefore( + document.createTextNode(html), + this) + } else if (position === "beforeend") { + this.appendChild(document.createTextNode(html)) + } + }, + + setAttribute: function (name, value) { + this[name] = value.toString() + }, + + setAttributeNS: function (namespace, name, value) { + this.namespaceURI = namespace + this[name] = value.toString() + }, + + getAttribute: function (name) { + return this[name] + }, + + addEventListener: function () {}, + removeEventListener: function () {} + } + }, + + createElementNS: function (namespace, tag) { + var element = document.createElement(tag) + element.namespaceURI = namespace + return element + }, + + createTextNode: function (text) { + return {nodeValue: text.toString()} + }, + + replaceChild: function (newChild, oldChild) { + var index = this.childNodes.indexOf(oldChild) + if (index > -1) this.childNodes.splice(index, 1, newChild) + else this.childNodes.push(newChild) + newChild.parentNode = this + oldChild.parentNode = null + }, + + appendChild: function (child) { + var index = this.childNodes.indexOf(child) + if (index > -1) this.childNodes.splice(index, 1) + this.childNodes.push(child) + child.parentNode = this + }, + + removeChild: function (child) { + var index = this.childNodes.indexOf(child) + this.childNodes.splice(index, 1) + child.parentNode = null + }, + + // getElementsByTagName is only used by JSONP tests, it's not required + // by Mithril + getElementsByTagName: function (name) { + name = name.toLowerCase() + var out = [] + + function traverse(node){ + if (node.childNodes && node.childNodes.length > 0) { + node.childNodes.forEach(function (curr) { + if (curr.nodeName.toLowerCase() === name) { + out.push(curr) + } + traverse(curr) + }) + } + } + + traverse(document) + return out + } + } + + document.documentElement = document.createElement("html") + + window.scrollTo = function () {} + + ;(function (window) { + // This is an actual conforming implementation of the + // requestAnimationFrame spec, with the nonstandard extension of + // rAF.$resolve for running the callbacks. It works in Node and the + // browser. + // https://html.spec.whatwg.org/multipage/#animation-frames + // + // Adding and removing callbacks run in constant time. Please don't + // modify this unless it actually has an edge case bug. It will break + // other tests + var callbacks = [] + var id = 0 + var indices = {} + + function requestAnimationFrame(callback) { + id++ + indices[id] = callbacks.length + callbacks.push({ + callback: callback, + id: id + }) + return id + } + + window.cancelAnimationFrame = function (id) { + var index = indices[id] + if (index !== 0) { + indices[id] = 0 + callbacks[index] = undefined + } + } + + var nanotime = typeof process === "object" ? function () { + var time = process.hrtime() // eslint-disable-line no-undef + return time[0] * 1e9 + time[1] + } : typeof performance === "object" ? function () { + return performance.now() + } : function () { + // PhantomJS 1 doesn't have the Performance API implemented. + return +new Date() + } + + requestAnimationFrame.$resolve = function () { + var list = callbacks + callbacks = [] + indices = {} + + for (var i = 0; i < list.length; i++) { + var data = list[i] + if (data !== undefined) { + data.callback.call(data.id, nanotime()) + } + } + } + + window.requestAnimationFrame = requestAnimationFrame + })(window) + + window.XMLHttpRequest = (function () { + function Request() { + this.$headers = {} + + this.setRequestHeader = function (key, value) { + this.$headers[key] = value + } + + this.open = function (method, url) { + this.method = method + this.url = url + } + + this.send = function () { + this.responseText = JSON.stringify(this) + this.readyState = 4 + this.status = 200 + Request.$instances.push(this) + } + } + + Request.$instances = [] + return Request + })() + + var location = window.location = {search: "", pathname: "", hash: ""} + + window.history = { + $$length: 0, + + pushState: function (data, title, url) { + window.history.$$length++ + location.pathname = location.search = location.hash = url + }, + + replaceState: function (data, title, url) { + location.pathname = location.search = location.hash = url + } + } + + return window +})() diff --git a/test/.eslintrc b/test/.eslintrc new file mode 100644 index 00000000..205b7860 --- /dev/null +++ b/test/.eslintrc @@ -0,0 +1,18 @@ +{ + "extends": "../.eslintrc", + "env": { + "mocha": true + }, + "globals": { + "sinon": false, + "expect": false, + "mock": false, + "dom": false, + "m": false + }, + "rules": { + "max-statements": 0, + "no-unused-expressions": 0, + "no-warning-comments": 0 + } +} diff --git a/test/index.html b/test/index.html new file mode 100644 index 00000000..6880ccfe --- /dev/null +++ b/test/index.html @@ -0,0 +1,73 @@ + + +1
2
"), m("i", "foo")]) + expect(root.childNodes[2].tagName).to.equal("I") + }) + + it("works with mixed trusted content in text nodes", function () { + var root = document.createElement("div") + m.render(root, [ + m.trust("1
1232
"), + m("i", "foo") + ]) + expect(root.childNodes[3].tagName).to.equal("I") + }) + + // FIXME: this is a bug (trusted string's contents rendered as just + // textual contents) + xit("works with mixed trusted content in td", function () { + var root = document.createElement("table") + root.appendChild(root = document.createElement("tr")) + + m.render(root, [ + m.trust("+ This page is for testing SVG support in Mithril. This page should contain: +
++ The links should open in a new tab. All items should display title tooltips + when hovered over. +
+ + + + diff --git a/tests/e2e/libs/qunit.css b/tests/e2e/libs/qunit.css deleted file mode 100644 index 2a6a02bf..00000000 --- a/tests/e2e/libs/qunit.css +++ /dev/null @@ -1,244 +0,0 @@ -/** - * QUnit v1.12.0 - A JavaScript Unit Testing Framework - * - * http://qunitjs.com - * - * Copyright 2012 jQuery Foundation and other contributors - * Released under the MIT license. - * http://jquery.org/license - */ - -/** Font Family and Sizes */ - -#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { - font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif; -} - -#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } -#qunit-tests { font-size: smaller; } - - -/** Resets */ - -#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter { - margin: 0; - padding: 0; -} - - -/** Header */ - -#qunit-header { - padding: 0.5em 0 0.5em 1em; - - color: #8699a4; - background-color: #0d3349; - - font-size: 1.5em; - line-height: 1em; - font-weight: normal; - - border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - -webkit-border-top-right-radius: 5px; - -webkit-border-top-left-radius: 5px; -} - -#qunit-header a { - text-decoration: none; - color: #c2ccd1; -} - -#qunit-header a:hover, -#qunit-header a:focus { - color: #fff; -} - -#qunit-testrunner-toolbar label { - display: inline-block; - padding: 0 .5em 0 .1em; -} - -#qunit-banner { - height: 5px; -} - -#qunit-testrunner-toolbar { - padding: 0.5em 0 0.5em 2em; - color: #5E740B; - background-color: #eee; - overflow: hidden; -} - -#qunit-userAgent { - padding: 0.5em 0 0.5em 2.5em; - background-color: #2b81af; - color: #fff; - text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; -} - -#qunit-modulefilter-container { - float: right; -} - -/** Tests: Pass/Fail */ - -#qunit-tests { - list-style-position: inside; -} - -#qunit-tests li { - padding: 0.4em 0.5em 0.4em 2.5em; - border-bottom: 1px solid #fff; - list-style-position: inside; -} - -#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running { - display: none; -} - -#qunit-tests li strong { - cursor: pointer; -} - -#qunit-tests li a { - padding: 0.5em; - color: #c2ccd1; - text-decoration: none; -} -#qunit-tests li a:hover, -#qunit-tests li a:focus { - color: #000; -} - -#qunit-tests li .runtime { - float: right; - font-size: smaller; -} - -.qunit-assert-list { - margin-top: 0.5em; - padding: 0.5em; - - background-color: #fff; - - border-radius: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; -} - -.qunit-collapsed { - display: none; -} - -#qunit-tests table { - border-collapse: collapse; - margin-top: .2em; -} - -#qunit-tests th { - text-align: right; - vertical-align: top; - padding: 0 .5em 0 0; -} - -#qunit-tests td { - vertical-align: top; -} - -#qunit-tests pre { - margin: 0; - white-space: pre-wrap; - word-wrap: break-word; -} - -#qunit-tests del { - background-color: #e0f2be; - color: #374e0c; - text-decoration: none; -} - -#qunit-tests ins { - background-color: #ffcaca; - color: #500; - text-decoration: none; -} - -/*** Test Counts */ - -#qunit-tests b.counts { color: black; } -#qunit-tests b.passed { color: #5E740B; } -#qunit-tests b.failed { color: #710909; } - -#qunit-tests li li { - padding: 5px; - background-color: #fff; - border-bottom: none; - list-style-position: inside; -} - -/*** Passing Styles */ - -#qunit-tests li li.pass { - color: #3c510c; - background-color: #fff; - border-left: 10px solid #C6E746; -} - -#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } -#qunit-tests .pass .test-name { color: #366097; } - -#qunit-tests .pass .test-actual, -#qunit-tests .pass .test-expected { color: #999999; } - -#qunit-banner.qunit-pass { background-color: #C6E746; } - -/*** Failing Styles */ - -#qunit-tests li li.fail { - color: #710909; - background-color: #fff; - border-left: 10px solid #EE5757; - white-space: pre; -} - -#qunit-tests > li:last-child { - border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - -webkit-border-bottom-right-radius: 5px; - -webkit-border-bottom-left-radius: 5px; -} - -#qunit-tests .fail { color: #000000; background-color: #EE5757; } -#qunit-tests .fail .test-name, -#qunit-tests .fail .module-name { color: #000000; } - -#qunit-tests .fail .test-actual { color: #EE5757; } -#qunit-tests .fail .test-expected { color: green; } - -#qunit-banner.qunit-fail { background-color: #EE5757; } - - -/** Result */ - -#qunit-testresult { - padding: 0.5em 0.5em 0.5em 2.5em; - - color: #2b81af; - background-color: #D2E0E6; - - border-bottom: 1px solid white; -} -#qunit-testresult .module-name { - font-weight: bold; -} - -/** Fixture */ - -#qunit-fixture { - position: absolute; - top: -10000px; - left: -10000px; - width: 1000px; - height: 1000px; -} \ No newline at end of file diff --git a/tests/e2e/libs/qunit.js b/tests/e2e/libs/qunit.js deleted file mode 100644 index ba99f1ab..00000000 --- a/tests/e2e/libs/qunit.js +++ /dev/null @@ -1,2212 +0,0 @@ -/** - * QUnit v1.12.0 - A JavaScript Unit Testing Framework - * - * http://qunitjs.com - * - * Copyright 2013 jQuery Foundation and other contributors - * Released under the MIT license. - * https://jquery.org/license/ - */ - -(function( window ) { - -var QUnit, - assert, - config, - onErrorFnPrev, - testId = 0, - fileName = (sourceFromStacktrace( 0 ) || "" ).replace(/(:\d+)+\)?/, "").replace(/.+\//, ""), - toString = Object.prototype.toString, - hasOwn = Object.prototype.hasOwnProperty, - // Keep a local reference to Date (GH-283) - Date = window.Date, - setTimeout = window.setTimeout, - defined = { - setTimeout: typeof window.setTimeout !== "undefined", - sessionStorage: (function() { - var x = "qunit-test-string"; - try { - sessionStorage.setItem( x, x ); - sessionStorage.removeItem( x ); - return true; - } catch( e ) { - return false; - } - }()) - }, - /** - * Provides a normalized error string, correcting an issue - * with IE 7 (and prior) where Error.prototype.toString is - * not properly implemented - * - * Based on http://es5.github.com/#x15.11.4.4 - * - * @param {String|Error} error - * @return {String} error message - */ - errorString = function( error ) { - var name, message, - errorString = error.toString(); - if ( errorString.substring( 0, 7 ) === "[object" ) { - name = error.name ? error.name.toString() : "Error"; - message = error.message ? error.message.toString() : ""; - if ( name && message ) { - return name + ": " + message; - } else if ( name ) { - return name; - } else if ( message ) { - return message; - } else { - return "Error"; - } - } else { - return errorString; - } - }, - /** - * Makes a clone of an object using only Array or Object as base, - * and copies over the own enumerable properties. - * - * @param {Object} obj - * @return {Object} New object with only the own properties (recursively). - */ - objectValues = function( obj ) { - // Grunt 0.3.x uses an older version of jshint that still has jshint/jshint#392. - /*jshint newcap: false */ - var key, val, - vals = QUnit.is( "array", obj ) ? [] : {}; - for ( key in obj ) { - if ( hasOwn.call( obj, key ) ) { - val = obj[key]; - vals[key] = val === Object(val) ? objectValues(val) : val; - } - } - return vals; - }; - -function Test( settings ) { - extend( this, settings ); - this.assertions = []; - this.testNumber = ++Test.count; -} - -Test.count = 0; - -Test.prototype = { - init: function() { - var a, b, li, - tests = id( "qunit-tests" ); - - if ( tests ) { - b = document.createElement( "strong" ); - b.innerHTML = this.nameHtml; - - // `a` initialized at top of scope - a = document.createElement( "a" ); - a.innerHTML = "Rerun"; - a.href = QUnit.url({ testNumber: this.testNumber }); - - li = document.createElement( "li" ); - li.appendChild( b ); - li.appendChild( a ); - li.className = "running"; - li.id = this.id = "qunit-test-output" + testId++; - - tests.appendChild( li ); - } - }, - setup: function() { - if ( - // Emit moduleStart when we're switching from one module to another - this.module !== config.previousModule || - // They could be equal (both undefined) but if the previousModule property doesn't - // yet exist it means this is the first test in a suite that isn't wrapped in a - // module, in which case we'll just emit a moduleStart event for 'undefined'. - // Without this, reporters can get testStart before moduleStart which is a problem. - !hasOwn.call( config, "previousModule" ) - ) { - if ( hasOwn.call( config, "previousModule" ) ) { - runLoggingCallbacks( "moduleDone", QUnit, { - name: config.previousModule, - failed: config.moduleStats.bad, - passed: config.moduleStats.all - config.moduleStats.bad, - total: config.moduleStats.all - }); - } - config.previousModule = this.module; - config.moduleStats = { all: 0, bad: 0 }; - runLoggingCallbacks( "moduleStart", QUnit, { - name: this.module - }); - } - - config.current = this; - - this.testEnvironment = extend({ - setup: function() {}, - teardown: function() {} - }, this.moduleTestEnvironment ); - - this.started = +new Date(); - runLoggingCallbacks( "testStart", QUnit, { - name: this.testName, - module: this.module - }); - - /*jshint camelcase:false */ - - - /** - * Expose the current test environment. - * - * @deprecated since 1.12.0: Use QUnit.config.current.testEnvironment instead. - */ - QUnit.current_testEnvironment = this.testEnvironment; - - /*jshint camelcase:true */ - - if ( !config.pollution ) { - saveGlobal(); - } - if ( config.notrycatch ) { - this.testEnvironment.setup.call( this.testEnvironment, QUnit.assert ); - return; - } - try { - this.testEnvironment.setup.call( this.testEnvironment, QUnit.assert ); - } catch( e ) { - QUnit.pushFailure( "Setup failed on " + this.testName + ": " + ( e.message || e ), extractStacktrace( e, 1 ) ); - } - }, - run: function() { - config.current = this; - - var running = id( "qunit-testresult" ); - - if ( running ) { - running.innerHTML = "Running:| Source: | " + escapeText( source ) + " |
|---|
| Expected: | " + expected + " |
|---|---|
| Result: | " + actual + " |
| Diff: | " + QUnit.diff( expected, actual ) + " |
| Source: | " + escapeText( source ) + " |
| Result: | " + escapeText( actual ) + " |
|---|---|
| Source: | " + escapeText( source ) + " |
id='description'
- * and then types 'Hello World'.
- *
- @codestart
- Syn.click({},'description')
- .type("Hello World")
- @codeend
- * Syn is typically used to simulate user actions as opposed to triggering events. Typing characters
- * is an example of a user action. The keypress that represents an 'a'
- * character being typed is an example of an event.
- *
- * While triggering events is supported, it's much more useful to simulate actual user behavior. The - * following actions are supported by Syn: - *
- *[Syn.prototype.click click] - a mousedown, focus, mouseup, and click.[Syn.prototype.dblclick dblclick] - two click! events followed by a dblclick.[Syn.prototype.key key] - types a single character (keydown, keypress, keyup).[Syn.prototype.type type] - types multiple characters into an element.[Syn.prototype.move move] - moves the mouse from one position to another (triggering mouseover / mouseouts).[Syn.prototype.drag drag] - a mousedown, followed by mousemoves, and a mouseup.focus()
- * doesn't run immediately in IE.
- * If you provide a callback function to Syn, it will
- * be called after the action is completed.
- * You might have noticed the [Syn.prototype.then then] method. It provides chaining - so you can do a sequence of events with a single (final) callback. -
- If an element isn't provided to then, it uses the previous Syn's element. -
- The following does a lot of stuff before checking the result: - @codestart - Syn.type('ice water','title') - .type('ice and water','description') - .click({},'create') - .drag({to: 'favorites'},'newRecipe', - function(){ - ok($('#newRecipe').parents('#favorites').length); - }) - @codeend - -Every browser has very different rules for dispatching key events. - * As there is no way to feature detect how a browser handles key events, - * synthetic uses a description of how the browser behaves generated - * by a recording application.
- *
- * If you want to support a browser not currently supported, you can
- * record that browser's key event description and add it to
- * Syn.key.browsers by it's navigator agent.
- *
Syn.create - contains methods to setup, convert options, and create an event of a specific type.Syn.defaults - default behavior by event type (except for keys).Syn.key.defaults - default behavior by key.Syn.keycodes - supported keys you can type.Syn is really the foundation of JavaScriptMVC's functional testing framework - [FuncUnit]. - * But, we've purposely made Syn work without any dependencies in the hopes that other frameworks or - * testing solutions can use it as well. - *
- * @constructor - * @signature `Syn(type, options, element, callback)` - * Creates a synthetic event on the element. - * @param {Object} type - * @param {Object} options - * @param {Object} element - * @param {Object} callback - * @return {Syn} returns the Syn object. - */ - Syn = function (type, options, element, callback) { - return (new Syn.init(type, options, element, callback)); - }; - - Syn.config = opts; - - // helper for supporting IE8 and below: - // focus will throw in some circumnstances, like element being invisible - Syn.__tryFocus = function tryFocus(element) { - try { - element.focus(); - } catch (e) {} - }; - - bind = function (el, ev, f) { - return el.addEventListener ? el.addEventListener(ev, f, false) : el.attachEvent("on" + ev, f); - }; - unbind = function (el, ev, f) { - return el.addEventListener ? el.removeEventListener(ev, f, false) : el.detachEvent("on" + ev, f); - }; - - schedule = Syn.config.schedule || function (fn, ms) { - setTimeout(fn, ms); - }; - /** - * @Static - */ - extend(Syn, { - /** - * Creates a new synthetic event instance - * @hide - * @param {Object} type - * @param {Object} options - * @param {Object} element - * @param {Object} callback - */ - init: function (type, options, element, callback) { - var args = Syn.args(options, element, callback), - self = this; - this.queue = []; - this.element = args.element; - - //run event - if (typeof this[type] === "function") { - this[type](args.options, args.element, function (defaults, el) { - if (args.callback) { - args.callback.apply(self, arguments); - } - self.done.apply(self, arguments); - }); - } else { - this.result = Syn.trigger(type, args.options, args.element); - if (args.callback) { - args.callback.call(this, args.element, this.result); - } - } - }, - jquery: function (el, fast) { - if (window.FuncUnit && window.FuncUnit.jQuery) { - return window.FuncUnit.jQuery; - } - if (el) { - return Syn.helpers.getWindow(el) - .jQuery || window.jQuery; - } else { - return window.jQuery; - } - }, - /** - * Returns an object with the args for a Syn. - * @hide - * @return {Object} - */ - args: function () { - var res = {}, - i = 0; - for (; i < arguments.length; i++) { - if (typeof arguments[i] === 'function') { - res.callback = arguments[i]; - } else if (arguments[i] && arguments[i].jquery) { - res.element = arguments[i][0]; - } else if (arguments[i] && arguments[i].nodeName) { - res.element = arguments[i]; - } else if (res.options && typeof arguments[i] === 'string') { //we can get by id - res.element = document.getElementById(arguments[i]); - } else if (arguments[i]) { - res.options = arguments[i]; - } - } - return res; - }, - click: function (options, element, callback) { - Syn('click!', options, element, callback); - }, - /** - * @hide - * @attribute defaults - * Default actions for events. Each default function is called with this as its - * element. It should return true if a timeout - * should happen after it. If it returns an element, a timeout will happen - * and the next event will happen on that element. - */ - defaults: { - focus: function focus() { - if (!Syn.support.focusChanges) { - var element = this, - nodeName = element.nodeName.toLowerCase(); - Syn.data(element, "syntheticvalue", element.value); - - //TODO, this should be textarea too - //and this might be for only text style inputs ... hmmmmm .... - if (nodeName === "input" || nodeName === "textarea") { - bind(element, "blur", function () { - if (Syn.data(element, "syntheticvalue") !== element.value) { - - Syn.trigger("change", {}, element); - } - unbind(element, "blur", focus); - }); - - } - } - }, - submit: function () { - Syn.onParents(this, function (el) { - if (el.nodeName.toLowerCase() === 'form') { - el.submit(); - return false; - } - }); - } - }, - changeOnBlur: function (element, prop, value) { - - bind(element, "blur", function onblur() { - if (value !== element[prop]) { - Syn.trigger("change", {}, element); - } - unbind(element, "blur", onblur); - }); - - }, - /** - * Returns the closest element of a particular type. - * @hide - * @param {Object} el - * @param {Object} type - */ - closest: function (el, type) { - while (el && el.nodeName.toLowerCase() !== type.toLowerCase()) { - el = el.parentNode; - } - return el; - }, - /** - * adds jQuery like data (adds an expando) and data exists FOREVER :) - * @hide - * @param {Object} el - * @param {Object} key - * @param {Object} value - */ - data: function (el, key, value) { - var d; - if (!el[expando]) { - el[expando] = id++; - } - if (!data[el[expando]]) { - data[el[expando]] = {}; - } - d = data[el[expando]]; - if (value) { - data[el[expando]][key] = value; - } else { - return data[el[expando]][key]; - } - }, - /** - * Calls a function on the element and all parents of the element until the function returns - * false. - * @hide - * @param {Object} el - * @param {Object} func - */ - onParents: function (el, func) { - var res; - while (el && res !== false) { - res = func(el); - el = el.parentNode; - } - return el; - }, - //regex to match focusable elements - focusable: /^(a|area|frame|iframe|label|input|select|textarea|button|html|object)$/i, - /** - * Returns if an element is focusable - * @hide - * @param {Object} elem - */ - isFocusable: function (elem) { - var attributeNode; - - // IE8 Standards doesn't like this on some elements - if (elem.getAttributeNode) { - attributeNode = elem.getAttributeNode("tabIndex"); - } - - return this.focusable.test(elem.nodeName) || - (attributeNode && attributeNode.specified) && - Syn.isVisible(elem); - }, - /** - * Returns if an element is visible or not - * @hide - * @param {Object} elem - */ - isVisible: function (elem) { - return (elem.offsetWidth && elem.offsetHeight) || (elem.clientWidth && elem.clientHeight); - }, - /** - * Gets the tabIndex as a number or null - * @hide - * @param {Object} elem - */ - tabIndex: function (elem) { - var attributeNode = elem.getAttributeNode("tabIndex"); - return attributeNode && attributeNode.specified && (parseInt(elem.getAttribute('tabIndex')) || 0); - }, - bind: bind, - unbind: unbind, - /** - * @function Syn.schedule schedule() - * @param {Function} fn Function to be ran - * @param {Number} ms Milliseconds to way before calling fn - * @signature `Syn.schedule(fn, ms)` - * @parent config - * - * Schedules a function to be ran later. - * Must be registered prior to Syn loading, otherwise `setTimeout` will be - * used as the scheduler. - * @codestart - * Syn = { - * schedule: function(fn, ms) { - * Platform.run.later(fn, ms); - * } - * }; - * @codeend - */ - schedule: schedule, - browser: browser, - //some generic helpers - helpers: { - createEventObject: createEventObject, - createBasicStandardEvent: function (type, defaults, doc) { - var event; - try { - event = doc.createEvent("Events"); - } catch (e2) { - event = doc.createEvent("UIEvents"); - } finally { - event.initEvent(type, true, true); - extend(event, defaults); - } - return event; - }, - inArray: function (item, array) { - var i = 0; - for (; i < array.length; i++) { - if (array[i] === item) { - return i; - } - } - return -1; - }, - getWindow: function (element) { - if (element.ownerDocument) { - return element.ownerDocument.defaultView || element.ownerDocument.parentWindow; - } - }, - extend: extend, - scrollOffset: function (win, set) { - var doc = win.document.documentElement, - body = win.document.body; - if (set) { - window.scrollTo(set.left, set.top); - - } else { - return { - left: (doc && doc.scrollLeft || body && body.scrollLeft || 0) + (doc.clientLeft || 0), - top: (doc && doc.scrollTop || body && body.scrollTop || 0) + (doc.clientTop || 0) - }; - } - - }, - scrollDimensions: function (win) { - var doc = win.document.documentElement, - body = win.document.body, - docWidth = doc.clientWidth, - docHeight = doc.clientHeight, - compat = win.document.compatMode === "CSS1Compat"; - - return { - height: compat && docHeight || - body.clientHeight || docHeight, - width: compat && docWidth || - body.clientWidth || docWidth - }; - }, - addOffset: function (options, el) { - var jq = Syn.jquery(el), - off; - if (typeof options === 'object' && options.clientX === undefined && options.clientY === undefined && options.pageX === undefined && options.pageY === undefined && jq) { - el = jq(el); - off = el.offset(); - options.pageX = off.left + el.width() / 2; - options.pageY = off.top + el.height() / 2; - } - } - }, - // place for key data - key: { - ctrlKey: null, - altKey: null, - shiftKey: null, - metaKey: null - }, - //triggers an event on an element, returns true if default events should be run - /** - * Dispatches an event and returns true if default events should be run. - * @hide - * @param {Object} event - * @param {Object} element - * @param {Object} type - * @param {Object} autoPrevent - */ - dispatch: function (event, element, type, autoPrevent) { - - // dispatchEvent doesn't always work in IE (mostly in a popup) - if (element.dispatchEvent && event) { - var preventDefault = event.preventDefault, - prevents = autoPrevent ? -1 : 0; - - //automatically prevents the default behavior for this event - //this is to protect agianst nasty browser freezing bug in safari - if (autoPrevent) { - bind(element, type, function ontype(ev) { - ev.preventDefault(); - unbind(this, type, ontype); - }); - } - - event.preventDefault = function () { - prevents++; - if (++prevents > 0) { - preventDefault.apply(this, []); - } - }; - element.dispatchEvent(event); - return prevents <= 0; - } else { - try { - window.event = event; - } catch (e) {} - //source element makes sure element is still in the document - return element.sourceIndex <= 0 || (element.fireEvent && element.fireEvent('on' + type, event)); - } - }, - /** - * @attribute - * @hide - * An object of eventType -> function that create that event. - */ - create: { - //-------- PAGE EVENTS --------------------- - page: { - event: function (type, options, element) { - var doc = Syn.helpers.getWindow(element) - .document || document, - event; - if (doc.createEvent) { - event = doc.createEvent("Events"); - - event.initEvent(type, true, true); - return event; - } else { - try { - event = createEventObject(type, options, element); - } catch (e) {} - return event; - } - } - }, - // unique events - focus: { - event: function (type, options, element) { - Syn.onParents(element, function (el) { - if (Syn.isFocusable(el)) { - if (el.nodeName.toLowerCase() !== 'html') { - Syn.__tryFocus(el); - activeElement = el; - } else if (activeElement) { - // TODO: The HTML element isn't focasable in IE, but it is - // in FF. We should detect this and do a true focus instead - // of just a blur - var doc = Syn.helpers.getWindow(element) - .document; - if (doc !== window.document) { - return false; - } else if (doc.activeElement) { - doc.activeElement.blur(); - activeElement = null; - } else { - activeElement.blur(); - activeElement = null; - } - - } - return false; - } - }); - return true; - } - } - }, - /** - * @attribute support - * @hide - * - * Feature detected properties of a browser's event system. - * Support has the following properties: - * - * - `backspaceWorks` - typing a backspace removes a character - * - `clickChanges` - clicking on an option element creates a change event. - * - `clickSubmits` - clicking on a form button submits the form. - * - `focusChanges` - focus/blur creates a change event. - * - `keypressOnAnchorClicks` - Keying enter on an anchor triggers a click. - * - `keypressSubmits` - enter key submits - * - `keyCharacters` - typing a character shows up - * - `keysOnNotFocused` - enters keys when not focused. - * - `linkHrefJS` - An achor's href JavaScript is run. - * - `mouseDownUpClicks` - A mousedown followed by mouseup creates a click event. - * - `mouseupSubmits` - a mouseup on a form button submits the form. - * - `radioClickChanges` - clicking a radio button changes the radio. - * - `tabKeyTabs` - A tab key changes tabs. - * - `textareaCarriage` - a new line in a textarea creates a carriage return. - * - * - */ - support: { - clickChanges: false, - clickSubmits: false, - keypressSubmits: false, - mouseupSubmits: false, - radioClickChanges: false, - focusChanges: false, - linkHrefJS: false, - keyCharacters: false, - backspaceWorks: false, - mouseDownUpClicks: false, - tabKeyTabs: false, - keypressOnAnchorClicks: false, - optionClickBubbles: false, - ready: 0 - }, - /** - * @function Syn.trigger trigger() - * @parent actions - * @signature `Syn.trigger(type, options, element)` - * Creates a synthetic event and dispatches it on the element. - * This will run any default actions for the element. - * Typically you want to use Syn, but if you want the return value, use this. - * @param {String} type - * @param {Object} options - * @param {HTMLElement} element - * @return {Boolean} true if default events were run, false if otherwise. - */ - trigger: function (type, options, element) { - if (!options) { - options = {}; - } - - var create = Syn.create, - setup = create[type] && create[type].setup, - kind = key.test(type) ? 'key' : (page.test(type) ? "page" : "mouse"), - createType = create[type] || {}, - createKind = create[kind], - event, ret, autoPrevent, dispatchEl = element; - - //any setup code? - if (Syn.support.ready === 2 && setup) { - setup(type, options, element); - } - - autoPrevent = options._autoPrevent; - //get kind - delete options._autoPrevent; - - if (createType.event) { - ret = createType.event(type, options, element); - } else { - //convert options - options = createKind.options ? createKind.options(type, options, element) : options; - - if (!Syn.support.changeBubbles && /option/i.test(element.nodeName)) { - dispatchEl = element.parentNode; //jQuery expects clicks on select - } - - //create the event - event = createKind.event(type, options, dispatchEl); - - //send the event - ret = Syn.dispatch(event, dispatchEl, type, autoPrevent); - } - - if (ret && Syn.support.ready === 2 && Syn.defaults[type]) { - Syn.defaults[type].call(element, options, autoPrevent); - } - return ret; - }, - eventSupported: function (eventName) { - var el = document.createElement("div"); - eventName = "on" + eventName; - - var isSupported = (eventName in el); - if (!isSupported) { - el.setAttribute(eventName, "return;"); - isSupported = typeof el[eventName] === "function"; - } - el = null; - - return isSupported; - } - - }); - /** - * @Prototype - */ - extend(Syn.init.prototype, { - /** - * @function Syn.then then() - * @parent chained - *- * Then is used to chain a sequence of actions to be run one after the other. - * This is useful when many asynchronous actions need to be performed before some - * final check needs to be made. - *
- *The following clicks and types into the id='age' element and then checks that only numeric characters can be entered.
1
2
"), m("i", "foo")]) - equal(dummyEl.childNodes[2].nodeName, "I") -}) -test("mixing trusted content w/ text nodes", function() { - m.render(dummyEl, [m.trust("1
1232
"), m("i", "foo")]) - equal(dummyEl.childNodes[3].nodeName, "I") -}) -test("mixing trusted content w/ td", function() { - m.render(dummyEl, [m.trust("Open the console to see the test report
\ No newline at end of file diff --git a/tests/input-cursor.html b/tests/input-cursor.html deleted file mode 100644 index 8611e06e..00000000 --- a/tests/input-cursor.html +++ /dev/null @@ -1,48 +0,0 @@ -Typing in the fields below should not move the cursor to the end of the input. Especially in Chrome
-All inputs should update with the same value
-Typing in an input should not prevent it from being updated by other inputs
- - - diff --git a/tests/mithril-tests.js b/tests/mithril-tests.js deleted file mode 100644 index f9881430..00000000 --- a/tests/mithril-tests.js +++ /dev/null @@ -1,4425 +0,0 @@ -function testMithril(mock) { - m.deps(mock) - - //m - test(function() {return m.version().constructor === String}) - test(function() {return m("div").tag === "div"}) - test(function() {return m(".foo").tag === "div"}) - test(function() {return m(".foo").attrs.className === "foo"}) - test(function() {return m("[title=bar]").tag === "div"}) - test(function() {return m("[title=bar]").attrs.title === "bar"}) - test(function() {return m("[title=\'bar\']").attrs.title === "bar"}) - test(function() {return m("[title=\"bar\"]").attrs.title === "bar"}) - test(function() {return m("div", "test").children[0] === "test"}) - test(function() {return m("div", "test", "test2").children[1] === "test2"}) - test(function() {return m("div", ["test"]).children[0] === "test"}) - test(function() {return m("div", {title: "bar"}, "test").attrs.title === "bar"}) - test(function() {return m("div", {title: "bar"}, "test").children[0] === "test"}) - test(function() {return m("div", {title: "bar"}, ["test"]).children[0] === "test"}) - test(function() {return m("div", {title: "bar"}, m("div")).children[0].tag === "div"}) - test(function() {return m("div", {title: "bar"}, [m("div")]).children[0].tag === "div"}) - test(function() {return m("div", {title: "bar"}, "test0", "test1", "test2", "test3").children[3] === "test3"}) // splat - test(function() {return m("div", {title: "bar"}, m("div"), m("i"), m("span")).children[2].tag === "span"}) - test(function() {return m("div", ["a", "b"]).children.length === 2}) - test(function() {return m("div", [m("div")]).children[0].tag === "div"}) - test(function() {return m("div", m("div")).children[0].tag === "div"}) //yes, this is expected behavior: see method signature - test(function() {return m("div", [undefined]).tag === "div"}) - test(function() {return m("div", [{foo: "bar"}])}) //as long as it doesn't throw errors, it's fine - test(function() {return m("svg", [m("g")])}) - test(function() {return m("svg", [m("a[href='http://google.com']")])}) - test(function() {return m(".foo", {"class": "bar"}).attrs["class"] === "foo bar"}) - test(function() {return m(".foo", {className: "bar"}).attrs.className === "foo bar"}) - test(function() {return m(".foo", {className: ""}).attrs.className === "foo"}) - test(function() {return m("div", {className: ""}).attrs.className === ""}) //https://github.com/lhorie/mithril.js/issues/382 and 512 - test(function() {return m("div", {"class": ""}).attrs.className === undefined}) - test(function() {return m("div", {className: ""}).attrs["class"] === undefined}) - test(function() {return m("div", {"class": ""}).attrs["class"] === ""}) - test(function() {return m("div", [1, 2, 3], 4).children.length === 2}) - test(function() {return m("div", [1, 2, 3], 4).children[0].length === 3}) - test(function() {return m("div", [1, 2, 3], 4).children[1] === 4}) - test(function() {return m("div", [1, 2, 3]).children.length === 3}) - test(function() {return m("div", [1, 2, 3], [4, 5, 6, 7]).children.length === 2}) - test(function() {return m("div", [1, 2, 3], [4, 5, 6, 7]).children[0].length === 3}) - test(function() {return m("div", [1, 2, 3], [4, 5, 6, 7]).children[1].length === 4}) - test(function() {return m("div", [1], [2], [3]).children.length === 3}) - test(function() { - //class changes shouldn't trigger dom recreation - var v1 = m(".foo", {"class": "", onclick: function() {}}) - var v2 = m(".foo", {"class": "bar", onclick: function() {}}) - return Object.keys(v1.attrs).join() === Object.keys(v2.attrs).join() - }) - test(function() { - //m should proxy object first arg to m.component - var component = { - controller: function(args) { - this.args = args - }, - view: function () { - return m("div", "testing") - } - } - var args = {age: 12} - var c1 = m(component, args).controller() - var c2 = m.component(component, args).controller() - - return c1.args === args && c1.args === c2.args - }) - - //m.mount - test(function() { - var root = mock.document.createElement("div") - var whatever = 1 - var app = { - view: function() { - return [ - whatever % 2 ? m('span', '% 2') : undefined, - m('div', 'bugs'), - m('a') - ] - } - } - m.mount(root, app) - mock.requestAnimationFrame.$resolve() - - whatever++ - m.redraw() - mock.requestAnimationFrame.$resolve() - - whatever++ - m.redraw() - mock.requestAnimationFrame.$resolve() - - return root.childNodes.length - }) - test(function() { - mock.requestAnimationFrame.$resolve() - - var root1 = mock.document.createElement("div") - var mod1 = m.mount(root1, { - controller: function() {this.value = "test1"}, - view: function(ctrl) {return ctrl.value} - }) - - var root2 = mock.document.createElement("div") - var mod2 = m.mount(root2, { - controller: function() {this.value = "test2"}, - view: function(ctrl) {return ctrl.value} - }) - - mock.requestAnimationFrame.$resolve() - - return (root1.childNodes[0].nodeValue === "test1" && root2.childNodes[0].nodeValue === "test2") - && (mod1.value && mod1.value === "test1") && (mod2.value && mod2.value === "test2") - }) - test(function() { - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var unloaded = false - m.mount(root, { - controller: function() { - this.value = "test1" - this.onunload = function() { - unloaded = true - } - }, - view: function(ctrl) {return ctrl.value} - }) - - mock.requestAnimationFrame.$resolve() - - m.mount(root, null) - - mock.requestAnimationFrame.$resolve() - - return unloaded - }) - test(function() { - //component should pass args to both controller and view - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var slot1, slot2 - var component = { - controller: function(options) {slot1 = options.a}, - view: function(ctrl, options) {slot2 = options.a} - } - m.mount(root, m.component(component, {a: 1})) - - mock.requestAnimationFrame.$resolve() - - return slot1 === 1 && slot2 === 1 - }) - test(function() { - //component should work without controller - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var slot2 - var component = { - view: function(ctrl, options) {slot2 = options.a} - } - m.mount(root, m.component(component, {a: 1})) - - mock.requestAnimationFrame.$resolve() - - return slot2 === 1 - }) - test(function() { - //component controller should only run once - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var count1 = 0, count2 = 0 - var component = { - view: function() { - return sub - } - } - var sub = { - controller: function() { - count1++ - }, - view: function() { - count2++ - return m("div", "test") - } - } - m.mount(root, component) - - mock.requestAnimationFrame.$resolve() - - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - return count1 === 1 && count2 === 2 - }) - test(function() { - //sub component controller should only run once - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var count1 = 0, count2 = 0, count3 = 0, count4 = 0 - var component = { - view: function() { - return sub - } - } - var sub = { - controller: function() { - count1++ - }, - view: function() { - count2++ - return subsub - } - } - var subsub = { - controller: function() { - count3++ - }, - view: function() { - count4++ - return m("div", "test") - } - } - m.mount(root, component) - - mock.requestAnimationFrame.$resolve() - - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - return count1 === 1 && count2 === 2 && count3 === 1 && count4 === 2 - }) - test(function() { - //keys in components should work - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var list = [1, 2, 3] - var component = { - controller: function() {}, - view: function() { - return list.map(function(i) { - return m.component(sub, {key: i}) - }) - } - } - var sub = { - controller: function() {}, - view: function() { - return m("div") - } - } - m.mount(root, component) - - var firstBefore = root.childNodes[0] - - mock.requestAnimationFrame.$resolve() - - list.reverse() - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - var firstAfter = root.childNodes[2] - - return firstBefore === firstAfter - }) - test(function() { - //keys in subcomponents should work - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var list = [1, 2, 3] - var component = { - controller: function() {}, - view: function() { - return list.map(function(i) { - return m.component(sub, {key: i}) - }) - } - } - var sub = { - view: function() { - return subsub - } - } - var subsub = { - controller: function() {}, - view: function() { - return m("div") - } - } - m.mount(root, component) - - var firstBefore = root.childNodes[0] - - mock.requestAnimationFrame.$resolve() - - list.reverse() - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - var firstAfter = root.childNodes[2] - - return firstBefore === firstAfter - }) - test(function() { - //keys in components should work even if component internally messes them up - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var list = [1, 2, 3] - var component = { - controller: function() {}, - view: function() { - return list.map(function(i) { - return m.component(sub, {key: i}) - }) - } - } - var sub = { - controller: function() {}, - view: function() { - return m("div", {key: 1}) - } - } - m.mount(root, component) - - var firstBefore = root.childNodes[0] - - mock.requestAnimationFrame.$resolve() - - list.reverse() - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - var firstAfter = root.childNodes[2] - - return firstBefore === firstAfter - }) - test(function() { - //keys in subcomponents should work even if component internally messes them up - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var list = [1, 2, 3] - var component = { - controller: function() {}, - view: function() { - return list.map(function(i) { - return m.component(sub, {key: i}) - }) - } - } - var sub = { - controller: function() {}, - view: function() { - return subsub - } - } - var subsub = { - controller: function() {}, - view: function() { - return m("div", {key: 1}) - } - } - m.mount(root, component) - - var firstBefore = root.childNodes[0] - - mock.requestAnimationFrame.$resolve() - - list.reverse() - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - var firstAfter = root.childNodes[2] - - return firstBefore === firstAfter - }) - test(function() { - //component identity should stay intact if components are descendants of keyed elements - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var list = [1, 2, 3] - var component = { - controller: function() {}, - view: function() { - return list.map(function(i) { - return m("div", {key: i}, sub) - }) - } - } - var sub = { - controller: function() {}, - view: function() { - return m("div") - } - } - m.mount(root, component) - - var firstBefore = root.childNodes[0].childNodes[0] - - mock.requestAnimationFrame.$resolve() - - list.reverse() - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - var firstAfter = root.childNodes[2].childNodes[0] - - return firstBefore === firstAfter - }) - test(function() { - //subcomponent identity should stay intact if components are descendants of keyed elements - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var list = [1, 2, 3] - var component = { - controller: function() {}, - view: function() { - return list.map(function(i) { - return m("div", {key: i}, sub) - }) - } - } - var sub = { - controller: function() {}, - view: function() { - return subsub - } - } - var subsub = { - controller: function() {}, - view: function() { - return m("div") - } - } - m.mount(root, component) - - var firstBefore = root.childNodes[0].childNodes[0] - - mock.requestAnimationFrame.$resolve() - - list.reverse() - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - var firstAfter = root.childNodes[2].childNodes[0] - - return firstBefore === firstAfter - }) - test(function() { - //component should call onunload when removed from template - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var list = [1, 2, 3] - var unloaded - var component = { - controller: function() {}, - view: function() { - return list.map(function(i) { - return m.component(sub, {key: i}) - }) - } - } - var sub = { - controller: function(opts) { - this.onunload = function() { - unloaded = opts.key - } - }, - view: function() { - return m("div") - } - } - m.mount(root, component) - - mock.requestAnimationFrame.$resolve() - - list.pop() - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - return unloaded === 3 - }) - test(function() { - //subcomponent should call onunload when removed from template - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var list = [1, 2, 3] - var unloaded1, unloaded2 - var component = { - controller: function() {}, - view: function() { - return list.map(function(i) { - return m.component(sub, {key: i}) - }) - } - } - var sub = { - controller: function(opts) { - this.onunload = function() { - unloaded1 = opts.key - } - }, - view: function(ctrl, opts) { - return m.component(subsub, {key: opts.key}) - } - } - var subsub = { - controller: function(opts) { - this.onunload = function() { - unloaded2 = opts.key - } - }, - view: function() { - return m("div") - } - } - m.mount(root, component) - - mock.requestAnimationFrame.$resolve() - - list.pop() - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - return unloaded1 === 3 && unloaded2 === 3 - }) - test(function() { - //calling m.redraw synchronously from controller constructor should not trigger extra redraws - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var count = 0 - var component = { - controller: function() {}, - view: function() { - return sub - } - } - var sub = { - controller: function() { - m.redraw() - }, - view: function() { - count++ - return m("div") - } - } - m.mount(root, component) - - mock.requestAnimationFrame.$resolve() - - return count === 1 - }) - test(function() { - //calling m.redraw synchronously from controller constructor should not trigger extra redraws - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var count = 0 - var component = { - controller: function() {}, - view: function() { - return sub - } - } - var sub = { - controller: function() {}, - view: function() { - return subsub - } - } - var subsub = { - controller: function() { - m.redraw() - }, - view: function() { - count++ - return m("div") - } - } - m.mount(root, component) - - mock.requestAnimationFrame.$resolve() - - return count === 1 - }) - test(function() { - //calling preventDefault from component's onunload should prevent route change - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var loaded = false - var testEnabled = true - var component = { - controller: function() {}, - view: function() { - return sub - } - } - var sub = { - controller: function() { - this.onunload = function(e) {if (testEnabled) e.preventDefault()} - }, - view: function() { - return m("div") - } - } - m.route(root, "/a", { - "/a": component, - "/b": {controller: function() {loaded = true}, view: function() {}} - }) - - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - testEnabled = false - - return loaded === false - }) - test(function() { - //calling preventDefault from subcomponent's onunload should prevent route change - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var loaded = false - var testEnabled = true - var component = { - controller: function() {}, - view: function() { - return sub - } - } - var sub = { - controller: function() {}, - view: function() { - return subsub - } - } - var subsub = { - controller: function() { - this.onunload = function(e) {if (testEnabled) e.preventDefault()} - }, - view: function() { - return m("div") - } - } - m.route(root, "/a", { - "/a": component, - "/b": {controller: function() {loaded = true}, view: function() {}} - }) - - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - testEnabled = false - - return loaded === false - }) - test(function() { - //calling preventDefault from non-curried component's onunload should prevent route change - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var loaded = false - var testEnabled = true - var component = { - controller: function() {}, - view: function() { - return sub - } - } - var sub = { - controller: function() { - this.onunload = function(e) {if (testEnabled) e.preventDefault()} - }, - view: function() { - return m("div") - } - } - m.route(root, "/a", { - "/a": component, - "/b": {controller: function() {loaded = true}, view: function() {}} - }) - - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - testEnabled = false - - return loaded === false - }) - test(function() { - //calling preventDefault from non-curried subcomponent's onunload should prevent route change - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var loaded = false - var testEnabled = true - var component = { - controller: function() {}, - view: function() { - return sub - } - } - var sub = { - controller: function() {}, - view: function() { - return subsub - } - } - var subsub = { - controller: function() { - this.onunload = function(e) {if (testEnabled) e.preventDefault()} - }, - view: function() { - return m("div") - } - } - m.route(root, "/a", { - "/a": component, - "/b": {controller: function() {loaded = true}, view: function() {}} - }) - - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - testEnabled = false - - return loaded === false - }) - test(function() { - // nested components under keyed components should render - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var count = 0 - var App = { - controller: function() {}, - view: function() { - return m('.outer', [ - m('.inner', m.component(CommentList, { list: [1, 2, 3] })) - ]) - } - } - var CommentList = { - controller: function() {}, - view: function(ctrl, props) { - return m('.list', props.list.map(function(i) { - return m('.comment', [ - m.component(Reply, {key: i}) - ]) - })) - } - } - var Reply = { - controller: function() {}, - view: function() { - count++ - return m(".reply") - } - } - m.mount(root, App) - - mock.requestAnimationFrame.$resolve() - - return count === 3 - }) - test(function() { - // a route change should initialize a component's controller - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var countA = 0 - var countB = 0 - var subA = { - controller: function(){ countA += 1 }, - view: function() { return m("div") } - } - var subB = { - controller: function() { countB += 1 }, - view: function() { return m("div") } - } - m.route(root, "/a", { - "/a": { - view: function () { - return m('.page-a', [ - m('h1'), m.component(subA, { x: 11 }) - ]) - } - }, - "/b": { - view: function() { - return m('.page-b', [ - m('h2'), m.component(subB, { y: 22 }) - ]) - } - } - }) - - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - m.route("/a") - - mock.requestAnimationFrame.$resolve() - - return countA === 2 && countB === 1 - }) - test(function() { - var root = mock.document.createElement("div") - var component = {}, unloaded = false - component.controller = function() { - this.onunload = function() {unloaded = true} - } - component.view = function() {} - m.mount(root, component) - m.mount(root, {controller: function() {}, view: function() {}}) - - return unloaded === true - }) - test(function() { - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var initCount = 0 - var component = {} - component.view = function() { - return m("div", {config: function(el, init) { - if (!init) initCount++ - }}) - } - m.mount(root, component) - - mock.requestAnimationFrame.$resolve() - - m.redraw() - - mock.requestAnimationFrame.$resolve() - - return initCount === 1 - }) - test(function() { - var root = mock.document.createElement("div") - - var dom = mock.document.createElement("div") - - var show = true - - var component = { - view: function() { - return [ - m(".foo", {key: 1, config: test, onclick: function() {show = !show}}), - show ? m(".bar", {key: 2}) : null - ] - } - } - - function test(el, init) { - if (!init) { - root.appendChild(dom) - } - } - - m.mount(root, component) - - mock.requestAnimationFrame.$resolve() - - show = false - m.redraw() - - mock.requestAnimationFrame.$resolve() - - show = true - m.redraw() - - mock.requestAnimationFrame.$resolve() - - return root.childNodes.length === 3 - }) - test(function() { - var root = mock.document.createElement("div") - var show = true - var testcomponent = { - controller: function() {}, - view: function() { - return m('div', 'component'); - } - } - - var app = { - view: function() { - return show ? [ - m('h1', '1'), - testcomponent - ] : [ - m('h1', '2') - ]; - } - }; - - m.mount(root, app); - - mock.requestAnimationFrame.$resolve() - - show = false - m.redraw() - - mock.requestAnimationFrame.$resolve() - - show = true - m.redraw() - - mock.requestAnimationFrame.$resolve() - - return root.childNodes.length === 2 - }) - test(function() { - // Components should not require a view - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var Component = { - view: function () { - return m('.comp') - } - } - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/foo", { - "/foo": { - view: function() { - return [ Component ] - } - } - }) - - mock.requestAnimationFrame.$resolve() - - return root.childNodes[0].nodeName === "DIV" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/551 - var root = mock.document.createElement("div") - var a = false, found = false, unloaded = false, redraws = 0 - var Root = { - view: function() { - return Comp - } - } - var Comp = { - view: function() { - redraws++ - return m("div", {config: Comp.config}, [ - m("div", {onclick: function() { - a = !a - m.redraw(true) - found = root.childNodes[0].childNodes[1] - }}, "asd"), - a ? m("#a", "aaa") : null, - "test" - ]) - }, - config: function(el, init, ctx) { - if (!init) ctx.onunload = function() { - unloaded = true - } - } - } - m.mount(root, Root) - - var target = root.childNodes[0].childNodes[0] - target.onclick({currentTarget: target}) - - mock.requestAnimationFrame.$resolve() - - return !unloaded && found.id === "a" && redraws === 3 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/551 - var root = mock.document.createElement("div") - var a = false, found = false, unloaded = false, redraws = 0 - var Root = { - view: function() { - return Comp - } - } - var Comp = { - view: function() { - redraws++ - return m("div", {config: Comp.config}, [ - m("div", {onclick: function() { - a = !a - m.redraw(true) - found = root.childNodes[0].childNodes[1] - m.redraw.strategy("none") - }}, "asd"), - a ? m("#a", "aaa") : null, - "test" - ]) - }, - config: function(el, init, ctx) { - if (!init) ctx.onunload = function() { - unloaded = true - } - } - } - m.mount(root, Root) - - var target = root.childNodes[0].childNodes[0] - target.onclick({currentTarget: target}) - - mock.requestAnimationFrame.$resolve() - - return !unloaded && found.id === "a" && redraws === 2 - }) - test(function() { - var root = mock.document.createElement("div") - var redraws = 0 - var Root = { - view: function() { - redraws++ - return m("div", {onclick: function() {m.redraw(true)}}) - } - } - - m.mount(root, Root) - - var target = root.childNodes[0] - target.onclick({currentTarget: target}) - - mock.requestAnimationFrame.$resolve() - - return redraws === 3 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/555 - var root = mock.document.createElement("div") - var MyComponent = { - controller: function(args) { - this.name = args.name; - }, - view: function(ctrl) { - return m('div', ctrl.name); - } - } - var FooPage = { - view: function() { - return m('div', [ - m('a[href=/]', {config: m.route}, 'foo'), - m('a[href=/bar]', {config: m.route}, 'bar'), - m.component(MyComponent, {name: 'Jane'}) - ]); - } - }; - var BarPage = { - view: function() { - return m('div', [ - m('a[href=/]', {config: m.route}, 'foo'), - m('a[href=/bar]', {config: m.route}, 'bar'), - m.component(MyComponent, {name: 'Bob'}) - ]); - } - }; - m.route(root, '/', { - '/': FooPage, - '/bar': BarPage - }) - - mock.requestAnimationFrame.$resolve() - - m.route("/bar") - - mock.requestAnimationFrame.$resolve() - - return root.childNodes[0].childNodes[2].childNodes[0].nodeValue === "Bob" - }) - test(function() { - var root = mock.document.createElement("div") - var redraws = 0, data - var Root = { - view: function() { - return Comp - } - } - - var Comp = { - controller: function() { - this.foo = m.request({method: "GET", url: "/foo"}) - }, - view: function(ctrl) { - redraws++ - data = ctrl.foo() - return m("div") - } - } - - m.mount(root, Root) - - mock.requestAnimationFrame.$resolve() - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - - mock.requestAnimationFrame.$resolve() - m.mount(root, null) - mock.requestAnimationFrame.$resolve() - - return redraws === 1 && data.url === "/foo" - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var redraws1 = 0, redraws2 = 0 - var Root = { - view: function() { - return m("div", [ - Comp1, - Comp2 - ]) - } - } - var Comp1 = { - controller: function() { - this.foo = m.request({method: "GET", url: "/foo"}) - }, - view: function() { - redraws1++ - return m("div") - } - } - var Comp2 = { - controller: function() { - this.bar = m.request({method: "GET", url: "/bar"}) - }, - view: function() { - redraws2++ - return m("div") - } - } - - m.mount(root, Root) - - mock.requestAnimationFrame.$resolve() - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - - mock.requestAnimationFrame.$resolve() - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - - mock.requestAnimationFrame.$resolve() - m.mount(root, null) - mock.requestAnimationFrame.$resolve() - - return redraws1 === 1 && redraws2 === 1 - }) - test(function() { - var root = mock.document.createElement("div") - var redraws1 = 0, redraws2 = 0 - var Root1 = { - view: function() { - return Comp1 - } - } - var Root2 = { - view: function() { - return Comp2 - } - } - var Comp1 = { - controller: function() { - this.foo = m.request({method: "GET", url: "/foo"}) - }, - view: function() { - redraws1++ - return m("div") - } - } - var Comp2 = { - controller: function() { - this.bar = m.request({method: "GET", url: "/bar"}) - }, - view: function() { - redraws2++ - return m("div") - } - } - - - m.route(root, "/", { - "/": Root1, - "/root2": Root2 - }) - - mock.requestAnimationFrame.$resolve() - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - - m.route("/root2") - - - mock.requestAnimationFrame.$resolve() - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - - mock.requestAnimationFrame.$resolve() - m.mount(root, null) - mock.requestAnimationFrame.$resolve() - - return redraws1 === 1 && redraws2 === 1 - }) - test(function() { - var root = mock.document.createElement("div") - - var cond = true - var controller1 = null, controller2 = null - var Root = { - view: function() { - return cond ? Comp1 : Comp2 - } - } - - var Comp1 = { - view: function(ctrl) { - controller1 = ctrl - return m("div") - } - } - var Comp2 = { - view: function(ctrl) { - controller2 = ctrl - return m("div") - } - } - - m.mount(root, Root) - - mock.requestAnimationFrame.$resolve() - - cond = false - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - return controller1 !== controller2 - }) - test(function() { - var root = mock.document.createElement("div") - - var cond = true - var unloaded = false - var Root = { - view: function() { - return cond ? Comp1 : Comp2 - } - } - - var Comp1 = { - view: function() { - return m("div", {config: function(el, init, ctx) { - ctx.onunload = function() {unloaded = true} - }}) - } - } - var Comp2 = { - view: function() { - return m("div") - } - } - - m.mount(root, Root) - - mock.requestAnimationFrame.$resolve() - - cond = false - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - return unloaded - }) - test(function() { - var root = mock.document.createElement("div") - - var cond = true - var initialized = null - var Root = { - view: function() { - return cond ? Comp1 : Comp2 - } - } - - var Comp1 = { - view: function() { - return m("div") - } - } - var Comp2 = { - view: function() { - return m("div", {config: function(el, init) { - initialized = init - }}) - } - } - - m.mount(root, Root) - - mock.requestAnimationFrame.$resolve() - - cond = false - m.redraw(true) - - mock.requestAnimationFrame.$resolve() - - return initialized === false - }) - test(function() { - var root = mock.document.createElement("div") - var el - var FooPage = { - view: function(ctrl) { - return m('div', [ - m('button', {onclick: function() { - ctrl.bar = true; - m.redraw(true); - el = root.childNodes[0].childNodes[1] - }}, 'click me'), - ctrl.bar ? m.component(BarComponent) : '' - ]); - } - }; - var BarComponent = { - view: function() { - return m('#bar', 'test'); - } - }; - m.mount(root, FooPage); - - root.childNodes[0].childNodes[0].onclick({}) - - return el.id === "bar" - }) - - //m.withAttr - test(function() { - //the handler is called with the correct value & context when callbackThis not given - var _this = {}; - var value, context; - var handler = m.withAttr("test", function(data) { - value = data; - context = this; - }); - handler.call(_this, {currentTarget: {test: "foo"}}); - return value === "foo" && context === _this; - }) - test(function() { - //the handler is called with the correct value & context when callbackThis is given - var _this = {}; - var value, context; - var handler = m.withAttr("test", function(data) { - value = data; - context = this; - }, _this); - handler({currentTarget: {test: "foo"}}); - return value === "foo" && context === _this; - }) - - //m.trust - test(function() {return m.trust("test").valueOf() === "test"}) - - //m.render - test(function() { - var root = mock.document.createElement("div") - m.render(root, "test") - return root.childNodes[0].nodeValue === "test" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", {"class": "a"})) - var elementBefore = root.childNodes[0] - m.render(root, m("div", {"class": "b"})) - var elementAfter = root.childNodes[0] - return elementBefore === elementAfter - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m(".a")) - var elementBefore = root.childNodes[0] - m.render(root, m(".b")) - var elementAfter = root.childNodes[0] - return elementBefore === elementAfter - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", {id: "a"})) - var elementBefore = root.childNodes[0] - m.render(root, m("div", {title: "b"})) - var elementAfter = root.childNodes[0] - return elementBefore !== elementAfter - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("#a")) - var elementBefore = root.childNodes[0] - m.render(root, m("[title=b]")) - var elementAfter = root.childNodes[0] - return elementBefore !== elementAfter - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("#a")) - var elementBefore = root.childNodes[0] - m.render(root, "test") - var elementAfter = root.childNodes[0] - return elementBefore !== elementAfter - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", [undefined])) - return root.childNodes[0].childNodes[0].nodeValue === "" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("svg", [m("g")])) - var g = root.childNodes[0].childNodes[0] - return g.nodeName === "G" && g.namespaceURI === "http://www.w3.org/2000/svg" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("svg", [m("a[href='http://google.com']")])) - return root.childNodes[0].childNodes[0].nodeName === "A" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div.classname", [m("a", {href: "/first"})])) - m.render(root, m("div", [m("a", {href: "/second"})])) - return root.childNodes[0].childNodes.length === 1 - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li")])) - m.render(root, m("ul", [m("li"), undefined])) - return root.childNodes[0].childNodes[1].nodeValue === "" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li"), m("li")])) - m.render(root, m("ul", [m("li"), undefined])) - return root.childNodes[0].childNodes[1].nodeValue === "" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li")])) - m.render(root, m("ul", [undefined])) - return root.childNodes[0].childNodes[0].nodeValue === "" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li")])) - m.render(root, m("ul", [{}])) - return root.childNodes[0].childNodes.length === 0 - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li")])) - m.render(root, m("ul", [{tag: "b", attrs: {}}])) - return root.childNodes[0].childNodes[0].nodeName === "B" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li")])) - m.render(root, m("ul", [{tag: new String("b"), attrs: {}}])) - return root.childNodes[0].childNodes[0].nodeName === "B" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li", [m("a")])])) - m.render(root, m("ul", [{subtree: "retain"}])) - return root.childNodes[0].childNodes[0].childNodes[0].nodeName === "A" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/43 - var root = mock.document.createElement("div") - m.render(root, m("a", {config: m.route}, "test")) - m.render(root, m("a", {config: m.route}, "test")) - return root.childNodes[0].childNodes[0].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/44 (1) - var root = mock.document.createElement("div") - m.render(root, m("#foo", [null, m("#bar")])) - m.render(root, m("#foo", ["test", m("#bar")])) - return root.childNodes[0].childNodes[0].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/44 (2) - var root = mock.document.createElement("div") - m.render(root, m("#foo", [null, m("#bar")])) - m.render(root, m("#foo", [m("div"), m("#bar")])) - return root.childNodes[0].childNodes[0].nodeName === "DIV" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/44 (3) - var root = mock.document.createElement("div") - m.render(root, m("#foo", ["test", m("#bar")])) - m.render(root, m("#foo", [m("div"), m("#bar")])) - return root.childNodes[0].childNodes[0].nodeName === "DIV" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/44 (4) - var root = mock.document.createElement("div") - m.render(root, m("#foo", [m("div"), m("#bar")])) - m.render(root, m("#foo", ["test", m("#bar")])) - return root.childNodes[0].childNodes[0].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/44 (5) - var root = mock.document.createElement("div") - m.render(root, m("#foo", [m("#bar")])) - m.render(root, m("#foo", [m("#bar"), [m("#baz")]])) - return root.childNodes[0].childNodes[1].id === "baz" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/48 - var root = mock.document - m.render(root, m("html", [m("#foo")])) - var result = root.childNodes[0].childNodes[0].id === "foo" - root.childNodes = [mock.document.createElement("html")] - return result - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/49 - var root = mock.document.createElement("div") - m.render(root, m("a", "test")) - m.render(root, m("a.foo", "test")) - return root.childNodes[0].childNodes[0].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/49 - var root = mock.document.createElement("div") - m.render(root, m("a.foo", "test")) - m.render(root, m("a", "test")) - return root.childNodes[0].childNodes[0].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/49 - var root = mock.document.createElement("div") - m.render(root, m("a.foo", "test")) - m.render(root, m("a", "test1")) - return root.childNodes[0].childNodes[0].nodeValue === "test1" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/49 - var root = mock.document.createElement("div") - m.render(root, m("a", "test")) - m.render(root, m("a", "test1")) - return root.childNodes[0].childNodes[0].nodeValue === "test1" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/50 - var root = mock.document.createElement("div") - m.render(root, m("#foo", [[m("div", "a"), m("div", "b")], m("#bar")])) - return root.childNodes[0].childNodes[1].childNodes[0].nodeValue === "b" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/50 - var root = mock.document.createElement("div") - m.render(root, m("#foo", [[m("div", "a"), m("div", "b")], m("#bar")])) - m.render(root, m("#foo", [[m("div", "a"), m("div", "b"), m("div", "c")], m("#bar")])) - return root.childNodes[0].childNodes[2].childNodes[0].nodeValue === "c" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/50 - var root = mock.document.createElement("div") - m.render(root, m("#foo", [[m("div", "a"), m("div", "b")], [m("div", "c"), m("div", "d")], m("#bar")])) - return root.childNodes[0].childNodes[3].childNodes[0].nodeValue === "d" && root.childNodes[0].childNodes[4].id === "bar" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/50 - var root = mock.document.createElement("div") - m.render(root, m("#foo", [[m("div", "a"), m("div", "b")], "test"])) - return root.childNodes[0].childNodes[1].childNodes[0].nodeValue === "b" && root.childNodes[0].childNodes[2].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/50 - var root = mock.document.createElement("div") - m.render(root, m("#foo", [["a", "b"], "test"])) - return root.childNodes[0].childNodes[1].nodeValue === "b" && root.childNodes[0].childNodes[2].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/51 - var root = mock.document.createElement("div") - m.render(root, m("main", [m("button"), m("article", [m("section"), m("nav")])])) - m.render(root, m("main", [m("button"), m("article", [m("span"), m("nav")])])) - return root.childNodes[0].childNodes[1].childNodes[0].nodeName === "SPAN" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/51 - var root = mock.document.createElement("div") - m.render(root, m("main", [m("button"), m("article", [m("section"), m("nav")])])) - m.render(root, m("main", [m("button"), m("article", ["test", m("nav")])])) - return root.childNodes[0].childNodes[1].childNodes[0].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/51 - var root = mock.document.createElement("div") - m.render(root, m("main", [m("button"), m("article", [m("section"), m("nav")])])) - m.render(root, m("main", [m("button"), m("article", [m.trust("test"), m("nav")])])) - return root.childNodes[0].childNodes[1].childNodes[0].nodeValue === "test" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/55 - var root = mock.document.createElement("div") - m.render(root, m("#a")) - var elementBefore = root.childNodes[0] - m.render(root, m("#b")) - var elementAfter = root.childNodes[0] - return elementBefore !== elementAfter - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/56 - var root = mock.document.createElement("div") - m.render(root, [null, "foo"]) - m.render(root, ["bar"]) - return root.childNodes.length === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/56 - var root = mock.document.createElement("div") - m.render(root, m("div", "foo")) - return root.childNodes.length === 1 - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", [m("button"), m("ul")])) - var valueBefore = root.childNodes[0].childNodes[0].nodeName - m.render(root, m("div", [undefined, m("ul")])) - var valueAfter = root.childNodes[0].childNodes[0].nodeValue - return valueBefore === "BUTTON" && valueAfter === "" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", [m("ul"), undefined])) - var valueBefore1 = root.childNodes[0].childNodes[0].nodeName - var valueBefore2 = root.childNodes[0].childNodes[1].nodeValue - m.render(root, m("div", [undefined, m("ul")])) - var valueAfter1 = root.childNodes[0].childNodes[0].nodeValue - var valueAfter2 = root.childNodes[0].childNodes[1].nodeName - return valueBefore1 === "UL" && valueAfter1 === "" && valueBefore2 === "" && valueAfter2 === "UL" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/79 - var root = mock.document.createElement("div") - m.render(root, m("div", {style: {background: "red"}})) - var valueBefore = root.childNodes[0].style.background - m.render(root, m("div", {style: {}})) - var valueAfter = root.childNodes[0].style.background - return valueBefore === "red" && valueAfter === "" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div[style='background:red']")) - return root.childNodes[0].style === "background:red" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", {style: {background: "red"}})) - var valueBefore = root.childNodes[0].style.background - m.render(root, m("div", {})) - var valueAfter = root.childNodes[0].style.background - return valueBefore === "red" && valueAfter === undefined - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/87 - var root = mock.document.createElement("div") - m.render(root, m("div", [[m("a"), m("a")], m("button")])) - m.render(root, m("div", [[m("a")], m("button")])) - return root.childNodes[0].childNodes.length === 2 && root.childNodes[0].childNodes[1].nodeName === "BUTTON" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/87 - var root = mock.document.createElement("div") - m.render(root, m("div", [m("a"), m("b"), m("button")])) - m.render(root, m("div", [m("a"), m("button")])) - return root.childNodes[0].childNodes.length === 2 && root.childNodes[0].childNodes[1].nodeName === "BUTTON" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/99 - var root = mock.document.createElement("div") - m.render(root, m("div", [m("img"), m("h1")])) - m.render(root, m("div", [m("a")])) - return root.childNodes[0].childNodes.length === 1 && root.childNodes[0].childNodes[0].nodeName === "A" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/120 - var root = mock.document.createElement("div") - m.render(root, m("div", ["a", "b", "c", "d"])) - m.render(root, m("div", [["d", "e"]])) - var children = root.childNodes[0].childNodes - return children.length === 2 && children[0].nodeValue === "d" && children[1].nodeValue === "e" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/120 - var root = mock.document.createElement("div") - m.render(root, m("div", [["a", "b", "c", "d"]])) - m.render(root, m("div", ["d", "e"])) - var children = root.childNodes[0].childNodes - return children.length === 2 && children[0].nodeValue === "d" && children[1].nodeValue === "e" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/120 - var root = mock.document.createElement("div") - m.render(root, m("div", ["x", [["a"], "b", "c", "d"]])) - m.render(root, m("div", ["d", ["e"]])) - var children = root.childNodes[0].childNodes - return children.length === 2 && children[0].nodeValue === "d" && children[1].nodeValue === "e" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/120 - var root = mock.document.createElement("div") - m.render(root, m("div", ["b"])) - m.render(root, m("div", [["e"]])) - var children = root.childNodes[0].childNodes - return children.length === 1 && children[0].nodeValue === "e" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/120 - var root = mock.document.createElement("div") - m.render(root, m("div", ["a", ["b"]])) - m.render(root, m("div", ["d", [["e"]]])) - var children = root.childNodes[0].childNodes - return children.length === 2 && children[0].nodeValue === "d" && children[1].nodeValue === "e" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/120 - var root = mock.document.createElement("div") - m.render(root, m("div", ["a", [["b"]]])) - m.render(root, m("div", ["d", ["e"]])) - var children = root.childNodes[0].childNodes - return children.length === 2 && children[0].nodeValue === "d" && children[1].nodeValue === "e" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/120 - var root = mock.document.createElement("div") - m.render(root, m("div", ["a", [["b"], "c"]])) - m.render(root, m("div", ["d", [[["e"]], "x"]])) - var children = root.childNodes[0].childNodes - return children.length === 3 && children[0].nodeValue === "d" && children[1].nodeValue === "e" - }) - test(function() { - var root = mock.document.createElement("div") - - var success = false - m.render(root, m("div", {config: function(elem, isInitialized, ctx) {ctx.data = 1}})) - m.render(root, m("div", {config: function(elem, isInitialized, ctx) {success = ctx.data === 1}})) - return success - }) - test(function() { - var root = mock.document.createElement("div") - - var index = 0; - var success = true; - var statefulConfig = function(elem, isInitialized, ctx) {ctx.data = index++} - var node = m("div", {config: statefulConfig}); - m.render(root, [node, node]); - - index = 0; - var checkConfig = function(elem, isInitialized, ctx) { - success = success && (ctx.data === index++) - } - node = m("div", {config: checkConfig}); - m.render(root, [node, node]); - return success; - }) - test(function() { - var root = mock.document.createElement("div") - var parent - m.render(root, m("div", m("a", { - config: function(el) {parent = el.parentNode.parentNode} - }))); - return parent === root - }) - test(function() { - var root = mock.document.createElement("div") - var count = 0 - m.render(root, m("div", m("a", { - config: function() { - var island = mock.document.createElement("div") - count++ - if (count > 2) throw new Error("too much recursion...") - m.render(island, m("div")) - } - }))); - return count === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/129 - var root = mock.document.createElement("div") - m.render(root, m("div", [["foo", "bar"], ["foo", "bar"], ["foo", "bar"]])); - m.render(root, m("div", ["asdf", "asdf2", "asdf3"])); - return true - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/98 - //insert at beginning - var root = mock.document.createElement("div") - m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3)]) - var firstBefore = root.childNodes[0] - m.render(root, [m("a", {key: 4}, 4), m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3)]) - var firstAfter = root.childNodes[1] - return firstBefore === firstAfter && root.childNodes[0].childNodes[0].nodeValue === "4" && root.childNodes.length === 4 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/98 - var root = mock.document.createElement("div") - m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3)]) - var firstBefore = root.childNodes[0] - m.render(root, [m("a", {key: 4}, 4), m("a", {key: 1}, 1), m("a", {key: 2}, 2)]) - var firstAfter = root.childNodes[1] - return firstBefore === firstAfter && root.childNodes[0].childNodes[0].nodeValue === "4" && root.childNodes.length === 3 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/98 - var root = mock.document.createElement("div") - m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3)]) - var firstBefore = root.childNodes[1] - m.render(root, [m("a", {key: 2}, 2), m("a", {key: 3}, 3), m("a", {key: 4}, 4)]) - var firstAfter = root.childNodes[0] - return firstBefore === firstAfter && root.childNodes[0].childNodes[0].nodeValue === "2" && root.childNodes.length === 3 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/98 - var root = mock.document.createElement("div") - m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3), m("a", {key: 4}, 4), m("a", {key: 5}, 5)]) - var firstBefore = root.childNodes[0] - var secondBefore = root.childNodes[1] - var fourthBefore = root.childNodes[3] - m.render(root, [m("a", {key: 4}, 4), m("a", {key: 10}, 10), m("a", {key: 1}, 1), m("a", {key: 2}, 2)]) - var firstAfter = root.childNodes[2] - var secondAfter = root.childNodes[3] - var fourthAfter = root.childNodes[0] - return firstBefore === firstAfter && secondBefore === secondAfter && fourthBefore === fourthAfter && root.childNodes[1].childNodes[0].nodeValue === "10" && root.childNodes.length === 4 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/98 - var root = mock.document.createElement("div") - m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3), m("a", {key: 4}, 4), m("a", {key: 5}, 5)]) - var firstBefore = root.childNodes[0] - var secondBefore = root.childNodes[1] - var fourthBefore = root.childNodes[3] - m.render(root, [m("a", {key: 4}, 4), m("a", {key: 10}, 10), m("a", {key: 2}, 2), m("a", {key: 1}, 1), m("a", {key: 6}, 6), m("a", {key: 7}, 7)]) - var firstAfter = root.childNodes[3] - var secondAfter = root.childNodes[2] - var fourthAfter = root.childNodes[0] - return firstBefore === firstAfter && secondBefore === secondAfter && fourthBefore === fourthAfter && root.childNodes[1].childNodes[0].nodeValue === "10" && root.childNodes[4].childNodes[0].nodeValue === "6" && root.childNodes[5].childNodes[0].nodeValue === "7" && root.childNodes.length === 6 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/149 - var root = mock.document.createElement("div") - m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a"), m("a", {key: 4}), m("a", {key: 5})]) - var firstBefore = root.childNodes[0] - var secondBefore = root.childNodes[1] - var thirdBefore = root.childNodes[2] - var fourthBefore = root.childNodes[3] - var fifthBefore = root.childNodes[4] - m.render(root, [m("a", {key: 4}), m("a", {key: 5}), m("a"), m("a", {key: 1}), m("a", {key: 2})]) - var firstAfter = root.childNodes[3] - var secondAfter = root.childNodes[4] - var thirdAfter = root.childNodes[2] - var fourthAfter = root.childNodes[0] - var fifthAfter = root.childNodes[1] - return firstBefore === firstAfter && secondBefore === secondAfter && thirdBefore === thirdAfter && fourthBefore === fourthAfter && fifthBefore === fifthAfter - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/246 - //insert at beginning with non-keyed in the middle - var root = mock.document.createElement("div") - m.render(root, [m("a", {key: 1}, 1)]) - var firstBefore = root.childNodes[0] - m.render(root, [m("a", {key: 2}, 2), m("br"), m("a", {key: 1}, 1)]) - var firstAfter = root.childNodes[2] - return firstBefore === firstAfter && root.childNodes[0].childNodes[0].nodeValue === "2" && root.childNodes.length === 3 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/134 - var root = mock.document.createElement("div") - m.render(root, m("div", {contenteditable: true}, "test")) - mock.document.activeElement = root.childNodes[0] - m.render(root, m("div", {contenteditable: true}, "test1")) - m.render(root, m("div", {contenteditable: false}, "test2")) - return root.childNodes[0].childNodes[0].nodeValue === "test2" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/136 - var root = mock.document.createElement("div") - m.render(root, m("textarea", ["test"])) - m.render(root, m("textarea", ["test1"])) - return root.childNodes[0].value === "test1" - }) - test(function() { - var root = mock.document.createElement("div") - var unloaded = 0 - m.render(root, [ - m("div", { - key: 1, - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - ]) - m.render(root, [ - m("div", {key: 2}), - m("div", { - key: 1, - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - ]) - return unloaded === 0 - }) - test(function() { - var root = mock.document.createElement("div") - var unloadedParent = 0 - var unloadedChild = 0 - var configParent = function(el, init, ctx) { - ctx.onunload = function() { - unloadedParent++ - } - } - var configChild = function(el, init, ctx) { - ctx.onunload = function() { - unloadedChild++ - } - } - m.render(root, m("div", {config: configParent}, m("a", {config: configChild}))) - m.render(root, m("main", {config: configParent}, m("a", {config: configChild}))) - return unloadedParent === 1 && unloadedChild === 0 - }) - test(function() { - var root = mock.document.createElement("div") - var unloadedParent = 0 - var unloadedChild = 0 - var configParent = function(el, init, ctx) { - ctx.onunload = function() { - unloadedParent++ - } - } - var configChild = function(el, init, ctx) { - ctx.onunload = function() { - unloadedChild++ - } - } - m.render(root, m("div", {config: configParent}, m("a", {config: configChild}))) - m.render(root, m("main", {config: configParent}, m("b", {config: configChild}))) - return unloadedParent === 1 && unloadedChild === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/150 - var root = mock.document.createElement("div") - m.render(root, [m("a"), m("div")]) - m.render(root, [[], m("div")]) - return root.childNodes.length === 1 && root.childNodes[0].nodeName === "DIV" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/156 - var root = mock.document.createElement("div") - m.render(root, m("div", [ - ["a", "b", "c", "d"].map(function() { - return [m("div"), " "] - }), - m("span") - ])) - return root.childNodes[0].childNodes[8].nodeName === "SPAN" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/157 - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 2}, 2), m("li", {key: 4}, 4)])) - m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 3}, 3), m("li", {key: 4}, 4), m("li", {key: 5}, 5)])) - return root.childNodes[0].childNodes.map(function(n) {return n.childNodes[0].nodeValue}).join("") === "012345" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/157 - var root = mock.document.createElement("div") - m.render(root, m("input", {value: "a"})) - m.render(root, m("input", {value: "aa"})) - return root.childNodes[0].childNodes.length === 0 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/157 - var root = mock.document.createElement("div") - m.render(root, m("br", {"class": "a"})) - m.render(root, m("br", {"class": "aa"})) - return root.childNodes[0].childNodes.length === 0 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/194 - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 3}, 3), m("li", {key: 4}, 4), m("li", {key: 5}, 5)])) - m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 4}, 4), m("li", {key: 5}, 5)])) - return root.childNodes[0].childNodes.map(function(n) {return n.childNodes[0].nodeValue}).join("") === "01245" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/194 - var root = mock.document.createElement("div") - m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 3}, 3), m("li", {key: 4}, 4), m("li", {key: 5}, 5)])) - m.render(root, m("ul", [m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 3}, 3), m("li", {key: 4}, 4), m("li", {key: 5}, 5), m("li", {key: 6}, 6)])) - m.render(root, m("ul", [m("li", {key: 12}, 12), m("li", {key: 13}, 13), m("li", {key: 14}, 14), m("li", {key: 15}, 15), m("li", {key: 16}, 16), m("li", {key: 17}, 17)])) - return root.childNodes[0].childNodes.map(function(n) {return n.childNodes[0].nodeValue}).join(",") === "12,13,14,15,16,17" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/206 - var root = mock.document.createElement("div") - m.render(root, m("div", undefined)) - m.render(root, m("div", [m("div")])) - return root.childNodes[0].childNodes.length === 1 - }) - test(function() { - // https://github.com/lhorie/mithril.js/issues/206 - var root = mock.document.createElement("div") - m.render(root, m("div", null)) - m.render(root, m("div", [m("div")])) - return root.childNodes[0].childNodes.length === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/200 - var root = mock.document.createElement("div") - - var unloaded1 = false - function unloadable1(element, isInit, context) { - context.onunload = function() { - unloaded1 = true - } - } - m.render(root, [ m("div", {config: unloadable1}) ]) - m.render(root, [ ]) - - var unloaded2 = false - function unloadable2(element, isInit, context) { - context.onunload = function() { - unloaded2 = true - } - } - m.render(root, [ m("div", {config: unloadable2}) ]) - m.render(root, [ ]) - - return unloaded1 === true && unloaded2 === true - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, [m("div.blue")]) - m.render(root, [m("div.green", [m("div")]), m("div.blue")]) - return root.childNodes.length === 2 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/277 - var root = mock.document.createElement("div") - function Field() { - this.tag = "div"; - this.attrs = {}; - this.children = "hello"; - } - m.render(root, new Field()) - return root.childNodes.length === 1 - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, {foo: 123}) - return root.childNodes.length === 0 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/299 - var root = mock.document.createElement("div") - m.render(root, m("div", [m("div", {key: 1}, 1), m("div", {key: 2}, 2), m("div", {key: 3}, 3), m("div", {key: 4}, 4), m("div", {key: 5}, 5), null, null, null, null, null, null, null, null, null, null])) - m.render(root, m("div", [null, null, m("div", {key: 3}, 3), null, null, m("div", {key: 6}, 6), null, null, m("div", {key: 9}, 9), null, null, m("div", {key: 12}, 12), null, null, m("div", {key: 15}, 15)])) - m.render(root, m("div", [m("div", {key: 1}, 1), m("div", {key: 2}, 2), m("div", {key: 3}, 3), m("div", {key: 4}, 4), m("div", {key: 5}, 5), null, null, null, null, null, null, null, null, null, null])) - return root.childNodes[0].childNodes.map(function(c) {return c.childNodes ? c.childNodes[0].nodeValue : c.nodeValue}).slice(0, 5).join("") === "12345" - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/377 - var root = mock.document.createElement("div") - m.render(root, m("div", [m("div", 1), m("div", 2), [m("div", {key: 3}, 3), m("div", {key: 4}, 4), m("div", {key:5}, 5)], [m("div", {key: 6}, 6)]])) - m.render(root, m("div", [m("div", 1), null, [m("div", {key: 3}, 3), m("div", {key: 4}, 4), m("div", {key:5}, 5)], [m("div", {key: 6}, 6)]])) - return root.childNodes[0].childNodes.map(function(c) {return c.childNodes ? c.childNodes[0].nodeValue : c.nodeValue}).join("") === "13456" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", [console.log()])) // don't throw in Firefox - return true - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, [ - m("#div-1", {key: 1}), - m("#div-2", {key: 2}), - m("#div-3", {key: 3}) - ]) - root.appendChild(root.childNodes[1]) - m.render(root, [ - m("#div-1", {key: 1}), - m("#div-3", {key: 3}), - m("#div-2", {key: 2}) - ]) - return root.childNodes.map(function(node) {return node.id}).join() === "div-1,div-3,div-2" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", function() {})) - return root.childNodes[0].childNodes.length === 0 - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", "foo", m("a"))) - m.render(root, m("div", "test")) - return root.childNodes[0].childNodes.length === 1 - }) - test(function() { - //if an element is preceded by a conditional, it should not lose its identity - var root = mock.document.createElement("div") - m.render(root, m("div", [m("a"), m("input[autofocus]")])) - var before = root.childNodes[0].childNodes[1] - m.render(root, m("div", [undefined, m("input[autofocus]")])) - var after = root.childNodes[0].childNodes[1] - return before === after - }) - test(function() { - //unkeyed element should maintain identity if mixed w/ keyed elements and identity can be inferred - var root = mock.document.createElement("div") - m.render(root, m("div", [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3}), m("i")])) - var before = root.childNodes[0].childNodes[3] - m.render(root, m("div", [m("b", {key: 3}), m("b", {key: 4}), m("i"), m("b", {key: 1})])) - var after = root.childNodes[0].childNodes[2] - return before === after - }) - test(function() { - //unkeyed element should maintain identity if mixed w/ keyed elements and text nodes and identity can be inferred - var root = mock.document.createElement("div") - m.render(root, m("div", [m("a", {key: 1}), m("a", {key: 2}), "foo", m("a", {key: 3}), m("i")])) - var before = root.childNodes[0].childNodes[4] - m.render(root, m("div", [m("a", {key: 3}), m("a", {key: 4}), "bar", m("i"), m("a", {key: 1})])) - var after = root.childNodes[0].childNodes[3] - return before === after - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", [m("a", {key: 1}), m("a", {key: 2}), null, m("a", {key: 3}), m("i")])) - var before = root.childNodes[0].childNodes[4] - m.render(root, m("div", [m("a", {key: 3}), m("a", {key: 4}), null, m("i"), m("a", {key: 1})])) - var after = root.childNodes[0].childNodes[3] - return before === after - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", [m("a", {key: 1}), m("a", {key: 2}), undefined, m("a", {key: 3}), m("i")])) - var before = root.childNodes[0].childNodes[4] - m.render(root, m("div", [m("a", {key: 3}), m("a", {key: 4}), undefined, m("i"), m("a", {key: 1})])) - var after = root.childNodes[0].childNodes[3] - return before === after - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m("div", [m("a", {key: 1}), m("a", {key: 2}), m.trust("a"), m("a", {key: 3}), m("i")])) - var before = root.childNodes[0].childNodes[4] - m.render(root, m("div", [m("a", {key: 3}), m("a", {key: 4}), m.trust("a"), m("i"), m("a", {key: 1})])) - var after = root.childNodes[0].childNodes[3] - return before === after - }) - test(function() { - var root = mock.document.createElement("div") - var vdom = m("div.a", {"class": undefined}) - m.render(root, vdom) - return root.childNodes[0]["class"] === "a" - }) - test(function() { - var root = mock.document.createElement("div") - m.render(root, m(".a", [1])) - m.render(root, m(".a", [])) - return root.childNodes[0].childNodes.length === 0 - }) - //end m.render - - //m.redraw - test(function() { - mock.requestAnimationFrame.$resolve() //setup - var controller - var root = mock.document.createElement("div") - m.mount(root, { - controller: function() {controller = this}, - view: function(ctrl) {return ctrl.value} - }) - mock.requestAnimationFrame.$resolve() - var valueBefore = root.childNodes[0].nodeValue - controller.value = "foo" - m.redraw() - mock.requestAnimationFrame.$resolve() - return valueBefore === "" && root.childNodes[0].nodeValue === "foo" - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - var count = 0 - var root = mock.document.createElement("div") - m.mount(root, { - controller: function() {}, - view: function() { - count++ - } - }) - mock.requestAnimationFrame.$resolve() //teardown - m.redraw() //should run synchronously - - m.redraw() //rest should run asynchronously since they're spamming - m.redraw() - m.redraw() - mock.requestAnimationFrame.$resolve() //teardown - - return count === 3 - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - var count = 0 - var root = mock.document.createElement("div") - m.mount(root, { - controller: function() {}, - view: function() { - count++ - } - }) - mock.requestAnimationFrame.$resolve() //teardown - m.redraw(true) //should run synchronously - - m.redraw(true) //forced to run synchronously - m.redraw(true) - m.redraw(true) - mock.requestAnimationFrame.$resolve() //teardown - return count === 5 - }) - - //m.route - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/test1", { - "/test1": {controller: function() {}, view: function() {return "foo"}} - }) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test1" && root.childNodes[0].nodeValue === "foo" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.pathname = "/" - - var root = mock.document.createElement("div") - m.route.mode = "pathname" - m.route(root, "/test2", { - "/test2": { - controller: function() {}, - view: function() { - return [ - "foo", - m("a", { href: "/test2", config: m.route }, "Test2") - ] - } - } - }) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.pathname === "/test2" && root.childNodes[0].nodeValue === "foo" && root.childNodes[1].href === "/test2" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.hash = "#" - - var root = mock.document.createElement("div") - m.route.mode = "hash" - m.route(root, "/test3", { - "/test3": {controller: function() {}, view: function() {return "foo"}} - }) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.hash === "#/test3" && root.childNodes[0].nodeValue === "foo" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/test4/foo", { - "/test4/:test": {controller: function() {}, view: function() {return m.route.param("test")}} - }) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test4/foo" && root.childNodes[0].nodeValue === "foo" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var component = {controller: function() {}, view: function() {return m.route.param("test")}} - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/test5/foo", { - "/": component, - "/test5/:test": component - }) - var paramValueBefore = m.route.param("test") - mock.requestAnimationFrame.$resolve() - m.route("/") - var paramValueAfter = m.route.param("test") - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/" && paramValueBefore === "foo" && paramValueAfter === undefined - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var component = {controller: function() {}, view: function() {return m.route.param("a1")}} - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/test6/foo", { - "/": component, - "/test6/:a1": component - }) - var paramValueBefore = m.route.param("a1") - mock.requestAnimationFrame.$resolve() - m.route("/") - var paramValueAfter = m.route.param("a1") - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/" && paramValueBefore === "foo" && paramValueAfter === undefined - - m.mount(root, null) //teardown - - return result - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/61 - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var component = {controller: function() {}, view: function() {return m.route.param("a1")}} - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/test7/foo", { - "/": component, - "/test7/:a1": component - }) - var routeValueBefore = m.route() - mock.requestAnimationFrame.$resolve() - m.route("/") - var routeValueAfter = m.route() - mock.requestAnimationFrame.$resolve() - - var result = routeValueBefore === "/test7/foo" && routeValueAfter === "/" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/test8/foo/SEP/bar/baz", { - "/test8/:test/SEP/:path...": { - controller: function() {}, - view: function() { - return m.route.param("test") + "_" + m.route.param("path") - } - } - }) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test8/foo/SEP/bar/baz" && root.childNodes[0].nodeValue === "foo_bar/baz" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/test9/foo/bar/SEP/baz", { - "/test9/:test.../SEP/:path": { - controller: function() {}, - view: function() { - return m.route.param("test") + "_" + m.route.param("path") - } - } - }) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test9/foo/bar/SEP/baz" && root.childNodes[0].nodeValue === "foo/bar_baz" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/test10/foo%20bar", { - "/test10/:test": { - controller: function() {}, - view: function() { - return m.route.param("test") - } - } - }) - mock.requestAnimationFrame.$resolve() - - var result = root.childNodes[0].nodeValue === "foo bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {}, view: function() {return "foo"}}, - "/test11": {controller: function() {}, view: function() {return "bar"}} - }) - mock.requestAnimationFrame.$resolve() - m.route("/test11/") - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test11/" && root.childNodes[0].nodeValue === "bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {}, view: function() {}}, - "/test12": {controller: function() {}, view: function() {}} - }) - mock.requestAnimationFrame.$resolve() - m.route("/test12?a=foo&b=bar") - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test12?a=foo&b=bar" && m.route.param("a") === "foo" && m.route.param("b") === "bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {}, view: function() {return "bar"}}, - "/test13/:test": {controller: function() {}, view: function() {return m.route.param("test")}} - }) - mock.requestAnimationFrame.$resolve() - m.route("/test13/foo?test=bar") - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test13/foo?test=bar" && root.childNodes[0].nodeValue === "foo" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {}, view: function() {return "bar"}}, - "/test14": {controller: function() {}, view: function() {return "foo"}} - }) - mock.requestAnimationFrame.$resolve() - m.route("/test14?test&test2=") - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test14?test&test2=" && m.route.param("test") == null && m.route.param("test2") === "" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {}, view: function() {}}, - "/test12": {controller: function() {}, view: function() {}} - }) - mock.requestAnimationFrame.$resolve() - m.route("/test12", {a: "foo", b: "bar"}) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test12?a=foo&b=bar" && m.route.param("a") === "foo" && m.route.param("b") === "bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { // test route params returning params object if no key is given - mock.requestAnimationFrame.$resolve() //setup - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {}, view: function() {}}, - "/test12": {controller: function() {}, view: function() {}} - }) - mock.requestAnimationFrame.$resolve() - m.route("/test12", {a: "foo", b: "bar"}) - mock.requestAnimationFrame.$resolve() - - var params = m.route.param(); - - var result = params.a === "foo" && params.b === "bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var route1, route2 - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {route1 = m.route()}, view: function() {}}, - "/test13": {controller: function() {route2 = m.route()}, view: function() {}} - }) - mock.requestAnimationFrame.$resolve() - m.route("/test13") - mock.requestAnimationFrame.$resolve() - - var result = route1 === "/" && route2 === "/test13" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var unloaded = 0 - m.route.mode = "search" - m.route(root, "/", { - "/": { - controller: function() {}, - view: function() { - return m("div", { - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - } - }, - "/test14": {controller: function() {}, view: function() {}} - }) - mock.requestAnimationFrame.$resolve() - m.route("/test14") - mock.requestAnimationFrame.$resolve() - - var result = unloaded === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var unloaded = 0 - m.route.mode = "search" - m.route(root, "/", { - "/": { - controller: function() {}, - view: function() { - return [ - m("div"), - m("div", { - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - ] - } - }, - "/test15": { - controller: function() {}, - view: function() { - return [m("div")] - } - } - }) - mock.requestAnimationFrame.$resolve() - m.route("/test15") - mock.requestAnimationFrame.$resolve() - - var result = unloaded === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var unloaded = 0 - m.route.mode = "search" - m.route(root, "/", { - "/": { - controller: function() {}, - view: function() { - return m("div", { - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - } - }, - "/test16": { - controller: function() {}, - view: function() { - return m("a") - } - } - }) - mock.requestAnimationFrame.$resolve() - m.route("/test16") - mock.requestAnimationFrame.$resolve() - - var result = unloaded === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var unloaded = 0 - m.route.mode = "search" - m.route(root, "/", { - "/": { - controller: function() {}, - view: function() { - return [ - m("div", { - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - ] - } - }, - "/test17": { - controller: function() {}, - view: function() { - return m("a") - } - } - }) - mock.requestAnimationFrame.$resolve() - m.route("/test17") - mock.requestAnimationFrame.$resolve() - - var result = unloaded === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var unloaded = 0 - m.route.mode = "search" - m.route(root, "/", { - "/": { - controller: function() {}, - view: function() { - return m("div", { - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - } - }, - "/test18": { - controller: function() {}, - view: function() { - return [m("a")] - } - } - }) - mock.requestAnimationFrame.$resolve() - m.route("/test18") - mock.requestAnimationFrame.$resolve() - - var result = unloaded === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var unloaded = 0 - m.route.mode = "search" - m.route(root, "/", { - "/": { - controller: function() {}, - view: function() { - return [ - m("div", { - key: 1, - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - ] - } - }, - "/test20": { - controller: function() {}, - view: function() { - return [ - m("div", { - key: 2, - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - ] - } - } - }) - mock.requestAnimationFrame.$resolve() - m.route("/test20") - mock.requestAnimationFrame.$resolve() - - var result = unloaded === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var unloaded = 0 - m.route.mode = "search" - m.route(root, "/", { - "/": { - controller: function() {}, - view: function() { - return [ - m("div", { - key: 1, - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - ] - } - }, - "/test21": { - controller: function() {}, - view: function() { - return [ - m("div", { - config: function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - }) - ] - } - } - }) - mock.requestAnimationFrame.$resolve() - m.route("/test21") - mock.requestAnimationFrame.$resolve() - - var result = unloaded === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/foo", { - "/foo": { - controller: function() {}, - view: function() { - return m("div", "foo"); - } - }, - "/bar": { - controller: function() {}, - view: function() { - return m("div", "bar"); - } - } - }) - mock.requestAnimationFrame.$resolve() - var foo = root.childNodes[0].childNodes[0].nodeValue; - m.route("/bar") - mock.requestAnimationFrame.$resolve() - var bar = root.childNodes[0].childNodes[0].nodeValue; - - var result = (foo === "foo" && bar === "bar") - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var unloaded = 0 - var config = function(el, init, ctx) { - ctx.onunload = function() { - unloaded++ - } - } - m.route.mode = "search" - m.route(root, "/foo1", { - "/foo1": { - controller: function() {}, - view: function() { - return m("div", m("a", {config: config}, "foo")); - } - }, - "/bar1": { - controller: function() {}, - view: function() { - return m("main", m("a", {config: config}, "foo")); - } - } - }) - mock.requestAnimationFrame.$resolve() - m.route("/bar1") - mock.requestAnimationFrame.$resolve() - - var result = unloaded === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var strategy - m.route.mode = "search" - m.route(root, "/foo1", { - "/foo1": { - controller: function() { - strategy = m.redraw.strategy() - m.redraw.strategy("none") - }, - view: function() { - return m("div"); - } - } - }) - mock.requestAnimationFrame.$resolve() - - var result = strategy === "all" && root.childNodes.length === 0 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var strategy, count = 0 - var config = function(el, init) {if (!init) count++} - m.route.mode = "search" - m.route(root, "/foo1", { - "/foo1": { - controller: function() {}, - view: function() { - return m("div", {config: config}); - } - }, - "/bar1": { - controller: function() { - strategy = m.redraw.strategy() - m.redraw.strategy("redraw") - }, - view: function() { - return m("div", {config: config}); - } - } - }) - mock.requestAnimationFrame.$resolve() - m.route("/bar1") - mock.requestAnimationFrame.$resolve() - - var result = strategy === "all" && count === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var strategy - m.route.mode = "search" - m.route(root, "/foo1", { - "/foo1": { - controller: function() {this.number = 1}, - view: function(ctrl) { - return m("div", {onclick: function() { - strategy = m.redraw.strategy() - ctrl.number++ - m.redraw.strategy("none") - }}, ctrl.number); - } - } - }) - root.childNodes[0].onclick({}) - mock.requestAnimationFrame.$resolve() - - var result = strategy === "diff" && root.childNodes[0].childNodes[0].nodeValue === "1" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var count = 0 - var config = function(el, init ) {if (!init) count++} - m.route.mode = "search" - m.route(root, "/foo1", { - "/foo1": { - controller: function() {}, - view: function() { - return m("div", {config: config, onclick: function() { - m.redraw.strategy("all") - }}); - } - } - }) - root.childNodes[0].onclick({}) - mock.requestAnimationFrame.$resolve() - - var result = count === 2 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var value - m.route(root, "/foo+bar", { - "/:arg": { - controller: function() {value = m.route.param("arg")}, - view: function() { - return "" - } - } - }) - var result = value === "foo+bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {}, view: function() {return "foo"}}, - "/test22": {controller: function() {}, view: function() {return "bar"}} - }) - mock.requestAnimationFrame.$resolve() - m.route(String("/test22/")) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test22/" && root.childNodes[0].nodeValue === "bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - m.route.mode = "search" - m.route(root, "/", { - "/": {controller: function() {}, view: function() {return "foo"}}, - "/test23": {controller: function() {}, view: function() {return "bar"}} - }) - mock.requestAnimationFrame.$resolve() - m.route(new String("/test23/")) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/test23/" && root.childNodes[0].nodeValue === "bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var value - m.route(root, String("/foo+bar"), { - "/:arg": { - controller: function() {value = m.route.param("arg")}, - view: function() { - return "" - } - } - }) - var result = value === "foo+bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() //setup - mock.location.search = "?" - - var root = mock.document.createElement("div") - var value - m.route(root, new String("/foo+bar"), { - "/:arg": { - controller: function() {value = m.route.param("arg")}, - view: function() { - return "" - } - } - }) - var result = value === "foo+bar" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - - var a = {} - a.controller = function() {m.route("/b")} - a.view = function() {return "a"} - - var b = {} - b.controller = function() {} - b.view = function() {return "b"} - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - var result = root.childNodes[0].nodeValue === "b" - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - - var a = {} - a.controller = function() { - m.route("/b?foo=1", {foo: 2}) - } - a.view = function() {return "a"} - - var b = {} - b.controller = function() {} - b.view = function() {return "b"} - - m.route(root, "/", { - "/": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - var result = mock.location.search === "?/b?foo=2" - - m.mount(root, null) //teardown - - return result - - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - mock.history.$$length = 0 - - var root = mock.document.createElement("div") - - var a = {} - a.controller = function() {} - a.view = function() {return "a"} - - var b = {} - b.controller = function() {} - b.view = function() {return "b"} - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = mock.history.$$length === 1 - - m.mount(root, null) //teardown - - return result - - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - mock.history.$$length = 0 - - var root = mock.document.createElement("div") - - var a = {} - a.controller = function() {} - a.view = function() {return "a"} - - var b = {} - b.controller = function() {} - b.view = function() {return "b"} - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/a") - - mock.requestAnimationFrame.$resolve() - - var result = mock.history.$$length === 0 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {} - a.view = function() { - return m("a", {config: function(el, init) { - if (!init) initCount++ - }}) - } - - var b = {} - b.controller = function() {} - b.view = a.view - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 2 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {} - a.view = function() { - return m("a", {config: function(el, init, ctx) { - ctx.retain = false - if (!init) initCount++ - }}) - } - - var b = {} - b.controller = function() {} - b.view = a.view - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 2 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {} - a.view = function() { - return m("a", {config: function(el, init, ctx) { - ctx.retain = true - if (!init) initCount++ - }}) - } - - var b = {} - b.controller = function() {} - b.view = a.view - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {m.redraw.strategy("diff")} - a.view = function() { - return m("a", {config: function(el, init) { - if (!init) initCount++ - }}) - } - - var b = {} - b.controller = function() {m.redraw.strategy("diff")} - b.view = a.view - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {m.redraw.strategy("diff")} - a.view = function() { - return m("a", {config: function(el, init, ctx) { - ctx.retain = true - if (!init) initCount++ - }}) - } - - var b = {} - b.controller = function() {m.redraw.strategy("diff")} - b.view = a.view - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {m.redraw.strategy("diff")} - a.view = function() { - return m("a", {config: function(el, init, ctx) { - ctx.retain = false - if (!init) initCount++ - }}) - } - - var b = {} - b.controller = function() {m.redraw.strategy("diff")} - b.view = a.view - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 2 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {} - a.view = function() { - return m("div", m("a", {config: function(el, init, ctx) { - ctx.retain = true - if (!init) initCount++ - }})) - } - - var b = {} - b.controller = function() {} - b.view = function() { - return m("section", m("a", {config: function(el, init, ctx) { - ctx.retain = true - if (!init) initCount++ - }})) - } - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {} - a.view = function() { - return m("div", m("a", {config: function(el, init, ctx) { - ctx.retain = false - if (!init) initCount++ - }})) - } - - var b = {} - b.controller = function() {} - b.view = function() { - return m("section", m("a", {config: function(el, init, ctx) { - ctx.retain = false - if (!init) initCount++ - }})) - } - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 2 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {} - a.view = function() { - return m("div", m("a", {config: function(el, init) { - if (!init) initCount++ - }})) - } - - var b = {} - b.controller = function() {} - b.view = function() { - return m("section", m("a", {config: function(el, init) { - if (!init) initCount++ - }})) - } - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 2 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {m.redraw.strategy("diff")} - a.view = function() { - return m("div", m("a", {config: function(el, init, ctx) { - ctx.retain = true - if (!init) initCount++ - }})) - } - - var b = {} - b.controller = function() {m.redraw.strategy("diff")} - b.view = function() { - return m("section", m("a", {config: function(el, init, ctx) { - ctx.retain = true - if (!init) initCount++ - }})) - } - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {m.redraw.strategy("diff")} - a.view = function() { - return m("div", m("a", {config: function(el, init, ctx) { - ctx.retain = false - if (!init) initCount++ - }})) - } - - var b = {} - b.controller = function() {m.redraw.strategy("diff")} - b.view = function() { - return m("section", m("a", {config: function(el, init, ctx) { - ctx.retain = false - if (!init) initCount++ - }})) - } - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 2 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {m.redraw.strategy("diff")} - a.view = function() { - return m("div", m("a", {config: function(el, init) { - if (!init) initCount++ - }})) - } - - var b = {} - b.controller = function() {m.redraw.strategy("diff")} - b.view = function() { - return m("section", m("a", {config: function(el, init) { - if (!init) initCount++ - }})) - } - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - - var result = initCount === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - //retain flag should work inside component - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - var initCount = 0 - - var a = {} - a.controller = function() {} - a.view = function() { - return m("div", m("a", {config: function(el, init, ctx) { - ctx.retain = true - if (!init) initCount++ - }})) - } - - var b = {} - b.controller = function() {m.redraw.strategy("diff")} - b.view = function() { - return m("section", m("a", {config: function(el, init, ctx) { - ctx.retain = true - if (!init) initCount++ - }})) - } - - m.route(root, "/a", { - "/a": {view: function() {return m("div", a)}}, - "/b": {view: function() {return m("div", b)}} - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - var result = initCount === 1 - - m.mount(root, null) //teardown - - return result - }) - test(function() { - // https://github.com/lhorie/mithril.js/pull/571 - mock.requestAnimationFrame.$resolve() - mock.location.search = "?" - - var root = mock.document.createElement("div") - - var a = {} - a.controller = function() {} - a.view = function() { - return m("div", {config: function(elm) { - elm.childNodes[0].modified = true - }}, m("div")) - } - - var b = {} - b.controller = function() {} - b.view = function() { - return m("div", m("div")) - } - - m.route(root, "/a", { - "/a": a, - "/b": b - }) - mock.requestAnimationFrame.$resolve() - - m.route("/b") - - mock.requestAnimationFrame.$resolve() - var result = !root.childNodes[0].childNodes[0].modified; - - m.mount(root, null) //teardown - - return result - }); - //end m.route - - //m.route.parseQueryString - test(function() { - var args = m.route.parseQueryString("foo=bar&hello%5B%5D=world&hello%5B%5D=mars&hello%5B%5D=pluto") - return args["hello[]"] instanceof Array && args["hello[]"].indexOf("world") > -1 && args["hello[]"].indexOf("mars") > -1 && args["hello[]"].indexOf("pluto") > -1 - }) - test(function() { - var args = m.route.parseQueryString("foo=bar&hello=world&hello=mars&bam=&yup") - return args.foo === "bar" && args.hello[0] === "world" && args.hello[1] === "mars" && args.bam === "" && args.yup == null - }) - test(function() { - var args = m.route.parseQueryString("") - return Object.keys(args).length === 0 - }) - //m.route.buildQueryString - test(function() { - var string = m.route.buildQueryString({ - foo: "bar", - hello: ["world", "mars", "mars"], - world: { - test: 3 - }, - bam: "", - yup: null, - removed: undefined - }) - return string === "foo=bar&hello=world&hello=mars&world%5Btest%5D=3&bam=&yup" - }) - test(function() { - var string = m.route.buildQueryString({}); - return string === "" - }) - //m.prop - test(function() { - var prop = m.prop("test") - return prop() === "test" - }) - test(function() { - var prop = m.prop("test") - prop("foo") - return prop() === "foo" - }) - test(function() { - var prop = m.prop("test") - return JSON.stringify(prop) === '"test"' - }) - test(function() { - var obj = {prop: m.prop("test")} - return JSON.stringify(obj) === '{"prop":"test"}' - }) - test(function() { - var defer = m.deferred() - var prop = m.prop(defer.promise) - defer.resolve("test") - - return prop() === "test" - }) - test(function() { - var defer = m.deferred() - var prop = m.prop(defer.promise).then(function () { - return "test2" - }) - defer.resolve("test") - - return prop() === "test2" - }) - test(function() { - var prop = m.prop(null) - return prop() === null - }) - - //m.request - test(function() { - var prop = m.request({method: "GET", url: "test"}) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().method === "GET" && prop().url === "test" - }) - test(function() { - var prop = m.request({method: "GET", url: "test"}).then(function() {return "foo"}) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop() === "foo" - }) - test(function() { - var prop = m.request({method: "POST", url: "http://domain.com:80", data: {}}).then(function(value) {return value}) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().url === "http://domain.com:80" - }) - test(function() { - var prop = m.request({method: "POST", url: "http://domain.com:80/:test1", data: {test1: "foo"}}).then(function(value) {return value}) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().url === "http://domain.com:80/foo" - }) - test(function() { - var error = m.prop("no error") - var prop = m.request({method: "GET", url: "test", deserialize: function() {throw new Error("error occurred")}}).then(null, error) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().message === "error occurred" && error().message === "error occurred" - }) - test(function() { - var error = m.prop("no error") - var prop = m.request({method: "GET", url: "test", deserialize: function() {throw new Error("error occurred")}})["catch"](error) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().message === "error occurred" && error().message === "error occurred" - }) - test(function() { - // Data returned by then() functions do *not* propagate to finally(). - var data = m.prop(""); - var prop = m.request({method: "GET", url: "test"}).then(function() {return "foo"})["finally"](data) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop() === "foo" && data() === "" - }) - test(function() { - // Data returned by finally() functions do *not* propagate to next promise. - var data = m.prop(""); - var prop = m.request({method: "GET", url: "test"}).then(function() {return "foo"})["finally"](function() {return "bar"}).then(data) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop() === "foo" && data() === "foo" - }) - test(function() { - // Errors thrown in finally() can be caught by next promise. - var error = m.prop("no error") - var prop = m.request({method: "GET", url: "test"}).then(function() {return "foo"})["finally"](function() {throw new Error("error occurred")})["catch"](error) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().message === "error occurred" && error().message === "error occurred" - }) - test(function() { - // Promise finally() method occurrs after catch(). - var error = m.prop("no error") - var lastly = function() { error("lastly") }; - var prop = m.request({method: "GET", url: "test", deserialize: function() {throw new Error("error occurred")}})["catch"](error)["finally"](lastly) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().message === "error occurred" && error() === "lastly" - }) - test(function() { - var error = m.prop("no error"), exception - var prop = m.request({method: "GET", url: "test", deserialize: function() {throw new TypeError("error occurred")}}).then(null, error) - try {mock.XMLHttpRequest.$instances.pop().onreadystatechange()} - catch (e) {exception = e} - return prop() === undefined && error() === "no error" && exception.message === "error occurred" - }) - test(function() { - var error = m.prop("no error") - m.request({method: "POST", url: "test", data: {foo: 1}}).then(null, error) - var xhr = mock.XMLHttpRequest.$instances.pop() - xhr.onreadystatechange() - return xhr.$headers["Content-Type"] === "application/json; charset=utf-8" - }) - test(function() { - var error = m.prop("no error") - m.request({method: "POST", url: "test"}).then(null, error) - var xhr = mock.XMLHttpRequest.$instances.pop() - xhr.onreadystatechange() - return xhr.$headers["Content-Type"] === undefined - }) - test(function() { - var prop = m.request({method: "POST", url: "test", initialValue: "foo"}).then(function(data) { return data; }) - var initialValue = prop(); - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - - return initialValue === "foo" - }) - test(function() { - var prop = m.request({method: "POST", url: "test", initialValue: "foo"}) - var initialValue = prop(); - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - - return initialValue === "foo" - }) - test(function() { - var prop = m.request({method: "POST", url: "test", initialValue: "foo"}).then(function() {return "bar"}) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop() === "bar" - }) - test(function() { - var prop = m.request({method: "GET", url: "test", data: {foo: 1}}) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().url === "test?foo=1" - }) - test(function() { - var prop = m.request({method: "POST", url: "test", data: {foo: 1}}) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().url === "test" - }) - test(function() { - var prop = m.request({method: "GET", url: "test", data: {foo: [1, 2]}}) - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return prop().url === "test?foo=1&foo=2" - }) - test(function() { - var value - var prop1 = m.request({method: "GET", url: "test", initialValue: 123}) - var val1 = prop1() - var prop2 = prop1.then(function() {return 1}) - var val2 = prop2() - var prop3 = prop1.then(function(v) {value = v}) - var val3 = prop3() - mock.XMLHttpRequest.$instances.pop().onreadystatechange() - return val1 === 123 && val2 === 123 && val3 === 123 && value.method === "GET" && value.url === "test" - }) - - // m.request over jsonp - test(function(){ - // script tags cannot be appended directly on the document - var body = mock.document.createElement("body") - mock.document.body = body - mock.document.appendChild(body) - - var error = m.prop("no error") - var data - m.request({url: "/test", dataType: "jsonp"}).then(function(received) {data = received}, error) - var callbackKey = Object.keys(mock).filter(function(globalKey){ - return globalKey.indexOf("mithril_callback") > -1 - }).pop() - var scriptTag = [].slice.call(mock.document.getElementsByTagName("script")).filter(function(script){ - return script.src.indexOf(callbackKey) > -1 - }).pop() - mock[callbackKey]({foo: "bar"}) - mock.document.removeChild(body) - return scriptTag.src.indexOf("/test?callback=mithril_callback") > -1 && data.foo === "bar" - }) - test(function(){ - // script tags cannot be appended directly on the document - var body = mock.document.createElement("body") - mock.document.body = body - mock.document.appendChild(body) - - var error = m.prop("no error") - var data - m.request({url: "/test", dataType: "jsonp", callbackKey: "jsonpCallback"}).then(function(received) {data = received}, error) - var callbackKey = Object.keys(mock).filter(function(globalKey){ - return globalKey.indexOf("mithril_callback") > -1 - }).pop() - var scriptTag = [].slice.call(mock.document.getElementsByTagName("script")).filter(function(script){ - return script.src.indexOf(callbackKey) > -1 - }).pop(); - mock[callbackKey]({foo: "bar1"}) - mock.document.removeChild(body) - return scriptTag.src.indexOf("/test?jsonpCallback=mithril_callback") > -1 && data.foo === "bar1" - }) - test(function(){ - var body = mock.document.createElement("body") - mock.document.body = body - mock.document.appendChild(body) - - var req = m.request({url: "/test", dataType: "jsonp"}) - var callbackKey = Object.keys(mock).filter(function(globalKey){ - return globalKey.indexOf("mithril_callback") > -1 - }).pop() - ;[].slice.call(mock.document.getElementsByTagName("script")).filter(function(script){ - return script.src.indexOf(callbackKey) > -1 - }).pop(); - mock[callbackKey]({foo: "bar1"}) - var out = {foo: "bar1"} - mock.document.removeChild(body) - return JSON.stringify(out) === JSON.stringify(req()) - }) - test(function(){ - var body = mock.document.createElement("body") - mock.document.body = body - mock.document.appendChild(body) - - m.request({url: "/test", dataType: "jsonp", data: {foo: "bar"}}) - var callbackKey = Object.keys(mock).filter(function(globalKey){ - return globalKey.indexOf("mithril_callback") > -1 - }).pop() - var scriptTag = [].slice.call(mock.document.getElementsByTagName("script")).filter(function(script){ - return script.src.indexOf(callbackKey) > -1 - }).pop(); - mock[callbackKey]({foo: "bar"}) - return scriptTag.src.indexOf("foo=bar") > -1 - }) - test(function(){ - var body = mock.document.createElement("body"); - mock.document.body = body; - mock.document.appendChild(body); - - m.request({url: "/test", dataType: "jsonp", method: "GET", data: {foo: "bar"}}); - var callbackKey = Object.keys(mock).filter(function(globalKey){ - return globalKey.indexOf("mithril_callback") > -1 - }).pop() - var scriptTag = [].slice.call(mock.document.getElementsByTagName("script")).filter(function(script){ - return script.src.indexOf(callbackKey) > -1 - }).pop(); - mock[callbackKey]({foo: "bar"}) - mock.document.removeChild(body); - return scriptTag.src.match(/foo=bar/g).length === 1; - }) - - //m.deferred - test(function() { - var value - var deferred = m.deferred() - deferred.promise.then(function(data) {value = data}) - deferred.resolve("test") - return value === "test" - }) - test(function() { - var value - var deferred = m.deferred() - deferred.promise.then(function() {return "foo"}).then(function(data) {value = data}) - deferred.resolve("test") - return value === "foo" - }) - test(function() { - var value - var deferred = m.deferred() - deferred.promise.then(null, function(data) {value = data}) - deferred.reject("test") - return value === "test" - }) - test(function() { - var value - var deferred = m.deferred() - deferred.promise["catch"](function(data) {value = data}) - deferred.reject("test") - return value === "test" - }) - test(function() { - var value - var deferred = m.deferred() - deferred.promise.then(null, function() {return "foo"}).then(function(data) {value = data}) - deferred.reject("test") - return value === "foo" - }) - test(function() { - var value - var deferred = m.deferred() - deferred.promise["catch"](function() {return "foo"}).then(function(data) {value = data}) - deferred.reject("test") - return value === "foo" - }) - test(function() { - var value1, value2 - var deferred = m.deferred() - deferred.promise.then(function() {throw new Error()}).then(function() {value1 = 1}, function(data) {value2 = data}) - deferred.resolve("test") - return value1 === undefined && value2 instanceof Error - }) - test(function() { - //Let unchecked exceptions bubble up in order to allow meaningful error messages in common cases like null reference exceptions due to typos - //An unchecked exception is defined as an object that is a subclass of Error (but not a direct instance of Error itself) - basically anything that can be thrown without an explicit `throw` keyword and that we'd never want to programmatically manipulate. In other words, an unchecked error is one where we only care about its line number and where the only reasonable way to deal with it is to change the buggy source code that caused the error to be thrown in the first place. - //By contrast, a checked exception is defined as anything that is explicitly thrown via the `throw` keyword and that can be programmatically handled, for example to display a validation error message on the UI. If an exception is a subclass of Error for whatever reason, but it is meant to be handled as a checked exception (i.e. follow the rejection rules for A+), it can be rethrown as an instance of Error - //This test tests two implementation details that differ from the Promises/A+ spec: - //1) A+ requires the `then` callback to be called in a different event loop from the resolve call, i.e. it must be asynchronous (this requires a setImmediate polyfill, which cannot be implemented in a reasonable way for Mithril's purpose - the possible polyfills are either too big or too slow) - //2) A+ swallows exceptions in a unrethrowable way, i.e. it's not possible to see default error messages on the console for runtime errors thrown from within a promise chain - var value1, value2, value3 - var deferred = m.deferred() - try { - deferred.promise - .then(function() {foo.bar.baz}) //throws ReferenceError - .then(function() {value1 = 1}, function(data) {value2 = data}) - deferred.resolve("test") - } - catch (e) {value3 = e} - return value1 === undefined && value2 === undefined && (value3 instanceof ReferenceError || value3 instanceof TypeError) - }) - test(function() { - var deferred1 = m.deferred() - var deferred2 = m.deferred() - var value1, value2 - deferred1.promise.then(function(data) { - value1 = data - return deferred2.promise - }).then(function(data) { - value2 = data - }) - deferred1.resolve(1) - deferred2.resolve(2) - return value1 === 1 && value2 === 2 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/80 - var deferred = m.deferred(), value - deferred.resolve(1) - deferred.promise.then(function(data) { - value = data - }) - return value === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/80 - var deferred = m.deferred(), value - deferred.reject(1) - deferred.promise.then(null, function(data) { - value = data - }) - return value === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/80 - var deferred = m.deferred(), value - deferred.resolve(1) - deferred.resolve(2) - deferred.promise.then(function(data) { - value = data - }) - return value === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/80 - var deferred = m.deferred(), value - deferred.promise.then(function(data) { - value = data - }) - deferred.resolve(1) - deferred.resolve(2) - return value === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/80 - var deferred = m.deferred(), value1, value2 - deferred.promise.then(function(data) { - value1 = data - }, function(data) { - value2 = data - }) - deferred.resolve(1) - deferred.reject(2) - return value1 === 1 && value2 === undefined - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/80 - var deferred = m.deferred(), value1, value2 - deferred.promise.then(function(data) { - value1 = data - }, function(data) { - value2 = data - }) - deferred.reject(1) - deferred.resolve(2) - return value1 === undefined && value2 === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/80 - var deferred = m.deferred(), value - deferred.promise.then(null, function(data) { - value = data - }) - deferred.reject(1) - deferred.reject(2) - return value === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/85 - var deferred = m.deferred(), value - deferred.resolve() - deferred.promise.then(function() { - value = 1 - }) - return value === 1 - }) - test(function() { - //https://github.com/lhorie/mithril.js/issues/85 - var deferred = m.deferred(), value - deferred.reject() - deferred.promise.then(null, function() { - value = 1 - }) - return value === 1 - }) - test(function() { - var deferred = m.deferred() - deferred.resolve(1) - return deferred.promise() === 1 - }) - test(function() { - var deferred = m.deferred() - var promise = deferred.promise.then(function(data) {return data + 1}) - deferred.resolve(1) - return promise() === 2 - }) - test(function() { - var deferred = m.deferred() - deferred.reject(1) - return deferred.promise() === undefined - }) - - //m.sync - test(function() { - var value - var deferred1 = m.deferred() - var deferred2 = m.deferred() - m.sync([deferred1.promise, deferred2.promise]).then(function(data) {value = data}) - deferred1.resolve("test") - deferred2.resolve("foo") - return value[0] === "test" && value[1] === "foo" - }) - test(function() { - var value - var deferred1 = m.deferred() - var deferred2 = m.deferred() - m.sync([deferred1.promise, deferred2.promise]).then(function(data) {value = data}) - deferred2.resolve("foo") - deferred1.resolve("test") - return value[0] === "test" && value[1] === "foo" - }) - test(function() { - var value - var deferred = m.deferred() - m.sync([deferred.promise])["catch"](function(data) {value = data}) - deferred.reject("fail") - return value[0] === "fail" - }) - test(function() { - var value = 1 - m.sync([]).then(function() {value = 2}) - return value === 2 - }) - test(function() { - var success - m.sync([]).then(function(value) {success = value instanceof Array}) - return success - }) - - //m.startComputation/m.endComputation - test(function() { - mock.requestAnimationFrame.$resolve() - - var root = mock.document.createElement("div") - var controller = m.mount(root, { - controller: function() {}, - view: function(ctrl) {return ctrl.value} - }) - - mock.requestAnimationFrame.$resolve() - - m.startComputation() - controller.value = "foo" - m.endComputation() - mock.requestAnimationFrame.$resolve() - return root.childNodes[0].nodeValue === "foo" - }) - - // config context - test(function() { - var root = mock.document.createElement("div") - - var success = false; - m.render(root, m("div", {config: function(elem, isInitialized, ctx) {ctx.data=1}})); - m.render(root, m("div", {config: function(elem, isInitialized, ctx) {success = ctx.data===1}})); - return success; - }) - - // more complex config context - test(function() { - var root = mock.document.createElement("div") - - var idx = 0; - var success = true; - var statefulConfig = function(elem, isInitialized, ctx) {ctx.data=idx++} - var node = m("div", {config: statefulConfig}); - m.render(root, [node, node]); - - idx = 0; - var checkConfig = function(elem, isInitialized, ctx) { - success = success && (ctx.data === idx++) - } - node = m("div", {config: checkConfig}); - m.render(root, [node, node]); - return success; - }) - - //console.log presence - test(function() { - return m.deps.factory.toString().indexOf("console") < 0 - }) - test(function() { - return m.deps.factory.toString().indexOf("document.write") < 0 - }) -} - -//mock -testMithril(mock.window); - -test.print(function(value) {console.log(value)}) diff --git a/tests/mock.js b/tests/mock.js deleted file mode 100644 index fb97f6d5..00000000 --- a/tests/mock.js +++ /dev/null @@ -1,172 +0,0 @@ -if (!Array.prototype.indexOf) { - Array.prototype.indexOf = function(item) { - for (var i = 0; i < this.length; i++) { - if (this[i] === item) return i - } - return -1 - } -} -if (!Array.prototype.map) { - Array.prototype.map = function(callback) { - var results = [] - for (var i = 0; i < this.length; i++) { - results[i] = callback(this[i], i, this) - } - return results - } -} -if (!Array.prototype.filter) { - Array.prototype.filter = function(callback) { - var results = [] - for (var i = 0; i < this.length; i++) { - if (callback(this[i], i, this)) results.push(this[i]) - } - return results - } -} -if (!Object.keys) { - Object.keys = function() { - var keys = [] - for (var i in this) keys.push(i) - return keys - } -} - -var mock = {} -mock.window = (function() { - var window = {} - window.document = {} - window.document.childNodes = [] - window.document.createElement = function(tag) { - return { - style: {}, - childNodes: [], - nodeType: 1, - nodeName: tag.toUpperCase(), - appendChild: window.document.appendChild, - removeChild: window.document.removeChild, - replaceChild: window.document.replaceChild, - insertBefore: function(node, reference) { - node.parentNode = this - var referenceIndex = this.childNodes.indexOf(reference) - var index = this.childNodes.indexOf(node) - if (index > -1) this.childNodes.splice(index, 1) - if (referenceIndex < 0) this.childNodes.push(node) - else this.childNodes.splice(referenceIndex, 0, node) - }, - insertAdjacentHTML: function(position, html) { - // todo: accept markup - if (position === "beforebegin") { - this.parentNode.insertBefore(window.document.createTextNode(html), this) - } - else if (position === "beforeend") { - this.appendChild(window.document.createTextNode(html)) - } - }, - setAttribute: function(name, value) { - this[name] = value.toString() - }, - setAttributeNS: function(namespace, name, value) { - this.namespaceURI = namespace - this[name] = value.toString() - }, - getAttribute: function(name, value) { - return this[name] - }, - addEventListener: function () {}, - removeEventListener: function () {} - } - } - window.document.createElementNS = function(namespace, tag) { - var element = window.document.createElement(tag) - element.namespaceURI = namespace - return element - } - window.document.createTextNode = function(text) { - return {nodeValue: text.toString()} - } - window.document.documentElement = window.document.createElement("html") - window.document.replaceChild = function(newChild, oldChild) { - var index = this.childNodes.indexOf(oldChild) - if (index > -1) this.childNodes.splice(index, 1, newChild) - else this.childNodes.push(newChild) - newChild.parentNode = this - oldChild.parentNode = null - } - window.document.appendChild = function(child) { - var index = this.childNodes.indexOf(child) - if (index > -1) this.childNodes.splice(index, 1) - this.childNodes.push(child) - child.parentNode = this - } - window.document.removeChild = function(child) { - var index = this.childNodes.indexOf(child) - this.childNodes.splice(index, 1) - child.parentNode = null - } - // getElementsByTagName is only used by JSONP tests, it's not required by - // Mithril - window.document.getElementsByTagName = function(name){ - name = name.toLowerCase(); - var out = []; - - var traverse = function(node){ - if(node.childNodes && node.childNodes.length > 0){ - node.childNodes.map(function(curr){ - if (curr.nodeName.toLowerCase() === name) { - out.push(curr); - } - traverse(curr); - }); - } - } - - traverse(window.document); - return out; - } - window.scrollTo = function() {} - window.cancelAnimationFrame = function() {} - window.requestAnimationFrame = function(callback) { - window.requestAnimationFrame.$callback = callback - return window.requestAnimationFrame.$id++ - } - window.requestAnimationFrame.$id = 1 - window.requestAnimationFrame.$resolve = function() { - if (window.requestAnimationFrame.$callback) { - var callback = window.requestAnimationFrame.$callback - window.requestAnimationFrame.$callback = null - callback() - } - } - window.XMLHttpRequest = (function() { - var request = function() { - this.$headers = {} - this.setRequestHeader = function(key, value) { - this.$headers[key] = value - } - this.open = function(method, url) { - this.method = method - this.url = url - } - this.send = function() { - this.responseText = JSON.stringify(this) - this.readyState = 4 - this.status = 200 - request.$instances.push(this) - } - } - request.$instances = [] - return request - }()) - window.location = {search: "", pathname: "", hash: ""} - window.history = {} - window.history.$$length = 0 - window.history.pushState = function(data, title, url) { - window.history.$$length++ - window.location.pathname = window.location.search = window.location.hash = url - } - window.history.replaceState = function(data, title, url) { - window.location.pathname = window.location.search = window.location.hash = url - } - return window -}()) diff --git a/tests/svg.html b/tests/svg.html deleted file mode 100644 index b57adf93..00000000 --- a/tests/svg.html +++ /dev/null @@ -1,97 +0,0 @@ - - - -Since it's not possible to test SVG functionality from a NodeJS environment, this page can be used to test it in a browser.
-This page should contain:
-The links should open in a new tab. All items should display title tooltips when hovered over.
- - - - - - diff --git a/tests/test.js b/tests/test.js deleted file mode 100644 index 844cf8aa..00000000 --- a/tests/test.js +++ /dev/null @@ -1,28 +0,0 @@ -if (!this.console) { - var log = function(value) {document.write("" + value + "")} - this.console = {log: log, error: log} -} - -function test(condition) { - test.total++ - - try { - if (!condition()) throw new Error("failed") - } - catch (e) { - console.error(e) - test.failures.push(condition) - } -} -test.total = 0 -test.failures = [] -test.print = function(print) { - for (var i = 0; i < test.failures.length; i++) { - print(test.failures[i].toString()) - } - print("tests: " + test.total + "\nfailures: " + test.failures.length) - - if (test.failures.length > 0) { - throw new Error(test.failures.length + " tests did not pass") - } -}