From 5d3ed082b823baf6ac0a4d23a0d0c798d164cf6f Mon Sep 17 00:00:00 2001
From: David DeSandro <desandrocodes@gmail.com>
Date: Wed, 30 Oct 2013 21:01:58 -0400
Subject: [PATCH] test filtering

---
 bower.json        |  1 +
 notes.md          |  3 --
 test/.jshintrc    |  1 +
 test/filtering.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++
 test/helpers.js   | 19 ++++++++++++
 test/index.html   | 16 ++++++++++
 test/sorting.js   | 10 ------
 7 files changed, 114 insertions(+), 13 deletions(-)
 create mode 100644 test/filtering.js
 create mode 100644 test/helpers.js

diff --git a/bower.json b/bower.json
index 8948514..b5d414d 100644
--- a/bower.json
+++ b/bower.json
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "doc-ready": "desandro/doc-ready",
+    "jquery": "1",
     "qunit": "1.12"
   }
 }
diff --git a/notes.md b/notes.md
index eab3d35..b323d6c 100644
--- a/notes.md
+++ b/notes.md
@@ -8,9 +8,6 @@ move munge sorter to separate file?
 
 ## tests
 
-filter
-  jQuery filtering
-
 updateSortData
 
 ## bugs
diff --git a/test/.jshintrc b/test/.jshintrc
index 8d44cc0..db70381 100644
--- a/test/.jshintrc
+++ b/test/.jshintrc
@@ -6,6 +6,7 @@
   "unused": true,
   "predef": {
     "Isotope": false,
+    "getText": false,
 
     "asyncTest": false,
     "deepEqual": false,
diff --git a/test/filtering.js b/test/filtering.js
new file mode 100644
index 0000000..eb34e03
--- /dev/null
+++ b/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' );
+
+});
+
+})();
diff --git a/test/helpers.js b/test/helpers.js
new file mode 100644
index 0000000..038d99f
--- /dev/null
+++ b/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;
+  };
+
+})();
diff --git a/test/index.html b/test/index.html
index 5e1f8c1..11ac564 100644
--- a/test/index.html
+++ b/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">
diff --git a/test/sorting.js b/test/sorting.js
index f7874f2..8e8cfa3 100644
--- a/test/sorting.js
+++ b/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++ ) {