iqjax 0.1.0

data/test/lib/run-qunit.js

@@ -0,0 +1,90 @@
+var fs = require("fs");
+
+function ping() {
+    fs.write("/dev/stdout", ".", "w");
+}
+
+function snapshot(page, filepath) {
+    page.viewportSize = { width: 1024, height: 768 };
+    page.render(filepath);
+}
+
+/**
+ * Wait until the test condition is true or a timeout occurs. Useful for waiting
+ * on a server response or for a ui change (fadeIn, etc.) to occur.
+ *
+ * @param testFx javascript condition that evaluates to a boolean,
+ * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
+ * as a callback function.
+ * @param onReady what to do when testFx condition is fulfilled,
+ * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
+ * as a callback function.
+ * @param timeOutMillis the max amount of time to wait. If not specified, 3 sec is used.
+ */
+function waitFor(testFx, onReady, timeOutMillis) {
+    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3001, //< Default Max Timout is 3s
+        start = new Date().getTime(),
+        condition = false,
+        interval = setInterval(function() {
+            ping();
+            if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
+                // If not time-out yet and condition not yet fulfilled
+                condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
+            } else {
+                if(!condition) {
+                    // If condition still not fulfilled (timeout but condition is 'false')
+                    console.log("'waitFor()' timeout");
+                    phantom.exit(1);
+                } else {
+                    // Condition fulfilled (timeout and/or condition is 'true')
+                    console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");
+                    typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
+                    clearInterval(interval); //< Stop this interval
+                }
+            }
+        }, 25); //< repeat check every 25 ms
+        ping();
+};
+
+
+if (phantom.args.length === 0 || phantom.args.length > 2) {
+    console.log('Usage: run-qunit.js URL');
+    phantom.exit(1);
+}
+
+var page = new WebPage();
+
+// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
+page.onConsoleMessage = function(msg) {
+    console.log(msg);
+};
+
+page.open(phantom.args[0], function(status){
+    if (status !== "success") {
+        console.log("Unable to access network");
+        phantom.exit(1);
+    } else {
+        waitFor(function(){
+            return page.evaluate(function(){
+                var el = document.getElementById('qunit-testresult');
+                if (el && el.innerText.match('completed')) {
+                    return true;
+                }
+                return false;
+            });
+        }, function(){
+            var failedNum = page.evaluate(function(){
+                var el = document.getElementById('qunit-testresult');
+                console.log(el.innerText);
+                try {
+                    return el.getElementsByClassName('failed')[0].innerHTML;
+                } catch (e) { }
+                return 10000;
+            });
+            if(parseInt(failedNum, 10) > 0) {
+                snapshot(page, "snapshot.png");
+            }
+            phantom.exit((parseInt(failedNum, 10) > 0) ? 1 : 0);
+        });
+    }
+});

data/test/test.rb

@@ -0,0 +1,36 @@
+# encoding: UTF-8
+
+# Copyright 2012 innoQ Deutschland GmbH
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+require 'test/unit'
+
+class ClientTest < Test::Unit::TestCase
+
+  def test_PhantomJS_availability
+    system("phantomjs --version")
+    assert $?.success?
+  end
+
+  def test_client_side_test_suites
+    assert _run("index.html")
+  end
+
+  def _run(suite)
+    path = File.expand_path(File.dirname(__FILE__))
+    system("cd #{path} && phantomjs lib/run-qunit.js #{suite}")
+    return $?.success?
+  end
+
+end

data/test/tests.js

@@ -0,0 +1,175 @@
+/*jslint vars: true, unparam: true, browser: true, white: true */
+/*global jQuery, QUnit, module, test, ok, strictEqual, raises */
+
+/* Copyright 2012 innoQ Deutschland GmbH
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+(function($) {
+
+"use strict";
+
+module("iQjax", {
+
+	setup: function() {
+		var fixtures = $("#qunit-fixture");
+		this.fixturesHtml = fixtures.html();
+		fixtures.empty(); // prevents duplicate IDs
+		this.ctx = $("<div><p /></div>").appendTo(document.body);
+
+    $.mockjaxSettings['log'] = function(msg) { };
+
+		// Mock /items/:id/edit
+		$.mockjax(function(settings) {
+			var match = settings.url.match(/^\/items\/([0-9]+)\/edit$/);
+			if (match) {
+				return {
+					responseTime: 10,
+					responseText: '<form action="/items/' + match[1] +
+							'" method="POST"><input type="Submit" value="Save"></form>'
+				};
+			}
+			return;
+		});
+		// Mock /items/new
+		$.mockjax({
+			url: "/items/new",
+			responseText: '<form action="/items" method="POST"><input type="Submit" value="Save"></form>'
+		});
+		// Mock /items/:id and /items (the #create action)
+		$.mockjax(function(settings) {
+			var match = settings.url.match(/^\/items(\/([0-9]+))?(\?.*)?$/);
+			if (match) {
+				var itemName = match[2] || "new";
+				return {
+					responseTime: 10,
+					headers: {
+						"X-IQJAX": "item" + itemName
+					},
+					responseText: '<li id="item' + itemName +
+							'">Item from Server</li>'
+				};
+			}
+			return;
+		});
+	},
+
+	teardown: function() {
+		$("#qunit-fixture").html(this.fixturesHtml);
+		this.ctx.remove();
+		QUnit.reset();
+	}
+
+});
+
+test("uses container for result of AJAX call", function() {
+	this.ctx.html(this.fixturesHtml);
+	var root = $("#basic", this.ctx),
+		target = $("#my-container1");
+
+	root.iqjax({ target: "#my-container1" }).bind({
+		"iqjax:content": function() {
+			QUnit.start();
+			strictEqual($("form input[type=submit]", target).length, 1,
+					"target container should contain a form on `iqjax:content`");
+			$("form", target).submit();
+			QUnit.stop();
+		},
+		"iqjax:update": function() {
+			strictEqual(target.children().length, 0,
+					"target container should be empty on `iqjax:update`");
+			strictEqual($("#item1", root).text(), "Item from Server",
+					"collection item should be replaced by the item from the server on `iqjax:update`");
+			QUnit.start();
+		}
+	});
+
+	root.find("#item1 a").click();
+	QUnit.stop();
+});
+
+test("appends new items to the list", function() {
+	this.ctx.html(this.fixturesHtml);
+	var root = $("#basic", this.ctx),
+		target = $("#my-container1");
+
+	root.iqjax({ target: "#my-container1" }).bind({
+		"iqjax:content": function() {
+			QUnit.start();
+			strictEqual($("form input[type=submit]", target).length, 1,
+					"target container should contain the form");
+			$("form", target).submit();
+			QUnit.stop();
+		},
+		"iqjax:update": function() {
+			strictEqual($("#itemnew", root).text(), "Item from Server");
+			QUnit.start();
+		}
+	});
+
+	root.find("#new").click();
+	QUnit.stop();
+
+});
+
+test("replaces items outside the collection scope", function() {
+	this.ctx.html(this.fixturesHtml);
+	var root = $("#basic", this.ctx),
+		target = $("#my-container1");
+
+  var oldContent = $("#item-list", root).text();
+	root.iqjax({ target: "#my-container1" }).bind({
+		"iqjax:content": function() {
+			QUnit.start();
+			$("form", target).submit();
+			QUnit.stop();
+		},
+		"iqjax:update": function() {
+			strictEqual($("#other-item-list #item3", root).text(), "Item from Server");
+			strictEqual($("#item-list", root).text(), oldContent);
+			QUnit.start();
+		}
+	});
+
+	root.find("#dummy-item-pointing-to-item3 a").click();
+	QUnit.stop();
+
+});
+
+test("replaces element with result of iQjax call", function() {
+	return; // FIXME: TEST DISABLED
+	this.ctx.html(this.fixturesHtml);
+	var root = $("#basic", this.ctx);
+
+	root.iqjax({
+		"iqjax:content": function() {
+			QUnit.start();
+			// #item1 should be replaced by the form
+			strictEqual($("form input[type=submit]", root).length, 1);
+			$("form", root).submit();
+			QUnit.stop();
+		},
+		"iqjax:update": function() {
+			QUnit.start();
+			// form should be replaced by the "new" li element
+			strictEqual($("#item1", root).text(), "Item from Server");
+		}
+
+	});
+
+	root.find("#item1 a").click();
+	QUnit.stop();
+});
+
+}(jQuery));

data/vendor/assets/javascripts/iqjax.js

@@ -0,0 +1,200 @@
+/*jslint vars: true, unparam: true, browser: true, white: true */
+/*global jQuery */
+
+/* Copyright 2012 innoQ Deutschland GmbH
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// dynamic loading of content
+// inspired by https://github.com/defunkt/jquery-iqjax - though minus the
+// History API and based on Rails's data-remote functionality and error handling
+(function($) {
+
+"use strict";
+
+var iqjax_uri, requestMethod;
+
+var IQjax = function(context, target) {
+	// NB: context and target must not be descendants of each other
+	this.context = context;
+	this.target = target;
+	this.indicator = $(".indicator", target);
+	if(!this.indicator.length) {
+		this.indicator = $('<div class="indicator hidden"></div>');
+	}
+
+	// NB: redefining `this` in event handlers (via `proxy`) is dangerously
+	// misleading, but avoids non-standard function signatures for event
+	// handlers - plus for instance methods, it's actually more intuitive
+
+	// cancel buttons
+	var uri = document.location.toString().split("#")[0]; // XXX: use as selector makes for brittle heuristic?
+	this.target.on("click", 'a[href="' + uri + '"]', $.proxy(this.onCancel, this));
+
+	var selector = "a[data-remote], form[data-remote]";
+	var handlers = {
+		"ajax:beforeSend": $.proxy(this.beforeSend, this),
+		"ajax:success": $.proxy(this.onSuccess, this),
+		"ajax:error": $.proxy(this.onError, this)
+	};
+	this.context.add(this.target).on(handlers, selector);
+
+	// dirty state: protect against accidental dismissal
+	var self = this;
+	this.target.on("change", "input, textarea, select", function(ev) {
+		self.dirty = true;
+	});
+};
+$.extend(IQjax.prototype, {
+	onCancel: function(ev) {
+		if(!this.checkDirty(ev)) {
+			this.reset();
+		}
+		ev.preventDefault();
+	},
+	beforeSend: function(ev, xhr, settings) {
+		if(this.checkDirty(ev)) {
+			return false;
+		}
+
+		var contextAction = $.contains(this.context[0], ev.currentTarget); // TODO: rename -- XXX: hacky?
+		if(contextAction) {
+			this.reset();
+		}
+		$(ev.currentTarget).addClass("active");
+		this.target.prepend(this.indicator);
+		this.indicator.show();
+		settings.url = iqjax_uri(settings.url);
+		this.target.children().not(this.indicator).css("opacity", 0.5);
+	},
+	onSuccess: function(ev, data, status, xhr) {
+		if(!ev.currentTarget.parentNode) {
+			// FIXME: it's not clear under what circumstances this occurs;
+			// apparently, for reasons yet unknown, this event is erroneously
+			// triggered twice (and not all such duplicate events are
+			// intercepted by this hack, e.g. DELETE operations)
+			return;
+		}
+
+		var targetAction = $.contains(this.target[0], ev.currentTarget), // TODO: rename -- XXX: hacky?
+			el = $(ev.currentTarget),
+			reqMethod = "GET",
+			origin;
+
+		if(el.is("form")) {
+			if(targetAction) {
+				this.onUpdate.call(this, data, status, xhr); // TODO: should trigger event
+				return;
+			} else {
+				reqMethod = requestMethod(el);
+				origin = el.closest(".iqjax-entity"); // TODO: document
+			}
+		}
+
+		if(origin && reqMethod === "DELETE") {
+			this.indicator.hide();
+			origin.slideUp($.proxy(origin.remove, origin));
+		} else {
+			this.display(data);
+		}
+	},
+	onError: function(ev, xhr, error, exc) {
+		var cType = xhr.getResponseHeader("Content-Type"),
+			isHTML = cType ? cType.match(/\btext\/html\b/) : false;
+		this.display(xhr.responseText || error, !isHTML);
+	},
+	onUpdate: function(data, status, xhr) {
+		var src = xhr.getResponseHeader("X-IQJAX"), // TODO: document
+			item = $("<div />").html(data).find("#" + src),
+			origin = $(".active", this.context),
+			container = origin.closest("[data-iqjax-collection]"), // TODO: document
+			form = $("form.active", this.target),
+			reqMethod = requestMethod(form);
+
+		this.target.empty();
+
+		container = container.jquery ? container : $(container);
+		// account for nested update targets -- XXX: hacky!?
+		if(reqMethod === "PUT" && origin.closest(".iqjax-entity")[0] === container[0]) {
+			container = container.parent().closest("[data-iqjax-collection]");
+		}
+		container = $(container.data("iqjax-collection"));
+
+		if(reqMethod === "GET") { // multi-step forms
+			this.display(data);
+		} else {
+			this.reset();
+		}
+
+		var el = $("#" + src, self.context);
+		if(el.length) {
+			el.replaceWith(item);
+		} else { // new
+			container.append(item);
+		}
+
+		item.addClass("success").removeClass("success", "glacial");
+		this.context.trigger("iqjax:update", { item: item, doc: data });
+	},
+	reset: function() {
+		this.target.empty();
+		this.dirty = false;
+		$(".active", this.context).removeClass("active");
+	},
+	display: function(txt, plain) {
+		this.indicator.hide();
+		this.target[plain ? "text" : "html"](txt).prepend(this.indicator);
+		// intercept interactions to prevent full page reload
+		$("form", this.target).attr("data-remote", true);
+		this.context.trigger("iqjax:content", { iqjax: this });
+	},
+	// dirty state: protect against accidental dismissal
+	dirtyMsg: "Es gibt ungespeicherte Änderungen - fortfahren (Änderungen werden verworfen)?", // TODO: rephrase
+	checkDirty: function(ev) {
+		var isSubmit = $(ev.currentTarget).is("form");
+		if(this.dirty && !isSubmit) {
+			if(confirm(this.dirtyMsg)) {
+				this.dirty = false;
+			} else {
+				return true;
+			}
+		}
+	}
+});
+
+// hack to prevent cache confusion (browser caches should distinguish between
+// iQjax and non-iQjax requests) - it'd be more elegant to modify the jqXHR's
+// `data` property here, but it appears that's being overridden by jQuery later
+iqjax_uri = function(uri) {
+	return uri + (uri.indexOf("?") === -1 ? "?" : "&") + "_iqjax=1";
+};
+
+requestMethod = function(form) {
+	var m = $("input[name=_method]", form).val() || form.attr("method") || "GET";
+	return m.toUpperCase();
+};
+
+// uses dynamic in-page loading for child elements matching `a[data-remote]`
+// options.target is the DOM element within which contents are to be displayed
+// (defaults to selector contained in context element's `data-iqjax` attribute)
+$.fn.iqjax = function(options) {
+	options = options || {};
+	return this.each(function(i, node) {
+		var context = $(this),
+			target = $(options.target || context.data("iqjax")); // TODO: document
+		new IQjax(context, target);
+	});
+};
+
+}(jQuery));