More shuffling about. Set up jasmine jquery plugin and wrote a few te…

…sts.

SpecRunner.html

@@ -8,7 +8,8 @@
   <script type="text/javascript" src="lib/jasmine-0.11.1/jasmine-html.js"></script>
 
   <!-- include source files here... -->
-  <script type="text/javascript" src="vendor/jquery-1.4.2.min.js"></script>
+  <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
+  <script type="text/javascript" src="lib/jasmine-jquery.js"></script>
   <script type="text/javascript" src="src/jquery.sifter.js"></script>
 
   <!-- include spec files here... -->

examples/basic.html

@@ -82,7 +82,7 @@ <h3>Temperature</h3>
         <li class="temp-neutral tone-mid" style="background:#808080">#808080</li>
       </ul>
     </div>
-    <script src="../vendor/jquery-1.4.2.min.js"></script>
+    <script src="../lib/jquery-1.4.2.min.js"></script>
     <script src="../src/jquery.sifter.js"></script>
     <script>
       // On dom ready

examples/from_readme.html

@@ -42,7 +42,7 @@ <h3>Type</h3>
         <li class="type-inanimate size-small">Button</li>
       </ul>
     </div>
-    <script src="../vendor/jquery-1.4.2.min.js"></script>
+    <script src="../lib/jquery-1.4.2.min.js"></script>
     <script src="../src/jquery.sifter.js"></script>
     <script>
       $(function() {

lib/jasmine-jquery.js

@@ -0,0 +1,199 @@
+var readFixtures = function() {
+  return jasmine.getFixtures().proxyCallTo_('read', arguments);
+};
+
+var loadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('load', arguments);
+};
+
+var setFixtures = function(html) {
+  jasmine.getFixtures().set(html);
+}
+
+var sandbox = function(attributes) {
+  return jasmine.getFixtures().sandbox(attributes);
+};
+
+jasmine.getFixtures = function() {
+  return jasmine.currentFixtures_ = jasmine.currentFixtures_ || new jasmine.Fixtures();
+};
+
+jasmine.Fixtures = function() {
+  this.containerId = 'jasmine-fixtures';
+  this.fixturesCache_ = {};
+};
+
+jasmine.Fixtures.prototype.set = function(html) {
+  this.cleanUp();
+  this.createContainer_(html);
+};
+
+jasmine.Fixtures.prototype.load = function() {
+  this.cleanUp();
+  this.createContainer_(this.read.apply(this, arguments));
+};
+
+jasmine.Fixtures.prototype.read = function() {
+  var htmlChunks = [];
+
+  var fixtureUrls = arguments;
+  for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) {
+    htmlChunks.push(this.getFixtureHtml_(fixtureUrls[urlIndex]));
+  }
+
+  return htmlChunks.join('');
+};
+
+jasmine.Fixtures.prototype.clearCache = function() {
+  this.fixturesCache_ = {};
+};
+
+jasmine.Fixtures.prototype.cleanUp = function() {
+  $('#' + this.containerId).remove();
+};
+
+jasmine.Fixtures.prototype.sandbox = function(attributes) {
+  var attributesToSet = attributes || {};
+  return $('<div id="sandbox" />').attr(attributesToSet);
+};
+
+jasmine.Fixtures.prototype.createContainer_ = function(html) {
+  var container = $('<div id="' + this.containerId + '" />');
+  container.html(html);
+  $('body').append(container);
+};
+
+jasmine.Fixtures.prototype.getFixtureHtml_ = function(url) {  
+  if (typeof this.fixturesCache_[url] == 'undefined') {
+    this.loadFixtureIntoCache_(url);
+  }
+  return this.fixturesCache_[url];
+};
+
+jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function(url) {
+  var self = this;
+  $.ajax({
+    async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
+    dataType: 'html',
+    url: url,
+    success: function(data) {
+      self.fixturesCache_[url] = data;
+    }
+  });
+};
+
+jasmine.Fixtures.prototype.proxyCallTo_ = function(methodName, passedArguments) {
+  return this[methodName].apply(this, passedArguments);
+};
+
+
+jasmine.JQuery = function() {};
+
+jasmine.JQuery.browserTagCaseIndependentHtml = function(html) {
+  return $('<div/>').append(html).html();
+};
+
+jasmine.JQuery.elementToString = function(element) {
+  return $('<div />').append(element.clone()).html();
+};
+
+
+(function(){
+  var jQueryMatchers = {
+    toHaveClass: function(className) {
+      return this.actual.hasClass(className);
+    },
+
+    toBeVisible: function() {
+      return this.actual.is(':visible');
+    },
+
+    toBeHidden: function() {
+      return this.actual.is(':hidden');
+    },
+
+    toBeSelected: function() {
+      return this.actual.is(':selected');
+    },
+
+    toBeChecked: function() {
+      return this.actual.is(':checked');
+    },
+
+    toBeEmpty: function() {
+      return this.actual.is(':empty');
+    },
+
+    toExist: function() {
+      return this.actual.size() > 0;
+    },
+
+    toHaveAttr: function(attributeName, expectedAttributeValue) {
+      return hasProperty(this.actual.attr(attributeName), expectedAttributeValue);
+    },
+
+    toHaveId: function(id) {
+      return this.actual.attr('id') == id;
+    },
+
+    toHaveHtml: function(html) {
+      return this.actual.html() == jasmine.JQuery.browserTagCaseIndependentHtml(html);
+    },
+
+    toHaveText: function(text) {
+      return this.actual.text() == text;
+    },
+
+    toHaveValue: function(value) {
+      return this.actual.val() == value;
+    },
+
+    toHaveData: function(key, expectedValue) {
+      return hasProperty(this.actual.data(key), expectedValue);
+    },
+
+    toBe: function(selector) {
+      return this.actual.is(selector);
+    },
+
+    toContain: function(selector) {
+      return this.actual.find(selector).size() > 0;
+    }
+  };
+
+  var hasProperty = function(actualValue, expectedValue) {
+    if (expectedValue === undefined) {
+      return actualValue !== undefined;
+    }
+    return actualValue == expectedValue;
+  };
+
+  var bindMatcher = function(methodName) {
+    var matchersClassProto = jasmine.getEnv().matchersClass.prototype;
+
+    var builtInMatcher = matchersClassProto[methodName];
+
+    matchersClassProto[methodName] = function() {
+      if (this.actual instanceof jQuery) {
+        var result = jQueryMatchers[methodName].apply(this, arguments);
+        this.actual = jasmine.JQuery.elementToString(this.actual);
+        return result;
+      }
+
+      if (builtInMatcher) {
+        return builtInMatcher.apply(this, arguments);
+      }
+
+      return false;
+    };
+  };
+
+  for(var methodName in jQueryMatchers) {
+    bindMatcher(methodName);
+  }
+})();
+
+
+afterEach(function() {
+  jasmine.getFixtures().cleanUp();
+});

spec/SifterSpec.js

@@ -1,7 +1,23 @@
 describe("jquery.sifter", function() {
 
-  it("should be true", function() {
-    expect(true).toEqual(true);
+  beforeEach(function() {
+    setFixtures('<div id="sifted"><ul id="filterList"><li><ul><li><a id="filter1">Filter 1</a></li></ul></li></ul><table id="filteredList"><tbody><tr class="filter1"><td>Hello</td></tr></tbody></table></div>');
+    $('#sifted').sifter();
+  });
+
+  it('should add classes to the components', function() {
+    expect($('#filterList').hasClass('isFilterList')).toEqual(true);
+    expect($('#filteredList').hasClass('filtered')).toEqual(true);
+  });
+
+  it('should add data properties to the components', function() {
+    expect($.isArray($('#filterList').data('activeFilters'))).toEqual(true);
+    expect($.isArray($('#filteredList').data('activeFilters'))).toEqual(true);
+  });
+
+  it('should add methods to filtered component', function() {
+    expect($.isFunction($('#filteredList').setActiveFilters)).toEqual(true);
+    expect($.isFunction($('#filteredList').hasContents)).toEqual(true);
   });
 
 });