| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2014 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/tracing/ui/base/deep_utils.html"> |
| <link rel="import" href="/tracing/ui/base/table.html"> |
| |
| <script> |
| 'use strict'; |
| |
| tr.b.unittest.testSuite(function() { |
| var THIS_DOC = document.currentScript.ownerDocument; |
| var SelectionMode = tr.ui.b.TableFormat.SelectionMode; |
| var HighlightStyle = tr.ui.b.TableFormat.HighlightStyle; |
| var ColumnAlignment = tr.ui.b.TableFormat.ColumnAlignment; |
| |
| function isSelected(element) { |
| if (!element.hasAttribute('selected')) |
| return false; |
| return element.getAttribute('selected') === 'true'; |
| } |
| |
| function simulateDoubleClick(element) { |
| // See https://developer.mozilla.org/en/docs/Web/API/MouseEvent#Example. |
| var event = new MouseEvent('dblclick', { |
| bubbles: true, |
| cancelable: true, |
| view: window |
| }); |
| return element.dispatchEvent(event); |
| } |
| |
| test('instantiateEmptyTable_withoutEmptyValue', function() { |
| var columns = [ |
| { |
| title: 'First Column', |
| value: function(row) { return row.firstData; }, |
| width: '300px' |
| }, |
| { |
| title: 'Second Column', |
| value: function(row) { return row.secondData; } |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = []; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| // Check that the width of the first column was set correctly (despite no |
| // body rows). |
| var firstColumnHeader = table.$.head.children[0].children[0]; |
| assert.closeTo(firstColumnHeader.offsetWidth, 300, 20); |
| |
| // Check that the first column has a non-empty header. |
| var firstColumnTitle = tr.b.findDeepElementMatchingPredicate( |
| firstColumnHeader, function(element) { |
| return Polymer.dom(element).textContent === 'First Column'; |
| }); |
| assert.isDefined(firstColumnTitle); |
| |
| // Check that empty value was not appended. |
| assert.lengthOf(table.$.body.children, 0); |
| }); |
| |
| test('instantiateEmptyTable_withEmptyValue', function() { |
| var columns = [ |
| { |
| title: 'First Column', |
| value: function(row) { return row.firstData; }, |
| width: '300px' |
| }, |
| { |
| title: 'Second Column', |
| value: function(row) { return row.secondData; } |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = []; |
| table.emptyValue = 'This table is left intentionally empty'; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| // Check that the width of the first column was set correctly (despite no |
| // body rows). |
| var firstColumnHeader = table.$.head.children[0].children[0]; |
| assert.closeTo(firstColumnHeader.offsetWidth, 300, 20); |
| |
| // Check that empty value was appended. |
| assert.lengthOf(table.$.body.children, 1); |
| }); |
| |
| test('instantiateNestedTableNoNests', function() { |
| var columns = [ |
| { |
| title: 'First Column', |
| value: function(row) { return row.firstData; }, |
| width: '200px' |
| }, |
| { |
| title: 'Second Column', |
| value: function(row) { return row.secondData; } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| firstData: 'A1', |
| secondData: 'A2' |
| }, |
| { |
| firstData: 'B1', |
| secondData: 'B2' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.emptyValue = 'THIS SHOULD NOT BE VISIBLE!!!'; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| // Check that empty value was not appended. |
| assert.lengthOf(table.$.body.children, 2); |
| }); |
| |
| test('sequentialRebuildsBehaveSanely', function() { |
| var columns = [ |
| { |
| title: 'First Column', |
| value: function(row) { return row.firstData; }, |
| width: '200px' |
| }, |
| { |
| title: 'Second Column', |
| value: function(row) { return row.secondData; } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| firstData: 'A1', |
| secondData: 'A2' |
| }, |
| { |
| firstData: 'B1', |
| secondData: 'B2' |
| } |
| ]; |
| var footerRows = [ |
| { |
| firstData: 'A1', |
| secondData: 'A2' |
| }, |
| { |
| firstData: 'B1', |
| secondData: 'B2' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.footerRows = footerRows; |
| table.rebuild(); |
| table.rebuild(); |
| assert.equal(table.$.body.children.length, 2); |
| assert.equal(table.$.foot.children.length, 2); |
| |
| this.addHTMLOutput(table); |
| }); |
| |
| test('instantiateNestedTableWithNests', function() { |
| var columns = [ |
| { |
| title: 'First Column', |
| value: function(row) { return row.firstData; }, |
| width: '250px' |
| }, |
| { |
| title: 'Second Column', |
| value: function(row) { return row.secondData; }, |
| width: '50%' |
| } |
| ]; |
| |
| var rows = [ |
| { |
| firstData: 'A1', |
| secondData: 'A2', |
| subRows: [ |
| { |
| firstData: 'Sub1 A1', |
| secondData: 'Sub1 A2' |
| }, |
| { |
| firstData: 'Sub2 A1', |
| secondData: 'Sub2 A2', |
| subRows: [ |
| { |
| firstData: 'SubSub1 A1', |
| secondData: 'SubSub1 A2' |
| }, |
| { |
| firstData: 'SubSub2 A1', |
| secondData: 'SubSub2 A2' |
| } |
| ] |
| }, |
| { |
| firstData: 'Sub3 A1', |
| secondData: 'Sub3 A2' |
| } |
| ] |
| }, |
| { |
| firstData: 'B1', |
| secondData: 'B2' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| }); |
| |
| test('instantiateSortingCallbacksWithNests', function() { |
| var table = document.createElement('tr-ui-b-table'); |
| |
| var columns = [ |
| { |
| title: 'First Column', |
| value: function(row) { return row.firstData; }, |
| width: '50%' |
| }, |
| { |
| title: 'Second Column', |
| value: function(row) { return row.secondData; }, |
| width: '250px', |
| cmp: function(rowA, rowB) { |
| return rowA.secondData.toString().localeCompare( |
| rowB.secondData.toString()); |
| }, |
| showExpandButtons: true |
| } |
| ]; |
| |
| var rows = [ |
| { |
| firstData: 'A1', |
| secondData: 'A2', |
| subRows: [ |
| { |
| firstData: 'Sub1 A1', |
| secondData: 'Sub1 A2' |
| }, |
| { |
| firstData: 'Sub2 A1', |
| secondData: 'Sub2 A2', |
| subRows: [ |
| { |
| firstData: 'SubSub1 A1', |
| secondData: 'SubSub1 A2' |
| }, |
| { |
| firstData: 'SubSub2 A1', |
| secondData: 'SubSub2 A2' |
| } |
| ] |
| }, |
| { |
| firstData: 'Sub3 A1', |
| secondData: 'Sub3 A2' |
| } |
| ] |
| }, |
| { |
| firstData: 'B1', |
| secondData: 'B2' |
| } |
| ]; |
| |
| var footerRows = [ |
| { |
| firstData: 'F1', |
| secondData: 'F2', |
| subRows: [ |
| { |
| firstData: 'Sub1F1', |
| secondData: 'Sub1F2' |
| }, |
| { |
| firstData: 'Sub2F1', |
| secondData: 'Sub2F2', |
| subRows: [ |
| { |
| firstData: 'SubSub1F1', |
| secondData: 'SubSub1F2' |
| }, |
| { |
| firstData: 'SubSub2F1', |
| secondData: 'SubSub2F2' |
| } |
| ] |
| }, |
| { |
| firstData: 'Sub3F1', |
| secondData: 'Sub3F2' |
| } |
| ] |
| }, |
| { |
| firstData: 'F\'1', |
| secondData: 'F\'2' |
| } |
| |
| ]; |
| |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.footerRows = footerRows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| var button = THIS_DOC.createElement('button'); |
| Polymer.dom(button).textContent = 'Sort By Col 0'; |
| button.addEventListener('click', function() { |
| table.sortDescending = !table.sortDescending; |
| table.sortColumnIndex = 0; |
| }); |
| table.rebuild(); |
| |
| this.addHTMLOutput(button); |
| }); |
| |
| |
| test('instantiateNestedTableAlreadyExpanded', function() { |
| var columns = [ |
| { |
| title: 'a', |
| value: function(row) { return row.a; }, |
| width: '150px' |
| }, |
| { |
| title: 'a', |
| value: function(row) { return row.b; }, |
| width: '50%' |
| } |
| ]; |
| |
| var rows = [ |
| { |
| a: 'aToplevel', |
| b: 'bToplevel', |
| isExpanded: true, |
| subRows: [ |
| { |
| a: 'a1', |
| b: 'b1' |
| } |
| ] |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| |
| var a1El = tr.b.findDeepElementMatchingPredicate(table, function(element) { |
| return Polymer.dom(element).textContent == 'a1'; |
| }); |
| assert.isDefined(a1El); |
| |
| var bToplevelEl = tr.b.findDeepElementMatchingPredicate( |
| table, |
| function(element) { |
| return Polymer.dom(element).textContent == 'bToplevel'; |
| }); |
| assert.isDefined(bToplevelEl); |
| var expandButton = Polymer.dom(bToplevelEl.parentElement) |
| .querySelector('expand-button'); |
| assert.isTrue(Polymer.dom(expandButton).classList.contains( |
| 'button-expanded')); |
| }); |
| |
| |
| test('subRowsThatAreRetrievedOnDemand', function() { |
| var columns = [ |
| { |
| title: 'a', |
| value: function(row) { return row.a; }, |
| width: '150px' |
| } |
| ]; |
| |
| var rows = [ |
| { |
| a: 'row1', |
| subRows: [ |
| { |
| b: 'row1.1', |
| get subRows() { |
| throw new Error('Shold not be called'); |
| } |
| } |
| ] |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| }); |
| |
| |
| test('instantiateTableWithHiddenHeader', function() { |
| var columns = [ |
| { |
| title: 'a', |
| value: function(row) { return row.a; }, |
| width: '150px' |
| }, |
| { |
| title: 'a', |
| value: function(row) { return row.b; }, |
| width: '50%' |
| } |
| ]; |
| |
| var rows = [ |
| { |
| a: 'aToplevel', |
| b: 'bToplevel' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.showHeader = false; |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| |
| var tHead = table.$.head; |
| assert.equal(table.$.head.children.length, 0); |
| assert.equal(0, tHead.getBoundingClientRect().height); |
| |
| table.showHeader = true; |
| table.rebuild(); |
| table.showHeader = false; |
| table.rebuild(); |
| assert.equal(table.$.head.children.length, 0); |
| }); |
| |
| |
| test('sortColumnsNotPossibleOnPercentSizedColumns', function() { |
| var columns = [ |
| { |
| title: 'Title', |
| value: function(row) { return row.a; }, |
| width: '150px' |
| }, |
| { |
| title: 'Value', |
| value: function(row) { return row.b; }, |
| width: '100%', |
| showExpandButtons: true |
| } |
| ]; |
| |
| var table1 = document.createElement('tr-ui-b-table'); |
| table1.showHeader = true; |
| |
| assert.throws(function() { |
| table1.tableColumns = columns; |
| }); |
| }); |
| |
| test('twoTablesFirstColumnMatching', function() { |
| var columns = [ |
| { |
| title: 'Title', |
| value: function(row) { return row.a; }, |
| width: '150px' |
| }, |
| { |
| title: 'Value', |
| value: function(row) { return row.b; }, |
| width: '100%' |
| } |
| ]; |
| |
| var table1 = document.createElement('tr-ui-b-table'); |
| table1.showHeader = true; |
| table1.tableColumns = columns; |
| table1.tableRows = [ |
| { |
| a: 'first', |
| b: 'row' |
| } |
| ]; |
| table1.rebuild(); |
| this.addHTMLOutput(table1); |
| |
| var table2 = document.createElement('tr-ui-b-table'); |
| table2.showHeader = false; |
| table2.tableColumns = columns; |
| table2.tableRows = [ |
| { |
| a: 'second', |
| b: 'row' |
| } |
| ]; |
| table2.rebuild(); |
| this.addHTMLOutput(table2); |
| |
| var h1FirstCol = table1.$.head.children[0].children[0]; |
| var h2FirstCol = table2.$.body.children[0].children[0]; |
| assert.equal(h1FirstCol.getBoundingClientRect().width, |
| h2FirstCol.getBoundingClientRect().width); |
| }); |
| |
| test('programmaticSorting', function() { |
| var table = document.createElement('tr-ui-b-table'); |
| |
| var columns = [ |
| { |
| title: 'Column', |
| value: function(row) { return row.value; }, |
| cmp: function(rowA, rowB) { |
| return rowA.value.toString().localeCompare( |
| rowB.value.toString()); |
| } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| value: 'A1', |
| subRows: [ |
| { |
| value: 'A1.1' |
| }, |
| { |
| value: 'A1.2', |
| subRows: [ |
| { |
| value: 'A1.2.1' |
| }, |
| { |
| value: 'A1.2.2' |
| } |
| ] |
| }, |
| { |
| value: 'A1.3' |
| } |
| ] |
| }, |
| { |
| value: 'A2' |
| } |
| ]; |
| |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| table.sortDescending = true; |
| table.sortColumnIndex = 0; |
| table.rebuild(); |
| var r0 = table.$.body.children[0]; |
| assert.equal(r0.rowInfo.userRow, rows[1]); |
| |
| var r1 = table.$.body.children[1]; |
| assert.equal(r1.rowInfo.userRow, rows[0]); |
| }); |
| |
| test('sortDispatchesEvent', function() { |
| var table = document.createElement('tr-ui-b-table'); |
| var columns = [ |
| { |
| title: 'Column 0', |
| value: function(row) { return row.value0; }, |
| cmp: function(rowA, rowB) { return rowA.value0 - rowB.value0; } |
| }, |
| { |
| title: 'Column 1', |
| value: function(row) { return row.value1; }, |
| cmp: function(rowA, rowB) { return rowA.value1 - rowB.value1; } |
| } |
| ]; |
| |
| var sortColumnIndex = undefined; |
| var sortDescending = undefined; |
| var numListenerCalls = 0; |
| table.tableColumns = columns; |
| table.addEventListener('sort-column-changed', function(e) { |
| sortColumnIndex = e.sortColumnIndex; |
| sortDescending = e.sortDescending; |
| numListenerCalls++; |
| }); |
| table.rebuild(); |
| |
| table.sortColumnIndex = 0; |
| assert.equal(sortColumnIndex, 0); |
| assert.equal(numListenerCalls, 1); |
| |
| table.sortDescending = true; |
| assert.equal(sortColumnIndex, 0); |
| assert.isTrue(sortDescending); |
| assert.equal(numListenerCalls, 2); |
| |
| table.sortColumnIndex = 1; |
| table.sortDescending = false; |
| assert.equal(sortColumnIndex, 1); |
| assert.isFalse(sortDescending); |
| assert.equal(numListenerCalls, 4); |
| |
| table.sortColumnIndex = undefined; |
| assert.equal(sortColumnIndex, undefined); |
| assert.equal(numListenerCalls, 5); |
| }); |
| |
| test('sortingAfterExpand', function() { |
| var table = document.createElement('tr-ui-b-table'); |
| |
| var columns = [ |
| { |
| title: 'Column', |
| value: function(row) { return row.value; }, |
| cmp: function(rowA, rowB) { |
| return rowA.value.toString().localeCompare( |
| rowB.value.toString()); |
| } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| value: 'A1', |
| isExpanded: true, |
| subRows: [ |
| { |
| value: 'A1.1' |
| }, |
| { |
| value: 'A1.2', |
| subRows: [ |
| { |
| value: 'A1.2.1' |
| }, |
| { |
| value: 'A1.2.2' |
| } |
| ] |
| }, |
| { |
| value: 'A1.3' |
| } |
| ] |
| }, |
| { |
| value: 'A2' |
| } |
| ]; |
| |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| table.sortDescending = true; |
| table.sortColumnIndex = 0; |
| table.rebuild(); |
| var r0 = table.$.body.children[0]; |
| assert.equal(r0.rowInfo.userRow, rows[1]); |
| |
| var r1 = table.$.body.children[1]; |
| assert.equal(r1.rowInfo.userRow, rows[0]); |
| |
| var r2 = table.$.body.children[2]; |
| assert.equal(r2.rowInfo.userRow, rows[0].subRows[2]); |
| |
| assert.isFalse(r0.hasAttribute('tabIndex')); |
| }); |
| |
| function createSimpleOneColumnNestedTable() { |
| var table = document.createElement('tr-ui-b-table'); |
| |
| var columns = [ |
| { |
| title: 'Column', |
| value: function(row) { return row.value; }, |
| cmp: function(rowA, rowB) { |
| return rowA.value.toString().localeCompare( |
| rowB.value.toString()); |
| } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| value: 'A1', |
| subRows: [ |
| { |
| value: 'A1.1' |
| }, |
| { |
| value: 'A1.2', |
| subRows: [ |
| { |
| value: 'A1.2.1' |
| }, |
| { |
| value: 'A1.2.2' |
| } |
| ] |
| }, |
| { |
| value: 'A1.3' |
| } |
| ] |
| }, |
| { |
| value: 'A2' |
| } |
| ]; |
| |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| return table; |
| } |
| |
| test('expandAfterRebuild', function() { |
| var table = createSimpleOneColumnNestedTable(); |
| table.rebuild(); |
| var rows = table.tableRows; |
| |
| this.addHTMLOutput(table); |
| |
| table.rebuild(); |
| assert.isFalse(table.getExpandedForTableRow(rows[0])); |
| table.setExpandedForTableRow(rows[0], true); |
| assert.isTrue(table.getExpandedForTableRow(rows[0])); |
| |
| var r1 = table.$.body.children[1]; |
| assert.equal(r1.rowInfo.userRow, rows[0].subRows[0]); |
| }); |
| |
| test('tableSelection', function() { |
| var table = createSimpleOneColumnNestedTable(); |
| var rows = table.tableRows; |
| |
| table.selectionMode = SelectionMode.ROW; |
| table.selectedTableRow = rows[0]; |
| |
| table.setExpandedForTableRow(rows[0], true); |
| table.selectedTableRow = rows[0].subRows[1]; |
| assert.equal(table.selectedTableRow, rows[0].subRows[1]); |
| |
| table.setExpandedForTableRow(rows[0], false); |
| assert.equal(table.selectedTableRow, rows[0]); |
| |
| table.selectionMode = SelectionMode.NONE; |
| assert.equal(table.selectedTableRow, undefined); |
| |
| table.selectionMode = SelectionMode.ROW; |
| table.setExpandedForTableRow(rows[0].subRows[1], true); |
| this.addHTMLOutput(table); |
| |
| var r0 = table.$.body.children[0]; |
| assert.isTrue(r0.hasAttribute('tabIndex')); |
| }); |
| |
| |
| test('keyMovement', function() { |
| var table = createSimpleOneColumnNestedTable(); |
| table.selectionMode = SelectionMode.ROW; |
| this.addHTMLOutput(table); |
| |
| var rows = table.tableRows; |
| table.selectedTableRow = rows[0]; |
| |
| table.performKeyCommand_('ARROW_DOWN'); |
| assert.equal(table.selectedTableRow, rows[1]); |
| |
| table.performKeyCommand_('ARROW_UP'); |
| assert.equal(table.selectedTableRow, rows[0]); |
| |
| // Enter on collapsed row should expand. |
| table.selectedTableRow = rows[0]; |
| table.performKeyCommand_('SPACE'); |
| assert.equal(table.selectedTableRow, rows[0]); |
| assert.isTrue(table.getExpandedForTableRow(rows[0])); |
| |
| table.performKeyCommand_('SPACE'); |
| assert.isFalse(table.getExpandedForTableRow(rows[0])); |
| |
| // Arrow right on collapsed row should expand. |
| table.selectedTableRow = rows[0]; |
| table.performKeyCommand_('ARROW_RIGHT'); |
| assert.equal(table.selectedTableRow, rows[0].subRows[0]); |
| assert.isTrue(table.getExpandedForTableRow(rows[0])); |
| |
| table.performKeyCommand_('ARROW_DOWN'); |
| assert.equal(table.selectedTableRow, rows[0].subRows[1]); |
| |
| // Arrow left on collapsed item should select parent. |
| table.performKeyCommand_('ARROW_LEFT'); |
| assert.equal(table.selectedTableRow, rows[0]); |
| assert.isTrue(table.getExpandedForTableRow(rows[0])); |
| // Arrow left on parent should collapse its children. |
| table.performKeyCommand_('ARROW_LEFT'); |
| assert.isFalse(table.getExpandedForTableRow(rows[0])); |
| |
| // Arrow right on expanded row should select first child. |
| table.selectedTableRow = rows[0]; |
| table.setExpandedForTableRow(rows[0], true); |
| table.performKeyCommand_('ARROW_RIGHT'); |
| assert.equal(table.selectedTableRow, rows[0].subRows[0]); |
| |
| // Arrow right on a non-expandable row should do nothing. |
| table.selectedTableRow = rows[1]; |
| assert.equal(table.selectedTableRow, rows[1]); |
| table.performKeyCommand_('ARROW_RIGHT'); |
| assert.equal(table.selectedTableRow, rows[1]); |
| assert.isFalse(table.getExpandedForTableRow(rows[1])); |
| }); |
| |
| test('RightArrowKeyWhenTableSorted', function() { |
| var table = createSimpleOneColumnNestedTable(); |
| table.selectionMode = SelectionMode.ROW; |
| this.addHTMLOutput(table); |
| table.sortDescending = true; |
| table.sortColumnIndex = 0; |
| table.rebuild(); |
| var rows = table.tableRows; |
| |
| // Arrow right should select the first child showing up on the viewer, |
| // rather than first child in sub rows since sorted. |
| table.selectedTableRow = rows[0]; |
| table.performKeyCommand_('ARROW_RIGHT'); |
| assert.equal(table.selectedTableRow, rows[0].subRows[2]); |
| }); |
| |
| test('reduceNumberOfColumnsAfterRebuild', function() { |
| // Create a table with two columns. |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = [ |
| { |
| title: 'First Column', |
| value: function(row) { return row.firstData; }, |
| width: '100px' |
| }, |
| { |
| title: 'Second Column', |
| value: function(row) { return row.secondData; }, |
| width: '100px' |
| } |
| ]; |
| |
| // Build the table. |
| table.rebuild(); |
| |
| // Check that reducing the number of columns doesn't throw an exception. |
| table.tableColumns = [ |
| { |
| title: 'First Column', |
| value: function(row) { return row.firstData; }, |
| width: '200px' |
| } |
| ]; |
| }); |
| |
| test('rowHighlightDark', function() { |
| var columns = [ |
| { |
| title: 'Title', |
| value: function(row) { return row.a; }, |
| width: '150px', |
| supportsCellSelection: false |
| }, |
| { |
| title: 'Col1', |
| value: function(row) { return row.b; }, |
| width: '33%' |
| }, |
| { |
| title: 'Col2', |
| value: function(row) { return row.b * 2; }, |
| width: '33%' |
| }, |
| { |
| title: 'Col3', |
| value: function(row) { return row.b * 3; }, |
| width: '33%' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.showHeader = true; |
| table.rowHighlightStyle = HighlightStyle.DARK; |
| table.tableColumns = columns; |
| table.tableRows = [ |
| { |
| a: 'first', |
| b: '1' |
| }, |
| { |
| a: 'second', |
| b: '2' |
| } |
| ]; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| }); |
| |
| test('cellHighlightLight', function() { |
| var columns = [ |
| { |
| title: 'Title', |
| value: function(row) { return row.a; }, |
| width: '150px', |
| supportsCellSelection: false |
| }, |
| { |
| title: 'Col1', |
| value: function(row) { return row.b; }, |
| width: '33%' |
| }, |
| { |
| title: 'Col2', |
| value: function(row) { return row.b * 2; }, |
| width: '33%' |
| }, |
| { |
| title: 'Col3', |
| value: function(row) { return row.b * 3; }, |
| width: '33%' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.showHeader = true; |
| table.cellHighlightStyle = HighlightStyle.LIGHT; |
| table.tableColumns = columns; |
| table.tableRows = [ |
| { |
| a: 'first', |
| b: '1' |
| }, |
| { |
| a: 'second', |
| b: '2' |
| } |
| ]; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| }); |
| |
| test('cellSelectionBasic', function() { |
| var columns = [ |
| { |
| title: 'Title', |
| value: function(row) { return row.a; }, |
| width: '150px', |
| supportsCellSelection: false |
| }, |
| { |
| title: 'Col1', |
| value: function(row) { return row.b; }, |
| width: '33%' |
| }, |
| { |
| title: 'Col2', |
| value: function(row) { return row.b * 2; }, |
| width: '33%' |
| }, |
| { |
| title: 'Col3', |
| value: function(row) { return row.b * 3; }, |
| width: '33%' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.showHeader = true; |
| table.selectionMode = SelectionMode.CELL; |
| table.rowHighlightStyle = HighlightStyle.NONE; |
| table.tableColumns = columns; |
| table.tableRows = [ |
| { |
| a: 'first', |
| b: '1' |
| }, |
| { |
| a: 'second', |
| b: '2' |
| } |
| ]; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| |
| table.selectedTableRow = table.tableRows[0]; |
| assert.equal(table.selectedColumnIndex, 1); |
| var selectedCell = table.selectedCell; |
| assert.strictEqual(selectedCell.row, table.tableRows[0]); |
| assert.strictEqual(selectedCell.column, columns[1]); |
| assert.strictEqual(selectedCell.value, '1'); |
| |
| table.performKeyCommand_('ARROW_DOWN'); |
| table.performKeyCommand_('ARROW_RIGHT'); |
| table.performKeyCommand_('ARROW_RIGHT'); |
| table.performKeyCommand_('ARROW_LEFT'); |
| assert.equal(table.selectedTableRow, table.tableRows[1]); |
| assert.equal(table.selectedColumnIndex, 2); |
| selectedCell = table.selectedCell; |
| assert.strictEqual(selectedCell.row, table.tableRows[1]); |
| assert.strictEqual(selectedCell.column, columns[2]); |
| assert.strictEqual(selectedCell.value, 4); |
| |
| table.selectedTableRow = undefined; |
| assert.isUndefined(table.selectedTableRow); |
| assert.isUndefined(table.selectedColumnIndex); |
| assert.isUndefined(table.selectedColumnIndex); |
| assert.isUndefined(table.selectedCell); |
| }); |
| |
| test('cellSelectionNested', function() { |
| var columns = [ |
| { |
| title: 'Title', |
| value: function(row) { return row.a; }, |
| width: '150px', |
| supportsCellSelection: false |
| }, |
| { |
| title: 'Value', |
| value: function(row) { return row.b; }, |
| width: '150px' |
| } |
| ]; |
| |
| var rows = [ |
| { |
| a: 'parent', |
| b: '1', |
| subRows: [ |
| { |
| a: 'child', |
| b: '2' |
| } |
| ] |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.showHeader = true; |
| table.selectionMode = SelectionMode.CELL; |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| |
| // Expand the parent row. |
| table.setExpandedForTableRow(rows[0], true); |
| |
| // Select the second cell in the child row. |
| table.selectedTableRow = rows[0].subRows[0]; |
| assert.isFalse(isSelected(table.$.body.children[0])); |
| assert.isFalse(isSelected(table.$.body.children[0].children[1])); |
| assert.isTrue(isSelected(table.$.body.children[1])); |
| assert.isTrue(isSelected(table.$.body.children[1].children[1])); |
| |
| // Fold the parent row. The second cell in the parent row should be |
| // automatically selected. |
| table.setExpandedForTableRow(rows[0], false); |
| assert.isTrue(isSelected(table.$.body.children[0])); |
| assert.isTrue(isSelected(table.$.body.children[0].children[1])); |
| |
| // Expand the parent row again. Only the second cell of the parent row |
| // should still be selected. |
| table.setExpandedForTableRow(rows[0], true); |
| assert.isTrue(isSelected(table.$.body.children[0])); |
| assert.isTrue(isSelected(table.$.body.children[0].children[1])); |
| assert.isFalse(isSelected(table.$.body.children[1])); |
| assert.isFalse(isSelected(table.$.body.children[1].children[1])); |
| }); |
| |
| test('resolvedHighlightStyle', function() { |
| var table = document.createElement('tr-ui-b-table'); |
| |
| // Undefined selection mode. |
| assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.NONE); |
| assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.NONE); |
| |
| // Row selection mode. |
| table.selectionMode = SelectionMode.ROW; |
| assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.DARK); |
| assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.NONE); |
| |
| // Cell selection mode. |
| table.selectionMode = SelectionMode.CELL; |
| assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.LIGHT); |
| assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.DARK); |
| |
| // Explicit row highlight style. |
| table.rowHighlightStyle = HighlightStyle.NONE; |
| assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.NONE); |
| assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.DARK); |
| |
| // Explicit row and cell highlight styles. |
| table.cellHighlightStyle = HighlightStyle.LIGHT; |
| assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.NONE); |
| assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.LIGHT); |
| |
| // Back to default highlight styles. |
| table.cellHighlightStyle = HighlightStyle.DEFAULT; |
| table.rowHighlightStyle = HighlightStyle.DEFAULT; |
| assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.LIGHT); |
| assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.DARK); |
| }); |
| |
| test('headersWithHtmlElements', function() { |
| var firstColumnTitle = document.createTextNode('First Column'); |
| var secondColumnTitle = document.createElement('span'); |
| secondColumnTitle.innerText = 'Second Column'; |
| secondColumnTitle.style.color = 'blue'; |
| |
| var columns = [ |
| { |
| title: firstColumnTitle, |
| value: function(row) { return row.firstData; }, |
| width: '200px' |
| }, |
| { |
| title: secondColumnTitle, |
| value: function(row) { return row.secondData; } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| firstData: 'A1', |
| secondData: 'A2' |
| }, |
| { |
| firstData: 'B1', |
| secondData: 'B2' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| var firstColumnHeader = table.$.head.children[0].children[0].children[0]; |
| var secondColumnHeader = table.$.head.children[0].children[1].children[0]; |
| assert.equal(Polymer.dom(firstColumnHeader.cellTitle).textContent, |
| 'First Column'); |
| assert.equal(Polymer.dom(secondColumnHeader.cellTitle).textContent, |
| 'Second Column'); |
| }); |
| |
| test('align', function() { |
| var columns = [ |
| { |
| title: 'a', |
| align: ColumnAlignment.RIGHT, |
| value: function(row) { |
| return row.a; |
| } |
| } |
| ]; |
| var rows = [{a: 1}, {a: 'long-row-so-that-alignment-would-be-visible'}]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| assert.strictEqual( |
| table.$.body.children[0].children[0].style.textAlign, 'right'); |
| }); |
| |
| test('subRowsPropertyName', function() { |
| var columns = [ |
| { |
| title: 'a', |
| value: function(row) { |
| return row.a; |
| } |
| } |
| ]; |
| var rows = [ |
| { |
| a: 1, |
| isExpanded: true, |
| children: [ |
| {a: 2} |
| ] |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.subRowsPropertyName = 'children'; |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| assert.equal( |
| 2, Polymer.dom(table.$.body.children[1].children[0]).textContent); |
| }); |
| |
| test('shouldNotRenderUndefined', function() { |
| var columns = [ |
| { |
| title: 'Column', |
| value: function(row) { return row.firstData; } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| firstData: undefined, |
| secondData: 'A2' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| // check that we don't have 'undefined' anywhere |
| assert.isTrue(Polymer.dom(table.$.body).innerHTML.indexOf('undefined') < 0); |
| }); |
| |
| test('customizeTableRowCallback', function() { |
| var columns = [ |
| { |
| title: 'Column', |
| value: function(row) { return row.data; } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| data: 'data' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| var callbackCalled = false; |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.customizeTableRowCallback = function(userRow, trElement) { |
| callbackCalled = (userRow === rows[0]); |
| }; |
| table.rebuild(); |
| assert.isTrue(callbackCalled); |
| |
| this.addHTMLOutput(table); |
| |
| // The callback can also be set after the table is first built. |
| table.customizeTableRowCallback = function(userRow, trElement) { |
| callbackCalled = (userRow === rows[0]); |
| }; |
| |
| // Setting the customize callback should set the body dirty. |
| assert.isTrue(table.bodyDirty_); |
| |
| callbackCalled = false; |
| |
| // Don't bother waiting for the timeout. |
| table.rebuild(); |
| |
| assert.isTrue(callbackCalled); |
| }); |
| |
| test('selectionEdgeCases', function() { |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = [ |
| { |
| title: 'Column', |
| value: function(row) { return row.data; }, |
| supportsCellSelection: false |
| } |
| ]; |
| table.tableRows = [{ data: 'body row' }]; |
| table.footerRows = [{ data: 'footer row' }]; |
| table.selectionMode = SelectionMode.ROW; |
| this.addHTMLOutput(table); |
| |
| // Clicking on the body row should *not* throw an exception (despite the |
| // column not supporting cell selection). |
| table.$.body.children[0].children[0].click(); |
| |
| // Clicking on the footer row should *not* throw an exception (despite |
| // footer rows not being selectable in general). |
| table.$.foot.children[0].children[0].click(); |
| }); |
| |
| test('defaultExpansionStateCallback', function() { |
| var columns = [ |
| { |
| title: 'Name', |
| value: function(row) { return row.name; } |
| }, |
| { |
| title: 'Value', |
| value: function(row) { return row.value; } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| name: 'A', |
| value: 10, |
| subRows: [ |
| { |
| name: 'B', |
| value: 8, |
| subRows: [ |
| { |
| name: 'C', |
| value: 4 |
| }, |
| { |
| name: 'D', |
| value: 4 |
| } |
| ] |
| }, |
| { |
| name: 'E', |
| value: 2, |
| subRows: [ |
| { |
| name: 'F', |
| value: 1 |
| }, |
| { |
| name: 'G', |
| value: 1 |
| } |
| ] |
| } |
| ] |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| var cRow = tr.b.findDeepElementMatchingPredicate( |
| table, function(element) { |
| return Polymer.dom(element).textContent === 'C'; |
| }); |
| assert.equal(cRow, undefined); |
| |
| var callbackCalled = false; |
| table.defaultExpansionStateCallback = function(row, parentRow) { |
| callbackCalled = true; |
| |
| if (parentRow === undefined) |
| return true; |
| |
| if (row.value >= (parentRow.value * 0.8)) |
| return true; |
| |
| return false; |
| }; |
| |
| // Setting the callback should set the body dirty. |
| assert.isTrue(table.bodyDirty_); |
| assert.isFalse(callbackCalled); |
| |
| table.rebuild(); |
| |
| assert.isTrue(callbackCalled); |
| cRow = tr.b.findDeepElementMatchingPredicate(table, function(element) { |
| return Polymer.dom(element).textContent === 'C'; |
| }); |
| assert.isDefined(cRow); |
| }); |
| |
| test('sortExpanded', function() { |
| var columns = [ |
| { |
| title: 'Name', |
| value: function(row) { return row.name; } |
| }, |
| { |
| title: 'Value', |
| value: function(row) { return row.value; }, |
| cmp: function(x, y) { return x.value - y.value; } |
| } |
| ]; |
| |
| var rows = [ |
| { |
| name: 'A', |
| value: 10, |
| subRows: [ |
| { |
| name: 'B', |
| value: 8 |
| }, |
| { |
| name: 'C', |
| value: 4 |
| }, |
| ] |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| |
| this.addHTMLOutput(table); |
| |
| function isB(row) { |
| return row.textContent === 'B'; |
| } |
| |
| // Check that 'A' row is not expanded. |
| assert.isUndefined(tr.b.findDeepElementMatchingPredicate(table, isB)); |
| |
| // Expand 'A' row. |
| table.setExpandedForTableRow(rows[0], true); |
| |
| // Check that 'A' is expanded. |
| assert.isDefined(tr.b.findDeepElementMatchingPredicate(table, isB)); |
| |
| // Sort by value. |
| table.sortColumnIndex = 1; |
| |
| // Rebuild the table synchronously instead of waiting for scheduleRebuild_'s |
| // setTimeout(0). |
| table.rebuild(); |
| |
| // Check that 'A' is still expanded. |
| assert.isDefined(tr.b.findDeepElementMatchingPredicate(table, isB)); |
| }); |
| |
| test('userCanModifySortOrder', function() { |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = [ |
| { |
| title: 'Name', |
| value: row => row.name |
| }, |
| { |
| title: 'colA', |
| value: row => row.a, |
| cmp: (rowA, rowB) => rowA.a - rowB.a |
| }, |
| { |
| title: 'colB', |
| value: row => row.b, |
| cmp: (rowA, rowB) => rowA.b - rowB.b |
| } |
| ]; |
| table.tableRows = [ |
| {name: 'A', a: 42, b: 0}, |
| {name: 'B', a: 89, b: 100}, |
| {name: 'C', a: 65, b: -273.15} |
| ]; |
| table.userCanModifySortOrder = false; |
| table.sortColumnIndex = 2; |
| table.sortDescending = true; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| |
| var toggleButton = document.createElement('button'); |
| Polymer.dom(toggleButton).textContent = |
| 'Toggle table.userCanModifySortOrder'; |
| toggleButton.addEventListener('click', function() { |
| table.userCanModifySortOrder = !table.userCanModifySortOrder; |
| }); |
| this.addHTMLOutput(toggleButton); |
| |
| var unsetButton = document.createElement('button'); |
| Polymer.dom(unsetButton).textContent = 'Unset sort order'; |
| unsetButton.addEventListener('click', function() { |
| table.sortColumnIndex = undefined; |
| }); |
| this.addHTMLOutput(unsetButton); |
| }); |
| |
| test('columnSelection', function() { |
| var table = document.createElement('tr-ui-b-table'); |
| table.tableColumns = [ |
| { |
| title: 'Name', |
| value: (row) => row.name |
| }, |
| { |
| title: 'colA', |
| selectable: true, |
| value: (row) => row.a, |
| cmp: (rowA, rowB) => rowA.a - rowB.a |
| }, |
| { |
| title: 'colB', |
| selectable: true, |
| value: (row) => row.b, |
| cmp: (rowA, rowB) => rowA.b - rowB.b |
| } |
| ]; |
| table.tableRows = [ |
| {name: 'foo', a: 42, b: -42}, |
| {name: 'bar', a: 57, b: 133} |
| ]; |
| table.rebuild(); |
| table.selectionMode = SelectionMode.CELL; |
| this.addHTMLOutput(table); |
| |
| table.selectedTableColumnIndex = 1; |
| var cols = tr.b.findDeepElementMatchingPredicate(table, |
| e => e.tagName === 'COLGROUP').children; |
| assert.isNull(cols[0].getAttribute('selected')); |
| assert.strictEqual(cols[1].getAttribute('selected'), 'true'); |
| assert.isNull(cols[2].getAttribute('selected')); |
| assert.strictEqual(1, table.selectedTableColumnIndex); |
| |
| table.selectedTableColumnIndex = undefined; |
| cols = tr.b.findDeepElementMatchingPredicate(table, |
| e => e.tagName === 'COLGROUP').children; |
| assert.isNull(cols[0].getAttribute('selected')); |
| assert.isNull(cols[1].getAttribute('selected')); |
| assert.isNull(cols[2].getAttribute('selected')); |
| assert.isUndefined(table.selectedTableColumnIndex); |
| |
| table.selectedTableColumnIndex = 2; |
| cols = tr.b.findDeepElementMatchingPredicate(table, |
| e => e.tagName === 'COLGROUP').children; |
| assert.isNull(cols[0].getAttribute('selected')); |
| assert.isNull(cols[1].getAttribute('selected')); |
| assert.strictEqual(cols[2].getAttribute('selected'), 'true'); |
| assert.strictEqual(2, table.selectedTableColumnIndex); |
| }); |
| |
| test('stepInto', function() { |
| var columns = [ |
| { |
| title: 'Title', |
| value: function(row) { return row.a; }, |
| width: '150px', |
| supportsCellSelection: false |
| }, |
| { |
| title: 'Col1', |
| value: function(row) { return row.b; }, |
| width: '33%' |
| }, |
| { |
| title: 'Col2', |
| value: function(row) { return row.b * 2; }, |
| width: '33%' |
| }, |
| { |
| title: 'Col3', |
| value: function(row) { return row.b * 3; }, |
| width: '33%' |
| } |
| ]; |
| var rows = [ |
| { |
| a: 'first', |
| b: '1' |
| }, |
| { |
| a: 'second', |
| b: '2' |
| } |
| ]; |
| |
| var table = document.createElement('tr-ui-b-table'); |
| |
| var firedStepIntoEvents = []; |
| table.addEventListener('step-into', e => firedStepIntoEvents.push(e)); |
| |
| table.cellHighlightStyle = HighlightStyle.DARK; |
| table.tableColumns = columns; |
| table.tableRows = rows; |
| table.rebuild(); |
| this.addHTMLOutput(table); |
| |
| assert.lengthOf(firedStepIntoEvents, 0); |
| |
| // Double click. |
| simulateDoubleClick(table.$.body.children[0].children[1]); |
| assert.lengthOf(firedStepIntoEvents, 1); |
| assert.strictEqual(firedStepIntoEvents[0].tableRow, rows[0]); |
| assert.strictEqual(firedStepIntoEvents[0].tableColumn, columns[1]); |
| assert.strictEqual(firedStepIntoEvents[0].columnIndex, 1); |
| |
| simulateDoubleClick(table.$.body.children[1].children[3]); |
| assert.lengthOf(firedStepIntoEvents, 2); |
| assert.strictEqual(firedStepIntoEvents[1].tableRow, rows[1]); |
| assert.strictEqual(firedStepIntoEvents[1].tableColumn, columns[3]); |
| assert.strictEqual(firedStepIntoEvents[1].columnIndex, 3); |
| |
| // Shift+Enter in cell selection mode. |
| table.selectionMode = SelectionMode.CELL; |
| table.selectedTableRow = rows[0]; |
| table.selectedColumnIndex = 2; |
| table.performKeyCommand_('ENTER'); |
| assert.lengthOf(firedStepIntoEvents, 3); |
| assert.strictEqual(firedStepIntoEvents[2].tableRow, rows[0]); |
| assert.strictEqual(firedStepIntoEvents[2].tableColumn, columns[2]); |
| assert.strictEqual(firedStepIntoEvents[2].columnIndex, 2); |
| |
| // Shift+Enter in row selection mode. |
| table.selectionMode = SelectionMode.ROW; |
| table.selectedTableRow = rows[1]; |
| table.performKeyCommand_('ENTER'); |
| assert.lengthOf(firedStepIntoEvents, 4); |
| assert.strictEqual(firedStepIntoEvents[3].tableRow, rows[1]); |
| assert.isUndefined(firedStepIntoEvents[3].tableColumn); |
| assert.isUndefined(firedStepIntoEvents[3].columnIndex); |
| }); |
| }); |
| </script> |
