appetizer-ui 0.7.1 → 0.8.0

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

@@ -0,0 +1,151 @@
+describe("data-bind conventions", function(){
+  beforeEach(function(){
+    this.model = new AModel({
+      villain: "mrMonster",
+      doctor: "Seuss",
+      pet: "cat",
+      isValid: false
+    });
+    this.view = new AView({model: this.model});
+  });
+
+  describe("when data-bind is configured for an event and the event is triggered", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = this.view.$("#eventDiv");
+      this.model.trigger("foo", "bar");
+    });
+
+    it("should update the element with the event's value", function(){
+      expect(this.el.text()).toBe("bar");
+    });
+  });
+
+  describe("when a data-bind is configured with no html element attribute specified", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = this.view.$("#doctor_no_elem");
+    });
+
+    it("should set the element's text to the model's property value immediately", function(){
+      expect(this.el.text()).toBe("Seuss");
+    });
+
+    it("should set the text of the element when the model's property changes", function(){
+      this.model.set({doctor: "Who"});
+      expect(this.el.text()).toBe("Who");
+    });
+  });
+
+  describe("when a data-bind is configured to set text", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = this.view.$("#doctor");
+    });
+
+    it("should set the element's text to the model's property value immediately", function(){
+      expect(this.el.text()).toBe("Seuss");
+    });
+
+    it("should set the text of the element when the model's property changes", function(){
+      this.model.set({doctor: "Who"});
+      expect(this.el.text()).toBe("Who");
+    });
+  });
+
+  describe("when a data-bind is configured to set html", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = this.view.$("#villain");
+    });
+
+    it("should set the element's contents to the model's property value immediately", function(){
+      expect(this.el.html()).toBe("mrMonster");
+    });
+
+    it("should replace the contents of the element when the model's property changes", function(){
+      this.model.set({villain: "boogerFace"});
+      expect(this.el.html()).toBe("boogerFace");
+    });
+  });
+
+  describe("when a data-bind is configured to set enabled", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = this.view.$("#clicker");
+    });
+
+    it("should set the element's disabled value to the model's value, immediately", function(){
+      expect(this.el.attr("disabled")).toBeTruthy();
+    });
+
+    it("should set the element's disabled value when the model's value is changed", function(){
+      this.model.set({isValid: true});
+      expect(this.el.attr("disabled")).toBeFalsy();
+    });
+  });
+
+  describe("when a data-bind is configured to set disabled", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = this.view.$("#unclicker");
+    });
+
+    it("should set the element's disabled value to the model's value, immediately", function(){
+      expect(this.el.attr("disabled")).toBeFalsy();
+    });
+
+    it("should set the element's disabled value when the model's value is changed", function(){
+      this.model.set({isValid: true});
+      expect(this.el.attr("disabled")).toBeTruthy();
+    });
+  });
+
+  describe("when a data-bind is configured to set an arbitrary attribute", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = this.view.$("#pet");
+    });
+
+    it("should set the element's attribute to the model's property value immediately", function(){
+      expect(this.el.attr("someAttr")).toBe("cat");
+    });
+
+    it("should set the value of the attribute", function(){
+      this.model.set({pet: "bunnies"});
+      expect(this.el.attr("someAttr")).toBe("bunnies");
+    });
+  });
+
+  describe("when a data-bind is configured to set displayed", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = $(this.view.el).find("#showHideThing");
+    });
+
+    it("should set the element's disabled value to the model's value, immediately", function(){
+      expect(this.el.css("display")).toBe("none");
+    });
+
+    it("should set the element's disabled value when the model's value is changed", function(){
+      this.model.set({isValid: true});
+      expect(this.el).toBeVisible();
+    });
+  });
+  
+  describe("when a data-bind is configured to set visible", function(){
+    beforeEach(function(){
+      this.view.render();
+      this.el = $(this.view.el).find("#showHideAnotherThing");
+    });
+
+    it("should set the element's disabled value to the model's value, immediately", function(){
+      expect(this.el.css("display")).not.toBe("none");
+    });
+
+    it("should set the element's disabled value when the model's value is changed", function(){
+      this.model.set({isValid: true});
+      expect(this.el).toBeHidden();
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+describe("data-bind multiple attributes", function(){
+  beforeEach(function(){
+    this.model = new AModel({
+      urlSrc: "/foo/bar.gif",
+      name: "me"
+    });
+    this.view = new AView({model: this.model});
+    this.view.render();
+    this.el = this.view.$("#avatar");
+  });
+
+  describe ("when initializing", function(){
+    it("should set the first bound attribute", function(){
+      expect(this.el.attr("src")).toBe("/foo/bar.gif");
+    });
+
+    it("shoudl set the second bound attribute", function(){
+      expect(this.el.attr("class")).toBe("me");
+    });
+  });
+
+  describe("when setting the values", function(){
+    beforeEach(function(){
+      this.model.set({urlSrc: "/empty.png", name: "you"});
+    });
+
+    it("should update the first bound attribute", function(){
+      expect(this.el.attr("src")).toBe("/empty.png");
+    });
+
+    it("should update the second bound attribute", function(){
+      expect(this.el.attr("class")).toBe("you");
+    });
+  });
+
+});

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

@@ -0,0 +1,137 @@
+describe("default data-bind substitutions", function(){
+  beforeEach(function(){
+    this.model = new AModel({
+      doctor: "Seuss",
+      name: "foo"
+    });
+    this.view = new AView({model: this.model});
+    this.view.render();
+  });
+
+  describe("when binding unsetting the model's property that is bound to an unconfigured attribute", function(){
+    beforeEach(function(){
+      this.model.unset("name");
+      this.el = this.view.$("#avatar");
+    });
+
+    it("should use the 'default' substitution setting", function(){
+      expect(this.el.attr("class")).toBe("");
+    });
+  });
+
+  describe("when binding to text and unsetting the model's property", function(){
+    beforeEach(function(){
+      this.model.unset("doctor");
+      this.el = this.view.$("#doctor");
+    });
+
+    it("should set the text to an empty string", function(){
+      expect(this.el.text()).toBe("");
+    });
+  });
+
+  describe("when binding to html and unsetting the model's property", function(){
+    beforeEach(function(){
+      this.model.unset("villain");
+      this.el = this.view.$("#villain");
+    });
+
+    it("should set the html to an empty string", function(){
+      expect(this.el.html()).toBe("");
+    });
+  });
+
+});
+
+describe("configured data-bind substitutions", function(){
+  beforeEach(function(){
+    Backbone.ModelBinding.Configuration.dataBindSubst({
+      text: "text subst",
+      html: " "
+    });
+    this.model = new AModel({
+      doctor: "Seuss"
+    });
+    this.view = new AView({model: this.model});
+    this.view.render();
+  });
+
+  afterEach(function(){
+    Backbone.ModelBinding.Configuration.restoreDataBindSubstConfig();
+  });
+
+  describe("when binding to text and unsetting the model's property", function(){
+    beforeEach(function(){
+      this.model.unset("doctor");
+      this.el = this.view.$("#doctor");
+    });
+
+    it("should set the text to an empty string", function(){
+      expect(this.el.text()).toBe("text subst");
+    });
+  });
+
+  describe("when binding to html and unsetting the model's property", function(){
+    beforeEach(function(){
+      this.model.unset("villain");
+      this.el = this.view.$("#villain");
+    });
+
+    it("should set the html to an empty string", function(){
+      expect(this.el.html()).toBe(" ");
+    });
+  });
+
+});
+
+describe("resetting the data bind substitutions", function(){
+  beforeEach(function(){
+    Backbone.ModelBinding.Configuration.dataBindSubst({
+      text: "text subst",
+      html: "html subst"
+    });
+    this.model = new AModel({
+      doctor: "Seuss",
+      villain: "mort"
+    });
+    this.view = new AView({model: this.model});
+    this.view.render();
+
+    Backbone.ModelBinding.Configuration.restoreDataBindSubstConfig();
+  });
+
+  it("should use the default for text substitutions", function(){
+    this.model.unset("doctor");
+    this.doctorEl = this.view.$("#doctor");
+    expect(this.doctorEl.text()).toBe("");
+  });
+
+  it("should use the default for html substitutions", function(){
+    this.model.unset("villain");
+    this.villainEl = this.view.$("#villain");
+    expect(this.villainEl.html()).toBe("");
+  });
+});
+
+describe("when the data-bind attribute is manually configured", function(){
+  beforeEach(function(){
+    Backbone.ModelBinding.Conventions.databind.selector = "*[data-bind-bb]";
+    this.model = new AModel({
+      doctor: "Seuss",
+      villain: "mort"
+    });
+    this.view = new AView({model: this.model});
+    this.view.render();
+    this.el = this.view.$("#doctor_data_bind_bb");
+    Backbone.ModelBinding.Conventions.databind.selector = "*[data-bind]";
+  });
+
+  it("should set the element's text to the model's property value immediately", function(){
+    expect(this.el.text()).toBe("Seuss");
+  });
+
+  it("should set the text of the element when the model's property changes", function(){
+    this.model.set({doctor: "Who"});
+    expect(this.el.text()).toBe("Who");
+  });
+});

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

@@ -0,0 +1,124 @@
+describe("global configure all binding attributes", function(){
+  beforeEach(function(){
+    Backbone.ModelBinding.Configuration.store();
+
+    this.model = new AModel({
+      name: "some dude",
+      education: "graduate",
+      graduated: "maybe",
+      drivers_license: true
+    });
+
+    Backbone.ModelBinding.Configuration.configureAllBindingAttributes("class");
+    this.view = new GlobalAllBindingAttributesView({model: this.model});
+    this.view.render();
+  });
+
+  afterEach(function(){
+    Backbone.ModelBinding.Configuration.restore();
+  });
+
+  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("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();
+    });
+  });
+});