Make package with dev deps.

Create test page that runs Backbone tets + own tests.
Codecademy · Jun 15, 2012 · c211bff · c211bff
1 parent 139612f
commit c211bff
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/backbone.declarative.js b/backbone.declarative.js
@@ -30,6 +30,7 @@
     constructor: function () {
       _View.apply(this, Array.prototype.slice.call(arguments));
       this.bindModelEvents();
+      this.bindCollectionEvents();
     }
 
   , _bindDeclarativeEvents: function (prop, events) {
@@ -52,23 +53,23 @@
 
   , bindModelEvents: function (modelEvents) {
       if (!(modelEvents || (modelEvents = getValue(this, 'modelEvents')))) return;
-      if (!this.model) throw new Erorr('View model does not exist');
-      this.unBindModelEvents();
-      this.bindDeclarativeEvents('model', modelEvents);
+      if (!this.model) throw new Error('View model does not exist');
+      this.unbindModelEvents();
+      this._bindDeclarativeEvents('model', modelEvents);
     }
 
-  , unBindModelEvents: function () {
+  , unbindModelEvents: function () {
       this._unbindDeclarativeEvents('model')
     }
 
   , bindCollectionEvents: function (collectionEvents) {
       if (!(collectionEvents || (collectionEvents = getValue(this, 'collectionEvents')))) return;
-      if (!this.collection) throw new Erorr('View collection does not exist'); 
-      this.unBindCollectionEvents();
-      this.bindDeclerativeEvents('collection', collectionEvents);
+      if (!this.collection) throw new Error('View collection does not exist'); 
+      this.unbindCollectionEvents();
+      this._bindDeclarativeEvents('collection', collectionEvents);
     }
 
-  , unBindCollectionEvents: function () {
+  , unbindCollectionEvents: function () {
       this._unbindDeclarativeEvents('collection');
     }
   });

diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "author": "Amjad Masad <amjad.masad@gmail.com> (http://amasad.me)",
+  "name": "backbone.declarative",
+  "description": "Adds declarative model and collection binding for Backbone Views",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Codecademy/backbone.declarative.git"
+  },
+  "engines": {
+    "node": "~0.6.2"
+  },
+  "dependencies": {
+      "underscore": "latest",
+      "backbone": "0.9.2"
+    },
+  "devDependencies": {}
+}
diff --git a/test/test.html b/test/test.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Backbone Test Suite</title>
+  <link rel="stylesheet" href="../node_modules/backbone/test/vendor/qunit.css" type="text/css" media="screen" />
+  <script type="text/javascript" src="../node_modules/backbone/test/vendor/json2.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/vendor/jquery-1.7.1.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/vendor/qunit.js"></script>
+  <script type="text/javascript">
+    QUnit.config.reorder = false;
+  </script>
+  <script type="text/javascript" src="../node_modules/backbone/test/vendor/jslitmus.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/vendor/underscore-1.3.1.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/backbone.js"></script>
+  <script type="text/javascript" src="../backbone.declarative.js"></script>
+
+  <!--<script type="text/javascript" src="../node_modules/backbone/test/noconflict.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/events.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/model.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/collection.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/router.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/view.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/sync.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/speed.js"></script>
+  <script type="text/javascript" src="../node_modules/backbone/test/setdomlibrary.js"></script>-->
+  <script type="text/javascript" src="test.js"></script>
+</head>
+<body>
+  <h1 id="qunit-header">Backbone Test Suite</h1>
+  <div id="qunit-testrunner-toolbar"></div>
+  <h2 id="qunit-banner"></h2>
+  <h2 id="qunit-userAgent"></h2>
+  <ol id="qunit-tests"></ol>
+  <br /><br />
+  <h1 id="qunit-header"><a href="#">Backbone Speed Suite</a></h1>
+  <div id="jslitmus_container" style="margin: 20px 10px;"></div>
+</body>
+</html>
diff --git a/test/test.js b/test/test.js
@@ -0,0 +1,148 @@
+$(function () {
+
+  var model, collection, view;
+  module('Backbone.declarative', {
+    setup: function () {
+      model = new Backbone.Model({
+        foo: ''
+      });
+
+      collection = new Backbone.Collection({
+        model: Backbone.Model
+      });
+      collection.add(model);
+
+      view = new Backbone.View({
+        model: model
+      , collection: collection
+      });
+    }
+  });
+
+  test('View: bindModelEvents', function () {
+    var count = 0;
+    view.bindModelEvents({
+      'change:foo': function (m, v, changed) {
+          equal(this, view);
+          equal(m, model);
+          equal(v, 'bar');
+          deepEqual(changed, {changes: {foo: true}});
+          count++;
+        }
+      , 'change': function () {
+          count++;
+        }
+      , 'fooEvent': function () {
+          count++;
+        }
+    });
+
+    model.set('foo', 'bar');
+    model.trigger('fooEvent');
+    equal(count, 3);
+  });
+
+  test('View: unbindModelEvents', function () {
+    var count = 0;
+    view.bindModelEvents({
+      'fooEvent': function () {
+        count++;
+      }
+    })
+    model.trigger('fooEvent')
+
+    view.unbindModelEvents();
+    model.trigger('fooEvent');
+
+    equal(count, 1);
+  });
+
+  test('View: bindCollectionEvents', function () {
+    var count = 0;
+    view.bindCollectionEvents({
+      'change:foo': function (m, v, changed) {
+          equal(this, view);
+          equal(m, model);
+          equal(v, 'bar');
+          deepEqual(changed, {changes: {foo: true}});
+          count++;
+        }
+      , 'change': function () {
+          count++;
+        }
+      , 'fooEvent': function () {
+          count++;
+        }
+    });
+
+    model.set('foo', 'bar');
+    model.trigger('fooEvent');
+    collection.trigger('fooEvent');
+    equal(count, 4);
+  });
+
+  test('View: unbindModelEvents', function () {
+    var count = 0;
+    view.bindCollectionEvents({
+      'fooEvent': function () {
+        count++;
+      }
+    })
+    collection.trigger('fooEvent')
+
+    view.unbindCollectionEvents();
+    model.trigger('fooEvent');
+
+    equal(count, 1);
+  });
+
+  test('Use in declarative format', function () {
+    var ThrowerView = Backbone.View.extend({
+      collectionEvents: {
+        'change:foo': 'onFooChange'
+      }
+    , modelEvents: {
+        'change:foo': 'onFooChange'
+      }
+    });
+
+    raises(function () {
+      new ThrowerView();
+    });
+
+    raises(function () {
+      new ThrowerView({
+        model: model
+      });
+    });
+
+    raises(function () {
+      new ThrowerView({
+        model: model
+      , collection: collection
+      })
+    });
+
+    var count = 0;
+    var SomeView = Backbone.View.extend({
+      collectionEvents: {
+        'change:foo': 'onFooChange'
+      }
+    , modelEvents: {
+        'change:foo': 'onFooChange'
+      }
+
+    , onFooChange: function () {
+        count++;
+      }
+    });
+
+    new SomeView({
+      model: model
+    , collection: collection
+    })
+    model.set('foo', 'bar');
+    equal(count, 2);
+  });
+
+});