browser_net_earlyhints.js (4883B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 /** 7 * Tests that early hint status appears to indicate the presence 8 * of early hint notifications by the request. 9 */ 10 11 add_task(async function testEarlyHintStatusCodeAndHeaders() { 12 const { tab, monitor } = await initNetMonitor(STATUS_CODES_URL, { 13 requestCount: 1, 14 }); 15 16 const { document, store, windowRequire } = monitor.panelWin; 17 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); 18 store.dispatch(Actions.batchEnable(false)); 19 20 await performEarlyHintRequest(monitor, tab); 21 const EARLYHINT_REQUEST_URL = `sjs_early-hint-test-server.sjs?early-hint-pixel.sjs=5ecccd01-dd3f-4bbd-bd3e-0491d7dd78a1`; 22 23 const earlyRequestItem = document.querySelector(".request-list-item"); 24 25 const statusCodes = earlyRequestItem.querySelectorAll( 26 ".requests-list-status .status-code" 27 ); 28 is( 29 statusCodes.length, 30 2, 31 "There are two status codes displayed in the status column" 32 ); 33 34 is(statusCodes[0].innerText, "103", "The first status is 103 early hint"); 35 is(statusCodes[1].innerText, "200", "The second status is the 200 OK"); 36 37 is( 38 earlyRequestItem.querySelector(".requests-list-file").innerText, 39 EARLYHINT_REQUEST_URL, 40 "The url in the displayed request is correct" 41 ); 42 43 EventUtils.sendMouseEvent({ type: "mousedown" }, earlyRequestItem); 44 45 // Wait till all the summary section is loaded 46 await waitUntil(() => 47 document.querySelector("#headers-panel .tabpanel-summary-value") 48 ); 49 const panel = document.querySelector("#headers-panel"); 50 const earlyHintsStatusCode = panel.querySelector( 51 ".headers-earlyhint-status .status-code" 52 ); 53 54 EventUtils.sendMouseEvent({ type: "mouseover" }, earlyHintsStatusCode); 55 56 is( 57 parseInt(earlyHintsStatusCode.dataset.code, 10), 58 103, 59 "The status summary code is correct." 60 ); 61 62 info("Wait for all the Headers sections to render"); 63 await waitUntil( 64 () => 65 document.querySelectorAll("#headers-panel .panel-container .accordion li") 66 .length == 3 67 ); 68 69 info("Check that the early hint response headers are visible"); 70 const firstHeaderPanel = document.querySelector( 71 "#headers-panel .panel-container .accordion li" 72 ); 73 74 is( 75 firstHeaderPanel.querySelector(".accordion-header-label").innerText, 76 "Early Hints Response Headers (117 B)", 77 "The early hints response headers are visible and is the first panel displayed from the top" 78 ); 79 80 const expectedHeaders = [ 81 { 82 label: "Link", 83 value: 84 " <early-hint-pixel.sjs?5ecccd01-dd3f-4bbd-bd3e-0491d7dd78a1>; rel=preload; as=image", 85 }, 86 ]; 87 88 const labels = firstHeaderPanel.querySelectorAll( 89 ".accordion-content tr .treeLabelCell .treeLabel" 90 ); 91 const values = firstHeaderPanel.querySelectorAll( 92 ".accordion-content tr .treeValueCell .objectBox" 93 ); 94 95 for (let i = 0; i < labels.length; i++) { 96 is( 97 labels[i].textContent, 98 expectedHeaders[i].label, 99 "The early hint header name was incorrect." 100 ); 101 is( 102 values[i].textContent, 103 expectedHeaders[i].value, 104 "The early hint header value was incorrect." 105 ); 106 } 107 108 await teardown(monitor); 109 }); 110 111 add_task(async function testEarlyHintFilter() { 112 Services.prefs.setBoolPref("devtools.netmonitor.persistlog", true); 113 const { tab, monitor } = await initNetMonitor(STATUS_CODES_URL, { 114 requestCount: 1, 115 }); 116 117 const { document, store, windowRequire } = monitor.panelWin; 118 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); 119 store.dispatch(Actions.batchEnable(false)); 120 121 const waitForEvents = waitForNetworkEvents(monitor, 1); 122 tab.linkedBrowser.reload(); 123 await waitForEvents; 124 125 await performEarlyHintRequest(monitor, tab); 126 document.querySelector(".devtools-filterinput").focus(); 127 128 EventUtils.sendString("103"); 129 ok( 130 document.querySelector(".devtools-autocomplete-popup"), 131 "Autocomplete Popup Created" 132 ); 133 134 testAutocompleteContents(["status-code:103"], document); 135 EventUtils.synthesizeKey("KEY_Enter"); 136 is( 137 document.querySelector(".devtools-filterinput").value, 138 "status-code:103", 139 "Value correctly set after Enter" 140 ); 141 142 await waitUntil( 143 () => document.querySelectorAll(".request-list-item").length == 1 144 ); 145 146 const statusCode = document.querySelector( 147 ".request-list-item .requests-list-status .status-code" 148 ); 149 is(statusCode.innerText, "103", "The first status is 103 early hint"); 150 151 await teardown(monitor); 152 Services.prefs.setBoolPref("devtools.netmonitor.persistlog", false); 153 }); 154 155 async function performEarlyHintRequest(monitor, tab) { 156 const wait = waitForNetworkEvents(monitor, 1); 157 await SpecialPowers.spawn(tab.linkedBrowser, [], async function () { 158 content.wrappedJSObject.performEarlyHintRequest(); 159 }); 160 await wait; 161 }