appetizer-ui 0.7.1 → 0.8.0

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

@@ -0,0 +1,36 @@
+describe("globalConfigurableBindingAttributes", function(){
+  beforeEach(function(){
+    Backbone.ModelBinding.Configuration.store();
+    Backbone.ModelBinding.Configuration.configureBindingAttributes({text: "modelAttr"});
+
+    this.model = new AModel({ weakness: "liver & onions" });
+    this.view = new AView({model: this.model});
+    this.view.render();
+  });
+
+  afterEach(function(){
+    Backbone.ModelBinding.Configuration.restore();
+  });
+
+  describe("text element binding with global configuration of convention attribute", function(){
+    it("bind view changes to the model's field, by configurable convention", function(){
+      var el = this.view.$("#super_hero_weakness");
+      el.val("spinach");
+      el.trigger('change');
+
+      expect(this.model.get('weakness')).toEqual("spinach");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+	  this.model.set({weakness: "broccoli"});
+      var el = this.view.$("#super_hero_weakness");
+      expect(el.val()).toEqual("broccoli");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#super_hero_weakness");
+      expect(el.val()).toEqual("liver & onions");
+    });
+  });
+  
+});

data/lib/appetizer/ui/jasmine/js/backbone.modelbinding/helpers/SpecHelper.js

@@ -0,0 +1,4 @@
+beforeEach(function() {
+  this.addMatchers({
+  })
+});

data/lib/appetizer/ui/jasmine/js/backbone.modelbinding/helpers/sample.backbone.app.js

@@ -0,0 +1,159 @@
+AModel = Backbone.Model.extend({urlRoot: "/foo"});
+
+AppetizerView = Backbone.View.extend({
+  render: function(){
+    var html = $("\
+      <div id='villain' data-bind='text villain' />\
+      <div id='mrNice' data-bind='text niceDude' />\
+      <div id='pet'     data-bind='text pet.smelly' />\
+      <div id='country' data-bind='text country.withFood.hasWine' />\
+      <input type='text' id='usa' modelAttr='country.withFood.hasBurgers'>\
+      <input type='text' id='cat' modelAttr='pet.fluffy'>\
+      ");
+    $(this.el).append(html).appendTo(sandbox());
+    Backbone.ModelBinding.bind(this, { text: "modelAttr" });
+  }
+});
+
+AView = Backbone.View.extend({
+  render: function(){
+    var html = $("\
+      <div id='eventDiv' data-bind='text event:foo' />\
+      <img id='avatar' data-bind='src urlSrc; class name'>\
+      <input id='noType'>\
+      <div id='showHideThing' data-bind='displayed isValid' />\
+      <div id='showHideAnotherThing' data-bind='hidden isValid' />\
+      <button id='unclicker' data-bind='disabled isValid'>Click Me!</button>\
+      <button id='clicker' data-bind='enabled isValid'>Click Me!</button>\
+      <div id='villain' data-bind='html villain'><p>test</p></div>\
+      <div id='doctor_no_elem' data-bind='doctor'>Seuss</div>\
+      <div id='doctor_data_bind_bb' data-bind-bb='doctor'>Seuss</div>\
+      <div id='doctor' data-bind='text doctor'>Seuss</div>\
+      <div id='pet' data-bind='someAttr pet' someAttr='Cat'></div>\
+      <input type='text' id='super_hero_weakness' modelAttr='weakness'>\
+      <input type='text' id='something'> \
+      <div id='showIt'></div>\
+      <input type='text' id='prefilled_name' value='a name'>\
+      <input type='text' id='name'>\
+      <select id='operating_system'> \
+        <option value='osx'>osx</option> \
+        <option value='windows'>windows</option> \
+        <option value='linux'>linux</option> \
+      </select> \
+      <select id='education'> \
+        <option value='none'>none</option> \
+        <option value='grade_school'>i dun learned at grade skool</option> \
+        <option value='high school'>high school</option> \
+        <option value='college'>college</option> \
+        <option value='graduate'>graduate</option> \
+      </select> \
+      <select id='age_level'> \
+        <option value=''>-- select --</option> \
+        <option value='0'>under 20</option> \
+        <option value='21'>21 - 40</option> \
+        <option value='41'>over 41</option> \
+      </select> \
+      <select id='another_select'> \
+        <option value='pre_selected' selected='selected'>pre selected</option> \
+        <option value='not_selected'>not selected</option> \
+      </select> \
+      <input type='radio' id='graduated_yes' name='graduated' value='yes'>\
+      <input type='radio' id='graduated_no' name='graduated' value='no'>\
+      <input type='radio' id='graduated_maybe' name='graduated' value='maybe'>\
+      <input type='radio' id='us_citizen_true' name='us_citizen' value='true'>\
+      <input type='radio' id='us_citizen_false' name='us_citizen' value='false'>\
+      <input type='radio' id='another_radio_true' name='another_radio' value='true' checked='checked'>\
+      <input type='radio' id='another_radio_false' name='another_radio' value='false'>\
+      <input type='checkbox' id='drivers_license' value='yes'>\
+      <input type='checkbox' id='motorcycle_license' value='yes' checked='checked'>\
+      <input type='checkbox' id='binary_checkbox' value='yes'>\
+      <textarea id='bio'></textarea>\
+      <p id='aParagraph'></p>\
+      <input type='password' id='password'>\
+      <input type='number' id='number'>\
+      <input type='range' id='range' min='0' max='98765'>\
+      <input type='email' id='email'>\
+      <input type='url' id='urlSrc'>\
+      <input type='tel' id='tel'>\
+      <input type='search' id='search'>\
+      ");
+    $(this.el).append(html).appendTo(sandbox());
+    Backbone.ModelBinding.bind(this);
+  }
+});
+
+AllBindingAttributesView = Backbone.View.extend({
+  render: function(){
+    var html = $("\
+      <input type='text' id='v_name' class='name'> \
+      <select id='v_education' class='education'> \
+        <option value='none'>none</option> \
+        <option value='grade_school'>i dun learned at grade skool</option> \
+        <option value='high school'>high school</option> \
+        <option value='college'>college</option> \
+        <option value='graduate'>graduate</option> \
+      </select> \
+      <input type='radio' id='graduated_yes' name='graduated' class='graduated' value='yes'>\
+      <input type='radio' id='graduated_no' name='graduated' class='graduated' value='no'>\
+      <input type='radio' id='graduated_maybe' name='graduated' class='graduated' value='maybe'>\
+      <input type='checkbox' id='v_drivers_license' class='drivers_license' value='yes'>\
+      <textarea id='v_bio' class='bio'></textarea>\
+    ");
+    $(this.el).append(html).appendTo(sandbox());
+
+    Backbone.ModelBinding.bind(this, {all: "class"});
+  }
+});
+
+GlobalAllBindingAttributesView = Backbone.View.extend({
+  render: function(){
+    var html = $("\
+      <input type='text' id='v_name' class='name'> \
+      <select id='v_education' class='education'> \
+        <option value='none'>none</option> \
+        <option value='grade_school'>i dun learned at grade skool</option> \
+        <option value='high school'>high school</option> \
+        <option value='college'>college</option> \
+        <option value='graduate'>graduate</option> \
+      </select> \
+      <input type='radio' id='graduated_yes' name='graduated' class='graduated' value='yes'>\
+      <input type='radio' id='graduated_no' name='graduated' class='graduated' value='no'>\
+      <input type='radio' id='graduated_maybe' name='graduated' class='graduated' value='maybe'>\
+      <input type='checkbox' id='v_drivers_license' class='drivers_license' value='yes'>\
+      <textarea id='v_bio' class='bio'></textarea>\
+    ");
+    $(this.el).append(html).appendTo(sandbox());
+
+    Backbone.ModelBinding.bind(this);
+  }
+});
+
+AnotherView = Backbone.View.extend({
+  render: function(){
+    var html = $("\
+      <input type='text' class='super_power' modelAttr='weakness'>\
+      <select class='education'> \
+        <option value='none'>none</option> \
+        <option value='grade_school'>i dun learned at grade skool</option> \
+        <option value='high school'>high school</option> \
+        <option value='college'>college</option> \
+        <option value='graduate'>graduate</option> \
+      </select> \
+      <input type='radio' id='graduated_yes' class='graduated' value='yes'>\
+      <input type='radio' id='graduated_no' class='graduated' value='no'>\
+      <input type='radio' id='graduated_maybe' class='graduated' value='maybe'>\
+      <input type='checkbox' class='drivers_license' value='yes'>\
+    ");
+
+    $(this.el).append(html).appendTo(sandbox());
+
+    Backbone.ModelBinding.bind(this, {
+      text: 'class',
+      textarea: 'class',
+      password: 'class',
+      radio: 'class',
+      select: 'class',
+      checkbox: 'class',
+    });
+  }
+});

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

@@ -0,0 +1,142 @@
+describe("HTML5 input convention bindings", function(){
+  beforeEach(function(){
+    this.model = new AModel({
+        number: "1234",
+        range: "65",
+        tel: "321-123-1222",
+        search: "search text",
+        urlSrc: "http:\\\\url.com",
+        email: "email@domain.com"
+    });
+    this.view = new AView({model: this.model});
+    this.view.render();
+  });
+
+  describe("number element binding", function(){
+    it("bind view changes to the model's field, by convention of id", function(){
+      var el = this.view.$("#number");
+      el.val("09876");
+      el.trigger('change');
+
+      expect(this.model.get('number')).toEqual("09876");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({number: "45678"});
+      var el = this.view.$("#number");
+      expect(el.val()).toEqual("45678");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#number");
+      expect(el.val()).toEqual("1234");
+    });
+  });
+
+  describe("range element binding", function(){
+    it("bind view changes to the model's field, by convention of id", function(){
+      var el = this.view.$("#range");
+      el.val("9876");
+      el.trigger('change');
+
+      expect(this.model.get('range')).toEqual("9876");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({range: "45678"});
+      var el = this.view.$("#range");
+      expect(el.val()).toEqual("45678");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#range");
+      expect(el.val()).toEqual("65");
+    });
+  });
+
+   describe("tel element binding", function(){
+    it("bind view changes to the model's field, by convention of id", function(){
+      var el = this.view.$("#tel");
+      el.val("321-345-5555");
+      el.trigger('change');
+
+      expect(this.model.get('tel')).toEqual("321-345-5555");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({tel: "456-345-5555"});
+      var el = this.view.$("#tel");
+      expect(el.val()).toEqual("456-345-5555");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#tel");
+      expect(el.val()).toEqual("321-123-1222");
+    });
+  });
+    
+   describe("search element binding", function(){
+    it("bind view changes to the model's field, by convention of id", function(){
+      var el = this.view.$("#search");
+      el.val("more text");
+      el.trigger('change');
+
+      expect(this.model.get('search')).toEqual("more text");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({search: "new text"});
+      var el = this.view.$("#search");
+      expect(el.val()).toEqual("new text");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#search");
+      expect(el.val()).toEqual("search text");
+    });
+  });
+
+   describe("url element binding", function(){
+    it("bind view changes to the model's field, by convention of id", function(){
+      var el = this.view.$("#urlSrc");
+      el.val("some url");
+      el.trigger('change');
+
+      expect(this.model.get('urlSrc')).toEqual("some url");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({urlSrc: "new url"});
+      var el = this.view.$("#urlSrc");
+      expect(el.val()).toEqual("new url");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#urlSrc");
+      expect(el.val()).toEqual("http:\\\\url.com");
+    });
+  });
+
+  describe("email element binding", function(){
+    it("bind view changes to the model's field, by convention of id", function(){
+      var el = this.view.$("#email");
+      el.val("new@email.com");
+      el.trigger('change');
+        
+      expect(this.model.get('email')).toEqual("new@email.com");
+    });
+
+    it("bind model field changes to the form input, by convention of id", function(){
+      this.model.set({email: "more@email.gov"});
+      var el = this.view.$("#email");
+      expect(el.val()).toEqual("more@email.gov");
+    });
+
+    it("binds the model's value to the form field on render", function(){
+      var el = this.view.$("#email");
+      expect(el.val()).toEqual("email@domain.com");
+    });
+  });
+
+
+});

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

@@ -0,0 +1,73 @@
+describe("model unbinding", function(){
+  beforeEach(function(){
+    this.model = new AModel({ 
+      name: "a name",
+      bio: "a bio",
+      password: "it's a secret",
+      education: "college",
+      graduated: "no",
+      drivers_license: true,
+      isValid: true
+    });
+    this.view = new AView({model: this.model});
+    this.view.render();
+  });
+
+  describe("when unbinding a view should", function(){
+    beforeEach(function(){
+      Backbone.ModelBinding.unbind(this.view);
+    });
+
+    it("should unbind the text box", function(){
+      this.model.set({name: "some name change"});
+      var el = this.view.$("#name");
+      expect(el.val()).toEqual("a name");
+    });
+
+    it("should unbind the textarea", function(){
+      this.model.set({bio: "some change to my bio"});
+      var el = this.view.$("#bio");
+      expect(el.val()).toEqual("a bio");
+    });
+
+    it("should unbind the password", function(){
+      this.model.set({password: "this isn't it"});
+      var el = this.view.$("#password");
+      expect(el.val()).toEqual("it's a secret");
+    });
+
+    it("should unbind the select box", function(){
+      this.model.set({education: "none"});
+      var el = this.view.$("#education");
+      expect(el.val()).toEqual("college");
+    });
+
+    it("should unbind the radio group", function(){
+      this.model.set({graduated: "yes"});
+
+      var elYes = this.view.$("#graduated_yes");
+      var selected = elYes.attr("checked");
+      expect(selected).toBeFalsy();
+
+      var elNo = this.view.$("#graduated_no");
+      var selected = elNo.attr("checked");
+      expect(selected).toBeTruthy();
+    });
+
+    it("should unbind the checkbox", function(){
+      this.model.set({drivers_license: false});
+      var el = this.view.$("#drivers_license");
+      var selected = el.attr("checked");
+      expect(selected).toBeTruthy();
+    });
+
+    it("should unbind the data-bind", function(){
+      this.model.set({isValid: false});
+      var el = this.view.$("#clicker");
+      var disabled = el.attr("disabled");
+      expect(disabled).toBeFalsy();
+    });
+  });
+  
+});
+

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

@@ -0,0 +1,36 @@
+describe("Backbone.noConflict", function(){
+  beforeEach(function(){    
+    var that = this;  
+    this.localBackbone = Backbone.noConflict();
+    this.localUnderscore = _.noConflict();
+      
+    var Model = this.localBackbone.Model.extend({});
+    var View = this.localBackbone.View.extend({
+      render: function(){
+        var html = $("\
+          <input id='input'>\
+          <select id='select'> \
+            <option value='none'>none</option> \
+          </select> \
+          <input type='radio' id='radio' name='radio' value='yes'>\
+          <input type='checkbox' id='check' value='yes'>\
+          <button id='data' data-bind='disabled isValid'>Click Me!</button>\
+        ");
+        this.$(this.el).append(html);
+      }
+    });
+      
+    this.model = new Model();
+    this.view = new View({model: this.model});
+    this.view.render();
+  });
+  
+  afterEach(function(){
+    Backbone = this.localBackbone;
+    _ = this.localUnderscore;
+  });
+  
+  it("should use local copy of backbone when binding", function(){
+    this.localBackbone.ModelBinding.bind(this.view);
+  });
+});