riojs 0.0.0

data/public/javascripts/specs/lib/component_spec.js

@@ -0,0 +1,86 @@
+describe(rio.Component, {
+	"inheritance": {
+		beforeEach: function() {
+			var SuperComponent = rio.Component.create("SuperComponent", {
+				attrAccessors: ["a"],
+				attrHtmls: ["super"],
+				methods: { 
+					buildSuperHtml: function() { return "foo"; },
+					superHello: function() { return "super world"; }
+				}
+			});
+			var SubComponent = rio.Component.create(SuperComponent, "SubComponent", {
+				attrAccessors: ["b"],
+				attrHtmls: ["sub"],
+				methods: { 
+					buildSubHtml: function() { return "bar"; },
+					subHello: function() { return "sub world"; }
+				}
+			});
+			var SubSubComponent = rio.Component.create(SubComponent, "SubSubComponent", {
+				attrAccessors: ["c"],
+				attrHtmls: ["subSub"],
+				methods: { 
+					buildSubSubHtml: function() { return "baz"; },
+					subSubHello: function() { return "sub sub world"; }
+				}
+			});
+			
+			this.component = new SubSubComponent({ a: 1, b: 2, c: 3 });
+		},
+		
+		"should support attrHtmls": function() {
+			this.component.subSubHtml().shouldEqual("baz");
+		},
+
+		"should inherit parent's attrHtmls": function() {
+			this.component.subHtml().shouldEqual("bar");
+		},
+
+		"should inherit grandparent's attrHtmls": function() {
+			this.component.superHtml().shouldEqual("foo");
+		},
+		
+		"should support attrAccessors": function() {
+			this.component.getC().shouldEqual(3);
+		},
+		
+		"should inherit parent's attrAccessors": function() {
+			this.component.getB().shouldEqual(2);
+		},
+		
+		"should inherit grandparent's attrAccessors": function() {
+			this.component.getA().shouldEqual(1);
+		},
+		
+		"should support methods": function() {
+			this.component.subSubHello().shouldEqual("sub sub world");
+		},
+		
+		"should inherit parent's methods": function() {
+			this.component.subHello().shouldEqual("sub world");
+		},
+		
+		"should inherit grandparent's methods": function() {
+			this.component.superHello().shouldEqual("super world");
+		}
+	}
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

data/public/javascripts/specs/lib/form_spec.js

@@ -0,0 +1,171 @@
+describe(rio.Form, {
+	"with no validators": {
+		beforeEach: function() {
+			this.company = new (rio.Attr.create({ attrAccessors: ["name"] }))({ name: "Thinklink" });
+		
+			this.form = rio.Form.build({
+				attributes: { 
+					name: {},
+					email: { initialValue: "tilleryj@gmail.com" },
+					company: { initialValue: this.company.name }
+				}
+			});
+		},
+
+		"should accept a set of attributes and make them available as bindable attributes": function() {
+			this.form.getName().shouldEqual("");
+			this.form.setName("Hello");
+			this.form.getName().shouldEqual("Hello");
+		
+			(this.form.name.constructor == rio.Binding).shouldBeTrue();
+		},
+	
+		"should accept custom initial values for attributes": function() {
+			this.form.getEmail().shouldEqual("tilleryj@gmail.com");
+		},
+	
+		"should reset values back to their initial values": function() {
+			this.form.setName("Jason");
+			this.form.setEmail("asdf@thinklinkr.com");
+			this.form.reset();
+
+			this.form.getName().shouldEqual("");
+			this.form.getEmail().shouldEqual("tilleryj@gmail.com");
+		},
+	
+		"should allow bindable initial values": function() {
+			this.form.getCompany().shouldEqual("Thinklink");
+			this.company.setName("Apple");
+			this.form.getCompany().shouldEqual("Thinklink");
+			this.form.reset();
+			this.form.getCompany().shouldEqual("Apple");
+		},
+	
+		"should provide a commit method that invokes the onCommit function with the forms values": function() {
+			var onCommit = function(values) {
+				values.email.shouldEqual("tilleryj@gmail.com");
+			}.shouldBeCalled();
+			var form = rio.Form.build({
+				attributes: { 
+					email: { initialValue: "tilleryj@gmail.com" }
+				},
+				onCommit: onCommit
+			});
+			form.commit();
+		},
+		
+		"should be valid": function() {
+			this.form.valid().shouldBeTrue();
+		}
+	},
+	
+	"with validators": {
+		beforeEach: function() {
+			this.form = rio.Form.build({
+				attributes: { 
+					name: {
+						validates: [function(values) {
+							if (values.name.length > 5) {
+								return "Name cannot be longer than 5 characters.";
+							}
+						}]
+					},
+					email: { 
+						initialValue: "tilleryj@gmail.com",
+						validates: ["email"]
+					}
+				}
+			});
+		},
+		
+		"should be valid initially": function() {
+			this.form.valid().shouldBeTrue();
+		},
+		
+		"should not be valid email is not a valid email address": function() {
+			this.form.setEmail("");
+			this.form.valid().shouldBeFalse();
+			this.form.setEmail("asdf");
+			this.form.valid().shouldBeFalse();
+			this.form.setEmail("asdf@thinklinkr.");
+			this.form.valid().shouldBeFalse();
+			this.form.setEmail("asdf@thinklinkr.com");
+			this.form.valid().shouldBeTrue();
+		},
+		
+		"should not be valid if a validator function returns an error message": function() {
+			this.form.setName("Hello World");
+			this.form.valid().shouldBeFalse();
+			this.form.setName("Hello");
+			this.form.valid().shouldBeTrue();
+		},
+		
+		"should not commit if in an invalid state": function() {
+			var form = rio.Form.build({
+				attributes: { 
+					name: {
+						validates: [function(values) { return "Never valid"; }]
+					}
+				},
+				onCommit: function() {}.shouldNotBeCalled()
+			});
+			form.commit();
+		},
+		
+		"should expose bindable error messages": function() {
+			var emailErrors = this.form.errorsFor('email');
+			(emailErrors.constructor == rio.Binding).shouldBeTrue();
+			emailErrors.value().shouldEqual("");
+			this.form.setEmail("asdf");
+			emailErrors.value().shouldEqual("not a valid email address");
+		},
+		
+		"should remove erros on reset even if the form is still in a bad state": function() {
+			this.form = rio.Form.build({
+				attributes: { 
+					email: { 
+						initialValue: "",
+						validates: ["email"]
+					}
+				}
+			});
+			this.form.validate();
+			this.form.errorsFor("email").value().shouldNotEqual("");
+			this.form.reset();
+			this.form.errorsFor("email").value().shouldEqual("");
+		}
+	}
+});
+
+describe(rio.Validators, {
+	"should validate email": function() {
+		var emailErrorMessage = "not a valid email address";
+		rio.Validators.email("").shouldEqual(emailErrorMessage);
+		rio.Validators.email("asdf@").shouldEqual(emailErrorMessage);
+		rio.Validators.email("asdf@thinklinkr").shouldEqual(emailErrorMessage);
+		rio.Validators.email("asdf@thinklinkr.").shouldEqual(emailErrorMessage);
+		rio.Validators.email("@thinklinkr.com").shouldEqual(emailErrorMessage);
+		rio.Validators.email("thinklinkr.com").shouldEqual(emailErrorMessage);
+		rio.Validators.email("asdf@thinklinkr.com").shouldEqual("");
+		rio.Validators.email("asdf+extra@thinklinkr.com").shouldEqual("");
+	},
+	
+	"should validate presence": function() {
+		var errorMessage = "cannot be blank";
+		rio.Validators.presence().shouldEqual(errorMessage);
+		rio.Validators.presence("").shouldEqual(errorMessage);
+		rio.Validators.presence(" ").shouldEqual(errorMessage);
+		rio.Validators.presence("   ").shouldEqual(errorMessage);
+		rio.Validators.presence("anything").shouldEqual("");
+	}
+});
+
+
+
+
+
+
+
+
+
+

data/public/javascripts/specs/lib/id_spec.js

@@ -0,0 +1,21 @@
+describe(rio.Id, {
+	"that is reified": {
+		"should immediately call anything passed in to doAfterReification": function() {
+			var rioId = new rio.Id(25);
+			rioId.doAfterReification(function(){}.shouldBeCalled());
+		}
+	},
+	
+	"that is not reified": {
+		beforeEach: function() {
+			this.rioId = new rio.Id();
+		},
+		"should not call anything passed into doAfterReification right away": function() {
+			this.rioId.doAfterReification(function(){}.shouldNotBeCalled());
+		},
+		"should call whatever is passed into doAfterReification after reification": function() {
+			this.rioId.doAfterReification(function(){}.shouldBeCalled());
+			this.rioId.reify(1234);
+		}
+	}
+});

data/public/javascripts/specs/lib/instrumenter_spec.js

@@ -0,0 +1,5 @@
+describe(rio.Instrumenter, {
+	"should ...": function() {
+		rio.Instrumenter.instrument("lib/utils");
+	}
+});

data/public/javascripts/specs/lib/js_template_spec.js

@@ -0,0 +1,131 @@
+describe(rio.JsTemplate, {
+	"with no custom tags": {
+		beforeEach: function() {
+			this.template = new rio.JsTemplate({
+				text: '<div><span rio:id="hello">world</span></div>'
+			});
+		},
+	
+		"should have a default name of 'tempate'": function() {
+			this.template.name().shouldEqual("template");
+		},
+	
+		"should remove the rio:id tag and mix an accessor into the context": function() {
+			var context = {};
+			var html = this.template.render(context);
+			html.childElements()[0].tagName.shouldEqual("DIV");
+			html.childElements()[0].childElements()[0].tagName.shouldEqual("SPAN");
+			html.childElements()[0].childElements()[0].innerHTML.shouldEqual("world");
+			html.childElements()[0].childElements()[0].id.shouldEqual("");
+			context.getHelloElement().tagName.shouldEqual("SPAN");
+		},
+		
+		"should provide a build HTML method in the context mixin methods": function() {
+			var html = this.template.mixinMethods().buildHtml();
+			html.childElements()[0].tagName.shouldEqual("DIV");
+			html.childElements()[0].childElements()[0].tagName.shouldEqual("SPAN");
+			html.childElements()[0].childElements()[0].innerHTML.shouldEqual("world");
+			html.childElements()[0].childElements()[0].id.shouldEqual("");
+		}
+	},
+
+	"with custom tags": {
+		beforeEach: function() {
+			if (!rio.components.Box) { rio.File.execute(rio.boot.root + "components/box.js", { asynchronous: false }); }
+			this.template = new rio.JsTemplate({
+				text: '<rio:Box rio:id="hello" height="10" />',
+				name: "editor"
+			});
+			this.context = {};
+			this.template.render(this.context);
+		},
+		
+		"should have the correct name": function() {
+			this.template.name().shouldEqual("editor");
+		},
+		
+		"should mixin component accessors": function() {
+			this.context.getHello().html().tagName.shouldEqual("DIV");
+		},
+
+		"should build components with attributes": function() {
+			this.context.getHello().getHeight().shouldEqual("10");
+		}
+	},
+
+	"with complex custom tags": {
+		beforeEach: function() {
+			if (!rio.components.Box) { rio.File.execute(rio.boot.root + "components/box.js", { asynchronous: false }); }
+			this.template = new rio.JsTemplate({
+				text: '<rio:Box rio:id="hello" height="{ 1 + 2 }"><className>world</className><width>13px</width><region><rio:Object><attribute>b</attribute></rio:Object></region></rio:Box>',
+				name: "editor"
+			});
+			this.context = {};
+			this.template.render(this.context);
+		},
+		
+		"should build components with evaluative {} attributes": function() {
+			this.context.getHello().getHeight().shouldEqual(3);
+		},
+
+		"should build components with elemental attributes": function() {
+			this.context.getHello().getClassName().shouldEqual("world");
+		},
+		
+		"should build components with more than one elemental attribute": function() {
+			this.context.getHello().getWidth().shouldEqual("13px");
+		},
+		
+		"should allow you to pass in an object as an elemental attribute using <rio:Object>": function() {
+			this.context.getHello().getRegion().attribute.shouldEqual("b");
+		}
+	},
+	
+	"with the <select> tag": {
+		beforeEach: function() {
+			this.template = new rio.JsTemplate({
+				text: '<select rio:id="cardType" class="popupForm" style="width: 300px"><option>asdf</option></select>',
+				name: "editor"
+			});
+			this.context = {};
+			this.template.render(this.context);
+		},
+		
+		"should build a select tag correctly": function() {
+			this.context.getCardTypeElement().tagName.shouldEqual("SELECT");
+		}
+	},
+	
+	/* Safari <4 serializes the \u00a0 representation back into a \u00a0 */
+	"with nbsp; tags": {
+		"should properly render a space": function() {
+			var template = new rio.JsTemplate({
+				text: '<div rio:id="divWithSpace">&nbsp;</div>',
+				name: "editor"
+			});
+			var context = {};
+			template.render(context);
+			
+			context.getDivWithSpaceElement().tagName.shouldEqual("DIV");
+			var value = context.getDivWithSpaceElement().innerHTML;
+			(value == "\u00a0" || value == "&nbsp;").shouldBeTrue();
+		},
+
+		"should properly render two spaces": function() {
+			var template = new rio.JsTemplate({
+				text: '<div rio:id="divWithSpace">&nbsp;&nbsp;</div>',
+				name: "editor"
+			});
+			var context = {};
+			template.render(context);
+			
+			context.getDivWithSpaceElement().tagName.shouldEqual("DIV");
+			var value = context.getDivWithSpaceElement().innerHTML;
+			(value == "\u00a0\u00a0" || value == "&nbsp;&nbsp;").shouldBeTrue();
+		}
+	}
+});
+
+
+
+

data/public/javascripts/specs/lib/key_map_spec.js

@@ -0,0 +1,227 @@
+describe(rio.KeyMap, {
+	beforeEach: function() {
+		this.shouldMatchOrNot = function(m, e, h) {
+			new rio.KeyMap([
+				{ 
+					map: m,
+					handler: h
+				}
+			]).handle(e);
+		};
+
+		this.shouldMatch = function(map, e) {
+			this.shouldMatchOrNot(map, e, function() {}.shouldBeCalled());
+		};
+
+		this.shouldNotMatch = function(map, e) {
+			this.shouldMatchOrNot(map, e, function() {}.shouldNotBeCalled());
+		};
+	},
+
+	"should fire the handler if the event keyCode matches the key": function() {
+		this.shouldMatch({ key: 65 }, { keyCode: 65 });
+	},
+
+	"should not fire the handler if the event keyCode does not match the key": function() {
+		this.shouldNotMatch({ key: 65 }, { keyCode: 64 });
+	},
+	
+	"should fire all matching handlers": function() {
+		var e = { keyCode: 65, ctrlKey: true };
+		new rio.KeyMap([
+			{ 
+				map: { key: 65 },
+				handler: function() {}.shouldBeCalled()
+			},
+			{ 
+				map: { key: 65, ctrl: true },
+				handler: function() {}.shouldBeCalled()
+			}
+		]).handle(e);
+	},
+
+	"should fire the handler and pass the event if the event keyCode matches the key": function() {
+		var e = { keyCode: 65 };
+		new rio.KeyMap([
+			{ 
+				map: { key: 65 },
+				handler: function(ev) { (ev === e).shouldBeTrue(); }.shouldBeCalled()
+			}
+		]).handle(e);
+	},
+	
+	"should match the windows mappings if provided and isMac is not true": function() {
+		new rio.KeyMap([
+			{ 
+				win: { key: 65 },
+				mac: { key: 67 },
+				handler: function() {}.shouldBeCalled()
+			}
+		]).handle({ keyCode: 65 });
+	},
+	
+	"should not match the mac mappings if isMac is not true": function() {
+		new rio.KeyMap([
+			{ 
+				win: { key: 65 },
+				mac: { key: 67 },
+				handler: function() {}.shouldNotBeCalled()
+			}
+		]).handle({ keyCode: 67 });
+	},
+
+	"should match the mac mappings if isMac is true": function() {
+		new rio.KeyMap([
+			{ 
+				win: { key: 65 },
+				mac: { key: 67 },
+				handler: function() {}.shouldBeCalled()
+			}
+		], true).handle({ keyCode: 67 });
+	},
+
+	"should not match the windows mappings if isMac is true": function() {
+		new rio.KeyMap([
+			{ 
+				win: { key: 65 },
+				mac: { key: 67 },
+				handler: function() {}.shouldNotBeCalled()
+			}
+		], true).handle({ keyCode: 65 });
+	},
+	
+	"should support modifiers by": {
+		builder: function() {
+			var specs = {};
+			["ctrl", "alt", "shift", "meta"].each(function(modifier) {
+				var map = { key: 65 };
+				var e = { keyCode: 65 };
+
+				specs["matching when the " + modifier + " map is true and the event " + modifier + " is true"] = function() {
+					map[modifier] = true;
+					e[modifier + "Key"] = true;
+					this.shouldMatch(map, e);
+				};
+
+				specs["not matching when the " + modifier + " map is true and the event " + modifier + " is false"] = function() {
+					map[modifier] = true;
+					e[modifier + "Key"] = false;
+					this.shouldNotMatch(map, e);
+				};
+
+				specs["not matching when the " + modifier + " map is undefined and the event " + modifier + " is true"] = function() {
+					delete map[modifier];
+					e[modifier + "Key"] = true;
+					this.shouldMatch(map, e);
+				};
+
+			});
+			return specs;
+		}
+	},
+	
+	"should fire the handler if the key charCode matches the event keyCode": function() {
+		this.shouldMatch({ key: 'a' }, { keyCode: 65 });
+	},
+
+	"should not fire the handler if the key charCode does not match the event keyCode": function() {
+		this.shouldNotMatch({ key: 'b' }, { keyCode: 65 });
+	},
+
+	"should fire the handler if the number matches the event keyCode for the top numbers": function() {
+		$R(0, 9).each(function(n) {
+			this.shouldMatch({ key: "" + n }, { keyCode: 48 + n });
+		}.bind(this));
+	},
+
+	"should fire the handler if the number matches the event keyCode for the side numbers": function() {
+		$R(0, 9).each(function(n) {
+			this.shouldMatch({ key: "" + n }, { keyCode: 96 + n });
+		}.bind(this));
+	},
+	
+	"should not fire the handler if the number does not match the event keyCode for the any numbers": function() {
+		$R(0, 9).each(function(n) {
+			this.shouldNotMatch({ key: "" + n }, { keyCode: 49 + n });
+		}.bind(this));
+	},
+
+	"should stop the event if the mapping stop parameter is true and the mapping matches the event": function() {
+		var e = { keyCode: 65, stop: function() {}.shouldBeCalled() };
+		new rio.KeyMap([
+			{ 
+				map: { key: 65 },
+				handler: function() {},
+				stop: true
+			}
+		]).handle(e);
+	},
+
+	"should not stop the event if the mapping stop parameter is true and the mapping does not match the event": function() {
+		var e = { keyCode: 65, stop: function() {}.shouldNotBeCalled() };
+		new rio.KeyMap([
+			{ 
+				map: { key: 66 },
+				handler: function() {},
+				stop: true
+			}
+		]).handle(e);
+	},
+
+	"should not stop the event if the mapping stop parameter is false and the mapping matches the event": function() {
+		var e = { keyCode: 65, stop: function() {}.shouldNotBeCalled() };
+		new rio.KeyMap([
+			{ 
+				map: { key: 65 },
+				handler: function() {},
+				stop: false
+			}
+		]).handle(e);
+	},
+
+	"should not stop the event by default": function() {
+		var e = { keyCode: 65, stop: function() {}.shouldNotBeCalled() };
+		new rio.KeyMap([
+			{ 
+				map: { key: 65 },
+				handler: function() {}
+			}
+		]).handle(e);
+	},
+	
+	"should still stop an event if stop is true and it matches but has no handler": function() {
+		var e = { keyCode: 65, stop: function() {}.shouldNotBeCalled() };
+		new rio.KeyMap([
+			{ 
+				map: { key: 65 },
+				stop: false
+			}
+		]).handle(e);
+	},
+	
+	"should match the key": {
+		builder: function() {
+			var specs = {};
+			[
+				{ key: "left", code: Event.KEY_LEFT },
+				{ key: "right", code: Event.KEY_RIGHT },
+				{ key: "up", code: Event.KEY_UP },
+				{ key: "down", code: Event.KEY_DOWN },
+				{ key: "tab", code: Event.KEY_TAB },
+				{ key: "enter", code: Event.KEY_RETURN },
+				{ key: "home", code: Event.KEY_HOME },
+				{ key: "end", code: Event.KEY_END },
+				{ key: "backspace", code: Event.KEY_BACKSPACE },
+				{ key: "delete", code: Event.KEY_DELETE },
+				{ key: "space", code: 32 },
+				{ key: "esc", code: Event.KEY_ESC },
+				{ key: ",", code: 188 }
+			].each(function(k) {
+				specs["'" + k.key + "' to the keyCode for the " + k.key.toUpperCase() + " key"] = function() {
+					this.shouldMatch({ key: k.key }, { keyCode: k.code });
+				};
+			});
+			return specs;
+		}
+	}
+});