jennschiffer · jennschiffer · Jan 28, 2016 · Jan 22, 2016 · Jan 22, 2016 · Jan 22, 2016
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,24 +1,24 @@
-module.exports = function(grunt) {
+module.exports = function( grunt ) {
 
   // Project configuration.
-  grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
+  grunt.initConfig( {
+    pkg: grunt.file.readJSON( 'package.json' ),
     jshint: {
-      all: 'timbles.js'
+      all: [ 'Gruntfile.js', 'timbles.js', 'tests/test-scripts/*.js' ]
     },
     jscs: {
-      src: 'timbles.js',
+      src: [ 'Gruntfile.js', 'timbles.js', 'tests/test-scripts/*.js' ],
       options: {
         config: '.jscsrc',
         verbose: true // Create output with rule names
       }
     }
-  });
+  } );
 
   // Load the JSHint and JSCS plugins.
-  grunt.loadNpmTasks('grunt-contrib-jshint');
-  grunt.loadNpmTasks('grunt-jscs');
+  grunt.loadNpmTasks( 'grunt-contrib-jshint' );
+  grunt.loadNpmTasks( 'grunt-jscs' );
 
   // Default task(s).
-  grunt.registerTask('default', ['jshint', 'jscs']);
+  grunt.registerTask( 'default', [ 'jshint', 'jscs' ] );
 };
diff --git a/tests/index.html b/tests/index.html
@@ -5,15 +5,19 @@
   <title>timbles tests &bull; QUnit</title>
 </head>
 <body>
-
-  <h1>timbles tests</h1>
-
-<ul>
-  <li><a href="timbles.html">existing html table</a></li>
-  <li><a href="timbles-json.html">data pulled from json file</a></li>
-  <li><a href="timbles-array.html">data pulled internally</a></li>
-  <li><a href="timbles-pagination.html">pagination of tables</a></li>
-</ul>
-
+  <h1>Sorting tests for timbles</h1>
+  <p>Timbles is mainly concerned with sorting your tables, so these tests are obviously pretty important.</p>
+  <p>There are a bunch of different ways that tables can be <em>timblified</em>, and all of them need to pass the same tests that verify correct instantiation, data content and sorting.</p>
+  <ul>
+    <li><a href="sorting-basic.html">Plain html table</a></li>
+    <li><a href="sorting-array.html">Table created from local array data</a></li>
+    <li><a href="sorting-json.html">Table created from JSON file </a></li>
+    <li><a href="sorting-paginated.html">Paginated table created from JSON file</a></li>
+  </ul>
+  <h1>Non-sorting tests for timbles</h1>
+  <ul>
+    <li><a href="pagination.html">Tests for pagination of tables</a></li>
+    <li><a href="pagination-post-init.html">Pagination tests where sorting and pagination are set up post-timblification</a></li>
+  </ul>
 </body>
 </html>
diff --git a/tests/pagination-post-init.html b/tests/pagination-post-init.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>timbles tests &bull; QUnit</title>
+  <link rel="stylesheet" href="qunit-1.20.0.css">
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+
+  <div style="display: none">
+    <table id="target">
+      <thead>
+        <tr><th>City name</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Atsugi</td></tr>
+        <tr><td>Batman</td></tr>
+        <tr><td>Calamba</td></tr>
+        <tr><td>Dharan</td></tr>
+        <tr><td>Empangeni</td></tr>
+        <tr><td>Funabashi</td></tr>
+        <tr><td>Guaymas</td></tr>
+        <tr><td>Himeji</td></tr>
+        <tr><td>Ikorodu</td></tr>
+        <tr><td>Jacksonville</td></tr>
+        <tr><td>Kikwit</td></tr>
+        <tr><td>Latina</td></tr>
+        <tr><td>Marseille</td></tr>
+        <tr><td>Nasariya</td></tr>
+        <tr><td>Ontario</td></tr>
+        <tr><td>Poole</td></tr>
+        <tr><td>Qom</td></tr>
+        <tr><td>Richmond</td></tr>
+        <tr><td>Sokoto</td></tr>
+        <tr><td>Tsuruoka</td></tr>
+        <tr><td>Uruapan</td></tr>
+        <tr><td>Verona</td></tr>
+        <tr><td>Winston-Salem</td></tr>
+        <tr><td>Xico</td></tr>
+        <tr><td>Yakutsk</td></tr>
+        <tr><td>Zacatecas</td></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script type="text/javascript" src="../jquery.js"></script>
+  <script type="text/javascript" src="../timbles.js"></script>
+  <script type="text/javascript">
+  $(function() {
+    var target = $( '#target' );
+    target.timbles();
+    target.timbles( 'enableSorting' );
+    target.timbles( 'enablePagination', 5 );
+  } );
+  </script>
+  <script src="qunit-1.20.0.js"></script>
+  <script src="test-scripts/pagination.js"></script>
+</body>
+</html>
diff --git a/tests/pagination.html b/tests/pagination.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>timbles tests &bull; QUnit</title>
+  <link rel="stylesheet" href="qunit-1.20.0.css">
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+
+  <div style="display: none">
+    <table id="target">
+      <thead>
+        <tr><th>City name</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Atsugi</td></tr>
+        <tr><td>Batman</td></tr>
+        <tr><td>Calamba</td></tr>
+        <tr><td>Dharan</td></tr>
+        <tr><td>Empangeni</td></tr>
+        <tr><td>Funabashi</td></tr>
+        <tr><td>Guaymas</td></tr>
+        <tr><td>Himeji</td></tr>
+        <tr><td>Ikorodu</td></tr>
+        <tr><td>Jacksonville</td></tr>
+        <tr><td>Kikwit</td></tr>
+        <tr><td>Latina</td></tr>
+        <tr><td>Marseille</td></tr>
+        <tr><td>Nasariya</td></tr>
+        <tr><td>Ontario</td></tr>
+        <tr><td>Poole</td></tr>
+        <tr><td>Qom</td></tr>
+        <tr><td>Richmond</td></tr>
+        <tr><td>Sokoto</td></tr>
+        <tr><td>Tsuruoka</td></tr>
+        <tr><td>Uruapan</td></tr>
+        <tr><td>Verona</td></tr>
+        <tr><td>Winston-Salem</td></tr>
+        <tr><td>Xico</td></tr>
+        <tr><td>Yakutsk</td></tr>
+        <tr><td>Zacatecas</td></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script type="text/javascript" src="../jquery.js"></script>
+  <script type="text/javascript" src="../timbles.js"></script>
+  <script type="text/javascript">
+  $( function() {
+    $( '#target' ).timbles( {
+      sorting: true,
+      pagination: {
+        recordsPerPage: 5
+      }
+    } );
+  } );
+  </script>
+  <script src="qunit-1.20.0.js"></script>
+  <script src="test-scripts/pagination.js"></script>
+</body>
+</html>
diff --git a/tests/timbles-array.html → tests/sorting-array.html b/tests/timbles-array.html → tests/sorting-array.html
diff --git a/tests/timbles.html → tests/sorting-basic.html b/tests/timbles.html → tests/sorting-basic.html
diff --git a/tests/timbles-json.html → tests/sorting-json.html b/tests/timbles-json.html → tests/sorting-json.html
diff --git a/tests/timbles-pagination.html → tests/sorting-paginated.html b/tests/timbles-pagination.html → tests/sorting-paginated.html
diff --git a/tests/test-scripts/pagination.js b/tests/test-scripts/pagination.js
@@ -0,0 +1,171 @@
+/* Testing pagination of timbles tables */
+
+var target = $( '#target' );
+
+function pageContent() {
+  /* Returns the records shown on the current page of the table
+   */
+  return target.find( 'tbody td' ).map( function() {
+    return $( this ).text();
+  } ).get();
+}
+
+/* Tests of the initial state
+ *
+ */
+
+QUnit.test( 'Verify pagination configuration', function( assert ) {
+  var data = target.data( 'timbles' );
+  assert.equal( data.tableRows.length, 26, 'Correct data size' );
+  assert.equal( data.pagination.recordsPerPage, 5, 'Correct page size' );
+} );
+
+QUnit.test( 'Verify first page content', function( assert ) {
+  var expectedPageContent = [
+    'Atsugi',
+    'Batman',
+    'Calamba',
+    'Dharan',
+    'Empangeni'
+  ];
+  assert.deepEqual(
+    pageContent(),
+    expectedPageContent,
+    'Correct content and length for page'
+  );
+} );
+
+QUnit.test( 'Page navigation is shown after the table', function( assert ) {
+  var paginationContainer = target.next();
+  assert.ok(
+    paginationContainer.hasClass( 'pagination' ),
+    'Navigation block has correct class'
+  );
+} );
+
+QUnit.test( 'Correct current page number ...', function( assert ) {
+  var paginationData = target.data( 'timbles' ).pagination;
+  assert.equal( paginationData.currentPage, 1, '... in data attribute' );
+
+  var pageNumber = target.next().find( '.pointer-this-page' );
+  assert.equal( pageNumber.text(), '1', '... in page navigation block' );
+} );
+
+QUnit.test( 'Correct number of total pages ...', function( assert ) {
+  var paginationData = target.data( 'timbles' ).pagination;
+  assert.equal( paginationData.lastPage, 6, '... in data attribute' );
+
+  var pageNumber = target.next().find( '.pointer-last-page' );
+  assert.equal( pageNumber.text(), '6', '... in page navigation block' );
+} );
+
+/* Tests of navigation and related behavior
+ *
+ */
+
+QUnit.test( 'Go to second page by clicking nav button', function( assert ) {
+  var pageNavigation = target.next().find( '.nav-arrows' );
+  var nextPageButton = pageNavigation.find( 'button' ).eq( 2 );
+  assert.equal( nextPageButton.text().trim(), '>', 'Button has correct text' );
+
+  nextPageButton.trigger( 'click' );
+
+  var paginationData = target.data( 'timbles' ).pagination;
+  var pageNumber = pageNavigation.find( '.pointer-this-page' );
+  var expectedPageContent = [
+    'Funabashi',
+    'Guaymas',
+    'Himeji',
+    'Ikorodu',
+    'Jacksonville'
+  ];
+  assert.equal( paginationData.currentPage, 2, 'Correct page number in data' );
+  assert.equal( pageNumber.text(), '2', 'Correct page number on page' );
+  assert.deepEqual(
+    pageContent(),
+    expectedPageContent,
+    'Correct content and length for page'
+  );
+} );
+
+QUnit.test( 'Go to page by using goToPage method', function( assert ) {
+  var paginationData = target.data( 'timbles' ).pagination;
+  var pageNumber = target.next().find( '.pointer-this-page' );
+  var expectedPageContent = [ 'Zacatecas' ];
+
+  target.timbles( 'goToPage', 6 );
+  assert.equal( paginationData.currentPage, 6, 'Correct page number in data' );
+  assert.equal( pageNumber.text(), '6', 'Correct page number on page' );
+  assert.deepEqual(
+    pageContent(),
+    expectedPageContent,
+    'Correct content and length for page'
+  );
+} );
+
+QUnit.test( 'Sorting resets to first page', function( assert ) {
+  target.timbles( 'sortColumn', 0, 'desc' );
+
+  var paginationData = target.data( 'timbles' ).pagination;
+  var pageNumber = target.next().find( '.pointer-this-page' );
+  var expectedPageContent = [
+    'Zacatecas',
+    'Yakutsk',
+    'Xico',
+    'Winston-Salem',
+    'Verona'
+  ];
+  assert.equal( paginationData.currentPage, 1, 'Correct page number in data' );
+  assert.equal( pageNumber.text(), '1', 'Correct page number on page' );
+  assert.deepEqual(
+    pageContent(),
+    expectedPageContent,
+    'First page content in descending order'
+  );
+} );
+
+/* Tests for changing the page size
+ *
+ */
+
+QUnit.test( 'Shrinking page size removes rows and update nav ', function( assert ) {
+  var paginationData = target.data( 'timbles' ).pagination;
+  var pageNumber = target.next().find( '.pointer-last-page' );
+  var expectedPageContent = [
+    'Zacatecas',
+    'Yakutsk'
+  ];
+  target.timbles( 'enablePagination', 2 );
+  assert.equal( paginationData.lastPage, 13, 'Correct page count in data' );
+  assert.equal( pageNumber.text(), '13', 'Correct page count on page' );
+  deepEqual(
+    pageContent(),
+    expectedPageContent,
+    'Correct content and length for page'
+  );
+} );
+
+QUnit.test( 'Growing page size updates table and maintains order ', function( assert ) {
+  var paginationData = target.data( 'timbles' ).pagination;
+  var pageNumber = target.next().find( '.pointer-last-page' );
+  var expectedPageContent = [
+    'Zacatecas',
+    'Yakutsk',
+    'Xico',
+    'Winston-Salem',
+    'Verona',
+    'Uruapan',
+    'Tsuruoka',
+    'Sokoto',
+    'Richmond',
+    'Qom'
+  ];
+  target.timbles( 'enablePagination', 10 );
+  assert.equal( paginationData.lastPage, 3, 'Correct page count in data' );
+  assert.equal( pageNumber.text(), '3', 'Correct page count on page' );
+  deepEqual(
+    pageContent(),
+    expectedPageContent,
+    'Correct content and length for page'
+  );
+} );