devtools/client/netmonitor/test/browser_net_earlyhints.js

   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 testEarlyHintStatusCode() {
  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   await teardown(monitor);
  63 });
  64
  65 add_task(async function testEarlyHintFilter() {
  66   Services.prefs.setBoolPref("devtools.netmonitor.persistlog", true);
  67   const { tab, monitor } = await initNetMonitor(STATUS_CODES_URL, {
  68     requestCount: 1,
  69   });
  70
  71   const { document, store, windowRequire } = monitor.panelWin;
  72   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
  73   store.dispatch(Actions.batchEnable(false));
  74
  75   const waitForEvents = waitForNetworkEvents(monitor, 1);
  76   tab.linkedBrowser.reload();
  77   await waitForEvents;
  78
  79   await performEarlyHintRequest(monitor, tab);
  80   document.querySelector(".devtools-filterinput").focus();
  81
  82   EventUtils.sendString("103");
  83   ok(
  84     document.querySelector(".devtools-autocomplete-popup"),
  85     "Autocomplete Popup Created"
  86   );
  87
  88   testAutocompleteContents(["status-code:103"], document);
  89   EventUtils.synthesizeKey("KEY_Enter");
  90   is(
  91     document.querySelector(".devtools-filterinput").value,
  92     "status-code:103",
  93     "Value correctly set after Enter"
  94   );
  95
  96   await waitUntil(
  97     () => document.querySelectorAll(".request-list-item").length == 1
  98   );
  99
 100   const statusCode = document.querySelector(
 101     ".request-list-item .requests-list-status .status-code"
 102   );
 103   is(statusCode.innerText, "103", "The first status is 103 early hint");
 104
 105   await teardown(monitor);
 106   Services.prefs.setBoolPref("devtools.netmonitor.persistlog", false);
 107 });
 108
 109 async function performEarlyHintRequest(monitor, tab) {
 110   const wait = waitForNetworkEvents(monitor, 1);
 111   await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
 112     content.wrappedJSObject.performEarlyHintRequest();
 113   });
 114   await wait;
 115 }