test filtering

bower.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "doc-ready": "desandro/doc-ready",
+    "jquery": "1",
     "qunit": "1.12"
   }
 }

notes.md

@@ -8,9 +8,6 @@ move munge sorter to separate file?
 
 ## tests
 
-filter
-  jQuery filtering
-
 updateSortData
 
 ## bugs

test/.jshintrc

@@ -6,6 +6,7 @@
   "unused": true,
   "predef": {
     "Isotope": false,
+    "getText": false,
 
     "asyncTest": false,
     "deepEqual": false,

test/filtering.js

@@ -0,0 +1,77 @@
+( function() {
+
+'use strict';
+
+var $ = window.jQuery;
+
+// return a string of item ids
+function getFilteredItemIDs( iso ) {
+  var texts = [];
+  for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) {
+    var item = iso.filteredItems[i];
+    var id = item.element.getAttribute('data-item-id');
+    texts.push( id );
+  }
+  return texts.join(',');
+}
+
+/*
+<div data-item-id="1" class="item orange">5</div>
+<div data-item-id="2" class="item">3</div>
+<div data-item-id="3" class="item orange tall">2</div>
+<div data-item-id="4" class="item tall">9</div>
+<div data-item-id="5" class="item">7</div>
+<div data-item-id="6" class="item orange">1</div>
+<div data-item-id="7" class="item orange tall">8</div>
+*/
+
+test( 'filtering', function() {
+
+  var iso = new Isotope( '#filtering', {
+    transitionDuration: 0
+  });
+
+  var ids = getFilteredItemIDs( iso );
+  equal( ids, '1,2,3,4,5,6,7', 'all items there by default' );
+
+  function checkFilter( filter, expectedIDs, message ) {
+    iso.layout({ filter: filter });
+    ids = getFilteredItemIDs( iso );
+    equal( ids, expectedIDs, message || filter );
+  }
+
+  checkFilter( '.orange', '1,3,6,7' );
+  checkFilter( '.tall', '3,4,7' );
+  checkFilter( '.tall.orange', '3,7' );
+
+  iso.layout({
+    filter: function( elem ) {
+      var num = parseInt( getText( elem ), 10 );
+      return num > 5;
+    }
+  });
+  ids = getFilteredItemIDs( iso );
+  equal( ids, '4,5,7', 'function, text is greater than 5' );
+
+  // filter with jQuery
+  iso.options.isJQueryFiltering = true;
+
+  checkFilter( '.orange', '1,3,6,7', '.orange with jQuery' );
+  checkFilter( '.tall', '3,4,7', '.orange with jQuery' );
+  checkFilter( '.tall.orange', '3,7', '.tall.orange with jQuery' );
+  
+  checkFilter( ':not(.orange)', '2,4,5' );
+  checkFilter( '.orange:not(.tall)', '1,6' );
+
+  iso.layout({
+    filter: function() {
+      var num = parseInt( $(this).text(), 10 );
+      return num > 5;
+    }
+  });
+  ids = getFilteredItemIDs( iso );
+  equal( ids, '4,5,7', 'function, text is greater than 5, with jQuery' );
+
+});
+
+})();

test/helpers.js

@@ -0,0 +1,19 @@
+( function() {
+
+'use strict';
+
+// ----- default layout mode ----- //
+Isotope.prototype.options.layoutMode = 'fitRows';
+
+// ----- getText ----- //
+var docElem = document.documentElement;
+
+window.getText = docElem.textContent ?
+  function( elem ) {
+    return elem.textContent;
+  } :
+  function( elem ) {
+    return elem.innerText;
+  };
+
+})();

test/index.html

@@ -21,6 +21,8 @@
 <script src="../bower_components/outlayer/outlayer.js"></script>
 <script src="../bower_components/masonry/masonry.js"></script>
 
+<script src="../bower_components/jquery/jquery.js"></script>
+
 <script src="../js/item.js"></script>
 <script src="../js/layout-mode.js"></script>
 <script src="../js/isotope.js"></script>
@@ -28,8 +30,10 @@
 <script src="../js/layout-modes/masonry.js"></script>
 <script src="../js/layout-modes/cells-by-row.js"></script>
 
+<script src="helpers.js"></script>
 <script src="sorting.js"></script>
 <script src="get-sort-data.js"></script>
+<script src="filtering.js"></script>
 <script src="layout-complete.js"></script>
 <script src="get-segment-size.js"></script>
 
@@ -62,6 +66,18 @@
     </div>
   </div>
 
+  <h2>Filtering</h2>
+
+  <div id="filtering" class="container">
+    <div data-item-id="1" class="item orange">5</div>
+    <div data-item-id="2" class="item">3</div>
+    <div data-item-id="3" class="item orange tall">2</div>
+    <div data-item-id="4" class="item tall">9</div>
+    <div data-item-id="5" class="item">7</div>
+    <div data-item-id="6" class="item orange">1</div>
+    <div data-item-id="7" class="item orange tall">8</div>
+  </div>
+
   <h2>layoutComplete</h2>
 
   <div id="layout-complete" class="container">

test/sorting.js

@@ -2,16 +2,6 @@
 
 'use strict';
 
-var docElem = document.documentElement;
-
-var getText = docElem.textContent ?
-  function( elem ) {
-    return elem.textContent;
-  } :
-  function( elem ) {
-    return elem.innerText;
-  };
-
 function getItemsText( iso ) {
   var texts = [];
   for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) {