browser_net_charts-03.js (5277B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 /** 7 * Makes sure Table Charts have the right internal structure. 8 */ 9 10 add_task(async function () { 11 const { 12 L10N, 13 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js"); 14 15 const { monitor } = await initNetMonitor(HTTPS_SIMPLE_URL, { 16 requestCount: 1, 17 }); 18 info("Starting test... "); 19 20 const { document, windowRequire } = monitor.panelWin; 21 const { Chart } = windowRequire("devtools/client/shared/widgets/Chart"); 22 23 const wait = waitForNetworkEvents(monitor, 1); 24 await navigateTo(HTTPS_SIMPLE_URL); 25 await wait; 26 27 const table = Chart.Table(document, { 28 title: "Table title", 29 data: [ 30 { 31 label1: 1, 32 label2: 11.1, 33 }, 34 { 35 label1: 2, 36 label2: 12.2, 37 }, 38 { 39 label1: 3, 40 label2: 13.3, 41 }, 42 ], 43 strings: { 44 label2: (value, index) => value + ["foo", "bar", "baz"][index], 45 }, 46 totals: { 47 label1: value => "Hello " + L10N.numberWithDecimals(value, 2), 48 label2: value => "World " + L10N.numberWithDecimals(value, 2), 49 }, 50 header: { 51 label1: "label1header", 52 label2: "label2header", 53 }, 54 }); 55 56 const { node } = table; 57 const title = node.querySelector(".table-chart-title"); 58 const grid = node.querySelector(".table-chart-grid"); 59 const totals = node.querySelector(".table-chart-totals"); 60 const rows = grid.querySelectorAll(".table-chart-row"); 61 const sums = node.querySelectorAll(".table-chart-summary-label"); 62 63 ok( 64 node.classList.contains("table-chart-container") && 65 node.classList.contains("generic-chart-container"), 66 "A table chart container was created successfully." 67 ); 68 69 ok(title, "A title node was created successfully."); 70 is( 71 title.textContent, 72 "Table title", 73 "The title node displays the correct text." 74 ); 75 76 is( 77 rows.length, 78 4, 79 "There should be 3 table chart rows and a header created." 80 ); 81 82 is( 83 rows[0].querySelectorAll(".table-chart-row-label")[0].getAttribute("name"), 84 "label1", 85 "The first column of the header exists." 86 ); 87 is( 88 rows[0].querySelectorAll(".table-chart-row-label")[1].getAttribute("name"), 89 "label2", 90 "The second column of the header exists." 91 ); 92 is( 93 rows[0].querySelectorAll(".table-chart-row-label")[0].textContent, 94 "label1header", 95 "The first column of the header displays the correct text." 96 ); 97 is( 98 rows[0].querySelectorAll(".table-chart-row-label")[1].textContent, 99 "label2header", 100 "The second column of the header displays the correct text." 101 ); 102 103 is( 104 rows[1].querySelectorAll(".table-chart-row-label")[0].getAttribute("name"), 105 "label1", 106 "The first column of the first row exists." 107 ); 108 is( 109 rows[1].querySelectorAll(".table-chart-row-label")[1].getAttribute("name"), 110 "label2", 111 "The second column of the first row exists." 112 ); 113 is( 114 rows[1].querySelectorAll(".table-chart-row-label")[0].textContent, 115 "1", 116 "The first column of the first row displays the correct text." 117 ); 118 is( 119 rows[1].querySelectorAll(".table-chart-row-label")[1].textContent, 120 "11.1foo", 121 "The second column of the first row displays the correct text." 122 ); 123 124 is( 125 rows[2].querySelectorAll(".table-chart-row-label")[0].getAttribute("name"), 126 "label1", 127 "The first column of the second row exists." 128 ); 129 is( 130 rows[2].querySelectorAll(".table-chart-row-label")[1].getAttribute("name"), 131 "label2", 132 "The second column of the second row exists." 133 ); 134 is( 135 rows[2].querySelectorAll(".table-chart-row-label")[0].textContent, 136 "2", 137 "The first column of the second row displays the correct text." 138 ); 139 is( 140 rows[2].querySelectorAll(".table-chart-row-label")[1].textContent, 141 "12.2bar", 142 "The second column of the first row displays the correct text." 143 ); 144 145 is( 146 rows[3].querySelectorAll(".table-chart-row-label")[0].getAttribute("name"), 147 "label1", 148 "The first column of the third row exists." 149 ); 150 is( 151 rows[3].querySelectorAll(".table-chart-row-label")[1].getAttribute("name"), 152 "label2", 153 "The second column of the third row exists." 154 ); 155 is( 156 rows[3].querySelectorAll(".table-chart-row-label")[0].textContent, 157 "3", 158 "The first column of the third row displays the correct text." 159 ); 160 is( 161 rows[3].querySelectorAll(".table-chart-row-label")[1].textContent, 162 "13.3baz", 163 "The second column of the third row displays the correct text." 164 ); 165 166 is(sums.length, 2, "There should be 2 total summaries created."); 167 168 is( 169 totals 170 .querySelectorAll(".table-chart-summary-label")[0] 171 .getAttribute("name"), 172 "label1", 173 "The first sum's type is correct." 174 ); 175 is( 176 totals.querySelectorAll(".table-chart-summary-label")[0].textContent, 177 "Hello 6", 178 "The first sum's value is correct." 179 ); 180 181 is( 182 totals 183 .querySelectorAll(".table-chart-summary-label")[1] 184 .getAttribute("name"), 185 "label2", 186 "The second sum's type is correct." 187 ); 188 is( 189 totals.querySelectorAll(".table-chart-summary-label")[1].textContent, 190 "World 36.60", 191 "The second sum's value is correct." 192 ); 193 194 await teardown(monitor); 195 });