Setup karma

karma.conf.js

@@ -0,0 +1,19 @@
+// karma.conf.js
+module.exports = function(config) {
+  config.set({
+    browsers: ['PhantomJS'],
+    frameworks: ['qunit'],
+    plugins: [
+      'karma-qunit',
+      'karma-phantomjs-launcher'
+    ],
+    files: [
+      'test/vendor/underscore/underscore.js',
+      'test/vendor/jquery/dist/jquery.js',
+      'test/vendor/backbone/backbone.js',
+      'test/helpers/*.js',
+      'woodhouse.js',
+      'test/*.spec.js'
+    ]
+  });
+};

package.json

@@ -4,7 +4,7 @@
   "description": "Woodhouse, fetch me a rug!",
   "main": "woodhouse.js",
   "scripts": {
-    "test": "mocha -R spec test"
+    "test": "karma start"
   },
   "homepage": "https://github.com/ptshih/woodhouse",
   "repository": {
@@ -28,6 +28,8 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "karma": "^0.12.16",
+    "karma-cli": "0.0.4",
+    "karma-phantomjs-launcher": "^0.1.4",
     "karma-qunit": "^0.1.3"
   }
 }

test/bindings.js → test/bindings.spec.js

@@ -2,7 +2,54 @@
 
 module('Bindings', {
   setup: function() {
-    Backbone.$ = $;
+    // Elements
+    // TODO (kelly) break these tests up into logical chunks
+    var $fixture = $('#qunit-fixture');
+    this.$input = $('<input id="input" bind-val="text" />');
+    this.$textarea = $('<textarea id="textarea" bind-val="html"></textarea>');
+    this.$contenteditable = $('<div id="contenteditable" contenteditable="true" bind-text="text"></div>');
+    this.$text = $('<div id="text" bind-text="text"></div>');
+    this.$html = $('<div id="html" bind-text="html"></div>');
+    this.$uppercase = $('<div id="uppercase" bind-text="uppercase"></div>');
+
+    this.$visible = $('<div id="visible" bind-visible="shouldBeVisible"></div>');
+    this.$hidden = $('<div id="hidden" bind-hidden="shouldBeHidden"></div>');
+
+    this.$enabled = $('<input id="enabled" type="text" bind-enabled="shouldBeEnabled" />');
+    this.$disabled = $('<input id="disabled" type="text" bind-disabled="shouldBeDisabled" />');
+
+    this.$if = $('<div id="if" bind-if="shouldBeTrue"><div>True</div></div>');
+    this.$unless = $('<div id="unless" bind-unless="shouldBeFalse"><div>False</div></div>');
+
+    this.$checked = $('<input id="checked" type="checkbox" bind-checked="checked" />');
+
+    this.$array = $('<div id="array"><div bind-array="array"></div></div>');
+    this.$attr = $('<div id="attr" bind-attr-data-attr="attr"></div>');
+
+    this.$each = $('<div id="each" bind-each="each"><div class="each-item" bind-text="id" bind-attr-data-id="id"></div></div>');
+    this.$select = $('<select id="select" bind-each="select" bind-val="selected_id"><option bind-val="id" bind-text="text"></option></select>');
+
+    $.each([
+      'input',
+      'textarea',
+      'contenteditable',
+      'text',
+      'html',
+      'uppercase',
+      'visible',
+      'hidden',
+      'enabled',
+      'disabled',
+      'if',
+      'unless',
+      'checked',
+      'array',
+      'attr',
+      'each',
+      'select'
+    ], function(i, name) {
+      $fixture.append(this['$' + name]);
+    }.bind(this));
 
     this.model = new Woodhouse.Model({
       text: 'Sterling Archer',
@@ -44,37 +91,8 @@ module('Bindings', {
       el: this.view.el,
       model: this.model
     }) || [];
-
-
-    // Elements
-    this.$el = this.view.$el;
-    this.$input = this.view.$el.find('#input');
-    this.$textarea = this.view.$el.find('#textarea');
-    this.$contenteditable = this.view.$el.find('#contenteditable');
-    this.$text = this.view.$el.find('#text');
-    this.$html = this.view.$el.find('#html');
-    this.$uppercase = this.view.$el.find('#uppercase');
-
-    this.$visible = this.view.$el.find('#visible');
-    this.$hidden = this.view.$el.find('#hidden');
-
-    this.$enabled = this.view.$el.find('#enabled');
-    this.$disabled = this.view.$el.find('#disabled');
-
-    this.$if = this.view.$el.find('#if');
-    this.$unless = this.view.$el.find('#unless');
-
-    this.$checked = this.view.$el.find('#checked');
-
-    this.$array = this.view.$el.find('#array');
-    this.$attr = this.view.$el.find('#attr');
-
-    this.$each = this.view.$el.find('#each');
-    this.$select = this.view.$el.find('#select');
   },
-  teardown: function() {
-
-  }
+  teardown: function() {}
 });
 
 
@@ -105,9 +123,9 @@ test('bind-text', function() {
   deepEqual(this.$text.text(), 'Malory Archer');
 
   // view-to-model
-  this.$input.val('Malory Archer');
+  this.$input.val('Woodhouse');
   this.$input.trigger('input');
-  deepEqual(this.$text.text(), 'Malory Archer');
+  equal(this.model.get('text'), 'Woodhouse');
 });
 
 

test/helpers/function.js

@@ -0,0 +1,41 @@
+// Function.prototype.bind polyfill for PhantomJS
+// https://github.com/cujojs/poly/blob/master/function.js
+
+(function() {
+  var isFunction = function(o) {
+    return typeof o == 'function';
+  };
+
+
+  var bind,
+    slice = [].slice,
+    proto = Function.prototype,
+    featureMap;
+
+  featureMap = {
+    'function-bind': 'bind'
+  };
+
+  function has(feature) {
+    var prop = featureMap[feature];
+    return isFunction(proto[prop]);
+  }
+
+  // check for missing features
+  if (!has('function-bind')) {
+    // adapted from Mozilla Developer Network example at
+    // https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
+    bind = function bind(obj) {
+      var args = slice.call(arguments, 1),
+        self = this,
+        nop = function() {},
+        bound = function() {
+          return self.apply(this instanceof nop ? this : (obj || {}), args.concat(slice.call(arguments)));
+        };
+      nop.prototype = this.prototype || {}; // Firefox cries sometimes if prototype is undefined
+      bound.prototype = new nop();
+      return bound;
+    };
+    proto.bind = bind;
+  }
+})();

test/helpers/setup.js

@@ -0,0 +1,6 @@
+// Some setup since karma doesn't add #qunit-fixture to its html
+(function() {
+  var fixture = document.createElement('div');
+  fixture.id = "qunit-fixture";
+  document.body.appendChild(fixture);
+})();

test/index.html

@@ -15,60 +15,13 @@
   <div id="qunit"></div>
 
   <div id="qunit-fixture">
-    <!-- Input -->
-    <input id="input" bind-val="text">
-    <textarea id="textarea" bind-val="html"></textarea>
-    <div id="contenteditable" contenteditable="true" bind-text="text"></div>
-
-    <!-- Output -->
-    <div id="text" bind-text="text"></div>
-    <div id="html" bind-text="html"></div>
-    <div id="uppercase" bind-text="uppercase"></div>
-
-    <!-- Hidden / Visible -->
-    <div id="visible" bind-visible="shouldBeVisible"></div>
-    <div id="hidden" bind-hidden="shouldBeHidden"></div>
-
-
-    <input id="enabled" type="text" bind-enabled="shouldBeEnabled">
-    <input id="disabled" type="text" bind-disabled="shouldBeDisabled">
-
-    <input id="checked" type="checkbox" bind-checked="checked">
-
-    <!-- If / Unless -->
-    <div id="if" bind-if="shouldBeTrue">
-      <div>True</div>
-    </div>
-
-    <div id="unless" bind-unless="shouldBeFalse">
-      <div>False</div>
-    </div>
-
-    <!-- Array -->
-    <div id="array">
-      <div bind-array="array"></div>
-    </div>
-
-
-    <!-- Attr -->
-    <div id="attr" bind-attr-data-attr="attr"></div>
-
-    <!-- Each -->
-    <div id="each" bind-each="each">
-      <div class="each-item" bind-text="id" bind-attr-data-id="id"></div>
-    </div>
-
-    <select id="select" bind-each="select" bind-val="selected_id">
-      <option bind-val="id" bind-text="text"></option>
-    </select>
-
   </div>
 
   <!-- Tests -->
-  <script src="models.js"></script>
-  <script src="relations.js"></script>
-  <script src="events.js"></script>
-  <script src="misc.js"></script>
-  <script src="bindings.js"></script>
+  <script src="models.spec.js"></script>
+  <script src="relations.spec.js"></script>
+  <script src="events.spec.js"></script>
+  <script src="misc.spec.js"></script>
+  <script src="bindings.spec.js"></script>
 </body>
 </html>