browser_net_charts-01.js (3775B)
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 Pie Charts have the right internal structure. 8 */ 9 10 add_task(async function () { 11 const { monitor } = await initNetMonitor(HTTPS_SIMPLE_URL, { 12 requestCount: 1, 13 }); 14 15 info("Starting test... "); 16 17 const { document, windowRequire } = monitor.panelWin; 18 const { Chart } = windowRequire("devtools/client/shared/widgets/Chart"); 19 20 const wait = waitForNetworkEvents(monitor, 1); 21 await navigateTo(HTTPS_SIMPLE_URL); 22 await wait; 23 24 const pie = Chart.Pie(document, { 25 width: 100, 26 height: 100, 27 data: [ 28 { 29 size: 1, 30 label: "foo", 31 }, 32 { 33 size: 2, 34 label: "bar", 35 }, 36 { 37 size: 3, 38 label: "baz", 39 }, 40 ], 41 }); 42 43 const { node } = pie; 44 const slicesContainer = node.querySelectorAll(".pie-chart-slice-container"); 45 const slices = node.querySelectorAll(".pie-chart-slice"); 46 const labels = node.querySelectorAll(".pie-chart-label"); 47 48 ok( 49 node.classList.contains("pie-chart-container") && 50 node.classList.contains("generic-chart-container"), 51 "A pie chart container was created successfully." 52 ); 53 is( 54 node.getAttribute("aria-label"), 55 "Pie chart representing the size of each type of request in proportion to each other", 56 "pie chart container has expected aria-label" 57 ); 58 59 is( 60 slicesContainer.length, 61 3, 62 "There should be 3 pie chart slices container created." 63 ); 64 65 is(slices.length, 3, "There should be 3 pie chart slices created."); 66 ok( 67 slices[0] 68 .getAttribute("d") 69 .match( 70 /\s*M 50,50 L 49\.\d+,97\.\d+ A 47\.5,47\.5 0 0 1 49\.\d+,2\.5\d* Z/ 71 ), 72 "The first slice has the correct data." 73 ); 74 ok( 75 slices[1] 76 .getAttribute("d") 77 .match( 78 /\s*M 50,50 L 91\.\d+,26\.\d+ A 47\.5,47\.5 0 0 1 49\.\d+,97\.\d+ Z/ 79 ), 80 "The second slice has the correct data." 81 ); 82 ok( 83 slices[2] 84 .getAttribute("d") 85 .match( 86 /\s*M 50,50 L 50\.\d+,2\.5\d* A 47\.5,47\.5 0 0 1 91\.\d+,26\.\d+ Z/ 87 ), 88 "The third slice has the correct data." 89 ); 90 91 is( 92 slicesContainer[0].getAttribute("aria-label"), 93 "baz: 50%", 94 "First slice container has expected aria-label" 95 ); 96 is( 97 slicesContainer[1].getAttribute("aria-label"), 98 "bar: 33.33%", 99 "Second slice container has expected aria-label" 100 ); 101 is( 102 slicesContainer[2].getAttribute("aria-label"), 103 "foo: 16.67%", 104 "Third slice container has expected aria-label" 105 ); 106 107 ok( 108 slices[0].hasAttribute("largest"), 109 "The first slice should be the largest one." 110 ); 111 ok( 112 slices[2].hasAttribute("smallest"), 113 "The third slice should be the smallest one." 114 ); 115 116 is( 117 slices[0].getAttribute("data-statistic-name"), 118 "baz", 119 "The first slice's name is correct." 120 ); 121 is( 122 slices[1].getAttribute("data-statistic-name"), 123 "bar", 124 "The first slice's name is correct." 125 ); 126 is( 127 slices[2].getAttribute("data-statistic-name"), 128 "foo", 129 "The first slice's name is correct." 130 ); 131 132 is(labels.length, 3, "There should be 3 pie chart labels created."); 133 is(labels[0].textContent, "baz", "The first label's text is correct."); 134 is(labels[1].textContent, "bar", "The first label's text is correct."); 135 is(labels[2].textContent, "foo", "The first label's text is correct."); 136 is( 137 labels[0].getAttribute("aria-hidden"), 138 "true", 139 "The first label has aria-hidden." 140 ); 141 is( 142 labels[1].getAttribute("aria-hidden"), 143 "true", 144 "The first label has aria-hidden." 145 ); 146 is( 147 labels[2].getAttribute("aria-hidden"), 148 "true", 149 "The first label has aria-hidden." 150 ); 151 152 await teardown(monitor); 153 });