appetizer-ui 0.7.1 → 0.8.0

data/.gitignore

@@ -1,5 +1,6 @@
 *.gem
 *.rbc
+*.swp
 .bundle
 .config
 .yardoc

data/appetizer-ui.gemspec

@@ -10,7 +10,7 @@ Gem::Specification.new do |gem|
   gem.test_files    = `git ls-files -- test/*`.split("\n")
   gem.name          = "appetizer-ui"
   gem.require_paths = ["lib"]
-  gem.version       = "0.7.1"
+  gem.version       = "0.8.0"
 
   gem.required_ruby_version = ">= 1.9.2"
 

data/lib/appetizer/ui/jasmine/js/backbone.modelbinding/appetizerExtensions.spec.js

@@ -0,0 +1,54 @@
+describe("appetizer-ui extensions", function(){
+  beforeEach(function(){
+    this.model = new AModel({
+      villain: "mrMonster",
+      niceDude: "Dr No",
+      pet: { smelly: "dog" }
+    });
+    this.model.villain = function () { return "Le Grand Mechant Loup" };
+    this.model.niceDude = "James Bond";
+    this.model.country = new AModel({ 
+      withFood: { hasWine: "France" } 
+    });
+    this.view = new AppetizerView({model: this.model});
+    this.view.render();
+  });
+
+  it("grabs attribute from methods, if existing", function(){
+    var el = $(this.view.el).find("#villain");
+    expect(el.text()).toBe("Le Grand Mechant Loup");
+  });
+
+  it("grabs attribute from values, if existing", function(){
+    var el = $(this.view.el).find("#mrNice");
+    expect(el.text()).toBe("James Bond");
+  });
+
+  it("grabs attribute from object attributes.", function(){
+    var el = $(this.view.el).find("#pet");
+    expect(el.text()).toBe("dog");
+  });
+
+  it("sets attribute from object attributes.", function(){
+    var el = this.view.$("#cat");
+    el.val("cat");
+    el.trigger("change");
+
+    expect(this.model.get("pet").smelly).toBe("dog");
+    expect(this.model.get("pet").fluffy).toBe("cat");
+  });
+
+  it("grabs attribute from associated models.", function(){
+    var el = $(this.view.el).find("#country");
+    expect(el.text()).toBe("France");
+  });
+
+  it("sets attribute from associated objects.", function(){
+    var el = this.view.$("#usa");
+    el.val("USA");
+    el.trigger("change");
+
+    expect(this.model.country.get("withFood").hasWine).toBe("France");
+    expect(this.model.country.get("withFood").hasBurgers).toBe("USA");
+  });
+});

data/lib/appetizer/ui/jasmine/js/backbone.modelbinding/checkboxConventionBindings.spec.js

@@ -0,0 +1,110 @@
+describe("checkbox convention bindings", function(){
+
+  describe("checkbox element binding", function(){
+    beforeEach(function(){
+      this.model = new AModel({
+        drivers_license: true,
+        motorcycle_license: false,
+      });
+      this.view = new AView({model: this.model});
+      this.view.render();
+    });
+
+    it("bind view changes to the model's field", function(){
+      var el = this.view.$("#drivers_license");
+      el.removeAttr("checked");
+      el.trigger('change');
+      expect(this.model.get('drivers_license')).toBeFalsy();
+    });
+
+    it("bind model field changes to the form input", function(){
+      var el = this.view.$("#drivers_license");
+
+      // uncheck it
+      this.model.set({drivers_license: false});
+      var selected = el.attr("checked");
+      expect(selected).toBeFalsy();
+
+      // then check it
+      this.model.set({drivers_license: true});
+      var selected = el.attr("checked");
+      expect(selected).toBeTruthy();
+    });
+
+    it("checks the box for a truthy value, on render", function(){
+      var el = this.view.$("#drivers_license");
+      var selected = el.attr("checked");
+
+      expect(selected).toBeTruthy();
+    });
+
+    it("unchecks the box for a falsy value, on render", function(){
+      var el = this.view.$("#motorcycle_license");
+      var selected = el.attr("checked");
+
+      expect(selected).toBeFalsy();
+    });
+  });
+
+  describe("when binding a 1 to a checkbox", function(){
+    beforeEach(function(){
+      this.model = new AModel({
+        binary_checkbox: 1
+      });
+      this.view = new AView({model: this.model});
+      this.view.render();
+      this.el = this.view.$("#binary_checkbox");
+    });
+
+    it("checks the box for a 1 (one) value, on render", function(){
+      var selected = this.el.attr("checked");
+      expect(selected).toBeTruthy();
+    });
+
+    it("unchecks the box when the value is changed to a 0 (zero)", function(){
+      this.model.set({binary_checkbox: 0});
+      var selected = this.el.attr("checked");
+      expect(selected).toBeFalsy();
+    });
+
+  });
+
+  describe("when binding a 0 to a checkbox", function(){
+    beforeEach(function(){
+      this.model = new AModel({
+        binary_checkbox: 0
+      });
+      this.view = new AView({model: this.model});
+      this.view.render();
+      this.el = this.view.$("#binary_checkbox");
+    });
+
+    it("unchecks the box for a 0 (zero) value, on render", function(){
+      var selected = this.el.attr("checked");
+      expect(selected).toBeFalsy();
+    });
+
+    it("checks the box when the value is changed to a 1 (one)", function(){
+      this.model.set({binary_checkbox: 1});
+      var selected = this.el.attr("checked");
+      expect(selected).toBeTruthy();
+    });
+  });
+
+  describe("when there is no value in the model", function(){
+    beforeEach(function(){
+      this.model = new AModel();
+      this.view = new AView({model: this.model});
+      this.view.render();
+    });
+
+    it("bind an unchecked checkbox value to the model, on render", function(){
+      expect(this.model.get('drivers_license')).toBeFalsy();
+    });
+
+    it("bind a checked checkbox value to the model, on render", function(){
+      expect(this.model.get('motorcycle_license')).toBeTruthy();
+    });
+  });
+
+});

data/lib/appetizer/ui/jasmine/js/backbone.modelbinding/configurableBindingAttributes.spec.js

@@ -0,0 +1,117 @@
+describe("configurableBindingAttributes", function(){
+  beforeEach(function(){
+    this.model = new AModel({
+      super_power: "mega pooping",
+      education: "graduate",
+      graduated: "maybe",
+      drivers_license: true
+    });
+   
+    this.view = new AnotherView({model: this.model});
+    this.view.render();
+  });
+
+  describe("text element binding using configurable attribute", function(){
+    it("bind view changes to the model's field, by configurable convention", function(){
+      var el = this.view.$(".super_power");
+      el.val("x ray vision");
+      el.trigger('change');
+
+      expect(this.model.get('super_power')).toEqual("x ray vision");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({super_power: "eating raw vegetables"});
+      var el = this.view.$(".super_power");
+      expect(el.val()).toEqual("eating raw vegetables");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$(".super_power");
+      expect(el.val()).toEqual("mega pooping");
+    });
+  });
+  
+  describe("radio element binding using configurable attribute", function(){
+    it("bind view changes to the model's field, by configurable convention", function(){
+      var el = $(this.view.el).find("#graduated_no");
+      el.attr("checked", "checked");
+      el.trigger('change');
+      expect(this.model.get('graduated')).toEqual("no");
+    });
+
+    it("bind model field changes to the form input, by configurable convention", function(){
+      this.model.set({graduated: "yes"});
+      var el = this.view.$("#graduated_yes");
+      var selected = el.attr("checked");
+
+      expect(selected).toBeTruthy();
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("input[type=radio][class=graduated]:checked");
+      var selected = el.val();
+
+      expect(selected).toBe("maybe");
+    });
+  });
+
+  describe("select element binding using configurable attribute", function(){
+    it("bind view changes to the model's field, by configurable convention", function(){
+      var el = this.view.$(".education");
+      el.val("college");
+      el.trigger('change');
+
+      expect(this.model.get('education')).toEqual("college");
+    });
+
+    it("bind model field changes to the form input, by configurable convention", function(){
+      this.model.set({education: "high school"});
+      var el = this.view.$(".education");
+      expect(el.val()).toEqual("high school");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$(".education");
+      expect(el.val()).toEqual("graduate");
+    });
+
+    it("applies the text of the selection to the model", function(){
+      var el = this.view.$(".education");
+      el.val("grade_school");
+      el.trigger('change');
+
+      expect(this.model.get('education_text')).toEqual("i dun learned at grade skool");
+    });
+  });
+
+  describe("checkbox element binding using configurable attribute", function(){
+    it("bind view changes to the model's field", function(){
+      var el = this.view.$(".drivers_license");
+      el.removeAttr("checked");
+      el.trigger('change');
+      expect(this.model.get('drivers_license')).toBeFalsy();
+    });
+
+    it("bind model field changes to the form input", function(){
+      var el = this.view.$(".drivers_license");
+
+      // uncheck it
+      this.model.set({drivers_license: false});
+      var selected = el.attr("checked");
+      expect(selected).toBeFalsy();
+
+      // then check it
+      this.model.set({drivers_license: true});
+      var selected = el.attr("checked");
+      expect(selected).toBeTruthy();
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$(".drivers_license");
+      var selected = el.attr("checked");
+
+      expect(selected).toBeTruthy();
+    });
+  });
+});

data/lib/appetizer/ui/jasmine/js/backbone.modelbinding/configureAllBindingAttributes.spec.js

@@ -0,0 +1,139 @@
+describe("configure all binding attributes", function(){
+  beforeEach(function(){
+    this.model = new AModel({
+      name: "some dude",
+      bio: "not much",
+      education: "graduate",
+      graduated: "maybe",
+      drivers_license: true
+    });
+
+    this.view = new AllBindingAttributesView({model: this.model});
+    this.view.render();
+  });
+
+  describe("text element binding using configurable attribute", function(){
+    it("bind view changes to the model's field, by configurable convention", function(){
+      var el = this.view.$("#v_name");
+      el.val("that guy");
+      el.trigger('change');
+
+      expect(this.model.get('name')).toEqual("that guy");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({name: "joe bob"});
+      var el = this.view.$("#v_name");
+      expect(el.val()).toEqual("joe bob");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#v_name");
+      expect(el.val()).toEqual("some dude");
+    });
+  });
+  
+  describe("textarea element binding using configurable attribute", function(){
+    it("bind view changes to the model's field, by configurable convention", function(){
+      var el = this.view.$("#v_bio");
+      el.val("biography");
+      el.trigger('change');
+
+      expect(this.model.get('bio')).toEqual("biography");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({bio: "biography, schmiography"});
+      var el = this.view.$("#v_bio");
+      expect(el.val()).toEqual("biography, schmiography");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#v_bio");
+      expect(el.val()).toEqual("not much");
+    });
+  });
+  
+  describe("radio element binding using configurable attribute", function(){
+    it("bind view changes to the model's field, by configurable convention", function(){
+      var el = $(this.view.el).find("#graduated_no");
+      el.attr("checked", "checked");
+      el.trigger('change');
+      expect(this.model.get('graduated')).toEqual("no");
+    });
+
+    it("bind model field changes to the form input, by configurable convention", function(){
+      this.model.set({graduated: "yes"});
+      var el = this.view.$("#graduated_yes");
+      var selected = el.attr("checked");
+
+      expect(selected).toBeTruthy();
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("input[type=radio][class=graduated]:checked");
+      var selected = el.val();
+
+      expect(selected).toBe("maybe");
+    });
+  });
+
+  describe("select element binding using configurable attribute", function(){
+    it("bind view changes to the model's field, by configurable convention", function(){
+      var el = this.view.$(".education");
+      el.val("college");
+      el.trigger('change');
+
+      expect(this.model.get('education')).toEqual("college");
+    });
+
+    it("bind model field changes to the form input, by configurable convention", function(){
+      this.model.set({education: "high school"});
+      var el = this.view.$(".education");
+      expect(el.val()).toEqual("high school");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$(".education");
+      expect(el.val()).toEqual("graduate");
+    });
+
+    it("applies the text of the selection to the model", function(){
+      var el = this.view.$(".education");
+      el.val("grade_school");
+      el.trigger('change');
+
+      expect(this.model.get('education_text')).toEqual("i dun learned at grade skool");
+    });
+  });
+
+  describe("checkbox element binding using configurable attribute", function(){
+    it("bind view changes to the model's field", function(){
+      var el = this.view.$(".drivers_license");
+      el.removeAttr("checked");
+      el.trigger('change');
+      expect(this.model.get('drivers_license')).toBeFalsy();
+    });
+
+    it("bind model field changes to the form input", function(){
+      var el = this.view.$(".drivers_license");
+
+      // uncheck it
+      this.model.set({drivers_license: false});
+      var selected = el.attr("checked");
+      expect(selected).toBeFalsy();
+
+      // then check it
+      this.model.set({drivers_license: true});
+      var selected = el.attr("checked");
+      expect(selected).toBeTruthy();
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$(".drivers_license");
+      var selected = el.attr("checked");
+
+      expect(selected).toBeTruthy();
+    });
+  });
+});

data/lib/appetizer/ui/jasmine/js/backbone.modelbinding/customConvention.spec.js

@@ -0,0 +1,53 @@
+describe("custom conventions", function(){
+  beforeEach(function(){
+    this.model = new AModel({});
+    this.view = new AView({model: this.model});
+    this.oldHandler = Backbone.ModelBinding.Conventions.text.handler;
+
+  });
+
+  afterEach(function(){
+    Backbone.ModelBinding.Conventions.text.handler = this.oldHandler;
+  });
+
+  describe("replace the text input handler", function(){
+    beforeEach(function(){
+      var nameSettingsHandler = {
+        bind: function(selector, view, model){
+          view.$("#name").val("a custom convention supplied this name");
+        }
+      };
+
+      Backbone.ModelBinding.Conventions.text.handler = nameSettingsHandler;
+      this.view.render();
+    });
+
+    it("should set the custom field value when rendered", function(){
+      expect(this.view.$("#name").val()).toBe("a custom convention supplied this name");
+    });
+  });
+
+  describe("add a brand new convention for paragraph tags", function(){
+    beforeEach(function(){
+      var PConvention = {
+        selector: "p",
+        handler: {
+          bind: function(selector, view, model){
+            view.$(selector).each(function(index){
+              var name = model.get("name");
+              $(this).html(name);
+            });
+          }
+        }
+      };
+
+      Backbone.ModelBinding.Conventions.paragraphs = PConvention;
+    });
+
+    it("should display the model name in the paragraph", function(){
+      this.model.set({name: "Gandalf Wizard"});
+      this.view.render();
+      expect(this.view.$("#aParagraph").html()).toBe("Gandalf Wizard");
+    });
+  });
+});