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

   1 (function() {
   2
   3 module( 'jquery.tablesorter' );
   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 mw.config.set('wgDefaultDateFormat', window.wgDefaultDateFormat = 'dmy');
   9
  10 test( '-- Initial check', function() {
  11         expect(1);
  12         ok( $.tablesorter, '$.tablesorter defined' );
  13 });
  14
  15 /**
  16  * Create an HTML table from an array of row arrays containing text strings.
  17  * First row will be header row. No fancy rowspan/colspan stuff.
  18  *
  19  * @param {String[]} header
  20  * @param {String[][]} data
  21  * @return jQuery
  22  */
  23 var tableCreate = function( header, data ) {
  24         var $table = $('<table class="sortable"><thead></thead><tbody></tbody></table>'),
  25                 $thead = $table.find('thead'),
  26                 $tbody = $table.find('tbody');
  27         var $tr = $('<tr>');
  28         $.each(header, function(i, str) {
  29                 var $th = $('<th>');
  30                 $th.text(str).appendTo($tr);
  31         });
  32         $tr.appendTo($thead);
  33
  34         for (var i = 0; i < data.length; i++) {
  35                 $tr = $('<tr>');
  36                 $.each(data[i], function(j, str) {
  37                         var $td = $('<td>');
  38                         $td.text(str).appendTo($tr);
  39                 });
  40                 $tr.appendTo($tbody);
  41         }
  42         return $table;
  43 };
  44
  45 /**
  46  * Extract text from table.
  47  *
  48  * @param {jQuery} $table
  49  * @return String[][]
  50  */
  51 var tableExtract = function( $table ) {
  52         var data = [];
  53         $table.find('tbody').find('tr').each(function(i, tr) {
  54                 var row = [];
  55                 $(tr).find('td,th').each(function(i, td) {
  56                         row.push($(td).text());
  57                 });
  58                 data.push(row);
  59         });
  60         return data;
  61 };
  62
  63 /**
  64  * Run a table test by building a table with the given data,
  65  * running some callback on it, then checking the results.
  66  *
  67  * @param {String} msg text to pass on to qunit for the comparison
  68  * @param {String[]} header cols to make the table
  69  * @param {String[][]} data rows/cols to make the table
  70  * @param {String[][]} expected rows/cols to compare against at end
  71  * @param {function($table)} callback something to do with the table before we compare
  72  */
  73 var tableTest = function( msg, header, data, expected, callback ) {
  74         test( msg, function() {
  75                 expect(1);
  76
  77                 var $table = tableCreate( header, data );
  78                 //$('body').append($table);
  79
  80                 // Give caller a chance to set up sorting and manipulate the table.
  81                 callback( $table );
  82
  83                 // Table sorting is done synchronously; if it ever needs to change back
  84                 // to asynchronous, we'll need a timeout or a callback here.
  85                 var extracted = tableExtract( $table );
  86                 deepEqual( extracted, expected, msg );
  87         });
  88 };
  89
  90 var reversed = function(arr) {
  91         var arr2 = arr.slice(0);
  92         arr2.reverse();
  93         return arr2;
  94 };
  95
  96 // Sample data set: some planets!
  97 var header = ['Planet', 'Radius (km)'],
  98         mercury = ['Mercury', '2439.7'],
  99         venus = ['Venus', '6051.8'],
 100         earth = ['Earth', '6371.0'],
 101         mars = ['Mars', '3390.0'],
 102         jupiter = ['Jupiter', '69911'],
 103         saturn = ['Saturn', '58232'];
 104
 105 // Initial data set
 106 var planets = [mercury, venus, earth, mars, jupiter, saturn];
 107 var ascendingName = [earth, jupiter, mars, mercury, saturn, venus];
 108 var ascendingRadius = [mercury, mars, venus, earth, saturn, jupiter];
 109
 110 tableTest(
 111         'Basic planet table: ascending by name',
 112         header,
 113         planets,
 114         ascendingName,
 115         function( $table ) {
 116                 $table.tablesorter();
 117                 $table.find('.headerSort:eq(0)').click();
 118         }
 119 );
 120 tableTest(
 121         'Basic planet table: ascending by name a second time',
 122         header,
 123         planets,
 124         ascendingName,
 125         function( $table ) {
 126                 $table.tablesorter();
 127                 $table.find('.headerSort:eq(0)').click();
 128         }
 129 );
 130 tableTest(
 131         'Basic planet table: descending by name',
 132         header,
 133         planets,
 134         reversed(ascendingName),
 135         function( $table ) {
 136                 $table.tablesorter();
 137                 $table.find('.headerSort:eq(0)').click().click();
 138         }
 139 );
 140 tableTest(
 141         'Basic planet table: ascending radius',
 142         header,
 143         planets,
 144         ascendingRadius,
 145         function( $table ) {
 146                 $table.tablesorter();
 147                 $table.find('.headerSort:eq(1)').click();
 148         }
 149 );
 150 tableTest(
 151         'Basic planet table: descending radius',
 152         header,
 153         planets,
 154         reversed(ascendingRadius),
 155         function( $table ) {
 156                 $table.tablesorter();
 157                 $table.find('.headerSort:eq(1)').click().click();
 158         }
 159 );
 160
 161
 162 // Regression tests!
 163 tableTest(
 164         'Bug 28775: German-style short numeric dates',
 165         ['Date'],
 166         [
 167                 // German-style dates are day-month-year
 168                 ['11.11.2011'],
 169                 ['01.11.2011'],
 170                 ['02.10.2011'],
 171                 ['03.08.2011'],
 172                 ['09.11.2011']
 173         ],
 174         [
 175                 // Sorted by ascending date
 176                 ['03.08.2011'],
 177                 ['02.10.2011'],
 178                 ['01.11.2011'],
 179                 ['09.11.2011'],
 180                 ['11.11.2011']
 181         ],
 182         function( $table ) {
 183                 // @fixme reset it at end or change module to allow us to override it
 184                 mw.config.set('wgDefaultDateFormat', window.wgDefaultDateFormat = 'dmy');
 185                 $table.tablesorter();
 186                 $table.find('.headerSort:eq(0)').click();
 187         }
 188 );
 189 tableTest(
 190         'Bug 28775: American-style short numeric dates',
 191         ['Date'],
 192         [
 193                 // American-style dates are month-day-year
 194                 ['11.11.2011'],
 195                 ['01.11.2011'],
 196                 ['02.10.2011'],
 197                 ['03.08.2011'],
 198                 ['09.11.2011']
 199         ],
 200         [
 201                 // Sorted by ascending date
 202                 ['01.11.2011'],
 203                 ['02.10.2011'],
 204                 ['03.08.2011'],
 205                 ['09.11.2011'],
 206                 ['11.11.2011']
 207         ],
 208         function( $table ) {
 209                 // @fixme reset it at end or change module to allow us to override it
 210                 mw.config.set('wgDefaultDateFormat', window.wgDefaultDateFormat = 'mdy');
 211                 $table.tablesorter();
 212                 $table.find('.headerSort:eq(0)').click();
 213         }
 214 );
 215
 216 var ipv4 = [
 217         // Some randomly generated fake IPs
 218         ['45.238.27.109'],
 219         ['44.172.9.22'],
 220         ['247.240.82.209'],
 221         ['204.204.132.158'],
 222         ['170.38.91.162'],
 223         ['197.219.164.9'],
 224         ['45.68.154.72'],
 225         ['182.195.149.80']
 226 ];
 227 var ipv4Sorted = [
 228         // Sort order should go octet by octet
 229         ['44.172.9.22'],
 230         ['45.68.154.72'],
 231         ['45.238.27.109'],
 232         ['170.38.91.162'],
 233         ['182.195.149.80'],
 234         ['197.219.164.9'],
 235         ['204.204.132.158'],
 236         ['247.240.82.209']
 237 ];
 238 tableTest(
 239         'Bug 17141: IPv4 address sorting',
 240         ['IP'],
 241         ipv4,
 242         ipv4Sorted,
 243         function( $table ) {
 244                 $table.tablesorter();
 245                 $table.find('.headerSort:eq(0)').click();
 246         }
 247 );
 248 tableTest(
 249         'Bug 17141: IPv4 address sorting (reverse)',
 250         ['IP'],
 251         ipv4,
 252         reversed(ipv4Sorted),
 253         function( $table ) {
 254                 $table.tablesorter();
 255                 $table.find('.headerSort:eq(0)').click().click();
 256         }
 257 );
 258
 259 var umlautWords = [
 260         // Some words with Umlauts
 261         ['Günther'],
 262         ['Peter'],
 263         ['Björn'],
 264         ['Bjorn'],
 265         ['Apfel'],
 266         ['Äpfel'],
 267         ['Strasse'],
 268         ['Sträßschen']
 269 ];
 270
 271 var umlautWordsSorted = [
 272         // Some words with Umlauts
 273         ['Äpfel'],
 274         ['Apfel'],
 275         ['Björn'],
 276         ['Bjorn'],
 277         ['Günther'],
 278         ['Peter'],
 279         ['Sträßschen'],
 280         ['Strasse']
 281 ];
 282
 283 tableTest(
 284         'Accented Characters with custom collation',
 285         ['Name'],
 286         umlautWords,
 287         umlautWordsSorted,
 288         function( $table ) {
 289                 mw.config.set('tableSorterCollation', {'ä':'ae', 'ö' : 'oe', 'ß': 'ss', 'ü':'ue'});
 290                 $table.tablesorter();
 291                 $table.find('.headerSort:eq(0)').click();
 292                 mw.config.set('tableSorterCollation', {});
 293         }
 294 );
 295
 296 var planetsRowspan  =[["Earth","6051.8"], jupiter, ["Mars","6051.8"], mercury, saturn, venus];
 297 var planetsRowspanII  =[jupiter, mercury, saturn, ['Venus', '6371.0'], venus, ['Venus', '3390.0']];
 298
 299 tableTest(
 300         'Basic planet table: Same value for multiple rows via rowspan',
 301         header,
 302         planets,
 303         planetsRowspan,
 304         function( $table ) {
 305                 //Quick&Dirty mod
 306                 $table.find('tr:eq(3) td:eq(1), tr:eq(4) td:eq(1)').remove();
 307                 $table.find('tr:eq(2) td:eq(1)').prop('rowspan', '3');
 308                 $table.tablesorter();
 309                 $table.find('.headerSort:eq(0)').click();
 310         }
 311 );
 312 tableTest(
 313         'Basic planet table: Same value for multiple rows via rowspan II',
 314         header,
 315         planets,
 316         planetsRowspanII,
 317         function( $table ) {
 318                 //Quick&Dirty mod
 319                 $table.find('tr:eq(3) td:eq(0), tr:eq(4) td:eq(0)').remove();
 320                 $table.find('tr:eq(2) td:eq(0)').prop('rowspan', '3');
 321                 $table.tablesorter();
 322                 $table.find('.headerSort:eq(0)').click();
 323         }
 324 );
 325
 326 var complexMDYDates = [
 327         // Some words with Umlauts
 328         ['January, 19 2010'],
 329         ['April 21 1991'],
 330         ['04 22 1991'],
 331         ['5.12.1990'],
 332         ['December 12 \'10']
 333 ];
 334
 335 var complexMDYSorted = [
 336         ["5.12.1990"],
 337         ["April 21 1991"],
 338         ["04 22 1991"],
 339         ["January, 19 2010"],
 340         ["December 12 '10"]
 341 ];
 342
 343 tableTest(
 344         'Complex date parsing I',
 345         ['date'],
 346         complexMDYDates,
 347         complexMDYSorted,
 348         function( $table ) {
 349                 mw.config.set('wgDefaultDateFormat', window.wgDefaultDateFormat = 'mdy');
 350                 $table.tablesorter();
 351                 $table.find('.headerSort:eq(0)').click();
 352         }
 353 );
 354
 355 var ascendingNameLegacy = ascendingName.slice(0);
 356 ascendingNameLegacy[4] = ascendingNameLegacy[5];
 357 ascendingNameLegacy.pop();
 358
 359 tableTest(
 360         'Legacy compat with .sortbottom',
 361         header,
 362         planets,
 363         ascendingNameLegacy,
 364         function( $table ) {
 365                 $table.find('tr:last').addClass('sortbottom');
 366                 $table.tablesorter();
 367                 $table.find('.headerSort:eq(0)').click();
 368         }
 369 );
 370
 371 })();