layoutComplete tests

12 years ago · b19c848467
4 changed files with 91 additions and 10 deletions
--- a/notes.md
+++ b/notes.md
@ -12,13 +12,4 @@ filter

 updateSortData

-
-layoutComplete test after
-  filter - hide some
-  filter - reveal some, some stay hidden, some are revealed, some do nothing
-  sort
-  filter, during transition filter again
-
-
-
 ## bugs
--- a/test/get-sort-data.js
+++ b/test/get-sort-data.js
@ -8,7 +8,8 @@ test( 'getSortData', function() {
      ninjaTurtle: '[data-ninja-turtle]',
      fruit: 'span.fruit',
      b: 'b parseFloat',
-      i: 'i parseInt'
+      i: 'i parseInt',
+      bbroke: 'b foobar'
    }
  });

@ -18,5 +19,6 @@ test( 'getSortData', function() {
  equal( item.sortData.fruit, 'watermelon', 'query selector shorthand' );
  equal( item.sortData.b, 3.14, 'parseFloat parser' );
  equal( item.sortData.i, 42, 'parseInt parser' );
+  equal( item.sortData.bbroke, '3.14', 'default nonparser' );

 });
--- a/test/index.html
+++ b/test/index.html
@ -29,6 +29,7 @@

 <script src="sorting.js"></script>
 <script src="get-sort-data.js"></script>
+<script src="layout-complete.js"></script>

 </head>
 <body>
@ -59,5 +60,19 @@
    </div>
  </div>

+  <h2>layoutComplete</h2>
+
+  <div id="layout-complete" class="container">
+    <div class="item a1 b1">a1 b1</div>
+    <div class="item a2 b1">a2 b1</div>
+    <div class="item a3 b1">a3 b1</div>
+    <div class="item a1 b2">a1 b2</div>
+    <div class="item a2 b2">a2 b2</div>
+    <div class="item a3 b2">a3 b2</div>
+    <div class="item a1 b3">a1 b3</div>
+    <div class="item a2 b3">a2 b3</div>
+    <div class="item a3 b3">a3 b3</div>
+  </div>
+
 </body>
 </html>
--- a/test/layout-complete.js
+++ b/test/layout-complete.js
@ -0,0 +1,73 @@
+test( 'layoutComplete', function() {
+
+  'use strict';
+
+  var iso = new Isotope( '#layout-complete', {
+    layoutMode: 'fitRows',
+    transitionDuration: '0.1s'
+  });
+
+  var tests = [
+    function() {
+      iso.once( 'layoutComplete', function() {
+        ok( true, 'layoutComplete after some were filtered' );
+        next();
+      });
+
+      iso.layout({
+        filter: '.a1'
+      });
+    },
+    function() {
+      iso.once( 'layoutComplete', function() {
+        ok( true, 'after some revealed, some hidden, some same' );
+        next();
+      });
+
+      iso.layout({
+        filter: '.b2'
+      });
+    },
+    function() {
+      iso.once( 'layoutComplete', function() {
+        ok( true, 'after random sort' );
+        next();
+      });
+
+      iso.layout({
+        sortBy: 'random'
+      });
+    },
+    function() {
+      iso.once( 'layoutComplete', function() {
+        ok( true, 'after layout mid-way thru transition' );
+        next();
+      });
+
+      iso.layout({
+        filter: '.a2',
+        transitionDuration: '0.6s'
+      });
+
+      setTimeout( function() {
+        iso.layout({
+          filter: '.b2'
+        });
+      }, 300 );
+    }
+  ];
+
+  function next() {
+    if ( tests.length ) {
+      var nextTest = tests.shift();
+      // HACK for consecutive layoutComplete calls
+      setTimeout( nextTest );
+    } else {
+      start();
+    }
+  }
+
+  next();
+  stop();
+
+});