browser_net_new_request_panel_send_request.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

  http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

const asyncStorage = require("resource://devtools/shared/async-storage.js");

/**

 * Test sending a custom request.

*/

add_task(async function () {

  // Turn on the pref

  await pushPref("devtools.netmonitor.features.newEditAndResend", true);

  // Reset the storage for the persisted custom request

  await asyncStorage.removeItem("devtools.netmonitor.customRequest");

  const { monitor } = await initNetMonitor(CORS_URL, {

    requestCount: 1,

});

  info("Starting test... ");

  const { document, store, windowRequire, connector } = monitor.panelWin;

  // Action should be processed synchronously in tests.

  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");

  store.dispatch(Actions.batchEnable(false));

  const { getSelectedRequest } = windowRequire(

    "devtools/client/netmonitor/src/selectors/index"

);

  // Build request with known information so that we can check later

  const request = {

    url: "https://test1.example.com" + CORS_SJS_PATH,

    method: "POST",

    headers: [

      { name: "Host", value: "fakehost.example.com" },

      { name: "User-Agent", value: "Testzilla" },

      { name: "Referer", value: "http://example.com/referrer" },

      { name: "Accept", value: "application/jarda" },

      { name: "Accept-Encoding", value: "compress, identity, funcoding" },

      { name: "Accept-Language", value: "cs-CZ" },

],

    body: "Hello",

    cause: {

      loadingDocumentUri: "http://example.com",

      stacktraceAvailable: true,

      type: "xhr",

},

};

  const waitUntilRequestDisplayed = waitForNetworkEvents(monitor, 1);

  connector.networkCommand.sendHTTPRequest(request);

  await waitUntilRequestDisplayed;

  info("selecting first request");

  const firstRequestItem = document.querySelectorAll(".request-list-item")[0];

  const waitForHeaders = waitUntil(() =>

    document.querySelector(".headers-overview")

);

  EventUtils.sendMouseEvent({ type: "mousedown" }, firstRequestItem);

  await waitForHeaders;

  EventUtils.sendMouseEvent({ type: "contextmenu" }, firstRequestItem);

  info("Opening the new request panel");

  const waitForPanels = waitUntil(

    () =>

      document.querySelector(".http-custom-request-panel") &&

      document.querySelector("#http-custom-request-send-button").disabled ===

        false

);

  await selectContextMenuItem(monitor, "request-list-context-edit-resend");

  await waitForPanels;

  info(

    "Change the request method to send a new custom request with a different method"

);

  const methodValue = document.querySelector("#http-custom-method-value");

  methodValue.value = "PUT";

  methodValue.dispatchEvent(new Event("change", { bubbles: true }));

  info("Change the URL to send a custom request with a different URL");

  const urlValue = document.querySelector(".http-custom-url-value");

  urlValue.focus();

  urlValue.value = "";

  EventUtils.sendString(`${request.url}?hello=world`);

  info("Check if the parameter section was updated");

is(

    document.querySelectorAll(

      "#http-custom-query .tabpanel-summary-container.http-custom-input"

    ).length,

1,

    "The parameter section should be updated"

);

  info("Adding new headers");

  const newHeaderName = document.querySelector(

    "#http-custom-headers .map-add-new-inputs .http-custom-input-name"

);

  newHeaderName.focus();

  EventUtils.sendString("My-header");

  const newHeaderValue = Array.from(

    document.querySelectorAll(

      "#http-custom-headers .http-custom-input .http-custom-input-value"

  ).pop();

  newHeaderValue.focus();

  EventUtils.sendString("my-value");

  const postValue = document.querySelector("#http-custom-postdata-value");

  postValue.focus();

  postValue.value = "";

  EventUtils.sendString("{'name': 'value'}");

  // Close the details panel to see if after sending a new request

  // this request will be selected by default and

  // if the deitails panel will be open automatically.

  const waitForDetailsPanelToClose = waitUntil(

    () => !document.querySelector(".monitor-panel .network-details-bar")

);

  store.dispatch(Actions.toggleNetworkDetails());

  await waitForDetailsPanelToClose;

  info("Click on the button to send a new request");

  const waitUntilEventsDisplayed = waitForNetworkEvents(monitor, 1);

  const buttonSend = document.querySelector("#http-custom-request-send-button");

  buttonSend.click();

  await waitUntilEventsDisplayed;

  const newRequestSelectedId = getSelectedRequest(store.getState()).id;

  await connector.requestData(newRequestSelectedId, "requestPostData");

  const updatedSelectedRequest = getSelectedRequest(store.getState());

  is(updatedSelectedRequest.method, "PUT", "The request has the right method");

is(

    updatedSelectedRequest.url,

    urlValue.value,

    "The request has the right URL"

);

  const found = updatedSelectedRequest.requestHeaders.headers.some(

    item => item.name === "My-header" && item.value === "my-value"

);

  is(found, true, "The header was found in the form");

is(

    updatedSelectedRequest.requestPostData.postData.text,

    "{'name': 'value'}",

    "The request has the right post body"

);

  info("Check that all growing textareas provide a title tooltip");

  const textareas = [

    ...document.querySelectorAll("#http-custom-headers .auto-growing-textarea"),

];

  for (const textarea of textareas) {

is(

      textarea.title,

      textarea.dataset.replicatedValue,

      "Title tooltip is set to the expected value"

);

  await teardown(monitor);

});