diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/netmonitor/test/browser_net_new_request_panel_sync_url_params.js | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/test/browser_net_new_request_panel_sync_url_params.js b/devtools/client/netmonitor/test/browser_net_new_request_panel_sync_url_params.js new file mode 100644 index 0000000000..1d7b51f3d4 --- /dev/null +++ b/devtools/client/netmonitor/test/browser_net_new_request_panel_sync_url_params.js @@ -0,0 +1,194 @@ +/* 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 to check the sync between URL parameters and the parameters section + */ + +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 { tab, monitor } = await initNetMonitor(HTTPS_CUSTOM_GET_URL, { + requestCount: 1, + }); + info("Starting test... "); + + const { document, store, windowRequire } = monitor.panelWin; + + // Action should be processed synchronously in tests. + const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); + store.dispatch(Actions.batchEnable(false)); + + await performRequests(monitor, tab, 1); + + 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 = waitForDOM( + document, + ".monitor-panel .network-action-bar" + ); + await selectContextMenuItem(monitor, "request-list-context-edit-resend"); + await waitForPanels; + + const queryScenarios = [ + { + queryString: "", + expectedParametersSize: 0, + expectedParameters: [], + }, + { + queryString: "?", + expectedParametersSize: 0, + expectedParameters: [], + }, + { + queryString: "?a", + expectedParametersSize: 1, + expectedParameters: [{ name: "a", value: "" }], + }, + { + queryString: "?a=", + expectedParametersSize: 1, + expectedParameters: [{ name: "a", value: "" }], + }, + { + queryString: "?a=3", + expectedParametersSize: 1, + expectedParameters: [{ name: "a", value: "3" }], + }, + { + queryString: "?a=3&", + expectedParametersSize: 2, + expectedParameters: [ + { name: "a", value: "3" }, + { name: "", value: "" }, + ], + }, + { + queryString: "?a=3&b=4", + expectedParametersSize: 2, + expectedParameters: [ + { name: "a", value: "3" }, + { name: "b", value: "4" }, + ], + }, + ]; + + for (const sceanario of queryScenarios) { + assertQueryScenario(document, sceanario); + } + + info("Adding new parameters by query parameters section"); + const newParameterName = document.querySelector( + "#http-custom-query .map-add-new-inputs .http-custom-input-name" + ); + newParameterName.focus(); + EventUtils.sendString("My-param"); + + is( + document.querySelector("#http-custom-url-value").value, + `${HTTPS_CUSTOM_GET_URL}?a=3&b=4&My-param=`, + "The URL should be updated" + ); + + const newParameterValue = Array.from( + document.querySelectorAll( + "#http-custom-query .http-custom-input .http-custom-input-value" + ) + ).pop(); + newParameterValue.focus(); + EventUtils.sendString("my-value"); + + // Check if the url is updated + is( + document.querySelector("#http-custom-url-value").value, + `${HTTPS_CUSTOM_GET_URL}?a=3&b=4&My-param=my-value`, + "The URL should be updated" + ); + + info("Adding new parameters by query parameters section"); + is( + document.querySelectorAll( + "#http-custom-query .tabpanel-summary-container.http-custom-input" + ).length, + 3, + "The parameter section should be have 3 elements" + ); + + info( + "Uncheck the parameter an make sure the parameter is removed from the new url" + ); + const params = document.querySelectorAll( + "#http-custom-query .tabpanel-summary-container.http-custom-input" + ); + + const lastParam = Array.from(params).pop(); + const checkbox = lastParam.querySelector("input"); + checkbox.click(); + + // Check if the url is updated after uncheck one parameter through the parameter section + is( + document.querySelector("#http-custom-url-value").value, + `${HTTPS_CUSTOM_GET_URL}?a=3&b=4`, + "The URL should be updated" + ); + + await teardown(monitor); +}); + +function assertQueryScenario( + document, + { queryString, expectedParametersSize, expectedParameters } +) { + info(`Assert that "${queryString}" shows in the list properly`); + const urlValue = document.querySelector(".http-custom-url-value"); + urlValue.focus(); + urlValue.value = ""; + + const newURL = HTTPS_CUSTOM_GET_URL + queryString; + EventUtils.sendString(newURL); + + is( + document.querySelectorAll( + "#http-custom-query .tabpanel-summary-container.http-custom-input" + ).length, + expectedParametersSize, + `The parameter section should have ${expectedParametersSize} elements` + ); + + // Check if the parameter name and value are what we expect + const parameterNames = document.querySelectorAll( + "#http-custom-query .http-custom-input-and-map-form .http-custom-input-name" + ); + const parameterValues = document.querySelectorAll( + "#http-custom-query .http-custom-input-and-map-form .http-custom-input-value" + ); + + for (let i = 0; i < expectedParameters.length; i++) { + is( + parameterNames[i].value, + expectedParameters[i].name, + "The query param name in the form should match on the URL" + ); + is( + parameterValues[i].value, + expectedParameters[i].value, + "The query param value in the form should match on the URL" + ); + } +} |