diff options
Diffstat (limited to 'devtools/client/shared/test/browser_tableWidget_basic.js')
| -rw-r--r-- | devtools/client/shared/test/browser_tableWidget_basic.js | 448 |
1 files changed, 448 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_tableWidget_basic.js b/devtools/client/shared/test/browser_tableWidget_basic.js new file mode 100644 index 0000000000..a8b737b9d0 --- /dev/null +++ b/devtools/client/shared/test/browser_tableWidget_basic.js @@ -0,0 +1,448 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Tests that the table widget api works fine + +"use strict"; + +const TEST_URI = CHROME_URL_ROOT + "doc_tableWidget_basic.html"; + +const { + TableWidget, +} = require("resource://devtools/client/shared/widgets/TableWidget.js"); + +add_task(async function () { + await addTab("about:blank"); + const { host, doc } = await createHost("bottom", TEST_URI); + + const table = new TableWidget(doc.querySelector("box"), { + initialColumns: { + col1: "Column 1", + col2: "Column 2", + col3: "Column 3", + col4: "Column 4", + }, + uniqueId: "col1", + emptyText: "dummy-text", + highlightUpdated: true, + removableColumns: true, + firstColumn: "col4", + l10n: { + setAttributes() {}, + }, + }); + + startTests(doc, table); + endTests(doc, host, table); +}); + +function startTests(doc, table) { + populateTable(doc, table); + + testTreeItemInsertedCorrectly(doc, table); + testAPI(doc, table); +} + +function endTests(doc, host, table) { + table.destroy(); + host.destroy(); + gBrowser.removeCurrentTab(); + table = null; + finish(); +} + +function populateTable(doc, table) { + table.push({ + col1: "id1", + col2: "value10", + col3: "value20", + col4: "value30", + }); + table.push({ + col1: "id2", + col2: "value14", + col3: "value29", + col4: "value32", + }); + table.push({ + col1: "id3", + col2: "value17", + col3: "value21", + col4: "value31", + extraData: "foobar", + extraData2: 42, + }); + table.push({ + col1: "id4", + col2: "value12", + col3: "value26", + col4: "value33", + }); + table.push({ + col1: "id5", + col2: "value19", + col3: "value26", + col4: "value37", + }); + table.push({ + col1: "id6", + col2: "value15", + col3: "value25", + col4: "value37", + }); + table.push({ + col1: "id7", + col2: "value18", + col3: "value21", + col4: "value36", + somethingExtra: "Hello World!", + }); + table.push({ + col1: "id8", + col2: "value11", + col3: "value27", + col4: "value34", + }); + + const span = doc.createElement("span"); + span.textContent = "domnode"; + + table.push({ + col1: "id9", + col2: "value11", + col3: "value23", + col4: span, + }); +} + +/** + * Test if the nodes are inserted correctly in the table. + */ +function testTreeItemInsertedCorrectly(doc, table) { + // double because of splitters + is(table.tbody.children.length, 4 * 2, "4 columns exist"); + + // Test firstColumn option and check if the nodes are inserted correctly + is( + table.tbody.children[0].children.length, + 9 + 1, + "Correct rows in column 4" + ); + is( + table.tbody.children[0].firstChild.value, + "Column 4", + "Correct column header value" + ); + + for (let i = 1; i < 4; i++) { + is( + table.tbody.children[i * 2].children.length, + 9 + 1, + `Correct rows in column ${i}` + ); + is( + table.tbody.children[i * 2].firstChild.value, + `Column ${i}`, + "Correct column header value" + ); + } + for (let i = 1; i < 10; i++) { + is( + table.tbody.children[2].children[i].value, + `id${i}`, + `Correct value in row ${i}` + ); + } + + // Remove firstColumn option and reset the table + info("resetting table"); + table.clear(); + table.firstColumn = ""; + table.setColumns({ + col1: "Column 1", + col2: "Column 2", + col3: "Column 3", + col4: "Column 4", + }); + populateTable(doc, table); + + // Check if the nodes are inserted correctly without firstColumn option + for (let i = 0; i < 4; i++) { + is( + table.tbody.children[i * 2].children.length, + 9 + 1, + `Correct rows in column ${i}` + ); + is( + table.tbody.children[i * 2].firstChild.value, + `Column ${i + 1}`, + "Correct column header value" + ); + } + + for (let i = 1; i < 10; i++) { + is( + table.tbody.firstChild.children[i].value, + `id${i}`, + `Correct value in row ${i}` + ); + } +} + +/** + * Tests if the API exposed by TableWidget works properly + */ +function testAPI(doc, table) { + info("Testing TableWidget API"); + // Check if selectRow and selectedRow setter works as expected + // Nothing should be selected beforehand + ok(!doc.querySelector(".theme-selected"), "Nothing is selected"); + table.selectRow("id4"); + const node = doc.querySelector(".theme-selected"); + ok(!!node, "Somthing got selected"); + is(node.getAttribute("data-id"), "id4", "Correct node selected"); + + table.selectRow("id7"); + const node2 = doc.querySelector(".theme-selected"); + ok(!!node2, "Somthing is still selected"); + isnot(node, node2, "Newly selected node is different from previous"); + is(node2.getAttribute("data-id"), "id7", "Correct node selected"); + + // test if selectedIRow getter works + is(table.selectedRow.col1, "id7", "Correct result of selectedRow getter"); + + // test if isSelected works + ok(table.isSelected("id7"), "isSelected with column id works"); + ok( + table.isSelected({ + col1: "id7", + col2: "value18", + col3: "value21", + col4: "value36", + somethingExtra: "Hello World!", + }), + "isSelected with json works" + ); + + table.selectedRow = "id4"; + const node3 = doc.querySelector(".theme-selected"); + ok(!!node3, "Somthing is still selected"); + isnot(node2, node3, "Newly selected node is different from previous"); + is(node3, node, "First and third selected nodes should be same"); + is(node3.getAttribute("data-id"), "id4", "Correct node selected"); + + // test if selectedRow getter works + is(table.selectedRow.col1, "id4", "Correct result of selectedRow getter"); + + // test if clear selection works + table.clearSelection(); + ok( + !doc.querySelector(".theme-selected"), + "Nothing selected after clear selection call" + ); + + // test if selectNextRow and selectPreviousRow work + table.selectedRow = "id7"; + ok(table.isSelected("id7"), "Correct row selected"); + table.selectNextRow(); + ok(table.isSelected("id8"), "Correct row selected after selectNextRow call"); + + table.selectNextRow(); + ok(table.isSelected("id9"), "Correct row selected after selectNextRow call"); + + table.selectNextRow(); + ok( + table.isSelected("id1"), + "Properly cycled to first row after selectNextRow call on last row" + ); + + table.selectNextRow(); + ok(table.isSelected("id2"), "Correct row selected after selectNextRow call"); + + table.selectPreviousRow(); + ok( + table.isSelected("id1"), + "Correct row selected after selectPreviousRow call" + ); + + table.selectPreviousRow(); + ok( + table.isSelected("id9"), + "Properly cycled to last row after selectPreviousRow call on first row" + ); + + // test if remove works + ok(doc.querySelector("[data-id='id4']"), "id4 row exists before removal"); + table.remove("id4"); + ok( + !doc.querySelector("[data-id='id4']"), + "id4 row does not exist after removal through id" + ); + + ok(doc.querySelector("[data-id='id6']"), "id6 row exists before removal"); + table.remove({ + col1: "id6", + col2: "value15", + col3: "value25", + col4: "value37", + }); + ok( + !doc.querySelector("[data-id='id6']"), + "id6 row does not exist after removal through json" + ); + + table.push({ + col1: "id4", + col2: "value12", + col3: "value26", + col4: "value33", + }); + table.push({ + col1: "id6", + col2: "value15", + col3: "value25", + col4: "value37", + }); + + // test if selectedIndex getter setter works + table.selectedIndex = 2; + ok(table.isSelected("id3"), "Correct row selected by selectedIndex setter"); + + table.selectedIndex = 4; + ok(table.isSelected("id5"), "Correct row selected by selectedIndex setter"); + + table.selectRow("id8"); + is(table.selectedIndex, 7, "Correct value of selectedIndex getter"); + + // testing if clear works + table.clear(); + // double because splitters + is(table.tbody.children.length, 4 * 2, "4 columns exist even after clear"); + for (let i = 0; i < 4; i++) { + is( + table.tbody.children[i * 2].children.length, + 1, + `Only header in the column ${i} after clear call` + ); + is( + table.tbody.children[i * 2].firstChild.value, + `Column ${i + 1}`, + "Correct column header value" + ); + } + + // testing if setColumns work + table.setColumns({ + col1: "Foobar", + col2: "Testing", + }); + + // double because splitters + is( + table.tbody.children.length, + 2 * 2, + "2 columns exist after setColumn call" + ); + is( + table.tbody.children[0].firstChild.getAttribute("value"), + "Foobar", + "Correct column header value for first column" + ); + is( + table.tbody.children[2].firstChild.getAttribute("value"), + "Testing", + "Correct column header value for second column" + ); + + table.setColumns({ + col1: "Column 1", + col2: "Column 2", + col3: "Column 3", + col4: "Column 4", + }); + // double because splitters + is( + table.tbody.children.length, + 4 * 2, + "4 columns exist after second setColumn call" + ); + + populateTable(doc, table); + + // testing if update works + is( + doc.querySelectorAll("[data-id='id4']")[1].value, + "value12", + "Correct value before update" + ); + table.update({ + col1: "id4", + col2: "UPDATED", + col3: "value26", + col4: "value33", + }); + is( + doc.querySelectorAll("[data-id='id4']")[1].value, + "UPDATED", + "Correct value after update" + ); + + // testing if sorting works by calling it once on an already sorted column + // should sort descending + table.sortBy("col1"); + for (let i = 1; i < 10; i++) { + is( + table.tbody.firstChild.children[i].value, + `id${10 - i}`, + `Correct value in row ${i} after descending sort by on col1` + ); + } + // Calling it on an unsorted column should sort by it in ascending manner + table.sortBy("col2"); + let cell = table.tbody.children[2].firstChild.children[2]; + checkAscendingOrder(cell); + + // Calling it again should sort by it in descending manner + table.sortBy("col2"); + cell = table.tbody.children[2].lastChild.previousSibling; + checkDescendingOrder(cell); + + // Calling it again should sort by it in ascending manner + table.sortBy("col2"); + cell = table.tbody.children[2].firstChild.children[2]; + checkAscendingOrder(cell); + + table.clear(); + populateTable(doc, table); + + // testing if sorting works should sort by ascending manner + table.sortBy("col4"); + cell = table.tbody.children[6].children[1]; + is(cell.textContent, "domnode", "DOMNode sorted correctly"); + checkAscendingOrder(cell.nextSibling); + + // Calling it again should sort it in descending order + table.sortBy("col4"); + cell = table.tbody.children[6].children[9]; + is(cell.textContent, "domnode", "DOMNode sorted correctly"); + checkDescendingOrder(cell.previousSibling); +} + +function checkAscendingOrder(cell) { + while (cell) { + const currentCell = cell.value || cell.textContent; + const prevCell = + cell.previousSibling.value || cell.previousSibling.textContent; + ok(currentCell >= prevCell, "Sorting is in ascending order"); + cell = cell.nextSibling; + } +} + +function checkDescendingOrder(cell) { + while (cell != cell.parentNode.firstChild) { + const currentCell = cell.value || cell.textContent; + const nextCell = cell.nextSibling.value || cell.nextSibling.textContent; + ok(currentCell >= nextCell, "Sorting is in descending order"); + cell = cell.previousSibling; + } +} |