tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js

   1 (function() {
   2
   3 module( 'jquery.tablesorter.test.js' );
   4
   5 // setup hack
   6 mw.config.set('wgMonthNames', window.wgMonthNames = ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
   7 mw.config.set('wgMonthNamesShort', window.wgMonthNamesShort = ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
   8
   9 test( '-- Initial check', function() {
  10         expect(1);
  11         ok( $.tablesorter, '$.tablesorter defined' );
  12 });
  13
  14 /**
  15  * Create an HTML table from an array of row arrays containing text strings.
  16  * First row will be header row. No fancy rowspan/colspan stuff.
  17  *
  18  * @param {String[]} header
  19  * @param {String[][]} data
  20  * @return jQuery
  21  */
  22 var tableCreate = function( header, data ) {
  23         var $table = $('<table class="sortable"><thead></thead><tbody></tbody></table>'),
  24                 $thead = $table.find('thead'),
  25                 $tbody = $table.find('tbody');
  26         var $tr = $('<tr>');
  27         $.each(header, function(i, str) {
  28                 var $th = $('<th>');
  29                 $th.text(str).appendTo($tr);
  30         })
  31         $tr.appendTo($thead);
  32
  33         for (var i = 0; i < data.length; i++) {
  34                 $tr = $('<tr>');
  35                 $.each(data[i], function(j, str) {
  36                         var $td = $('<td>');
  37                         $td.text(str).appendTo($tr);
  38                 })
  39                 $tr.appendTo($tbody);
  40         }
  41         return $table;
  42 };
  43
  44 /**
  45  * Extract text from table.
  46  *
  47  * @param {jQuery} $table
  48  * @return String[][]
  49  */
  50 var tableExtract = function( $table ) {
  51         var data = [];
  52         $table.find('tbody').find('tr').each(function(i, tr) {
  53                 var row = [];
  54                 $(tr).find('td,th').each(function(i, td) {
  55                         row.push($(td).text());
  56                 })
  57                 data.push(row);
  58         });
  59         return data;
  60 };
  61
  62 /**
  63  * Run a table test by building a table with the given data,
  64  * running some callback on it, then checking the results.
  65  *
  66  * @param {String} msg text to pass on to qunit for the comparison
  67  * @param {String[]} header cols to make the table
  68  * @param {String[][]} data rows/cols to make the table
  69  * @param {String[][]} expected rows/cols to compare against at end
  70  * @param {function($table)} callback something to do with the table before we compare
  71  */
  72 var tableTest = function( msg, header, data, expected, callback ) {
  73         test( msg, function() {
  74                 expect(1);
  75
  76                 var $table = tableCreate( header, data );
  77                 //$('body').append($table);
  78
  79                 // Give caller a chance to set up sorting and manipulate the table.
  80                 callback( $table );
  81
  82                 // Table sorting is done synchronously; if it ever needs to change back
  83                 // to asynchronous, we'll need a timeout or a callback here.
  84                 var extracted = tableExtract( $table );
  85                 deepEqual( extracted, expected, msg )
  86         });
  87 };
  88
  89 var reversed = function(arr) {
  90         var arr2 = arr.slice(0);
  91         arr2.reverse();
  92         return arr2;
  93 }
  94
  95 // Sample data set: some planets!
  96 var header = ['Planet', 'Radius (km)'],
  97         mercury = ['Mercury', '2439.7'],
  98         venus = ['Venus', '6051.8'],
  99         earth = ['Earth', '6371.0'],
 100         mars = ['Mars', '3390.0'],
 101         jupiter = ['Jupiter', '69911'],
 102         saturn = ['Saturn', '58232'];
 103
 104 // Initial data set
 105 var planets = [mercury, venus, earth, mars, jupiter, saturn];
 106 var ascendingName = [earth, jupiter, mars, mercury, saturn, venus];
 107 var ascendingRadius = [mercury, mars, venus, earth, saturn, jupiter];
 108
 109 tableTest(
 110         'Basic planet table: ascending by name',
 111         header,
 112         planets,
 113         ascendingName,
 114         function( $table ) {
 115                 $table.tablesorter();
 116                 $table.find('.headerSort:eq(0)').click();
 117         }
 118 );
 119 tableTest(
 120         'Basic planet table: ascending by name a second time',
 121         header,
 122         planets,
 123         ascendingName,
 124         function( $table ) {
 125                 $table.tablesorter();
 126                 $table.find('.headerSort:eq(0)').click();
 127         }
 128 );
 129 tableTest(
 130         'Basic planet table: descending by name',
 131         header,
 132         planets,
 133         reversed(ascendingName),
 134         function( $table ) {
 135                 $table.tablesorter();
 136                 $table.find('.headerSort:eq(0)').click().click();
 137         }
 138 );
 139 tableTest(
 140         'Basic planet table: ascending radius',
 141         header,
 142         planets,
 143         ascendingRadius,
 144         function( $table ) {
 145                 $table.tablesorter();
 146                 $table.find('.headerSort:eq(1)').click();
 147         }
 148 );
 149 tableTest(
 150         'Basic planet table: descending radius',
 151         header,
 152         planets,
 153         reversed(ascendingRadius),
 154         function( $table ) {
 155                 $table.tablesorter();
 156                 $table.find('.headerSort:eq(1)').click().click();
 157         }
 158 );
 159
 160
 161 // Regression tests!
 162 tableTest(
 163         'Bug 28775: German-style short numeric dates',
 164         ['Date'],
 165         [
 166                 // German-style dates are day-month-year
 167                 ['11.11.2011'],
 168                 ['01.11.2011'],
 169                 ['02.10.2011'],
 170                 ['03.08.2011'],
 171                 ['09.11.2011']
 172         ],
 173         [
 174                 // Sorted by ascending date
 175                 ['03.08.2011'],
 176                 ['02.10.2011'],
 177                 ['01.11.2011'],
 178                 ['09.11.2011'],
 179                 ['11.11.2011']
 180         ],
 181         function( $table ) {
 182                 // @fixme reset it at end or change module to allow us to override it
 183                 mw.config.set('wgDefaultDateFormat', window.wgDefaultDateFormat = 'dmy');
 184                 $table.tablesorter();
 185                 $table.find('.headerSort:eq(0)').click();
 186         }
 187 );
 188 tableTest(
 189         'Bug 28775: American-style short numeric dates',
 190         ['Date'],
 191         [
 192                 // American-style dates are month-day-year
 193                 ['11.11.2011'],
 194                 ['01.11.2011'],
 195                 ['02.10.2011'],
 196                 ['03.08.2011'],
 197                 ['09.11.2011']
 198         ],
 199         [
 200                 // Sorted by ascending date
 201                 ['01.11.2011'],
 202                 ['02.10.2011'],
 203                 ['03.08.2011'],
 204                 ['09.11.2011'],
 205                 ['11.11.2011']
 206         ],
 207         function( $table ) {
 208                 // @fixme reset it at end or change module to allow us to override it
 209                 mw.config.set('wgDefaultDateFormat', window.wgDefaultDateFormat = 'mdy');
 210                 $table.tablesorter();
 211                 $table.find('.headerSort:eq(0)').click();
 212         }
 213 );
 214
 215 })();