src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/sortable_table_test.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style license that can be
   5 found in the LICENSE file.
   6 -->
   7 <link rel="import" href="/tvcm/utils.html">
   8 <link rel="import" href="/tvcm/ui.html">
   9 <link rel="import" href="/tvcm/ui/sortable_table.html">
  10 <script>
  11 'use strict';
  12
  13 tvcm.unittest.testSuite(function() {
  14   var SortableTable = tvcm.ui.SortableTable;
  15
  16   function convertToHTML(s) {
  17     var res = '';
  18     for (var i = 0; i < s.length; i++) {
  19       res += s.charCodeAt(i) > 127 ?
  20              '&#x' + s.charCodeAt(i).toString(16).toUpperCase() + ';' :
  21              s.charAt(i);
  22     }
  23     return res;
  24   }
  25
  26   function SimpleTable() {
  27     var table = document.createElement('table');
  28     var thead = table.createTHead();
  29     var tfoot = table.createTFoot();
  30     var tbody = table.createTBody();
  31     var headerRow = thead.insertRow(0);
  32     headerRow.insertCell(0).appendChild(document.createTextNode('Name'));
  33     headerRow.insertCell(1).appendChild(document.createTextNode('Value'));
  34     var row1 = tbody.insertRow(0);
  35     row1.insertCell(0).appendChild(document.createTextNode('First'));
  36     row1.insertCell(1).appendChild(document.createTextNode('2'));
  37     var row2 = tbody.insertRow(1);
  38     row2.insertCell(0).appendChild(document.createTextNode('Middle'));
  39     row2.insertCell(1).appendChild(document.createTextNode('18'));
  40     var row3 = tbody.insertRow(2);
  41     row3.insertCell(0).appendChild(document.createTextNode('Last'));
  42     row3.insertCell(1).appendChild(document.createTextNode('1'));
  43     var footerRow = tfoot.insertRow(0);
  44     footerRow.insertCell(0).appendChild(document.createTextNode('Average'));
  45     footerRow.insertCell(1).appendChild(document.createTextNode('7'));
  46     return table;
  47   }
  48
  49   test('instantiate', function() {
  50     var table = SimpleTable();
  51     SortableTable.decorate(table);
  52     var headerRow = table.tHead.rows[0];
  53     assertEquals('Name&nbsp;&#x25BF;',
  54                  convertToHTML(headerRow.cells[0].innerHTML));
  55     assertEquals('Value&nbsp;&#x25BF;',
  56                  convertToHTML(headerRow.cells[1].innerHTML));
  57     var tableRows = table.tBodies[0].rows;
  58     assertEquals('First', tableRows[0].cells[0].innerText);
  59     assertEquals('2', tableRows[0].cells[1].innerText);
  60     assertEquals('Middle', tableRows[1].cells[0].innerText);
  61     assertEquals('18', tableRows[1].cells[1].innerText);
  62     assertEquals('Last', tableRows[2].cells[0].innerText);
  63     assertEquals('1', tableRows[2].cells[1].innerText);
  64     // the footer should never change.
  65     var footerRow = table.tFoot.rows[0];
  66     assertEquals('Average', footerRow.cells[0].innerText);
  67     assertEquals('7', footerRow.cells[1].innerText);
  68   });
  69
  70   test('sortOnAlphabeticColumnAscending', function() {
  71     var table = SimpleTable();
  72     SortableTable.decorate(table);
  73     table.sort(0 /*, 'downward' */);
  74     var headerRow = table.tHead.rows[0];
  75     assertEquals('Name&nbsp;&#x25BE;',
  76                  convertToHTML(headerRow.cells[0].innerHTML));
  77     assertEquals('Value&nbsp;&#x25BF;',
  78                  convertToHTML(headerRow.cells[1].innerHTML));
  79     var tableRows = table.tBodies[0].rows;
  80     assertEquals('First', tableRows[0].cells[0].innerText);
  81     assertEquals('2', tableRows[0].cells[1].innerText);
  82     assertEquals('Last', tableRows[1].cells[0].innerText);
  83     assertEquals('1', tableRows[1].cells[1].innerText);
  84     assertEquals('Middle', tableRows[2].cells[0].innerText);
  85     assertEquals('18', tableRows[2].cells[1].innerText);
  86     // the footer should never change.
  87     var footerRow = table.tFoot.rows[0];
  88     assertEquals('Average', footerRow.cells[0].innerText);
  89     assertEquals('7', footerRow.cells[1].innerText);
  90   });
  91
  92   test('sortOnAlphabeticColumnDescending', function() {
  93     var table = SimpleTable();
  94     SortableTable.decorate(table);
  95     table.sort(0 , 'upward');
  96     var headerRow = table.tHead.rows[0];
  97     assertEquals('Name&nbsp;&#x25B4;',
  98                  convertToHTML(headerRow.cells[0].innerHTML));
  99     assertEquals('Value&nbsp;&#x25BF;',
 100                  convertToHTML(headerRow.cells[1].innerHTML));
 101     var tableRows = table.tBodies[0].rows;
 102     assertEquals('Middle', tableRows[0].cells[0].innerText);
 103     assertEquals('18', tableRows[0].cells[1].innerText);
 104     assertEquals('Last', tableRows[1].cells[0].innerText);
 105     assertEquals('1', tableRows[1].cells[1].innerText);
 106     assertEquals('First', tableRows[2].cells[0].innerText);
 107     assertEquals('2', tableRows[2].cells[1].innerText);
 108     // the footer should never change.
 109     var footerRow = table.tFoot.rows[0];
 110     assertEquals('Average', footerRow.cells[0].innerText);
 111     assertEquals('7', footerRow.cells[1].innerText);
 112   });
 113
 114   test('sortOnNumericColumnAscending', function() {
 115     var table = SimpleTable();
 116     SortableTable.decorate(table);
 117     table.sort(1 /*, 'downward' */);
 118     var headerRow = table.tHead.rows[0];
 119     assertEquals('Name&nbsp;&#x25BF;',
 120                  convertToHTML(headerRow.cells[0].innerHTML));
 121     assertEquals('Value&nbsp;&#x25BE;',
 122                  convertToHTML(headerRow.cells[1].innerHTML));
 123     var tableRows = table.tBodies[0].rows;
 124     assertEquals('Last', tableRows[0].cells[0].innerText);
 125     assertEquals('1', tableRows[0].cells[1].innerText);
 126     assertEquals('First', tableRows[1].cells[0].innerText);
 127     assertEquals('2', tableRows[1].cells[1].innerText);
 128     assertEquals('Middle', tableRows[2].cells[0].innerText);
 129     assertEquals('18', tableRows[2].cells[1].innerText);
 130     // the footer should never change.
 131     var footerRow = table.tFoot.rows[0];
 132     assertEquals('Average', footerRow.cells[0].innerText);
 133     assertEquals('7', footerRow.cells[1].innerText);
 134   });
 135
 136   test('sortOnNumericColumnDescending', function() {
 137     var table = SimpleTable();
 138     SortableTable.decorate(table);
 139     table.sort(1 , 'upward');
 140     var headerRow = table.tHead.rows[0];
 141     assertEquals('Name&nbsp;&#x25BF;',
 142                  convertToHTML(headerRow.cells[0].innerHTML));
 143     assertEquals('Value&nbsp;&#x25B4;',
 144                  convertToHTML(headerRow.cells[1].innerHTML));
 145     var tableRows = table.tBodies[0].rows;
 146     assertEquals('Middle', tableRows[0].cells[0].innerText);
 147     assertEquals('18', tableRows[0].cells[1].innerText);
 148     assertEquals('First', tableRows[1].cells[0].innerText);
 149     assertEquals('2', tableRows[1].cells[1].innerText);
 150     assertEquals('Last', tableRows[2].cells[0].innerText);
 151     assertEquals('1', tableRows[2].cells[1].innerText);
 152     // the footer should never change.
 153     var footerRow = table.tFoot.rows[0];
 154     assertEquals('Average', footerRow.cells[0].innerText);
 155     assertEquals('7', footerRow.cells[1].innerText);
 156   });
 157
 158   test('sortOnAColumnThenReverseIt', function() {
 159     var table = SimpleTable();
 160     SortableTable.decorate(table);
 161     table.sort(0);
 162     var headerRow = table.tHead.rows[0];
 163     assertEquals('Name&nbsp;&#x25BE;',
 164                  convertToHTML(headerRow.cells[0].innerHTML));
 165     assertEquals('Value&nbsp;&#x25BF;',
 166                  convertToHTML(headerRow.cells[1].innerHTML));
 167     var tableRows = table.tBodies[0].rows;
 168     assertEquals('First', tableRows[0].cells[0].innerText);
 169     assertEquals('2', tableRows[0].cells[1].innerText);
 170     assertEquals('Last', tableRows[1].cells[0].innerText);
 171     assertEquals('1', tableRows[1].cells[1].innerText);
 172     assertEquals('Middle', tableRows[2].cells[0].innerText);
 173     assertEquals('18', tableRows[2].cells[1].innerText);
 174     // the footer should never change.
 175     var footerRow = table.tFoot.rows[0];
 176     assertEquals('Average', footerRow.cells[0].innerText);
 177     assertEquals('7', footerRow.cells[1].innerText);
 178     table.sort(0);
 179     var headerRow = table.tHead.rows[0];
 180     assertEquals('Name&nbsp;&#x25B4;',
 181                  convertToHTML(headerRow.cells[0].innerHTML));
 182     assertEquals('Value&nbsp;&#x25BF;',
 183                  convertToHTML(headerRow.cells[1].innerHTML));
 184     var tableRows = table.tBodies[0].rows;
 185     assertEquals('Middle', tableRows[0].cells[0].innerText);
 186     assertEquals('18', tableRows[0].cells[1].innerText);
 187     assertEquals('Last', tableRows[1].cells[0].innerText);
 188     assertEquals('1', tableRows[1].cells[1].innerText);
 189     assertEquals('First', tableRows[2].cells[0].innerText);
 190     assertEquals('2', tableRows[2].cells[1].innerText);
 191     // the footer should never change.
 192     var footerRow = table.tFoot.rows[0];
 193     assertEquals('Average', footerRow.cells[0].innerText);
 194     assertEquals('7', footerRow.cells[1].innerText);
 195   });
 196
 197   test('sortOnAColumnThenOnAnotherColumn', function() {
 198     var table = SimpleTable();
 199     SortableTable.decorate(table);
 200     table.sort(0 , 'upward');
 201     var headerRow = table.tHead.rows[0];
 202     assertEquals('Name&nbsp;&#x25B4;',
 203                  convertToHTML(headerRow.cells[0].innerHTML));
 204     assertEquals('Value&nbsp;&#x25BF;',
 205                  convertToHTML(headerRow.cells[1].innerHTML));
 206     var tableRows = table.tBodies[0].rows;
 207     assertEquals('Middle', tableRows[0].cells[0].innerText);
 208     assertEquals('18', tableRows[0].cells[1].innerText);
 209     assertEquals('Last', tableRows[1].cells[0].innerText);
 210     assertEquals('1', tableRows[1].cells[1].innerText);
 211     assertEquals('First', tableRows[2].cells[0].innerText);
 212     assertEquals('2', tableRows[2].cells[1].innerText);
 213     // the footer should never change.
 214     var footerRow = table.tFoot.rows[0];
 215     assertEquals('Average', footerRow.cells[0].innerText);
 216     assertEquals('7', footerRow.cells[1].innerText);
 217     table.sort(1 /*, 'downward' */);
 218     var headerRow = table.tHead.rows[0];
 219     assertEquals('Name&nbsp;&#x25BF;',
 220                  convertToHTML(headerRow.cells[0].innerHTML));
 221     assertEquals('Value&nbsp;&#x25BE;',
 222                  convertToHTML(headerRow.cells[1].innerHTML));
 223     var tableRows = table.tBodies[0].rows;
 224     assertEquals('Last', tableRows[0].cells[0].innerText);
 225     assertEquals('1', tableRows[0].cells[1].innerText);
 226     assertEquals('First', tableRows[1].cells[0].innerText);
 227     assertEquals('2', tableRows[1].cells[1].innerText);
 228     assertEquals('Middle', tableRows[2].cells[0].innerText);
 229     assertEquals('18', tableRows[2].cells[1].innerText);
 230     // the footer should never change.
 231     var footerRow = table.tFoot.rows[0];
 232     assertEquals('Average', footerRow.cells[0].innerText);
 233     assertEquals('7', footerRow.cells[1].innerText);
 234   });
 235 });
 236 </script>